Skip to content

Commit

Permalink
Merge pull request #19 from Lupleg/Vikram
Browse files Browse the repository at this point in the history
Feature component added
  • Loading branch information
Nitin1406 authored Feb 26, 2024
2 parents 445dff3 + ff8a4d1 commit ff747ad
Show file tree
Hide file tree
Showing 6 changed files with 734 additions and 27 deletions.
19 changes: 8 additions & 11 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,21 @@

import ProductOverview from './components/productOverview/ProductOverview'
import ProductOverview from "./components/productOverview/ProductOverview";
import { Routes, Route, BrowserRouter } from "react-router-dom";
import LandingPage from "./components/LandingPage";
import Pricing from './components/pricing/Pricing';
import EmailForm from './components/Contact/EmailForm';
import Pricing from "./components/pricing/Pricing";
import EmailForm from "./components/Contact/EmailForm";


function App() {
return (
<div>

<BrowserRouter>
<Routes>
<Route path="/" element={<LandingPage/>}/>
<Route path="product" element={<ProductOverview/>} />
<Route path="/pricing" element={<Pricing/>}/>
<Route path="/contact" element={<EmailForm/>}/>
<Route path="/" element={<LandingPage />} />
<Route path="product" element={<ProductOverview />} />
<Route path="/pricing" element={<Pricing />} />
<Route path="/contact" element={<EmailForm />} />
</Routes>
</BrowserRouter>

</BrowserRouter>
</div>
);
}
Expand Down
82 changes: 69 additions & 13 deletions src/components/Navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,34 @@ import Resources from "./nav/Resources";
import { Link } from "react-router-dom";



