ios changes pending
This commit is contained in:
priyanshuvish
@@ -1,8 +1,8 @@
|
||||
import { Button } from "./ui/button";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { SplineFallback } from "./SplineFallback";
|
||||
import { Calendar, Briefcase } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export function HeroSection() {
|
||||
return (
|
||||
@@ -11,9 +11,20 @@ export function HeroSection() {
|
||||
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="flex flex-col-reverse lg:flex-row items-center gap-12 w-full py-24 relative z-10">
|
||||
<div className="w-full lg:w-1/2">
|
||||
{/* Left Content */}
|
||||
<motion.div
|
||||
className="w-full lg:w-1/2"
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
{/* Animated Badge */}
|
||||
<div className="group relative inline-flex items-center rounded-full px-4 py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f] mb-6">
|
||||
<motion.div
|
||||
className="group relative inline-flex items-center rounded-full px-4 py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f] mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<span
|
||||
className="absolute inset-0 block h-full w-full animate-gradient rounded-[inherit] bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:300%_100%] p-[1px]"
|
||||
style={{
|
||||
@@ -37,17 +48,32 @@ export function HeroSection() {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight text-white max-w-3xl">
|
||||
Architecting Digital Success for Startups & Enterprises
|
||||
</h1>
|
||||
<motion.h1
|
||||
className="text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight text-white max-w-3xl"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
>
|
||||
Architecting Digital Success for Startups & Enterprises
|
||||
</motion.h1>
|
||||
|
||||
<p className="mt-6 max-w-2xl text-lg text-gray-400">
|
||||
<motion.p
|
||||
className="mt-6 max-w-2xl text-lg text-gray-400"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
We design and build secure, AI-powered apps and software tailored for scale, speed, and user engagement.
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<div className="mt-10 flex flex-col sm:flex-row gap-3">
|
||||
<motion.div
|
||||
className="mt-10 flex flex-col sm:flex-row gap-3"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
>
|
||||
<Button size="lg" className="whitespace-nowrap" onClick={() => navigateTo('/contact')}>
|
||||
<Calendar className="w-4 h-4" />
|
||||
Book a Free Consultation
|
||||
@@ -57,33 +83,109 @@ export function HeroSection() {
|
||||
<Briefcase className="w-4 h-4" />
|
||||
Explore Services
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<div className="w-full lg:w-1/2 h-[320px] md:h-[480px] lg:h-[560px] shrink-0 relative">
|
||||
{/* Animated Background Elements */}
|
||||
<div className="absolute inset-0 overflow-hidden rounded-xl">
|
||||
<div className="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 rounded-full blur-3xl animate-pulse"></div>
|
||||
<div className="absolute top-3/4 right-1/4 w-24 h-24 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-full blur-2xl animate-pulse delay-1000"></div>
|
||||
<div className="absolute bottom-1/4 left-1/3 w-20 h-20 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-full blur-2xl animate-pulse delay-2000"></div>
|
||||
</div>
|
||||
|
||||
{/* Interactive 3D-like Animation */}
|
||||
<div className="relative w-full h-full rounded-xl overflow-hidden border border-gray-800/50 bg-gradient-to-br from-gray-900/50 to-gray-800/30 backdrop-blur-sm">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 to-purple-500/5 rounded-xl"></div>
|
||||
<div className="relative z-10 w-full h-full">
|
||||
<SplineFallback />
|
||||
{/* Right Side - Animated Gradient Background */}
|
||||
<motion.div
|
||||
className="w-full lg:w-1/2 h-[320px] md:h-[480px] lg:h-[560px] shrink-0 relative"
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<div className="w-full h-full relative overflow-hidden rounded-2xl">
|
||||
{/* Animated gradient background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#E5195E]/20 via-[#9c40ff]/20 to-[#ffaa40]/20 animate-gradient bg-[length:400%_400%]" />
|
||||
|
||||
{/* Floating orbs */}
|
||||
<div className="absolute inset-0">
|
||||
<motion.div
|
||||
className="absolute top-1/4 left-1/4 w-32 h-32 bg-[#E5195E]/30 rounded-full blur-xl"
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
opacity: [0.3, 0.6, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute top-1/2 right-1/4 w-24 h-24 bg-[#9c40ff]/30 rounded-full blur-xl"
|
||||
animate={{
|
||||
scale: [1, 1.3, 1],
|
||||
opacity: [0.3, 0.5, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: 3,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: 1,
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-1/3 left-1/2 w-20 h-20 bg-[#ffaa40]/30 rounded-full blur-xl"
|
||||
animate={{
|
||||
scale: [1, 1.1, 1],
|
||||
opacity: [0.3, 0.7, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: 2,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tech grid overlay */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '40px 40px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Central focus point */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<motion.div
|
||||
className="w-3 h-3 bg-white rounded-full shadow-lg"
|
||||
animate={{
|
||||
scale: [1, 1.5, 1],
|
||||
opacity: [0.8, 1, 0.8],
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Subtle border */}
|
||||
<div className="absolute inset-0 rounded-2xl border border-white/10" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Floating Elements */}
|
||||
<div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
{/* Floating scroll indicator */}
|
||||
<motion.div
|
||||
className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1.0 }}
|
||||
>
|
||||
<svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</svg>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user