Merge version_1_1782204836991 into main #2
@@ -6,324 +6,158 @@ import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVertic
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import { Award, Box, Code, Layers, Shield, Users, Zap } from "lucide-react";
|
||||
import { Award, Box, Code, Layers, Shield, Users, Zap, Cpu } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitVerticalMarquee
|
||||
tag="Next-Gen Development"
|
||||
title="Experience Design Meets Technical Excellence"
|
||||
description="An animated portfolio that showcases your skills through immersive 3D interactions and modern aesthetics. Every element is optimized for performance and accessibility."
|
||||
primaryButton={{
|
||||
text: "Explore My Work",
|
||||
href: "#work",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Our Process",
|
||||
href: "#about",
|
||||
}}
|
||||
leftItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmic-background-with-colorful-blue-red-laser-lights-perfect-digital-wallpaper_181624-32774.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-detail-no-people-macro-close-up_1122-2363.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-blue-lights_181624-19812.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627886.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-techno-lights-creating-cool-shapes-cool-background_181624-26024.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037275.jpg",
|
||||
},
|
||||
]}
|
||||
rightItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/marbled-blue-abstract-background-liquid-marble-pattern_1258-99750.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599351.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-orange-light-blue-lights-forming-circle-futuristic-concept_181624-59574.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-background-with-hexagon-grid-fading-into-distance_1048-5772.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/binary-flow-background_1048-11303.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-hex-textures-networking_23-2149755786.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Next-Gen Development"
|
||||
title="Experience Design Meets Technical Excellence"
|
||||
description="An animated portfolio that showcases your skills through immersive 3D interactions and modern aesthetics. Every element is optimized for performance and accessibility."
|
||||
primaryButton={{ text: "Explore My Work", href: "#work" }}
|
||||
secondaryButton={{ text: "Our Process", href: "#about" }}
|
||||
leftItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cosmic-background-with-colorful-blue-red-laser-lights-perfect-digital-wallpaper_181624-32774.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/horizontal-detail-no-people-macro-close-up_1122-2363.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-blue-lights_181624-19812.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627886.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-sci-fi-techno-lights-creating-cool-shapes-cool-background_181624-26024.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037275.jpg" },
|
||||
]}
|
||||
rightItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/marbled-blue-abstract-background-liquid-marble-pattern_1258-99750.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machine_23-2151599351.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-orange-light-blue-lights-forming-circle-futuristic-concept_181624-59574.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-background-with-hexagon-grid-fading-into-distance_1048-5772.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/binary-flow-background_1048-11303.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/neon-hex-textures-networking_23-2149755786.jpg" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="features-bento" data-section="features-bento">
|
||||
<SectionErrorBoundary name="features-bento">
|
||||
<div id="features-bento" data-section="features-bento">
|
||||
<SectionErrorBoundary name="features-bento">
|
||||
<FeaturesBento
|
||||
tag="Technical Prowess"
|
||||
title="Built for High Performance"
|
||||
description="Sophisticated 3D animations and interactive UI components."
|
||||
features={[
|
||||
{
|
||||
title: "Data Analytics",
|
||||
description: "Real-time performance tracking.",
|
||||
bentoComponent: "info-card-marquee",
|
||||
infoCards: [
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Speed",
|
||||
value: "98%",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Security",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
icon: Code,
|
||||
label: "Uptime",
|
||||
value: "99.9%",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-low-poly-design-abstract-blur-background_1048-12681.jpg",
|
||||
imageAlt: "blue digital code streams",
|
||||
},
|
||||
{
|
||||
title: "UI Stack",
|
||||
description: "Modern component library.",
|
||||
bentoComponent: "tilted-stack-cards",
|
||||
stackCards: [
|
||||
{
|
||||
icon: Cpu,
|
||||
title: "Three.js",
|
||||
subtitle: "Graphics",
|
||||
detail: "3D Canvas",
|
||||
},
|
||||
{
|
||||
icon: Box,
|
||||
title: "React",
|
||||
subtitle: "UI",
|
||||
detail: "Component",
|
||||
},
|
||||
{
|
||||
icon: Layers,
|
||||
title: "Motion",
|
||||
subtitle: "Framer",
|
||||
detail: "Animation",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmic-background-with-colorful-blue-red-laser-lights-perfect-digital-wallpaper_181624-32774.jpg?_wi=2",
|
||||
imageAlt: "blue digital code streams",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Technical Prowess"
|
||||
title="Built for High Performance"
|
||||
description="Sophisticated 3D animations and interactive UI components."
|
||||
features={[
|
||||
{
|
||||
title: "Data Analytics", description: "Real-time performance tracking.", bentoComponent: "info-card-marquee", infoCards: [
|
||||
{ icon: "Zap", label: "Speed", value: "98%" },
|
||||
{ icon: "Shield", label: "Security", value: "100%" },
|
||||
{ icon: "Code", label: "Uptime", value: "99.9%" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "UI Stack", description: "Modern component library.", bentoComponent: "tilted-stack-cards", stackCards: [
|
||||
{ icon: "Cpu", title: "Three.js", subtitle: "Graphics", detail: "3D Canvas" },
|
||||
{ icon: "Box", title: "React", subtitle: "UI", detail: "Component" },
|
||||
{ icon: "Layers", title: "Motion", subtitle: "Framer", detail: "Animation" },
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamOverlayCards
|
||||
tag="Our Experts"
|
||||
title="The Engineering Team"
|
||||
description="Meet the minds behind the digital transformation."
|
||||
members={[
|
||||
{
|
||||
name: "Alex Rivet",
|
||||
role: "Lead Dev",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Chen",
|
||||
role: "3D Designer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-african-american-programer-sitting-down-working-laptop-arranging-glasses-looking-up-smiling-camera-system-engineer-using-portable-computer-computing-big-data_482257-40598.jpg",
|
||||
},
|
||||
{
|
||||
name: "Marcello V",
|
||||
role: "System Arch",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-handsome-man-holding-tablet-computer-looking-straight-front_342744-405.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Our Experts"
|
||||
title="The Engineering Team"
|
||||
description="Meet the minds behind the digital transformation."
|
||||
members={[
|
||||
{ name: "Alex Rivet", role: "Lead Dev", imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg" },
|
||||
{ name: "Sarah Chen", role: "3D Designer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-african-american-programer-sitting-down-working-laptop-arranging-glasses-looking-up-smiling-camera-system-engineer-using-portable-computer-computing-big-data_482257-40598.jpg" },
|
||||
{ name: "Marcello V", role: "System Arch", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-handsome-man-holding-tablet-computer-looking-straight-front_342744-405.jpg" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="features-reveal" data-section="features-reveal">
|
||||
<SectionErrorBoundary name="features-reveal">
|
||||
<div id="features-reveal" data-section="features-reveal">
|
||||
<SectionErrorBoundary name="features-reveal">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Solutions"
|
||||
title="Our Core Offerings"
|
||||
description="Scalable digital architecture."
|
||||
items={[
|
||||
{
|
||||
title: "Web Dev",
|
||||
description: "High performance apps",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-end-empty-work-environment-used-business-industry-corporate-culture_482257-125734.jpg",
|
||||
},
|
||||
{
|
||||
title: "3D Graphics",
|
||||
description: "Three.js immersive",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/student-home-taking-notes-while-watching-presentation-closeup_482257-118737.jpg",
|
||||
},
|
||||
{
|
||||
title: "UI/UX",
|
||||
description: "User-centric design",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg",
|
||||
},
|
||||
{
|
||||
title: "Backend",
|
||||
description: "AWS Serverless",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-computers-data-center-running-server-rigs-diagnostic-tests_482257-123527.jpg",
|
||||
},
|
||||
{
|
||||
title: "Consulting",
|
||||
description: "Expert guidance",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-holographic-cube_23-2150979689.jpg",
|
||||
},
|
||||
{
|
||||
title: "Integration",
|
||||
description: "Headless CMS",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg",
|
||||
},
|
||||
{
|
||||
title: "Scaling",
|
||||
description: "Cloud growth",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/realistic-credit-card_23-2149129366.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Solutions"
|
||||
title="Our Core Offerings"
|
||||
description="Scalable digital architecture."
|
||||
items={[
|
||||
{ title: "Web Dev", description: "High performance apps", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/high-end-empty-work-environment-used-business-industry-corporate-culture_482257-125734.jpg" },
|
||||
{ title: "3D Graphics", description: "Three.js immersive", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/student-home-taking-notes-while-watching-presentation-closeup_482257-118737.jpg" },
|
||||
{ title: "UI/UX", description: "User-centric design", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg" },
|
||||
{ title: "Backend", description: "AWS Serverless", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/close-up-computers-data-center-running-server-rigs-diagnostic-tests_482257-123527.jpg" },
|
||||
{ title: "Consulting", description: "Expert guidance", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-holographic-cube_23-2150979689.jpg" },
|
||||
{ title: "Integration", description: "Headless CMS", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg" },
|
||||
{ title: "Scaling", description: "Cloud growth", href: "#", imageSrc: "http://img.b2bpic.net/free-vector/realistic-credit-card_23-2149129366.jpg" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Social Proof"
|
||||
title="Client Success"
|
||||
description="Partnering with global brands."
|
||||
testimonials={[
|
||||
{
|
||||
name: "John Doe",
|
||||
role: "CEO",
|
||||
quote: "Incredible 3D work.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-posing-with-coffee_23-2148452691.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jane Smith",
|
||||
role: "CTO",
|
||||
quote: "Game-changing development.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Wu",
|
||||
role: "Product",
|
||||
quote: "Exceptional precision.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
|
||||
},
|
||||
{
|
||||
name: "Anna P",
|
||||
role: "Founder",
|
||||
quote: "Scalable architecture.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232840.jpg",
|
||||
},
|
||||
{
|
||||
name: "Kyle Z",
|
||||
role: "Designer",
|
||||
quote: "Perfect visual execution.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Social Proof"
|
||||
title="Client Success"
|
||||
description="Partnering with global brands."
|
||||
testimonials={[
|
||||
{ name: "John Doe", role: "CEO", quote: "Incredible 3D work.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-posing-with-coffee_23-2148452691.jpg" },
|
||||
{ name: "Jane Smith", role: "CTO", quote: "Game-changing development.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg" },
|
||||
{ name: "David Wu", role: "Product", quote: "Exceptional precision.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg" },
|
||||
{ name: "Anna P", role: "Founder", quote: "Scalable architecture.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232840.jpg" },
|
||||
{ name: "Kyle Z", role: "Designer", quote: "Perfect visual execution.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Statistics"
|
||||
title="Proven Performance"
|
||||
description="Quantifiable results that matter."
|
||||
metrics={[
|
||||
{
|
||||
icon: Award,
|
||||
title: "Awards",
|
||||
value: "15+",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Clients",
|
||||
value: "50+",
|
||||
},
|
||||
{
|
||||
icon: Code,
|
||||
title: "Projects",
|
||||
value: "120+",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Statistics"
|
||||
title="Proven Performance"
|
||||
description="Quantifiable results that matter."
|
||||
metrics={[
|
||||
{ icon: "Award", title: "Awards", value: "15+" },
|
||||
{ icon: "Users", title: "Clients", value: "50+" },
|
||||
{ icon: "Code", title: "Projects", value: "120+" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Support"
|
||||
title="FAQs"
|
||||
description="Everything you need to know."
|
||||
items={[
|
||||
{
|
||||
question: "What 3D tools do you use?",
|
||||
answer: "We specialize in Three.js and React Three Fiber.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer maintenance?",
|
||||
answer: "Yes, we provide ongoing support and scalability.",
|
||||
},
|
||||
{
|
||||
question: "How long for a typical build?",
|
||||
answer: "We tailor timelines to specific project needs.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/white-light-stripes_23-2147798924.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Support"
|
||||
title="FAQs"
|
||||
description="Everything you need to know."
|
||||
items={[
|
||||
{ question: "What 3D tools do you use?", answer: "We specialize in Three.js and React Three Fiber." },
|
||||
{ question: "Do you offer maintenance?", answer: "Yes, we provide ongoing support and scalability." },
|
||||
{ question: "How long for a typical build?", answer: "We tailor timelines to specific project needs." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/white-light-stripes_23-2147798924.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Work with us"
|
||||
text="Ready to bring your vision to life?"
|
||||
primaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Github",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Work with us"
|
||||
text="Ready to bring your vision to life?"
|
||||
primaryButton={{ text: "Contact Us", href: "#" }}
|
||||
secondaryButton={{ text: "View Github", href: "#" }}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user