-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bb9d98e
commit 49003f9
Showing
27 changed files
with
675 additions
and
226 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,87 @@ | ||
| import Heading from "../Partials/Heading"; | ||
| import DetailsStrip from "../Partials/DetailsStrip"; | ||
| import Jenny from "../../assets/people/Jenny.jpg"; | ||
| import Jacob from "../../assets/people/jacob.jpg"; | ||
| import John from "../../assets/people/john.jpg"; | ||
| import Awards from "./Awards"; | ||
|
|
||
| const About=()=>{ | ||
| return <div> | ||
| <div className="flex flex-col items-center bg-[url('assets/bg.jpg')] bg-cover "> | ||
| <Heading text="About Us" heading="" highlight="" /> | ||
| const About = () => { | ||
| const cards = [ | ||
| { | ||
| name: "Jenny Alexander", | ||
| designation: "Director, CEO", | ||
| img: Jenny, | ||
| }, | ||
| { | ||
| name: "Jacob Thomas", | ||
| designation: "Head of Technology", | ||
| img: Jacob, | ||
| }, | ||
| { | ||
| name: "John Marcus", | ||
| designation: "Sales and Marketing", | ||
| img: John, | ||
| }, | ||
| ]; | ||
| return ( | ||
| <div> | ||
| <div className="flex flex-col items-center bg-[url('assets/bg.jpg')] bg-cover "> | ||
| <Heading | ||
| text="Our Story" | ||
| heading="Crafted Comfort:" | ||
| highlight="Quality Material and fast deliveries" | ||
| /> | ||
| </div> | ||
| <div className="w-2/3 mx-auto"> | ||
| <p className="text-gray-500 font-medium text-lg text-justify py-4 my-4 "> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do | ||
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad | ||
| minim veniam, quis nostrud exercitation ullamco laboris nisi ut | ||
| aliquip ex ea commodo consequat. Duis aute irure dolor in | ||
| reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla | ||
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in | ||
| culpa qui officia deserunt mollit anim id est laborum. | ||
| </p> | ||
| </div> | ||
| <div className=" text-center "> | ||
| <h1 className="font-satisfy text-3xl text-app-green"> | ||
| Jenny Alexander | ||
| </h1> | ||
| <p>CEO</p> | ||
| <img src={Jenny} alt="CEO Jenny" className="h-112 mx-auto rounded-xl" /> | ||
| </div> | ||
| <Awards /> | ||
| <Heading text="Our team" heading="Meet:" highlight="Our Team" /> | ||
| <div className="flex justify-around"> | ||
| {cards.map((item) => ( | ||
| <div className="bg-gray-50 rounded-lg p-4"> | ||
| <div className="h-96 w-96"> | ||
| <img | ||
| className="h-full w-full object-cover rounded-lg" | ||
| src={item.img} | ||
| alt="team" | ||
| /> | ||
| </div> | ||
| <div className="text-center pt-4"> | ||
| <h2 className="font-semibold text-xl">{item.name}</h2> | ||
| <p className="text-gray-500">{item.designation}</p> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <div className="flex flex-col items-center bg-[url('assets/bg.jpg')] bg-cover my-10"> | ||
| <p className="text-gray-500 font-medium text-lg text-justify py-4 w-2/3 mx-auto "> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do | ||
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad | ||
| minim veniam, quis nostrud exercitation ullamco laboris nisi ut | ||
| aliquip ex ea commodo consequat. Duis aute irure dolor in | ||
| reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla | ||
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in | ||
| culpa qui officia deserunt mollit anim id est laborum. | ||
| </p> | ||
| </div> | ||
| <DetailsStrip /> | ||
| </div> | ||
| } | ||
| export default About; | ||
| ); | ||
| }; | ||
| export default About; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import React, { useState, useEffect,useRef } from "react"; | ||
| import { | ||
| faCalendar, | ||
| faHome, | ||
| faTrophy, | ||
| faUser, | ||
| } from "@fortawesome/free-solid-svg-icons"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
|
|
||
| const Awards = () => { | ||
| const [currentYears, setCurrentYears] = useState(0); | ||
| const [currentCustomer, setCurrentCustomer] = useState(0); | ||
| const [currentStores, setCurrentStores] = useState(0); | ||
| const [currentAwards, setCurrentAwards] = useState(0); | ||
| const awardsRef = useRef(null); | ||
| const duration = 500; | ||
| const targetValues = [ | ||
| { target: 12, stateSetter: setCurrentYears }, | ||
| { target: 100, stateSetter: setCurrentCustomer }, | ||
| { target: 180, stateSetter: setCurrentStores }, | ||
| { target: 35, stateSetter: setCurrentAwards }, | ||
| ]; | ||
|
|
||
| useEffect(() => { | ||
| const options = { | ||
| root: null, | ||
| rootMargin: "0px", | ||
| threshold: 0.5, | ||
| }; | ||
|
|
||
| const observer = new IntersectionObserver(([entry]) => { | ||
| if (entry.isIntersecting) { | ||
| const intervals = targetValues.map(({ target, stateSetter }) => { | ||
| const increment = target / duration; | ||
| return setInterval(() => { | ||
| stateSetter((prevState) => { | ||
| const newValue = prevState + increment; | ||
| return newValue >= target ? target : newValue; | ||
| }); | ||
| }, 0.1); | ||
| }); | ||
|
|
||
| return () => { | ||
| intervals.forEach(clearInterval); | ||
| }; | ||
| } | ||
| }, options); | ||
|
|
||
| if (awardsRef.current) { | ||
| observer.observe(awardsRef.current); | ||
| } | ||
|
|
||
| return () => { | ||
| observer.disconnect(); | ||
| }; | ||
| }, [duration, targetValues]); | ||
|
|
||
| return ( | ||
| <div | ||
| ref={awardsRef} | ||
| className="flex justify-around bg-app-yellow py-8 my-8" | ||
| > | ||
| <div className="flex justify-center items-center gap-4"> | ||
| <div className="text-6xl"> | ||
| <FontAwesomeIcon className="text-app-green" icon={faCalendar} /> | ||
| </div> | ||
| <div className="flex flex-col text-center"> | ||
| <p className="text-4xl font-bold">{Math.round(currentYears)}+</p> | ||
| <p>Years</p> | ||
| </div> | ||
| </div> | ||
| <div className="flex justify-center items-center gap-4"> | ||
| <div className="text-6xl"> | ||
| <FontAwesomeIcon className="text-app-green" icon={faUser} /> | ||
| </div> | ||
| <div className="flex flex-col text-center"> | ||
| <p className="text-4xl font-bold">{Math.round(currentCustomer)}M+</p> | ||
| <p>Happy Customers</p> | ||
| </div> | ||
| </div> | ||
| <div className="flex justify-center items-center gap-4"> | ||
| <div className="text-6xl"> | ||
| <FontAwesomeIcon className="text-app-green" icon={faHome} /> | ||
| </div> | ||
| <div className="flex flex-col text-center"> | ||
| <p className="text-4xl font-bold">{Math.round(currentStores)}+</p> | ||
| <p>Stores</p> | ||
| </div> | ||
| </div> | ||
| <div className="flex justify-center items-center gap-4"> | ||
| <div className="text-6xl"> | ||
| <FontAwesomeIcon className="text-app-green" icon={faTrophy} /> | ||
| </div> | ||
| <div className="flex flex-col text-center"> | ||
| <p className="text-4xl font-bold">{Math.round(currentAwards)}+</p> | ||
| <p>Awards</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default Awards; |
Oops, something went wrong.