Skip to content

Commit 029c856

Browse files
Sohan-RoutSohan-Rout
committed
Feat : updated hero section
1 parent 1e11f84 commit 029c856

File tree

5 files changed

+260
-301
lines changed

5 files changed

+260
-301
lines changed

‎app/components/feature.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const FeaturesSection = () => {
4545
const [currentSlide, setCurrentSlide] = useState(0);
4646

4747
return (
48-
<section className="py-15 bg-white dark:bg-black overflow-hidden">
48+
<section className="py-15 bg-white dark:bg-neutral-900 overflow-hidden">
4949
{/* Background elements */}
5050
<div className="absolute inset-0 overflow-hidden">
5151
<div className="absolute -top-20 -left-20 w-64 h-64 bg-blue-100/30 dark:bg-blue-900/10 rounded-full filter blur-3xl animate-float-slow"></div>
@@ -71,10 +71,10 @@ const FeaturesSection = () => {
7171
{features.map((feature, index) => (
7272
<div
7373
key={index}
74-
className="relative group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100 dark:border-gray-700"
74+
className="relative group bg-white dark:bg-neutral-950 rounded-2xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100 dark:border-gray-700"
7575
>
7676
{/* Hover effect background */}
77-
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-gray-800 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300"></div>
77+
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-neutral-900 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300"></div>
7878

7979
<div className="relative z-10">
8080
{/* Icon */}

‎app/components/hero.jsx‎

Lines changed: 158 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,23 @@
22
import React from "react";
33
import { useRouter } from "next/navigation";
44
import Image from "next/image";
5-
import Link from 'next/link';
6-
import { event } from '@/lib/gtag';
5+
import Link from "next/link";
6+
import { event } from "@/lib/gtag";
7+
import Promotion from "@/app/components/ui/productHunt";
78

89
const HeroSection = () => {
910
const router = useRouter();
10-
1111

1212
const handleStartVisualizing = () => {
1313
event({
14-
action: 'click_start_visualizing',
15-
category: 'Hero',
16-
label: 'Start Visualizing Button'
14+
action: "click_start_visualizing",
15+
category: "Hero",
16+
label: "Start Visualizing Button",
1717
});
1818
router.push("/visualizer");
1919
};
2020

21-
const name = [{ name: "Sohan" }, { name: "Johan" }, { name: "Lorem" }];
21+
const name = [{ name: "A" }, { name: "S" }, { name: "R" }];
2222

2323
const getInitials = (name) => {
2424
return name
@@ -29,78 +29,34 @@ const HeroSection = () => {
2929
};
3030

3131
return (
32+
<main className="bg-white dark:bg-neutral-900">
3233
<section className="min-h-screen py-10 flex items-start md:items-center justify-center bg-gradient-to-br from-blue-50 to-white dark:from-neutral-900 dark:to-neutral-900 text-gray-900 dark:text-gray-100 relative overflow-hidden">
33-
{/* Notification Bar */}
34-
<div className="hidden md:block absolute mt-14 top-12 left-1/2 transform -translate-x-1/2 z-20 w-full max-w-md px-4">
35-
<div className="bg-white dark:bg-neutral-950 border border-blue-200 dark:border-blue-900 rounded-full shadow-lg py-2 px-4 flex items-center justify-between">
36-
<span className="text-sm font-medium text-blue-500 flex items-center">
37-
<svg
38-
xmlns="http://www.w3.org/2000/svg"
39-
className="h-4 w-4 mr-2 text-blue-500 animate-draw"
40-
fill="none"
41-
viewBox="0 0 24 24"
42-
stroke="currentColor"
43-
>
44-
<path
45-
strokeLinecap="round"
46-
strokeLinejoin="round"
47-
strokeWidth={2}
48-
d="M13 10V3L4 14h7v7l9-11h-7z"
49-
className="path"
50-
/>
51-
</svg>
52-
New: New Blogs added!
53-
</span>
54-
<Link href="./blogs">
55-
<button className="text-blue-600 hover:text-blue-700 dark:hover:text-blue-700">
56-
<svg
57-
xmlns="http://www.w3.org/2000/svg"
58-
className="h-4 w-4 transform transition-transform duration-300 hover:translate-x-1"
59-
fill="none"
60-
viewBox="0 0 24 24"
61-
stroke="currentColor"
62-
>
63-
<path
64-
strokeLinecap="round"
65-
strokeLinejoin="round"
66-
strokeWidth={2}
67-
d="M9 5l7 7-7 7"
68-
/>
69-
</svg>
70-
</button>
71-
</Link>
72-
</div>
73-
</div>
74-
75-
{/* Abstract background elements */}
76-
<div className="absolute inset-0 overflow-hidden pointer-events-none">
77-
<div className="absolute top-0 left-0 w-64 h-64 bg-blue-400/10 rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
78-
</div>
79-
80-
<div className="container top-4 mx-auto px-6 py-20 flex flex-col lg:flex-row items-center justify-between relative z-10 gap-12">
81-
{/* Text Content */}
82-
<div className="lg:w-1/2 text-center lg:text-left space-y-4 sm:space-y-6">
83-
<h1 className="text-4xl sm:text-5xl md:text-5xl font-bold leading-snug md:leading-tight">
84-
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-400 dark:from-blue-400 dark:to-blue-300">
85-
Master DSA
34+
{/* Notification Bar */}
35+
<div className="hidden md:block absolute mt-14 top-12 left-1/2 transform -translate-x-1/2 z-20 w-full max-w-md px-4">
36+
<div className="bg-white dark:bg-neutral-950 border border-blue-200 dark:border-blue-900 rounded-full shadow-lg py-2 px-4 flex items-center justify-between">
37+
<span className="text-sm font-medium text-blue-500 flex items-center">
38+
<svg
39+
xmlns="http://www.w3.org/2000/svg"
40+
className="h-4 w-4 mr-2 text-blue-500 animate-draw"
41+
fill="none"
42+
viewBox="0 0 24 24"
43+
stroke="currentColor"
44+
>
45+
<path
46+
strokeLinecap="round"
47+
strokeLinejoin="round"
48+
strokeWidth={2}
49+
d="M13 10V3L4 14h7v7l9-11h-7z"
50+
className="path"
51+
/>
52+
</svg>
53+
New: New Blogs added!
8654
</span>
87-
<br />
88-
Through Interactive Visualization
89-
</h1>
90-
<p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto lg:mx-0">
91-
See algorithms come to life in your mind's eye before you code them.
92-
The way developers actually think.
93-
</p>
94-
<div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
95-
<button
96-
onClick={handleStartVisualizing}
97-
className="relative px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-all duration-300 shadow-lg hover:shadow-blue-500/30 group overflow-hidden"
98-
>
99-
<span className="relative z-10 flex items-center justify-center gap-2">
100-
Start Visualizing Now
55+
<Link href="./blogs">
56+
<button className="text-blue-600 hover:text-blue-700 dark:hover:text-blue-700">
10157
<svg
10258
xmlns="http://www.w3.org/2000/svg"
103-
className="h-5 w-5 group-hover:translate-x-1 transition-transform"
59+
className="h-4 w-4 transform transition-transform duration-300 hover:translate-x-1"
10460
fill="none"
10561
viewBox="0 0 24 24"
10662
stroke="currentColor"
@@ -109,97 +65,148 @@ const HeroSection = () => {
10965
strokeLinecap="round"
11066
strokeLinejoin="round"
11167
strokeWidth={2}
112-
d="M14 5l7 7m0 0l-7 7m7-7H3"
68+
d="M9 5l7 7-7 7"
11369
/>
11470
</svg>
115-
</span>
116-
<span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
117-
</button>
71+
</button>
72+
</Link>
11873
</div>
74+
</div>
75+
76+
{/* Abstract background elements */}
77+
<div className="absolute inset-0 overflow-hidden pointer-events-none">
78+
<div className="absolute top-0 left-0 w-64 h-64 bg-blue-400/10 rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
79+
</div>
11980

120-
{/* Trust indicators */}
121-
<div className="pt-4 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-6 text-sm text-gray-600 dark:text-gray-400">
122-
<div className="flex items-center gap-2">
123-
<div className="flex -space-x-2">
124-
{name.map((item, index) => (
125-
<div
126-
key={index}
127-
className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold"
81+
<div className="container top-4 mx-auto px-6 pt-20 flex flex-col lg:flex-row items-center justify-between relative z-10 gap-12">
82+
{/* Text Content */}
83+
<div className="lg:w-1/2 text-center lg:text-left space-y-4 sm:space-y-6">
84+
<h1 className="text-4xl sm:text-5xl md:text-5xl font-bold leading-snug md:leading-tight">
85+
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-400 dark:from-blue-400 dark:to-blue-300">
86+
Master DSA
87+
</span>
88+
<br />
89+
Through Interactive Visualization
90+
</h1>
91+
<p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto lg:mx-0">
92+
See algorithms come to life in your mind's eye before you code
93+
them. The way developers actually think.
94+
</p>
95+
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center lg:justify-start">
96+
<button
97+
onClick={handleStartVisualizing}
98+
className="relative px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-all duration-300 shadow-lg hover:shadow-blue-500/30 group overflow-hidden"
99+
>
100+
<span className="relative z-10 flex items-center justify-center gap-2">
101+
Start Visualizing Now
102+
<svg
103+
xmlns="http://www.w3.org/2000/svg"
104+
className="h-5 w-5 group-hover:translate-x-1 transition-transform"
105+
fill="none"
106+
viewBox="0 0 24 24"
107+
stroke="currentColor"
128108
>
129-
{getInitials(item.name)}
130-
</div>
131-
))}
132-
</div>
133-
<span>1,000+ Active Learners</span>
109+
<path
110+
strokeLinecap="round"
111+
strokeLinejoin="round"
112+
strokeWidth={2}
113+
d="M14 5l7 7m0 0l-7 7m7-7H3"
114+
/>
115+
</svg>
116+
</span>
117+
<span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
118+
</button>
119+
<Promotion/>
134120
</div>
135-
<div className="flex items-center gap-2">
136-
<svg
137-
xmlns="http://www.w3.org/2000/svg"
138-
className="h-5 w-5 text-yellow-500"
139-
viewBox="0 0 20 20"
140-
fill="currentColor"
141-
>
142-
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
143-
</svg>
144-
<span>4.45/5 (200+ Reviews)</span>
121+
122+
{/* Trust indicators */}
123+
<div className="pt-4 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-6 text-sm text-gray-600 dark:text-gray-400">
124+
<div className="flex items-center gap-2">
125+
<div className="flex -space-x-2">
126+
{name.map((item, index) => (
127+
<div
128+
key={index}
129+
className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold"
130+
>
131+
{getInitials(item.name)}
132+
</div>
133+
))}
134+
</div>
135+
<span>1,000+ Active Learners</span>
136+
</div>
137+
<div className="flex items-center gap-2">
138+
<svg
139+
xmlns="http://www.w3.org/2000/svg"
140+
className="h-5 w-5 text-yellow-500"
141+
viewBox="0 0 20 20"
142+
fill="currentColor"
143+
>
144+
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
145+
</svg>
146+
<span>4.45/5 (200+ Reviews)</span>
147+
</div>
145148
</div>
146149
</div>
147-
</div>
148150

149-
{/* Person image with automatic background removal effect */}
150-
<div className="lg:w-1/2 lg:h-full flex justify-center items-center mt-10 lg:mt-0 relative">
151-
<div className="relative w-full h-full max-w-lg">
152-
<Image
153-
src="/GurlThinking.png"
154-
alt="Person thinking about algorithms"
155-
width={1200}
156-
height={1200}
157-
className="w-full z-20 h-full max-h-[400px] lg:max-h-[600px] object-contain drop-shadow-2xl"
158-
style={{
159-
filter: "drop-shadow(0 20px 13px rgba(0, 0, 0, 0.1))",
160-
maskImage:
161-
"linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 98%)",
162-
}}
163-
priority
164-
/>
151+
{/* Person image with automatic background removal effect */}
152+
<div className="lg:w-1/2 lg:h-full flex justify-center items-center mt-10 lg:mt-0 relative">
153+
<div className="relative w-full h-full max-w-lg">
154+
<Image
155+
src="/GurlThinking.png"
156+
alt="Person thinking about algorithms"
157+
width={1200}
158+
height={1200}
159+
className="w-full z-20 h-full max-h-[400px] lg:max-h-[600px] object-contain drop-shadow-2xl"
160+
style={{
161+
filter: "drop-shadow(0 20px 13px rgba(0, 0, 0, 0.1))",
162+
maskImage:
163+
"linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 98%)",
164+
}}
165+
priority
166+
/>
165167

166-
{/* Floating algorithm elements - adjusted for mobile */}
167-
<div className="absolute top-[15%] -right-4 w-16 h-16 lg:w-24 lg:h-24 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float border-2 border-gray-300 dark:border-blue-500">
168-
<div className="text-xs lg:text-base font-mono font-semibold text-center p-1 lg:p-2">
169-
O(1)
170-
</div>
171-
</div>
168+
{/* Floating algorithm elements - adjusted for mobile */}
169+
<div className="absolute top-[15%] -right-4 w-16 h-16 lg:w-24 lg:h-24 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float border-2 border-gray-300 dark:border-blue-500">
170+
<div className="text-xs lg:text-base font-mono font-semibold text-center p-1 lg:p-2">
171+
O(1)
172+
</div>
173+
</div>
172174

173-
<div className="absolute top-[40%] -right-8 w-20 h-20 lg:w-28 lg:h-28 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-2000 border-2 border-gray-300 dark:border-blue-500">
174-
<div className="text-sm lg:text-lg font-mono font-semibold text-center p-2 lg:p-3">
175-
<span className="text-blue-600 dark:text-blue-400">Hash</span>
176-
Map
177-
</div>
178-
</div>
175+
<div className="absolute top-[40%] -right-8 w-20 h-20 lg:w-28 lg:h-28 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-2000 border-2 border-gray-300 dark:border-blue-500">
176+
<div className="text-sm lg:text-lg font-mono font-semibold text-center p-2 lg:p-3">
177+
<span className="text-blue-600 dark:text-blue-400">Hash</span>
178+
Map
179+
</div>
180+
</div>
179181

180-
<div className="absolute top-[25%] z-[-1] left-[-5] w-20 h-20 lg:w-24 lg:h-24 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-1000 border-2 border-gray-300 dark:border-blue-500">
181-
<div className="text-xs lg:text-base font-mono font-semibold text-center">
182-
Queue
183-
</div>
184-
</div>
182+
<div className="absolute top-[25%] z-[-1] left-[-5] w-20 h-20 lg:w-24 lg:h-24 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-1000 border-2 border-gray-300 dark:border-blue-500">
183+
<div className="text-xs lg:text-base font-mono font-semibold text-center">
184+
Queue
185+
</div>
186+
</div>
185187

186-
{/* Additional thought bubbles - adjusted for mobile */}
187-
<div className="absolute z-[-1] top-[10%] left-5 w-14 h-14 lg:w-20 lg:h-20 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-1500 border-2 border-gray-300 dark:border-blue-500">
188-
<div className="text-xs lg:text-sm font-mono font-semibold text-center">
189-
Stack
190-
</div>
191-
</div>
188+
{/* Additional thought bubbles - adjusted for mobile */}
189+
<div className="absolute z-[-1] top-[10%] left-5 w-14 h-14 lg:w-20 lg:h-20 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-1500 border-2 border-gray-300 dark:border-blue-500">
190+
<div className="text-xs lg:text-sm font-mono font-semibold text-center">
191+
Stack
192+
</div>
193+
</div>
192194

193-
<div className="absolute top-[5%] right-12 w-14 h-14 lg:w-20 lg:h-20 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-2500 border-2 border-gray-300 dark:border-blue-500">
194-
<div className="text-xs lg:text-sm font-mono font-semibold text-center">
195-
Tree
196-
</div>
197-
</div>
198-
</div>
199-
</div>
195+
<div className="absolute top-[5%] right-12 w-14 h-14 lg:w-20 lg:h-20 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-2500 border-2 border-gray-300 dark:border-blue-500">
196+
<div className="text-xs lg:text-sm font-mono font-semibold text-center">
197+
Tree
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
</div>
203+
</section>
204+
{/* Divider */}
205+
<div className="pb-10">
206+
<div className="mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
200207
</div>
201-
</section>
208+
</main>
202209
);
203210
};
204211

205-
export default HeroSection;
212+
export default HeroSection;

0 commit comments

Comments
 (0)