Skip to content

Commit b5a3bf8

Browse files
author
Numan
committed
Update HeroSec component layout and enhance content presentation
1 parent b87d9b8 commit b5a3bf8

1 file changed

Lines changed: 65 additions & 65 deletions

File tree

‎components/website/hero-sec.tsx‎

Lines changed: 65 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -53,80 +53,80 @@ function HeroSec() {
5353
}, [activeDivs]);
5454
return (
5555
<>
56-
<section className='min-h-[90vh] py-24 overflow-hidden relative'>
57-
<div className="max-w-7xl mx-auto px-6 lg:px-12 py-20 grid lg:grid-cols-2 gap-12 items-center">
58-
59-
{/* Left Content */}
60-
<motion.div
61-
initial={{ opacity: 0, y: 40 }}
62-
animate={{ opacity: 1, y: 0 }}
63-
transition={{ duration: 0.7 }}
64-
className="space-y-6"
65-
>
66-
<span className="inline-block px-3 py-1 text-sm rounded-full bg-neutral-900 border border-neutral-700">
67-
🚀 Introducing Your UI Library
56+
<section className='min-h-[90vh] py-16 overflow-hidden relative'>
57+
<div className="max-w-7xl mx-auto px-6 lg:px-12 py-20 grid lg:grid-cols-2 gap-12 items-center">
58+
{/* Left Content */}
59+
<motion.div
60+
initial={{ opacity: 0, y: 40 }}
61+
animate={{ opacity: 1, y: 0 }}
62+
transition={{ duration: 0.7 }}
63+
className="space-y-6"
64+
>
65+
<span className="inline-block px-3 py-1 text-sm rounded-full bg-neutral-900 border border-neutral-700">
66+
🚀 Introducing Your UI Library
67+
</span>
68+
69+
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight">
70+
Build stunning UIs with <br />
71+
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600">
72+
Effortless Precision
6873
</span>
74+
</h1>
6975

70-
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight">
71-
Build stunning UIs with <br />
72-
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600">
73-
Effortless Precision
74-
</span>
75-
</h1>
76-
77-
<p className="text-lg text-neutral-400 max-w-xl">
78-
Who love spending hours tweaking CSS and debugging animations?
79-
Save yourself the headache and grab these components — they're practically begging to make your life easier.
80-
</p>
81-
82-
<div className="flex gap-4">
83-
<a href='/get-started' className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-white text-black hover:bg-neutral-200">
84-
Get Started
85-
</a>
86-
<a href='/components' className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border bg-background hover:text-accent-foreground h-10 px-4 py-2 border-neutral-700 text-white hover:bg-neutral-900">
87-
Custom Components
88-
</a>
76+
<p className="text-lg text-neutral-400 max-w-xl">
77+
Who love spending hours tweaking CSS and debugging animations?
78+
Save yourself the headache and grab these components — they're practically begging to make your life easier.
79+
</p>
80+
81+
<div className="flex gap-4">
82+
<a href='/get-started' className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-white text-black hover:bg-neutral-200">
83+
Get Started
84+
</a>
85+
<a href='/components' className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border bg-background hover:text-accent-foreground h-10 px-4 py-2 border-neutral-700 text-white hover:bg-neutral-900">
86+
Custom Components
87+
</a>
88+
</div>
89+
90+
{/* Tech Stack Logos */}
91+
<div className="flex gap-6 mt-6 opacity-80">
92+
<span>⚛️ React</span>
93+
<span>▲ Next.js</span>
94+
<span>🎨 TailwindCSS</span>
95+
<span>🎬 Framer Motion</span>
96+
</div>
97+
</motion.div>
98+
99+
{/* Right Content (Showcase cards / preview images) */}
100+
<motion.div
101+
initial={{ opacity: 0, x: 60 }}
102+
animate={{ opacity: 1, x: 0 }}
103+
transition={{ duration: 0.8 }}
104+
className="grid sm:grid-cols-2 gap-6"
105+
>
106+
<a href='/components'>
107+
<div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 shadow-xl hover:scale-105 transition-transform">
108+
<h3 className="font-semibold">⚡ Beautiful Components</h3>
109+
<p className="text-sm text-neutral-400">Build stunning UIs in minutes</p>
89110
</div>
111+
</a>
90112

91-
{/* Tech Stack Logos */}
92-
<div className="flex gap-6 mt-6 opacity-80">
93-
<span>⚛️ React</span>
94-
<span>▲ Next.js</span>
95-
<span>🎨 TailwindCSS</span>
96-
<span>🎬 Framer Motion</span>
113+
<a href='/components'>
114+
<div className="bg-gradient-to-br from-neutral-800 to-black border border-neutral-700 rounded-2xl p-6 shadow-xl hover:scale-105 transition-transform">
115+
<h3 className="font-semibold">✨ Animations</h3>
116+
<p className="text-sm text-neutral-400">Framer Motion integrated</p>
97117
</div>
98-
</motion.div>
99-
100-
{/* Right Content (Showcase cards / preview images) */}
101-
<motion.div
102-
initial={{ opacity: 0, x: 60 }}
103-
animate={{ opacity: 1, x: 0 }}
104-
transition={{ duration: 0.8 }}
105-
className="grid sm:grid-cols-2 gap-6"
106-
>
107-
<a href='/components'>
108-
<div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 shadow-xl hover:scale-105 transition-transform">
109-
<h3 className="font-semibold">⚡ Beautiful Components</h3>
110-
<p className="text-sm text-neutral-400">Build stunning UIs in minutes</p>
111-
</div>
112-
</a>
118+
</a>
113119

114-
<a href='/components'>
115-
<div className="bg-gradient-to-br from-neutral-800 to-black border border-neutral-700 rounded-2xl p-6 shadow-xl hover:scale-105 transition-transform">
116-
<h3 className="font-semibold">✨ Animations</h3>
117-
<p className="text-sm text-neutral-400">Framer Motion integrated</p>
118-
</div>
120+
<div className="bg-neutral-950 w-full border border-neutral-800 rounded-2xl p-6 shadow-xl hover:scale-105 transition-transform sm:col-span-2">
121+
<a href="/components" className="w-full">
122+
<h3 className="font-semibold">🚀 Deploy Fast</h3>
123+
<p className="text-sm text-neutral-400">Copy, paste, deploy. Done.</p>
119124
</a>
125+
</div>
120126

121-
<div className="bg-neutral-950 w-full border border-neutral-800 rounded-2xl p-6 shadow-xl hover:scale-105 transition-transform sm:col-span-2">
122-
<a href="/components" className="w-full">
123-
<h3 className="font-semibold">🚀 Deploy Fast</h3>
124-
<p className="text-sm text-neutral-400">Copy, paste, deploy. Done.</p>
125-
</a>
126-
</div>
127+
</motion.div>
128+
</div>
127129

128-
</motion.div>
129-
</div>
130130
<div className='flex h-screen overflow-hidden top-0 left-0 inset-0 -z-10 absolute'>
131131
{blocks}
132132
</div>

0 commit comments

Comments
 (0)