const Navbar = () => {
const [isOpen, setOpen] = useState(false);
const toggleMenu = () => {
setOpen(!isOpen);
};

const [productsOpen, setProductsOpen]= useState(false);
const [productsOpen, setProductsOpen] = useState(false);
const toggleProducts = () => {
setProductsOpen(!productsOpen);
};

const [solutionsOpen, setSolutionsOpen]= useState(false);
const [solutionsOpen, setSolutionsOpen] = useState(false);
const toggleSolutions = () => {
setSolutionsOpen(!solutionsOpen);
};

const [resourcesOpen, setResourcesOpen]= useState(false);
const [resourcesOpen, setResourcesOpen] = useState(false);
const toggleResources = () => {
setResourcesOpen(!resourcesOpen);
};

const [contactsOpen, setContactsOpen]= useState(false);
const [contactsOpen, setContactsOpen] = useState(false);
const toggleContacts = () => {
setContactsOpen(!contactsOpen);
};
return (


<div className="sticky top-0 bg-white z-50 shadow-md">

<div className="flex justify-between w-4/5 md:w-11/12 lg:w-4/5 md:mx-auto mx-auto">
Expand All @@ -62,19 +62,74 @@ const Navbar = () => {
<Hamburger toggled={isOpen} toggle={setOpen} size={30} />
</div>



<div className="lg:hidden">
<Hamburger toggled={isOpen} toggle={setOpen} size={30} />
</div>
</div>

<div className="hidden lg:block lg:flex lg:gap-x-8 lg:justify-center">
<a className="text-md my-auto font-medium">Sign In</a>
<Button text="Get Started" width="32"/>
<Button text="Get Started" width="32" />
</div>
</div>

<div className="flex lg:hidden block w-4/5 mx-auto mt-4">

{isOpen &&(
<div className="flex flex-col gap-y-8 w-full font-bold align-center justify-center">

<div className="flex lg:hidden block w-4/5 mx-auto mt-4">
{isOpen && (
<div>
<div className="flex flex-col gap-y-8 w-full font-bold align-center justify-center">
<button
className="flex justify-between border-b-2 pb-3"
onClick={toggleProducts}>
{" "}
Products{!productsOpen && (
<RiArrowDropDownLine size={30} />
)}{" "}
{productsOpen && <RiArrowDropUpLine size={30} />}{" "}
</button>
<button
className="flex justify-between border-b-2 pb-3"
onClick={toggleSolutions}>
Solutions{!solutionsOpen && <RiArrowDropDownLine size={30} />}{" "}
{solutionsOpen && <RiArrowDropUpLine size={30} />}
</button>
<button
className="flex justify-between border-b-2 pb-3"
onClick={toggleResources}>
Resources{!resourcesOpen && <RiArrowDropDownLine size={30} />}{" "}
{resourcesOpen && <RiArrowDropUpLine size={30} />}
</button>
<button className="flex justify-between border-b-2 pb-3">
Pricing
</button>
<button
className="flex justify-between border-b-2 pb-3"
onClick={toggleContacts}>
Contacts{!contactsOpen && <RiArrowDropDownLine size={30} />}{" "}
{contactsOpen && <RiArrowDropUpLine size={30} />}
</button>
<button className="flex justify-between border-b-2 pb-3">
Sign In
</button>

<div className="">
{" "}
<Button text="Get Started" width="80" />
</div>
</div>
<ul className="lg:flex lg:justify-center lg:text-md lg:items-center lg:gap-x-6 lg:font-medium hidden lg:block">
<Products />
<Solutions />
<Link to="pricing">Pricing</Link>
<Resources />
<Contact />
</ul>
<div className="lg:hidden">
<Hamburger toggled={isOpen} toggle={setOpen} size={30} />
</div>
<div className="hidden lg:block lg:flex lg:gap-x-8 lg:justify-center">
<a className="text-md my-auto font-medium">Sign In</a>
<Button text="Get Started" width="32" />
</div>
<button className="flex justify-between border-b-2 pb-3" onClick={toggleProducts}> Products{!productsOpen && <RiArrowDropDownLine size={30}/>} {productsOpen && <RiArrowDropUpLine size={30}/> } </button>
<button className="flex justify-between border-b-2 pb-3" onClick={toggleSolutions}>Solutions{!solutionsOpen && <RiArrowDropDownLine size={30}/>} {solutionsOpen && <RiArrowDropUpLine size={30}/> }</button>
<button className="flex justify-between border-b-2 pb-3" onClick={toggleResources}>Resources{!resourcesOpen && <RiArrowDropDownLine size={30}/>} {resourcesOpen && <RiArrowDropUpLine size={30}/> }</button>
Expand All @@ -88,6 +143,7 @@ const Navbar = () => {
)}

</div>

</div>
);
};
Expand Down
82 changes: 82 additions & 0 deletions src/components/features/Slider.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from "react";
import Marquee from "react-fast-marquee";
function Slider() {
return (
<div className="sm:px-8 md:px-16 lg:px-24 lg:mx-8 xl:px-32 xl:mx-20 mb-24">
<div className="flex flex-col md:gap-10 sm:gap-8 lg:gap-16">
<div className="md:text-xl lg:text-2xl xl:text-4xl font-semibold">
<h2 className="text-center">
8,000+ businesses choose Front for every customer conversation —
from simple&nbsp;to&nbsp;complex
</h2>
</div>
<div>
<Marquee pauseOnHover="true" speed={35}>
<div className="size-2/4">
<img
src="https://front.com/assets/pages/homepage-v2/logos/social-proof/sennder.svg"
alt=""
/>
</div>
<div className="size-2/4">
<img
src="https://front.com/assets/pages/homepage-v2/logos/social-proof/WizardPins.svg"
alt=""
/>
</div>
<div className="size-2/4">
<img
src="https://front.com/assets/pages/homepage-v2/logos/social-proof/Branch.svg"
alt=""
/>
</div>
<div className="size-2/4">
<img
src="https://front.com/assets/pages/homepage-v2/logos/social-proof/Carvana.svg"
alt=""
/>
</div>
<div className="size-2/4">
<img
src="https://front.com/assets/pages/homepage-v2/logos/social-proof/ClickUp.svg"
alt=""
/>
</div>
<div className="size-2/4">
<img
src="https://front.com/assets/pages/homepage-v2/logos/social-proof/Culture-Amp.svg"
alt=""
/>
</div>
<div className="size-2/4">
<img
src="https://front.com/assets/pages/homepage-v2/logos/social-proof/Dropbox.svg"
alt=""
/>
</div>
<div className="size-2/4">
<img
src="https://front.com/assets/pages/homepage-v2/logos/social-proof/GoDaddy.svg"
alt=""
/>
</div>
<div className="size-2/4">
<img
src="https://front.com/assets/pages/homepage-v2/logos/social-proof/Hootsuite.svg"
alt=""
/>
</div>
<div className="size-2/4">
<img
src="https://front.com/assets/pages/homepage-v2/logos/social-proof/Lydia.svg"
alt=""
/>
</div>
</Marquee>
</div>
</div>
</div>
);
}

export default Slider;
Loading

0 comments on commit ff747ad

Please sign in to comment.