WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

mobile mockup increase , spline add in hero banner

Browse Source
This commit is contained in:
priyanshuvish
2025-07-17 16:00:38 +05:30
parent aeca21032d
commit 477dbad434
5 changed files with 90 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
components/HeroSection.tsx
View File

@@ -3,6 +3,8 @@ import { GridPattern } from "./GridPattern";
import { Calendar, Briefcase } from "lucide-react";
import { navigateTo } from "../App";
import { motion } from "framer-motion";
import Spline from "@splinetool/react-spline";
export function HeroSection() {
return (
@@ -87,92 +89,17 @@ export function HeroSection() {
</motion.div>
{/* 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>
<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 overflow-hidden rounded-2xl">
<Spline scene="https://prod.spline.design/nwCSrO6RnOG0v1GV/scene.splinecode" />
</div>
</motion.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>
</motion.div>
</div>
{/* Floating scroll indicator */}