fixed nav and hero section design
This commit is contained in:
sanjidarimi
@@ -66,7 +66,7 @@ export default function HeroSection() {
|
||||
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-1/4 right-[15%] w-24 h-24 border-2 border-neon-purple/30 rotate-45"
|
||||
className="absolute bottom-1/4 right-[15%] w-24 h-24 border-2 border-primary/30 rotate-45"
|
||||
style={{
|
||||
transform:
|
||||
"translate(calc(var(--mouse-x, 0) * 0.5), calc(var(--mouse-y, 0) * 0.5)) rotate(45deg)",
|
||||
@@ -74,22 +74,6 @@ export default function HeroSection() {
|
||||
animate={{ rotate: [45, 405] }}
|
||||
transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute top-1/3 right-[25%] w-16 h-16 bg-neon-green/10 rounded-lg"
|
||||
style={{
|
||||
transform:
|
||||
"translate(calc(var(--mouse-x, 0) * 1.5), calc(var(--mouse-y, 0) * 1.5))",
|
||||
}}
|
||||
animate={{
|
||||
y: [-10, 10, -10],
|
||||
rotate: [0, 180, 360],
|
||||
}}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
|
||||
{/* Glowing orbs */}
|
||||
<div className="absolute top-1/2 left-1/4 w-64 h-64 bg-primary/20 rounded-full blur-[100px] animate-float" />
|
||||
<div className="absolute bottom-1/3 right-1/4 w-48 h-48 bg-neon-purple/20 rounded-full blur-[80px] animate-float-delayed" />
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 container mx-auto px-4 text-center">
|
||||
@@ -100,15 +84,49 @@ export default function HeroSection() {
|
||||
>
|
||||
{/* Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8"
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
className="relative group inline-flex items-center justify-center p-[1.5px] overflow-hidden rounded-full mb-4"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
|
||||
<span className="text-sm font-medium text-muted-foreground">
|
||||
Innovating the Future
|
||||
</span>
|
||||
|
||||
<motion.div
|
||||
animate={{
|
||||
rotate: [0, 360],
|
||||
}}
|
||||
transition={{
|
||||
duration: 3,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
style={{
|
||||
background: `conic-gradient(from 0deg,
|
||||
transparent 40%,
|
||||
hsl(var(--accent-neon)) 50%,
|
||||
hsl(var(--accent-neon-glow)) 60%,
|
||||
transparent 80%)`,
|
||||
}}
|
||||
className="absolute inset-[-200%] aspect-square"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 px-4 py-1.5 rounded-full bg-background/80 backdrop-blur-xl border border-white/5 flex items-center gap-2">
|
||||
{/* Animated Active Pulse Dot */}
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[hsl(var(--accent-neon))] opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-[hsl(var(--accent-neon))]"></span>
|
||||
</span>
|
||||
|
||||
|
||||
<span className="text-sm font-medium tracking-tight text-foreground/90">
|
||||
Empowering Ideas Through Innovation
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 3. Outer Glow (Glows based on theme) */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-full blur-md opacity-20 group-hover:opacity-40 transition-opacity duration-500"
|
||||
style={{ backgroundColor: "hsl(var(--accent-neon))" }}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Main headline */}
|
||||
@@ -125,7 +143,7 @@ export default function HeroSection() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="block text-primary neon-text-glow"
|
||||
className="block text-primary"
|
||||
>
|
||||
with Technology
|
||||
</motion.span>
|
||||
@@ -160,7 +178,7 @@ export default function HeroSection() {
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="font-semibold px-8 py-6 text-lg rounded-full border-primary bg-primary/10 transition-all"
|
||||
className="font-semibold hover:neon-glow px-8 py-6 text-lg rounded-full border-primary bg-primary/10 transition-all"
|
||||
>
|
||||
<Link to="/projects">View Our Work</Link>
|
||||
</Button>
|
||||
|
||||
@@ -80,23 +80,23 @@ export default function Navbar() {
|
||||
className="relative text-foreground/80 hover:text-foreground transition-colors font-medium group"
|
||||
>
|
||||
{item.name}
|
||||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full neon-glow" />
|
||||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full " />
|
||||
</a>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Theme Controls */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Accent Color Picker */}
|
||||
<div className="flex items-center gap-1.5 p-1 rounded-full glass">
|
||||
<div className="flex items-center gap-1.5 rounded-full glass p-1">
|
||||
{accentColors.map((color) => (
|
||||
<motion.button
|
||||
key={color.name}
|
||||
onClick={() => setAccent(color.name)}
|
||||
className={`w-6 h-6 rounded-full ${color.color} transition-all ${
|
||||
accent === color.name
|
||||
? "ring-2 dark:ring-white ring-primary ring-offset-2 ring-offset-background"
|
||||
? "ring-1 dark:ring-white ring-primary ring-offset-2 ring-offset-background"
|
||||
: ""
|
||||
}`}
|
||||
whileHover={{ scale: 1.2 }}
|
||||
@@ -148,9 +148,9 @@ export default function Navbar() {
|
||||
>
|
||||
<Button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
className="bg-primary text-primary-foreground font-semibold px-6 py-2 rounded-full animate-pulse-glow hover:scale-105 transition-transform"
|
||||
className="bg-primary text-primary-foreground font-semibold px-6 py-2 rounded-full transition-transform neon-glow hover:neon-glow-strong"
|
||||
>
|
||||
Talk with Us
|
||||
Talk with Us
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -228,7 +228,7 @@ export default function Navbar() {
|
||||
onClick={() => setAccent(color.name)}
|
||||
className={`w-8 h-8 rounded-full ${color.color} transition-all ${
|
||||
accent === color.name
|
||||
? "ring-2 ring-white ring-offset-2 ring-offset-background"
|
||||
? "ring-2 ring-white ring-offset-1 ring-offset-background"
|
||||
: ""
|
||||
}`}
|
||||
aria-label={`Set ${color.name} theme`}
|
||||
@@ -256,7 +256,7 @@ export default function Navbar() {
|
||||
setIsMobileMenuOpen(false);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
className="w-full bg-primary text-primary-foreground font-semibold py-3 rounded-full neon-glow"
|
||||
className="w-full bg-primary text-primary-foreground font-semibold py-3 rounded-full"
|
||||
>
|
||||
Let Me Talk
|
||||
</Button>
|
||||
|
||||
@@ -39,11 +39,7 @@ export default function ServicesSection() {
|
||||
|
||||
return (
|
||||
<section id="services" ref={ref} className="py-20 relative overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute bottom-1/2 left-0 w-96 h-96 bg-primary rounded-full blur-[200px]" />
|
||||
<div className="absolute bottom-0 right-0 w-80 h-80 bg-primary rounded-full blur-[200px]" />
|
||||
</div>
|
||||
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
{/* Section Header */}
|
||||
@@ -57,7 +53,7 @@ export default function ServicesSection() {
|
||||
Our Expertise
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
|
||||
What We <span className="text-primary neon-text-glow">Do</span>
|
||||
What We <span className="text-primary">Do</span>
|
||||
</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
|
||||
We deliver comprehensive technology solutions that empower
|
||||
@@ -79,9 +75,9 @@ export default function ServicesSection() {
|
||||
{/* Card */}
|
||||
<div className="relative h-full p-6 rounded-2xl bg-primary/5 transition-all duration-300 overflow-hidden">
|
||||
{/* Glow effect on hover */}
|
||||
<div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
{/* <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent" />
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Icon */}
|
||||
<motion.div
|
||||
|
||||
Reference in New Issue
Block a user