Skip to content

Commit 5769e31

Browse files
CodeeeHubCodeeeHub
committed
Feat : Benefits
1 parent da8cc3c commit 5769e31

File tree

8 files changed

+250
-4
lines changed

8 files changed

+250
-4
lines changed

‎src/App.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
//import Components
2-
import Navbar from "@/Components/Main page/Navbar"
31
import { useState } from "react"
2+
//import Utils
43
import { CurrentPage } from "./Utils/CurrentPage"
4+
//import Components
5+
import Navbar from "@/Components/Main page/Navbar"
6+
import Benefits from "./Components/Main page/Benefits"
57
import HomePage from "./Components/Main page/HomePage"
68

79
function App() {
@@ -18,6 +20,7 @@ function App() {
1820
<div className="bg-gray-20">
1921
<Navbar currentPage={currentPage} setCurrentPage={setCurrentPage}/>
2022
<HomePage setCurrentPage={setCurrentPage} />
23+
<Benefits setCurrentPage={setCurrentPage} />
2124
</div>
2225
</div>
2326
</>

‎src/Components/BenefitsJson.tsx

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
//import UseState
2+
import { useState, useEffect } from "react";
3+
//import Utils
4+
import { CurrentPage } from "@/Utils/CurrentPage";
5+
//import Motion
6+
import { motion } from "framer-motion";
7+
//import AnchorLink
8+
import AnchorLink from "react-anchor-link-smooth-scroll";
9+
10+
const childVariant = {
11+
hidden: { opacity: 0, scale: 0.9 },
12+
visible: { opacity: 1, scale: 1 },
13+
};
14+
15+
type Props = {
16+
key: number;
17+
title: string;
18+
icon: JSX.Element;
19+
description: string;
20+
setCurrentPage: (value: CurrentPage) => void;
21+
};
22+
23+
function BenefitsJson({
24+
key,
25+
icon,
26+
title,
27+
description,
28+
setCurrentPage,
29+
}: Props) {
30+
31+
32+
const [isUnder1080, setIsUnder1080] = useState<boolean>(false);
33+
34+
useEffect(() => {
35+
const handleScroll = () => {
36+
if (window.innerWidth > 1080) {
37+
setIsUnder1080(false);
38+
} else if (window.scrollY < 1080) {
39+
setIsUnder1080(true);
40+
}
41+
};
42+
window.addEventListener("scroll", handleScroll);
43+
44+
return () => window.removeEventListener("scroll", handleScroll);
45+
}, []);
46+
47+
const childVariant = {
48+
hidden: { opacity: 0, scale: 0.9 },
49+
visible: { opacity: 1, scale: 1 },
50+
};
51+
52+
53+
return (
54+
<motion.div
55+
variants={childVariant}
56+
key={key}
57+
className="border-2 border-gray-100 rounded-md my-5 flex text-center px-5 py-16 justify-center flex-col gap-4 shadow-lg"
58+
>
59+
<div className="flex justify-center">
60+
<div className="rounded-full bg-primary-100 p-4 border-2 border-gray-100 hover:scale-95 duration-150">
61+
{icon}
62+
</div>
63+
</div>
64+
<div className="text-center w-full text-lg font-bold">{title}</div>
65+
<div className="font-yanone font-medium">{description}</div>
66+
<AnchorLink
67+
className="text-sm cursor-pointer font-bold text-primary-500 hover:text-secondary-500 underline duration-150"
68+
onClick={() => setCurrentPage(CurrentPage.ContactUs)}
69+
href={`#${CurrentPage.ContactUs}`}
70+
>
71+
Learn More
72+
</AnchorLink>
73+
</motion.div>
74+
);
75+
}
76+
77+
export default BenefitsJson;

‎src/Components/Main page/Benefits.tsx

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
//import Button
2+
import ActionButton from "../shared/ActionButton";
3+
//import motion
4+
import { motion } from "framer-motion";
5+
//import Icon
6+
import {
7+
HomeModernIcon,
8+
UserGroupIcon,
9+
AcademicCapIcon,
10+
} from "@heroicons/react/24/solid";
11+
//import Image
12+
import BenefitsPageGraphic from "@/assets/BenefitsPageGraphic.png";
13+
//import Array of Benefits
14+
import BenefitsJson from "../BenefitsJson";
15+
//import Types
16+
import { BenefitsType } from "@/Utils/BenefitsType";
17+
import { CurrentPage } from "@/Utils/CurrentPage";
18+
19+
const BenefitsDetail: Array<BenefitsType> = [
20+
{
21+
id: 0,
22+
icon: <HomeModernIcon className="w-6 h-6" />,
23+
title: "State of the Art Facilities",
24+
description:
25+
"Neque adipiscing amet amet enim. Feugiat dolor enim fermentum in a in lectus pellentesque. Ullamcorper et.",
26+
},
27+
{
28+
id: 1,
29+
icon: <UserGroupIcon className="w-6 h-6" />,
30+
title: "100's of Diverse Classes",
31+
description:
32+
"Eu ipsum id egestas risus tempus enim semper felis quis. Nec consectetur ac venenatis facilisi est. Eget ac turpis id.",
33+
},
34+
{
35+
id: 2,
36+
icon: <AcademicCapIcon className="w-6 h-6" />,
37+
title: "Expert and Pro Trainers",
38+
description:
39+
"Fusce vestibulum aliquam ut cras. Nisl lectus egestas sapien nisl. Lacus at mi sit pellentesque. Congue parturient.",
40+
},
41+
];
42+
43+
type Props = {
44+
setCurrentPage: (value: CurrentPage) => void;
45+
};
46+
47+
const container = {
48+
hidden: {},
49+
visible: {
50+
transition: { staggerChildren: 0.2 },
51+
},
52+
};
53+
54+
function Benefits({ setCurrentPage }: Props) {
55+
return (
56+
<motion.div
57+
id="benefits"
58+
className="w-full mt-1=5 min-h-full py-20 "
59+
onViewportEnter={() => setCurrentPage(CurrentPage.Benefits)}
60+
>
61+
<div className="w-5/6 mx-auto ">
62+
{/* Text Part */}
63+
<motion.div
64+
className="flex flex-col gap-4 md:w-3/5 mb-5"
65+
initial="hidden"
66+
whileInView="visible"
67+
viewport={{ once: true, amount: 0.5 }}
68+
transition={{ duration: 0.5 }}
69+
variants={{
70+
hidden: { opacity: 0, x: -50 },
71+
visible: { opacity: 1, x: 0 },
72+
}}
73+
>
74+
<h1 className="text-3xl font-bold font-montserrat basis-3/5">
75+
MORE THAN JUST GYM.
76+
</h1>
77+
<p className="text-sm">
78+
We provide world class fitness equipment, trainers and classes to
79+
get you to your ultimate fitness goals with ease. We provide true
80+
care into each and every member.
81+
</p>
82+
</motion.div>
83+
{/* Boxs Part */}
84+
<motion.div
85+
className="flex flex-col md:flex-row justify-between gap-4 "
86+
initial="hidden"
87+
whileInView="visible"
88+
viewport={{ once: true, amount: 0.5 }}
89+
variants={container}
90+
>
91+
{BenefitsDetail.map((item: BenefitsType) => (
92+
<BenefitsJson
93+
key={item.id}
94+
icon={item.icon}
95+
title={item.title}
96+
description={item.description}
97+
setCurrentPage={setCurrentPage}
98+
/>
99+
))}
100+
</motion.div>
101+
{/* Image & Text Part */}
102+
<div className="flex flex-col md:flex-row mt-20">
103+
<motion.figure
104+
className="flex justify-center items-center md:block"
105+
initial = "hidden"
106+
whileInView="visible"
107+
viewport={{once : true , amount : 0.5}}
108+
transition={{duration : .5}}
109+
variants={{
110+
hidden : {opacity : 0 , x:-50},
111+
visible : {opacity : 1 , x:0}
112+
}}
113+
>
114+
<img src={BenefitsPageGraphic} alt="BenefitsPageGraphic" />
115+
</motion.figure>
116+
<motion.div className="basis-3/5 flex flex-col items-start justify-center gap-8 "
117+
initial = "hidden"
118+
whileInView="visible"
119+
viewport={{once : true , amount : 0.5}}
120+
transition={{duration : .5}}
121+
variants={{
122+
hidden : {opacity : 0 , x:100},
123+
visible : {opacity : 1 , x:0}
124+
}}
125+
>
126+
<h2 className=" relative font-montserrat text-3xl font-bold before:content-abstractwaves before:absolute before:-top-20 before:-left-10 ">
127+
MILLIONS OF HAPPY MEMBERS GETTING{" "}
128+
<span className="text-primary-500">FIT</span>
129+
</h2>
130+
<div className="flex flex-col gap-5 before:content-sparkles relative before:absolute before:-bottom-40 before:right-8 z-10 before:z-0">
131+
<p>
132+
Nascetur aenean massa auctor tincidunt. Iaculis potenti amet
133+
egestas ultrices consectetur adipiscing ultricies enim. Pulvinar
134+
fames vitae vitae quis. Quis amet vulputate tincidunt at in
135+
nulla nec. Consequat sed facilisis dui sit egestas ultrices
136+
tellus. Ullamcorper arcu id pretium sapien proin integer nisl.
137+
Felis orci diam odio.
138+
</p>
139+
<p>
140+
Fringilla a sed at suspendisse ut enim volutpat. Rhoncus vel est
141+
tellus quam porttitor. Mauris velit euismod elementum arcu neque
142+
facilisi. Amet semper tortor facilisis metus nibh. Rhoncus sit
143+
enim mattis odio in risus nunc.
144+
</p>
145+
</div>
146+
<ActionButton
147+
target={CurrentPage.ContactUs}
148+
content="Join Now"
149+
setCurrentPage={setCurrentPage}
150+
/>
151+
</motion.div>
152+
</div>
153+
</div>
154+
</motion.div>
155+
);
156+
}
157+
158+
export default Benefits;

‎src/Components/shared/ActionButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ type Props = {
1010
const ActionButton = ({setCurrentPage ,target , content }: Props) => {
1111
return (
1212
<AnchorLink
13-
className='py-2 px-10 bg-secondary-500 hover:bg-primary-500 rounded-md duration-150 hover:text-white'
13+
className='py-2 px-10 bg-secondary-500 hover:bg-primary-500 rounded-md duration-150 hover:text-white z-10'
1414
href={`#${target}`}
1515
onClick={()=>setCurrentPage(target as CurrentPage)}
1616
>

‎src/Components/shared/Link.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Link = ({ page, currentPage, setCurrentPage }: Props) => {
1818

1919
return (
2020
<AnchorLink
21-
className={`${currentPage == hrefId ? "text-primary-500" : ""} transition duration-200 hover:text-primary-300`}
21+
className={`${currentPage == hrefId ? "text-primary-500" : ""} transition duration-200 hover:text-primary-300 z-10`}
2222
href={`#${hrefId}`}
2323
onClick={() => setCurrentPage(hrefId)}
2424
>

‎src/Utils/BenefitsType.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export interface BenefitsType {
2+
id : number;
3+
icon : JSX.Element;
4+
title : string;
5+
description : string
6+
}

‎src/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

22
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;1,700&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap');
34

45

56
@tailwind base;

‎tailwind.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default {
2525
fontFamily : {
2626
dmsans: ["DM Sans", "sans-serif"],
2727
montserrat: ["Montserrat", "sans-serif"],
28+
yanone : ["Yanone Kaffeesatz", "sans-serif"],
2829
},
2930
content : {
3031
evolvetext: "url('./assets/EvolveText.png')",

0 commit comments

Comments
 (0)