Skip to content

Commit 02a0324

Browse files
EmadLashkariEmadLashkari
committed
change os
1 parent 46ea836 commit 02a0324

20 files changed

Lines changed: 379 additions & 93 deletions

File tree

‎app/favicon.ico‎

206 KB
Binary file not shown.

‎app/globals.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
}
2525

2626
@theme {
27+
/* --color-cake: #7f2700; */
2728
--color-cake: #1c1456;
2829
--color-pinky: #c7b3ff;
2930
--color-yello: #f6e273;

‎app/page.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1+
import Header from "@/components/sections/Header";
12
import Hero from "@/components/sections/Hero";
3+
import Production from "@/components/sections/Production";
24

35
export default function Home() {
46
return (
5-
<main>
7+
<main className="overflow-hidden">
8+
<Header />
69
<Hero />
10+
<Production />
711
</main>
812
);
913
}

‎components/Button/IconBtn.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ReactElement } from "react";
2+
3+
export default function IconBtn({ children }: { children: ReactElement }) {
4+
return <button className="border-cake border-2 px-3 py-2">{children}</button>;
5+
}

‎components/Button/SimpleBtn.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function SimpleBtn({ title }: { title: string }) {
2+
return <button className="border-cake border-2 px-3 py-2">{title}</button>;
3+
}

‎components/sections/Header.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
"use client";
2+
3+
import Image from "next/image";
4+
5+
import IconBtn from "../Button/IconBtn";
6+
7+
export default function Header() {
8+
return (
9+
<div className="w-full lg:fixed top-2 left-0 right-0 z-30 flex flex-row justify-between items-center">
10+
<section className="lg:pl-10">
11+
<Image
12+
src={"/PureCrustLogo.png"}
13+
width={200}
14+
height={150}
15+
alt="pure crust logo"
16+
className="w-32 h-16"
17+
/>
18+
</section>
19+
<section className="flex flex-row justify-center items-center gap-2 pr-2">
20+
{/* <button className="border-cake border-2 px-3 py-2 ">en</button> */}
21+
<IconBtn>
22+
<svg
23+
xmlns="http://www.w3.org/2000/svg"
24+
x="0px"
25+
y="0px"
26+
width="30"
27+
height="30"
28+
viewBox="0 0 24 24"
29+
>
30+
<path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path>
31+
</svg>
32+
</IconBtn>
33+
</section>
34+
</div>
35+
);
36+
}

‎components/sections/Hero.tsx‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,42 @@ import FadeToUp from "./elements/text/FadeToUp";
66
import { useGSAP } from "@gsap/react";
77
import IntroImage from "./elements/image/IntroImg";
88
import { useMediaQuery } from "react-responsive";
9+
import { useRef } from "react";
10+
import { FadeToUpRef, RandomSplitRef, TransitionRef } from "../types/types";
11+
import TransitionAnim from "./elements/transition/Transition";
912

