@@ -15,49 +15,29 @@ import descript from "@/assets/descript.svg";
1515import ellipse from "@/assets/ellipse.svg" ;
1616import database from "@/assets/database.svg" ;
1717import message from "@/assets/message.svg" ;
18+ import { motion } from "framer-motion" ;
19+ import ButtonWithLogo from "@/components/atoms/ButtonWithLogo" ;
1820import vector from "@/assets/vector.svg" ;
1921import bar from "@/assets/bar.svg" ;
20- import ButtonWithLogo from "@/components/atoms/ButtonWithLogo" ;
2122import Typography from "@/components/atoms/Typography" ;
22- import { useEffect , useState } from 'react' ;
2323
2424const Home : PageComponent = ( ) => {
25-
26- const [ inView , setInView ] = useState ( {
27- section1 : false ,
28- section2 : false ,
29- section3 : false ,
30- section4 : false ,
31- section5 : false ,
32- section6 : false ,
33- } ) ;
34-
35- const handleScroll = ( ) => {
36- const sections = [ 'section1' , 'section2' , 'section3' , 'section4' , 'section5' , 'section6' ] ;
37- sections . forEach ( ( section ) => {
38- const element = document . getElementById ( section ) ;
39- if ( element ) {
40- const rect = element . getBoundingClientRect ( ) ;
41- setInView ( ( prev ) => ( {
42- ...prev ,
43- [ section ] : rect . top <= window . innerHeight * 0.8 && rect . bottom >= 0 ,
44- } ) ) ;
45- }
46- } ) ;
25+ const sectionVariants = {
26+ hidden : { opacity : 0 , translateY : 20 } ,
27+ visible : { opacity : 1 , translateY : 0 } ,
4728 } ;
4829
49- useEffect ( ( ) => {
50- window . addEventListener ( 'scroll' , handleScroll ) ;
51- handleScroll ( ) ;
52- return ( ) => window . removeEventListener ( 'scroll' , handleScroll ) ;
53- } , [ ] ) ;
54-
5530 return (
5631 < section className = "w-full h-full flex flex-col" >
57- < div id = "section1"
58- className = { `max-lg:flex-col flex flex-grow px-8 lg:px-[130px] pt-4 lg:pt-14 bg-custom-gradient gap-4 transition-all duration-700 ease-in-out ${
59- inView . section1 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
60- } `} >
32+ < motion . div
33+ id = "section1"
34+ className = "max-lg:flex-col flex flex-grow px-8 lg:px-[130px] pt-4 lg:pt-14 bg-custom-gradient gap-4"
35+ variants = { sectionVariants }
36+ initial = "hidden"
37+ whileInView = "visible"
38+ viewport = { { once : true , amount : 0.3 } }
39+ transition = { { duration : 0.7 , ease : "easeInOut" } }
40+ >
6141 < div className = "flex flex-1 flex-col" >
6242 < Typography
6343 className = "max-xl:text-5xl text-7xl pb-6"
@@ -67,7 +47,7 @@ const Home: PageComponent = () => {
6747 < img src = { curve } alt = "curve" className = "py-8" />
6848 < p className = "text-lg py-8" >
6949 Let's make your work more organize and easily using the Taskio
70- Dashboard with many of the latest featuresin managing work every
50+ Dashboard with many of the latest features in managing work every
7151 day.
7252 </ p >
7353 < div className = "flex gap-6 mt-8" >
@@ -97,8 +77,8 @@ const Home: PageComponent = () => {
9777 < div className = "absolute bg-[#FFAA94] top-[510px] right-[50px] rotate-[15deg] h-10 w-10 rounded-[10px] flex items-center justify-center" >
9878 < Image src = { message } alt = "message" />
9979 </ div >
100- { /* <div className="absolute bg-[#4535AF] max-lg:right-[350px] right-[430px] top-[160px] rotate-[-15deg] h-10 w-10 rounded-[10px] flex items-center justify-center"><Image src={vector} alt="vector"/></div>
101- <div className="absolute max-lg:right-[350px] left-[270px] gap-14 top-[25px] rounded-[10px] flex justify-between items-center p-4 bg-white">
80+ { /* <div className="absolute bg-[#4535AF] max-lg:right-[350px] right-[430px] top-[160px] rotate-[-15deg] h-10 w-10 rounded-[10px] flex items-center justify-center"><Image src={vector} alt="vector"/></div> */ }
81+ { /* <div className="absolute max-lg:right-[350px] left-[270px] gap-14 top-[25px] rounded-[10px] flex justify-between items-center p-4 bg-white">
10282 <div className="flex flex-col gap-2">
10383 <p className="text-[#A9A7B6] text-xs">Enter amount</p>
10484 <span className="text-base">$450..00</span>
@@ -130,18 +110,22 @@ const Home: PageComponent = () => {
130110 <span className="absolute bg-white rounded-full w-[150px] h-[150px] top-[100px] -left-10 p-2 opacity-20"></span>
131111 </div> */ }
132112 </ div >
133- </ div >
113+ </ motion . div >
134114
135- < div id = "section2"
136- className = { `flex flex-col flex bg-custom-gradient items-center pt-14 px-8 lg:px-[130px] pb-14 lg:py-28 transition-all duration-700 ease-in-out ${
137- inView . section2 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
138- } `} >
115+ < motion . div
116+ id = "section2"
117+ className = "flex flex-col bg-custom-gradient items-center pt-14 px-8 lg:px-[130px] pb-14 lg:py-28"
118+ variants = { sectionVariants }
119+ initial = "hidden"
120+ whileInView = "visible"
121+ viewport = { { once : true , amount : 0.3 } }
122+ transition = { { duration : 0.7 , ease : "easeInOut" } }
123+ >
139124 < Typography
140125 className = "text-4xl text-center"
141126 weight = "bold"
142127 text = "More than 25,000 teams use Collabs"
143128 />
144-
145129 < div className = "flex flex-wrap justify-center items-center gap-12 mt-14 text-[#A6A6A6] text-xl md:text-2xl lg:text-3xl" >
146130 < p className = "flex items-center gap-2" >
147131 < Image src = { unspash } alt = "unsplash" />
@@ -166,35 +150,51 @@ const Home: PageComponent = () => {
166150 < span > Grammarly</ span >
167151 </ p >
168152 </ div >
169- </ div >
153+ </ motion . div >
170154
171- < div id = "section3"
172- className = { `flex-grow transition-all duration-700 ease-in-out ${
173- inView . section3 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
174- } `} >
155+ < motion . div
156+ id = "section3"
157+ variants = { sectionVariants }
158+ initial = "hidden"
159+ whileInView = "visible"
160+ viewport = { { once : true , amount : 0.3 } }
161+ transition = { { duration : 0.7 , ease : "easeInOut" } }
162+ >
175163 < Products />
176- </ div >
164+ </ motion . div >
177165
178- < div id = "section4"
179- className = { `flex-grow transition-all duration-700 ease-in-out ${
180- inView . section4 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
181- } `} >
166+ < motion . div
167+ id = "section4"
168+ variants = { sectionVariants }
169+ initial = "hidden"
170+ whileInView = "visible"
171+ viewport = { { once : true , amount : 0.3 } }
172+ transition = { { duration : 0.7 , ease : "easeInOut" } }
173+ >
182174 < Faq />
183- </ div >
175+ </ motion . div >
184176
185- < div id = "section5"
186- className = { `flex-grow transition-all duration-700 ease-in-out ${
187- inView . section5 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
188- } `} >
177+ < motion . div
178+ id = "section5"
179+ variants = { sectionVariants }
180+ initial = "hidden"
181+ whileInView = "visible"
182+ viewport = { { once : true , amount : 0.3 } }
183+ transition = { { duration : 0.7 , ease : "easeInOut" } }
184+ >
189185 < Blog />
190- </ div >
186+ </ motion . div >
191187
192- < div id = "section6"
193- className = { `flex-grow transition-all duration-700 ease-in-out ${
194- inView . section6 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
195- } `} >
188+ < motion . div
189+ id = "section6"
190+ variants = { sectionVariants }
191+ initial = "hidden"
192+ whileInView = "visible"
193+ viewport = { { once : true , amount : 0.3 } }
194+ transition = { { duration : 0.7 , ease : "easeInOut" } }
195+ >
196196 < AboutUs />
197- </ div >
197+ </ motion . div >
198198 </ section >
199199 ) ;
200200} ;
0 commit comments