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

remove button from start a project , pwa complete

Browse Source
This commit is contained in:
priyanshuvish
2025-07-17 17:45:38 +05:30
parent 03f5a58986
commit 04dcfa19c3
6 changed files with 268 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
components/HeroSection.tsx
View File

@@ -5,23 +5,25 @@ import { navigateTo } from "../App";
import { motion } from "framer-motion";
import Spline from "@splinetool/react-spline";
export function HeroSection() {
return (
<section id="hero" className="relative lg:min-h-[85vh] flex items-center pt-20">
<section
id="hero"
className="relative lg:min-h-[85vh] flex items-center pt-20"
>
<GridPattern />
<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">
{/* Left Content */}
<motion.div
<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 */}
<motion.div
<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 }}
@@ -30,14 +32,18 @@ export function HeroSection() {
<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={{
WebkitMask: "linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)",
WebkitMask:
"linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)",
WebkitMaskComposite: "destination-out",
maskComposite: "subtract",
}}
/>
<span className="relative z-10 flex items-center text-sm font-medium">
🎉
<span aria-hidden="true" className="mx-2 h-4 w-px shrink-0 bg-neutral-500" />
<span
aria-hidden="true"
className="mx-2 h-4 w-px shrink-0 bg-neutral-500"
/>
<span className="bg-clip-text text-transparent bg-[linear-gradient(90deg,#ffaa40_0%,#9c40ff_50%,#ffaa40_100%)] bg-[length:200%_100%] animate-[gradientMove_6s_ease_infinite]">
25+ Years Of Industry Expertise
</span>
@@ -47,12 +53,17 @@ export function HeroSection() {
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 5l7 7-7 7"
/>
</svg>
</span>
</motion.div>
<motion.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 }}
@@ -61,27 +72,37 @@ export function HeroSection() {
Architecting Digital Success for Startups &amp; Enterprises
</motion.h1>
<motion.p
<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.
We design and build secure, AI-powered apps and software tailored
for scale, speed, and user engagement.
</motion.p>
<motion.div
<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('/start-a-project')}>
<Button
size="lg"
className="whitespace-nowrap"
onClick={() => navigateTo("/start-a-project")}
>
<Calendar className="w-4 h-4" />
Book a Free Consultation
</Button>
<Button variant="secondary" size="lg" className="whitespace-nowrap" onClick={() => navigateTo('/services')}>
<Button
variant="secondary"
size="lg"
className="whitespace-nowrap"
onClick={() => navigateTo("/services")}
>
<Briefcase className="w-4 h-4" />
Explore Services
</Button>
@@ -89,31 +110,40 @@ 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 overflow-hidden rounded-2xl">
<Spline scene="https://prod.spline.design/nwCSrO6RnOG0v1GV/scene.splinecode" />
</div>
</motion.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>
</div>
{/* Floating scroll indicator */}
<motion.div
<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
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>
</motion.div>
</div>
</section>
);
}
}