Skip to content

Commit cd6b1f4

Browse files
author
Numan
committed
Build hero section with new UI
1 parent c2eddc9 commit cd6b1f4

1 file changed

Lines changed: 72 additions & 57 deletions

File tree

‎components/website/hero-sec.tsx‎

Lines changed: 72 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use client';
2-
import { ChevronsRight, MoveRight } from 'lucide-react';
3-
import { Button } from '@/components/website/ui/button';
42
import React, { useEffect, useMemo, useState } from 'react';
3+
import { motion } from "framer-motion";
54

65
function HeroSec() {
76
const [blocks, setBlocks] = useState([]);
@@ -54,64 +53,80 @@ function HeroSec() {
5453
}, [activeDivs]);
5554
return (
5655
<>
57-
<section className='min-h-screen py-24 overflow-hidden relative '>
58-
<div className='absolute inset-0 top-0 left-0 h-screen w-full items-center px-5 py-24 dark:[background:radial-gradient(87.03%_87.03%_at_50.05%_12.97%,rgba(217,217,217,0)_40%,#010716_100%)] [background:radial-gradient(87.03%_87.03%_at_50.05%_12.97%,rgba(217,217,217,0)_40%,#ffffff_100%)]'></div>
59-
<article className='grid gap-4 py-20 relative z-10 sm:px-0 px-4'>
60-
<a
61-
href={'/components/blur-vignette'}
62-
className='inline-flex w-fit mx-auto items-center gap-1 rounded-full bg-[#334cec] border-4 shadow-[#6175f8] py-0.5 pl-0.5 pr-3 text-xs '
63-
>
64-
<div className='rounded-full bg-[#fcfdff] px-2 py-1 text-xs text-black '>
65-
Update
66-
</div>
67-
<p className='text-white sm:text-base text-xs inline-block'>
68-
✨ Introducing
69-
<span className='px-1 font-semibold'>Blur Vignette</span>
70-
</p>
71-
72-
<svg
73-
xmlns='http://www.w3.org/2000/svg'
74-
viewBox='0 0 24 24'
75-
fill='currentColor'
76-
aria-hidden='true'
77-
data-slot='icon'
78-
className='h-3 w-3 text-white'
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"
7965
>
80-
<path
81-
fillRule='evenodd'
82-
d='M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z'
83-
clipRule='evenodd'
84-
></path>
85-
</svg>
86-
</a>
87-
<h1 className=' xl:text-7xl md:text-6xl sm:text-5xl text-3xl text-center font-semibold leading-[110%]'>
88-
Design That Really <br />
89-
Need In{' '}
90-
<span className='bg-gradient-to-t sm:w-ful w-4/5 from-[#a2b6fa] to-[#334cec] bg-clip-text text-transparent'>
91-
Your Website
92-
</span>
93-
</h1>
94-
<p className='mx-auto lg:w-[500px] sm:w-[80%] text-center sm:text-lg text-sm'>
95-
100+ Free beautifull interactive react/nextjs component based on
96-
tailwindcss, framer-motion, gsap etc
97-
</p>
98-
<div className='flex gap-2 justify-center items-center'>
99-
<a
100-
href='https://www.struct-ui.com/'
101-
className='flex items-center gap-2 w-fit text-white bg-gradient-to-l from-[#6175f8] to-[#334cec] border sm:px-4 px-2 rounded-sm py-2 '
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
68+
</span>
69+
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>
89+
</div>
90+
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>
97+
</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"
102106
>
103-
Visit structui
104-
<MoveRight />
105-
</a>
106-
<a href='/get-started' className='sm:inline-block hidden'>
107-
<Button className=' rounded-full px-4'>
108-
Get Started
109-
<ChevronsRight />
110-
</Button>
111-
</a>
112-
</div>
113-
</article>
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>
113+
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>
119+
</a>
114120

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+
128+
</motion.div>
129+
</div>
115130
<div className='flex h-screen overflow-hidden top-0 left-0 inset-0 -z-10 absolute'>
116131
{blocks}
117132
</div>

0 commit comments

Comments
 (0)