1013
export default function Hero() {
1114
const isDesktopOrLaptop = useMediaQuery({
1215
query: "(min-width: 1224px)",
1316
});
14-
15-
const timeline = gsap.timeline();
17+
const randomSplitRef = useRef<RandomSplitRef>(null);
18+
const fadeToUpRef = useRef<FadeToUpRef>(null);
19+
const transitionRef = useRef<TransitionRef>(null);
20+
// const introImageRef = useRef(null);
1621

1722
useGSAP(() => {
1823
if (isDesktopOrLaptop) {
19-
timeline.from(
20-
"#center-text",
21-
{
22-
xPercent: 50,
23-
// duration: 1,
24-
stagger: 2,
25-
},
26-
"-=1.5"
27-
);
24+
gsap.from("#center-text", {
25+
xPercent: 50,
26+
stagger: 2,
27+
});
2828
}
29+
const master = gsap.timeline();
30+
master
31+
.add(transitionRef.current!.animate())
32+
.add(randomSplitRef.current!.animate())
33+
.add(fadeToUpRef.current!.animate());
2934
}, {});
3035

3136
return (
32-
<section className="flex flex-col lg:flex-row justify-between lg:justify-center items-center h-screen overflow-hidden">
37+
<section className="ralative flex flex-col lg:flex-row justify-between lg:justify-center items-center h-screen overflow-hidden">
38+
<TransitionAnim ref={transitionRef} />
3339
<div
3440
id="center-text"
3541
className="w-full flex flex-col h-full justify-around lg:justify-around items-center"
3642
>
37-
<RandomSplit tl={timeline} />
38-
<FadeToUp tl={timeline} />
43+
<RandomSplit ref={randomSplitRef} />
44+
<FadeToUp ref={fadeToUpRef} />
3945
</div>
4046
<IntroImage />
4147
</section>

‎components/sections/Production.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
"use client";
2+
import gsap from "gsap";
3+
import { useGSAP } from "@gsap/react";
4+
import { ScrollSmoother, ScrollTrigger, SplitText } from "gsap/all";
5+
6+
import SimpleBtn from "../Button/SimpleBtn";
7+
import Image from "next/image";
8+
9+
gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother);
10+
11+
export default function Production() {
12+
// const container = useRef(null);
13+
14+
useGSAP(() => {
15+
const SplitedText = new SplitText(".textTarget", {
16+
type: "chars, words",
17+
});
18+
19+
const productionTl = gsap.timeline({
20+
scrollTrigger: {
21+
trigger: ".prod-container",
22+
start: "top 70%",
23+
end: "+=2000",
24+
scrub: 5,
25+
// markers: true,
26+
},
27+
});
28+
productionTl.from(".prod-img", {
29+
yPercent: 500,
30+
stagger: {
31+
each: 1,
32+
from: "random",
33+
},
34+
});
35+
productionTl.from(SplitedText.chars, {
36+
duration: 3,
37+
opacity: 0,
38+
scale: 0,
39+
y: 80,
40+
rotationX: 180,
41+
transformOrigin: "0% 50% -50",
42+
ease: "back",
43+
stagger: 0.05,
44+
});
45+
});
46+
return (
47+
<section className="prod-container relative w-full h-screen flex flex-col justify-around items-center overflow-hidden">
48+
<h2>How Bakery Should be Today</h2>
49+
<SimpleBtn title="About" />
50+
51+
{/* <div
52+
id="img-content"
53+
className="w-full flex flex-row justify-around items-center"
54+
> */}
55+
<Image
56+
className="prod-img absolute top-[10%] left-[10%]"
57+
id="prod-img"
58+
src={"/img/mae-mu.jpg"}
59+
width={200}
60+
height={200}
61+
alt="bakery image"
62+
/>
63+
<Image
64+
className="prod-img absolute top-[-20%] left-[40%]"
65+
id="prod-img"
66+
src={"/img/DecorativeArtisanBreads.jpeg"}
67+
width={200}
68+
height={200}
69+
alt="bakery image"
70+
/>
71+
<Image
72+
className="prod-img absolute top-[-30%] left-[70%]"
73+
id="prod-img"
74+
src={"/img/heather-barnes.jpg"}
75+
width={200}
76+
height={200}
77+
alt="bakery image"
78+
/>
79+
{/* </div> */}
80+
</section>
81+
);
82+
}
83+
84+
{
85+
/* <div>
86+
<h2 className="textTarget text-3xl text-cake">
87+
We believe good food brings people together.
88+
</h2>
89+
<h2>
90+
We use organic flour, local honey, and other natural ingredients
91+
</h2>
92+
<h2>That’s why we bake with heart and keep things eco-friendly</h2>
93+
</div> */
94+
}

‎components/sections/elements/image/IntroImg.tsx‎

Lines changed: 33 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,60 +4,50 @@ import Image from "next/image";
44
import gsap from "gsap";
55
export default function IntroImage() {
66
useGSAP(() => {
7-
gsap.set("#container", {
8-
xPercent: 100,
9-
});
10-
gsap.to("#container", {
11-
delay: 2,
12-
xPercent: 0,
13-
});
14-
gsap.from("#first-mask", {
15-
delay: 2.1,
16-
duration: 1.5,
17-
// borderRadius: "0% 30% 30% 0%",
18-
width: "100%",
19-
stagger: 0,
20-
ease: "back.inOut",
21-
});
22-
gsap.from("#sec-mask", {
23-
delay: 2.2,
24-
duration: 1.5,
7+
// gsap.set("#container", {
8+
// xPercent: 100,
9+
// });
10+
// gsap.to("#container", {
11+
// delay: 2,
12+
// xPercent: 0,
13+
// });
14+
// gsap.from("#first-mask", {
15+
// delay: 2.1,
16+
// duration: 1.5,
17+
// // borderRadius: "0% 30% 30% 0%",
18+
// width: "100%",
19+
// stagger: 0,
20+
// ease: "back.inOut",
21+
// });
22+
// gsap.from("#sec-mask", {
23+
// delay: 2.2,
24+
// duration: 1.5,
25+
// width: "100%",
26+
// // borderRadius: "0% 20% 20% 0%",
27+
// stagger: 0,
28+
// ease: "back.inOut",
29+
// });
30+
// gsap.from("#third-mask", {
31+
// delay: 2.3,
32+
// duration: 1.5,
33+
// width: "100%",
34+
// stagger: 0,
35+
// ease: "back.inOut",
36+
// });
37+
gsap.from(".fade-img", {
2538
width: "100%",
26-
// borderRadius: "0% 20% 20% 0%",
27-
stagger: 0,
28-
ease: "back.inOut",
29-
});
30-
gsap.from("#third-mask", {
31-
delay: 2.3,
32-
duration: 1.5,
33-
width: "100%",
34-
stagger: 0,
35-
ease: "back.inOut",
36-
});
37-
gsap.from("#fade-img", {
39+
height: 110,
3840
delay: 2.4,
3941
duration: 1,
4042
// scale: 0.97,
4143
stagger: 0,
42-
ease: "back.inOut",
44+
ease: "power3.inOut",
4345
// filter: "blur(3px)",
4446
});
4547
}, {});
4648

4749
return (
4850
<section id="container" className="relative w-full h-[45%] lg:h-full">
49-
<div
50-
id="first-mask"
51-
className="absolute z-50 h-full left-0 top-0 bottom-0 bg-yello"
52-
></div>
53-
<div
54-
id="sec-mask"
55-
className="absolute z-40 h-full left-0 top-0 bottom-0 bg-cake"
56-
></div>
57-
<div
58-
id="third-mask"
59-
className="absolute z-30 h-full left-0 top-0 bottom-0 bg-pinky"
60-
></div>
6151
<div className="w-full h-auto md:w-auto md:h-full fade-img">
6252
<Image
6353
id="fade-img"

‎components/sections/elements/text/FadeToUp.tsx‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,44 @@
11
"use client";
2+
import { FadeToUpRef } from "@/components/types/types";
23
import { useGSAP } from "@gsap/react";
34
import gsap from "gsap";
45
import { SplitText } from "gsap/SplitText";
6+
import { forwardRef, useImperativeHandle } from "react";
57

68
gsap.registerPlugin(useGSAP, SplitText);
79

8-
export default function FadeToUp({ tl }: { tl: GSAPTimeline }) {
10+
const FadeToUp = forwardRef<FadeToUpRef>((props, ref) => {
911
useGSAP(() => {
10-
const splitIntroText = SplitText.create(".text", {
11-
type: "words, lines",
12-
mask: "lines",
13-
});
12+
// Register SplitText plugin
13+
gsap.registerPlugin(SplitText);
14+
}, []);
1415

15-
tl.from(splitIntroText.lines, {
16-
duration: 1,
17-
yPercent: 100,
18-
opacity: 0,
19-
stagger: 0,
20-
ease: "expo.out",
21-
});
22-
});
16+
useImperativeHandle(ref, () => ({
17+
animate: () => {
18+
const splitIntroText = SplitText.create(".text", {
19+
type: "words, lines",
20+
mask: "lines",
21+
});
22+
const tl = gsap.timeline();
23+
tl.from(splitIntroText.lines, {
24+
duration: 1,
25+
yPercent: 100,
26+
opacity: 0,
27+
stagger: 0,
28+
ease: "expo.out",
29+
});
30+
31+
return tl; // Return the timeline for sequencing
32+
},
33+
}));
2334

2435
return (
2536
<h2 className="text text-center px-8 text-cake lg:w-[50%]">
2637
Our handcrafted breads, pastries, and desserts are made with organic,
2738
locally sourced ingredients, bringing warmth and flavor to every bite.
2839
</h2>
2940
);
30-
}
41+
});
42+
43+
FadeToUp.displayName = "FadeToUp";
44+
export default FadeToUp;

0 commit comments

Comments
 (0)