285 lines
16 KiB
TypeScript
285 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { Award, Calendar, Cpu, Shield, Star, TrendingUp, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="large"
|
|
background="aurora"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="TechVision"
|
|
navItems={[
|
|
{ name: "Solutions", id: "solutions" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Get Started", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="3D Tech Solutions for Modern Enterprise"
|
|
description="Experience the future of IT infrastructure with immersive 3D visualization and interactive depth. Our cutting-edge platform transforms complex technology into intuitive, engaging digital experiences."
|
|
background="aurora"
|
|
tag="Next Generation Technology"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore Solutions", href: "#solutions" },
|
|
{ text: "Schedule Demo", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/a-stunning-3d-tech-dashboard-with-floati-1773943800676-72d093c5.png"
|
|
imageAlt="3D Tech Dashboard Interface"
|
|
ariaLabel="Hero section - 3D Tech Solutions"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
title="Pioneering IT Innovation Since 2015"
|
|
description="We transform enterprise technology through immersive 3D solutions and interactive digital experiences. Our team combines deep technical expertise with creative vision to deliver solutions that engage, inspire, and drive measurable results."
|
|
metrics={[
|
|
{ value: "500+", title: "Enterprise Clients" },
|
|
{ value: "99.9%", title: "System Uptime" },
|
|
{ value: "180M+", title: "Users Worldwide" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
tag="About Us"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/modern-tech-team-collaboration-scene-wit-1773943801309-cb0da8d6.png"
|
|
imageAlt="Tech team collaboration with 3D interfaces"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
ariaLabel="About section - Company metrics and mission"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyOne
|
|
title="Advanced Technology Features"
|
|
description="Discover the core technologies powering next-generation IT solutions with interactive 3D visualization and immersive depth perception."
|
|
tag="Technology Stack"
|
|
tagIcon={Cpu}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Learn More", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
accordionItems={[
|
|
{
|
|
id: "ai-ml", title: "AI & Machine Learning", content: "Harness the power of artificial intelligence with advanced machine learning algorithms. Our 3D visualization engine brings complex neural networks to life, enabling real-time insights and predictive analytics with unparalleled depth and interactivity."
|
|
},
|
|
{
|
|
id: "cloud", title: "Cloud Infrastructure", content: "Enterprise-grade cloud computing with global redundancy and 99.9% uptime guarantee. Experience seamless scalability with our interactive 3D cloud management interface, providing complete visibility into your entire infrastructure architecture."
|
|
},
|
|
{
|
|
id: "security", title: "Advanced Security", content: "Multi-layered cybersecurity framework with real-time threat detection. Visualize your security posture in stunning 3D, with interactive threat mapping and immediate response capabilities keeping your enterprise protected."
|
|
},
|
|
{
|
|
id: "automation", title: "Process Automation", content: "Intelligent automation workflows that reduce operational overhead by up to 70%. Our 3D workflow visualization engine provides complete transparency into every automated process with interactive monitoring and control."
|
|
}
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/3d-artificial-intelligence-and-machine-l-1773943801114-bbdaca02.png?_wi=1"
|
|
imageAlt="3D AI and Machine Learning visualization"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
mediaPosition="right"
|
|
ariaLabel="Features section - Advanced technology capabilities"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<ProductCardTwo
|
|
title="Enterprise IT Solutions"
|
|
description="Comprehensive suite of IT services designed for modern enterprises seeking innovative 3D-enabled platforms and interactive technology solutions."
|
|
tag="Services"
|
|
tagIcon={Shield}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "View All Services", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "service-1", brand: "Enterprise", name: "Cloud Solutions", price: "Starting at $5K/mo", rating: 5,
|
|
reviewCount: "340", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/3d-cloud-computing-infrastructure-visual-1773943802249-e89275e5.png", imageAlt: "3D Cloud Infrastructure"
|
|
},
|
|
{
|
|
id: "service-2", brand: "Enterprise", name: "Security Suite", price: "Starting at $3K/mo", rating: 5,
|
|
reviewCount: "298", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/3d-cybersecurity-visualization-with-shie-1773943800805-1b40f171.png", imageAlt: "Advanced Cybersecurity Platform"
|
|
},
|
|
{
|
|
id: "service-3", brand: "Enterprise", name: "AI Platform", price: "Starting at $7K/mo", rating: 5,
|
|
reviewCount: "412", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/3d-artificial-intelligence-and-machine-l-1773943801114-bbdaca02.png?_wi=2", imageAlt: "3D AI Visualization Engine"
|
|
}
|
|
]}
|
|
ariaLabel="Services section - Enterprise IT solutions"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Performance Metrics"
|
|
description="Real-time analytics and performance indicators showcasing the impact of our 3D technology solutions across global enterprises."
|
|
tag="Results"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "metric-1", value: "45%", title: "Performance Boost", description: "Average improvement in system performance and user engagement"
|
|
},
|
|
{
|
|
id: "metric-2", value: "60%", title: "Cost Reduction", description: "Operational expenses decreased through automation and optimization"
|
|
},
|
|
{
|
|
id: "metric-3", value: "98%", title: "Satisfaction Rate", description: "Client satisfaction with our interactive 3D platform and support"
|
|
},
|
|
{
|
|
id: "metric-4", value: "24/7", title: "Support Available", description: "Round-the-clock technical support and monitoring services"
|
|
}
|
|
]}
|
|
ariaLabel="Metrics section - Performance indicators"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="What Enterprise Leaders Say"
|
|
description="Hear from industry leaders how our 3D tech solutions transformed their IT infrastructure and digital experiences."
|
|
tag="Client Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", name: "Michael Chen", role: "CEO", testimonial: "The 3D visualization platform completely transformed how we manage our IT infrastructure. The interactive depth and real-time analytics have made complex systems intuitive and engaging for our entire team.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/professional-headshot-of-a-satisfied-tec-1773943801281-31197051.png", imageAlt: "Michael Chen - CEO"
|
|
},
|
|
{
|
|
id: "testimonial-2", name: "Sarah Johnson", role: "CTO", testimonial: "Implementing their solution reduced our operational overhead by 60%. The 3D interface makes it easier for our team to identify issues and respond faster than ever before.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/professional-headshot-of-a-female-tech-d-1773943800585-954dc21e.png", imageAlt: "Sarah Johnson - CTO"
|
|
},
|
|
{
|
|
id: "testimonial-3", name: "David Rodriguez", role: "VP Technology", testimonial: "Best IT investment we've made. The immersive 3D experience has improved team productivity and client engagement significantly. Highly recommended for any enterprise.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/professional-headshot-of-a-male-cto-or-t-1773943800901-51804103.png", imageAlt: "David Rodriguez - VP Technology"
|
|
},
|
|
{
|
|
id: "testimonial-4", name: "Emma Williams", role: "Operations Director", testimonial: "The interactive depth perception in their platform gives us unprecedented visibility into our systems. Our downtime has decreased by 70% since implementation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAtOQOfQWjaopMUbHz5SqXyhxC/professional-headshot-of-a-business-deve-1773943800202-17a5a31e.png", imageAlt: "Emma Williams - Operations Director"
|
|
}
|
|
]}
|
|
ariaLabel="Testimonials section - Client success stories"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Ready to Transform Your IT Infrastructure?"
|
|
ctaDescription="Schedule a personalized demo of our 3D tech solutions platform. Our specialists will show you how to deliver interactive experiences that engage and inspire."
|
|
ctaButton={{
|
|
text: "Schedule Your Demo", href: "mailto:demo@techvision.com"
|
|
}}
|
|
ctaIcon={Calendar}
|
|
useInvertedBackground={false}
|
|
animationType="scale-rotate"
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "How quickly can we implement your solution?", content: "Our implementation process typically takes 4-8 weeks depending on your infrastructure complexity. We provide dedicated support and training throughout the entire deployment phase."
|
|
},
|
|
{
|
|
id: "faq-2", title: "What kind of support do you offer?", content: "We provide 24/7 technical support, regular maintenance, security updates, and quarterly optimization reviews to ensure peak performance of your 3D platform."
|
|
},
|
|
{
|
|
id: "faq-3", title: "Can the solution integrate with our existing systems?", content: "Yes, our platform is designed for seamless integration with existing enterprise systems. We support all major technologies and provide custom integration solutions as needed."
|
|
},
|
|
{
|
|
id: "faq-4", title: "What about data security and compliance?", content: "We maintain SOC 2 Type II, ISO 27001, and GDPR compliance. All data is encrypted, with multi-region redundancy and comprehensive audit trails for complete transparency."
|
|
},
|
|
{
|
|
id: "faq-5", title: "How do we measure ROI?", content: "We provide detailed analytics and reporting showing performance improvements, cost savings, and productivity gains. Average clients see 40%+ reduction in operational costs within the first year."
|
|
},
|
|
{
|
|
id: "faq-6", title: "Is training included?", content: "Comprehensive training is included for all staff members. We offer live workshops, on-demand video tutorials, and ongoing support documentation."
|
|
}
|
|
]}
|
|
ariaLabel="Contact and FAQ section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="TechVision"
|
|
copyrightText="© 2025 TechVision Labs. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "Pricing", href: "#contact" },
|
|
{ label: "Security", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "API Reference", href: "#" },
|
|
{ label: "Tutorials", href: "#" },
|
|
{ label: "Support", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "GDPR", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|