Skip to content

Commit c64cf3a

Browse files
Sohan-RoutSohan-Rout
committed
added toggle theme to the section
1 parent c4aa0e7 commit c64cf3a

File tree

1 file changed

+89
-41
lines changed

1 file changed

+89
-41
lines changed

‎app/components/hero.jsx‎

Lines changed: 89 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
11
"use client";
2-
import { useEffect, useRef } from "react";
3-
import { gsap } from "gsap";
2+
import { useState } from "react";
43
import { IoMdCloseCircle, IoMdRemoveCircle, IoMdAddCircle } from "react-icons/io";
54

65
export default function Hero() {
7-
const cardsRef = useRef([]);
8-
9-
useEffect(() => {
10-
const tl = gsap.timeline({ repeat: -1, yoyo: true, defaults: { ease: "power1.inOut", duration: 1 } });
11-
tl.to(cardsRef.current, {
12-
stagger: 0.2,
13-
y: (i) => -20 - i * 10,
14-
x: (i) => (i - 1.5) * 40,
15-
rotation: (i) => (i - 1.5) * 5,
16-
}).to(cardsRef.current, { delay: 1, y: 0, x: 0, rotation: 0, stagger: 0.2 });
17-
}, []);
18-
6+
// Add near the top of Hero component
7+
const [isDark, setIsDark] = useState(true);
198
return (
209
<section className="flex justify-center items-center py-12 px-6">
2110
<div className="max-w-6xl w-full bg-white rounded-xl shadow-lg ">
@@ -57,35 +46,94 @@ export default function Hero() {
5746
<span className="text-sm text-neutral-500">Reviewed by 100+ users</span>
5847
</div>
5948
</div>
60-
{/* Right: Animated Cards */}
61-
<div className="w-full md:w-1/2 p-8 flex justify-center items-center relative h-72">
62-
{[...Array(4)].map((_, i) => (
63-
<div
64-
key={i}
65-
ref={(el) => (cardsRef.current[i] = el)}
66-
className="absolute w-40 h-60 bg-neutral-100 rounded-lg shadow-md"
67-
>
68-
<div className="flex justify-start mt-1 ml-1">
69-
<IoMdCloseCircle className="text-lg text-red-500"/>
70-
<IoMdRemoveCircle className="text-lg text-amber-500"/>
71-
<IoMdAddCircle className="text-lg text-green-500"/>
72-
</div>
73-
<div className="mx-4 mt-1">
74-
<div className="border border-black/25 rounded-lg h-[60px] flex justify-center items-center w-auto">
75-
<p className="text-black/50 text-sm">Add image</p>
76-
</div>
77-
<div className="mt-2 flex flex-col">
78-
<p className="text-sm ml-1">Card Heading</p>
79-
<p className="text-xs ml-1 text-black/50">A short description goes here, explaining the component or its purpose.</p>
80-
<div className="border border-black/25 rounded-3xl mt-2"></div>
81-
</div>
82-
</div>
83-
<div className="flex flex-row gap-2 justify-center mt-2">
84-
<div className="bg-black text-white px-2 py-1 text-sm rounded-lg shadow-lg duration-300 hover:scale-110">Button</div>
85-
<div className="border border-black text-black px-2 py-1 text-sm rounded-lg shadow-lg duration-300 hover:scale-110">Button</div>
49+
{/* Right: Bento Grid Showcase */}
50+
<div className="w-full md:w-1/2 p-4 grid grid-cols-3 grid-rows-2 gap-4 h-[28rem]">
51+
{/* Main Focus Card */}
52+
<div className="col-span-2 row-span-2 bg-neutral-100 rounded-xl shadow-xl p-4 flex flex-col justify-between">
53+
<div className="flex justify-start space-x-1">
54+
<IoMdCloseCircle className="text-lg text-red-500" />
55+
<IoMdRemoveCircle className="text-lg text-amber-500" />
56+
<IoMdAddCircle className="text-lg text-green-500" />
57+
</div>
58+
{/* Mini Website Mockup */}
59+
<div className="w-full h-full bg-white rounded-lg shadow-inner flex flex-col overflow-hidden text-xs flex-grow mt-2 mb-2">
60+
{/* Sticky Header */}
61+
<div className="flex justify-between items-center px-4 py-2 bg-neutral-50 border-b border-neutral-200 sticky top-0">
62+
<div className="font-semibold text-neutral-700">StreamUI</div>
63+
<div className="flex gap-3">
64+
<div className="w-10 h-3 bg-neutral-200 rounded"></div>
65+
<div className="w-10 h-3 bg-neutral-200 rounded"></div>
66+
<div className="w-10 h-3 bg-neutral-200 rounded"></div>
8667
</div>
68+
</div>
69+
{/* Hero Section */}
70+
<div className="flex flex-col items-center justify-center flex-grow p-4 gap-2">
71+
<div className="w-32 h-4 bg-neutral-200 rounded"></div>
72+
<div className="w-48 h-3 bg-neutral-200 rounded"></div>
73+
<div className="w-24 h-6 bg-black rounded text-white flex items-center justify-center text-[10px]">Get Started</div>
74+
</div>
75+
{/* Features */}
76+
<div className="grid grid-cols-3 gap-2 p-3">
77+
<div className="bg-neutral-100 rounded-md h-10"></div>
78+
<div className="bg-neutral-100 rounded-md h-10"></div>
79+
<div className="bg-neutral-100 rounded-md h-10"></div>
80+
</div>
81+
{/* Footer */}
82+
<div className="text-center text-neutral-400 py-2 border-t border-neutral-200">
83+
© 2025 StreamUI
84+
</div>
8785
</div>
88-
))}
86+
</div>
87+
88+
{/* Side Preview Cards */}
89+
<div className="bg-neutral-200 rounded-xl shadow-md flex flex-col justify-center items-center gap-2 p-3">
90+
<button className="bg-black text-white text-xs px-3 py-1 rounded-lg shadow hover:bg-neutral-800 transition">
91+
Dark Button
92+
</button>
93+
<button className="border border-neutral-500 text-neutral-800 text-xs px-3 py-1 rounded-lg shadow hover:bg-neutral-100 transition">
94+
Light Button
95+
</button>
96+
</div>
97+
{/* Toggle Showcase Card */}
98+
<div className={`${isDark ? "bg-neutral-900 text-white" : "bg-neutral-200"} rounded-xl shadow-md flex flex-col items-center justify-center gap-3 p-4 transition-colors duration-300`}>
99+
<span className="text-xs font-medium">{isDark ? "Dark Mode" : "Light Mode"}</span>
100+
101+
{/* Toggle Variety 1: Pill Switch */}
102+
<label className="relative inline-block w-12 h-7 cursor-pointer">
103+
<input
104+
type="checkbox"
105+
checked={isDark}
106+
onChange={() => setIsDark(!isDark)}
107+
className="opacity-0 w-0 h-0 peer"
108+
/>
109+
<div className={`absolute inset-0 rounded-full transition ${isDark ? "bg-white/30" : "bg-neutral-300"}`}></div>
110+
<div className={`absolute left-0.5 top-0.5 w-6 h-6 rounded-full shadow transform transition ${isDark ? "translate-x-5 bg-white" : "bg-white"}`}></div>
111+
</label>
112+
113+
{/* Toggle Variety 2: Circle Toggle */}
114+
<label className="relative inline-block w-8 h-8 cursor-pointer">
115+
<input
116+
type="checkbox"
117+
checked={isDark}
118+
onChange={() => setIsDark(!isDark)}
119+
className="opacity-0 w-0 h-0 peer"
120+
/>
121+
<div className={`absolute inset-0 rounded-full transition ${isDark ? "bg-white/30" : "bg-neutral-300"}`}></div>
122+
<div className={`absolute top-1 left-1 w-6 h-6 rounded-full shadow transform transition ${isDark ? "bg-white" : "bg-white"}`}></div>
123+
</label>
124+
125+
{/* Toggle Variety 3: Rounded Slider */}
126+
<label className="relative inline-block w-16 h-8 cursor-pointer">
127+
<input
128+
type="checkbox"
129+
checked={isDark}
130+
onChange={() => setIsDark(!isDark)}
131+
className="opacity-0 w-0 h-0 peer"
132+
/>
133+
<div className={`absolute inset-0 rounded-full transition ${isDark ? "bg-white/30" : "bg-neutral-300"}`}></div>
134+
<div className={`absolute top-1 left-1 w-6 h-6 rounded-full shadow transform transition ${isDark ? "translate-x-8 bg-white" : "bg-white"}`}></div>
135+
</label>
136+
</div>
89137
</div>
90138
</div>
91139
<div className="flex justify-between mx-2 my-2">

0 commit comments

Comments
 (0)