467 lines
21 KiB
TypeScript
467 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import Link from "next/link";
|
|
import {
|
|
Zap,
|
|
Shield,
|
|
BarChart3,
|
|
Cloud,
|
|
Cpu,
|
|
Lock,
|
|
AlertCircle,
|
|
CheckCircle,
|
|
TrendingUp,
|
|
Star,
|
|
Users,
|
|
HelpCircle,
|
|
Award,
|
|
Sparkles,
|
|
} from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="TechFlow"
|
|
bottomLeftText="Global Tech Innovation"
|
|
bottomRightText="hello@techflow.io"
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Section */}
|
|
<div id="hero-home" data-section="hero-home">
|
|
<HeroLogoBillboardSplit
|
|
logoText="TechFlow"
|
|
description="Enterprise-grade IT solutions and intelligent admin platform for modern businesses. Streamline operations, enhance security, and scale with confidence."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
buttons={[
|
|
{ text: "Get Started", href: "/admin" },
|
|
{ text: "Learn More", href: "/services" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
layoutOrder="default"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/modern-enterprise-admin-dashboard-interf-1773468420933-474db6cb.png"
|
|
imageAlt="TechFlow Admin Dashboard Interface"
|
|
mediaAnimation="blur-reveal"
|
|
frameStyle="browser"
|
|
ariaLabel="TechFlow Hero Section"
|
|
containerClassName="relative z-10"
|
|
/>
|
|
</div>
|
|
|
|
{/* About Section */}
|
|
<div id="about-home" data-section="about-home">
|
|
<MetricSplitMediaAbout
|
|
title="Empowering Businesses Through Technology"
|
|
description="TechFlow is a leading IT solutions provider specializing in cloud infrastructure, cybersecurity, and intelligent admin platforms. Since 2020, we've helped 500+ companies optimize their digital operations and achieve remarkable growth."
|
|
metrics={[
|
|
{ value: "500+", title: "Enterprise Clients" },
|
|
{ value: "99.9%", title: "Uptime Guarantee" },
|
|
{ value: "24/7", title: "Expert Support" },
|
|
{ value: "50+", title: "Tech Specialists" },
|
|
]}
|
|
useInvertedBackground={false}
|
|
tag="Our Story"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/diverse-team-of-it-professionals-collabo-1773468420811-b9a2b872.png"
|
|
imageAlt="TechFlow Team Collaboration"
|
|
mediaAnimation="blur-reveal"
|
|
metricsAnimation="slide-up"
|
|
ariaLabel="About TechFlow"
|
|
containerClassName="py-20"
|
|
/>
|
|
</div>
|
|
|
|
{/* Features Section */}
|
|
<div id="features-home" data-section="features-home">
|
|
<FeatureCardTen
|
|
title="Comprehensive Platform Features"
|
|
description="Our integrated suite of tools provides everything you need to manage, monitor, and scale your IT infrastructure."
|
|
tag="Why Choose Us"
|
|
tagIcon={Shield}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "feature-1",
|
|
title: "Intelligent Admin Dashboard",
|
|
description: "Real-time monitoring and control of all infrastructure with intuitive visualizations and actionable insights.",
|
|
media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/detailed-admin-dashboard-interface-showi-1773468422688-f331c990.png",
|
|
imageAlt: "Admin Dashboard",
|
|
},
|
|
items: [
|
|
{ icon: Zap, text: "Lightning-fast performance metrics" },
|
|
{ icon: Shield, text: "Enterprise security protocols" },
|
|
{ icon: BarChart3, text: "Detailed analytics reporting" },
|
|
],
|
|
reverse: false,
|
|
},
|
|
{
|
|
id: "feature-2",
|
|
title: "Cloud Infrastructure Management",
|
|
description: "Seamless deployment, scaling, and optimization across multiple cloud providers with unified control.",
|
|
media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/cloud-infrastructure-visualization-showi-1773468420964-65b9027d.png",
|
|
imageAlt: "Cloud Infrastructure",
|
|
},
|
|
items: [
|
|
{ icon: Cloud, text: "Multi-cloud orchestration" },
|
|
{ icon: Cpu, text: "Auto-scaling capabilities" },
|
|
{ icon: Lock, text: "Compliance management" },
|
|
],
|
|
reverse: true,
|
|
},
|
|
{
|
|
id: "feature-3",
|
|
title: "Advanced Security Suite",
|
|
description: "Comprehensive threat detection, prevention, and response powered by machine learning algorithms.",
|
|
media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/advanced-security-monitoring-interface-d-1773468421341-fd67e368.png",
|
|
imageAlt: "Security Monitoring",
|
|
},
|
|
items: [
|
|
{ icon: Shield, text: "Real-time threat detection" },
|
|
{ icon: AlertCircle, text: "Automated incident response" },
|
|
{ icon: CheckCircle, text: "Compliance certification" },
|
|
],
|
|
reverse: false,
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="blur-reveal"
|
|
useInvertedBackground={false}
|
|
containerClassName="py-24"
|
|
/>
|
|
</div>
|
|
|
|
{/* Products Section */}
|
|
<div id="products-home" data-section="products-home">
|
|
<ProductCardFour
|
|
title="Our Solutions"
|
|
description="Discover our full range of IT solutions tailored to drive your business forward."
|
|
tag="Products"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "prod-1",
|
|
name: "CloudVault Pro",
|
|
price: "Contact Sales",
|
|
variant: "Enterprise",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/cloudvault-pro-product-interface-showing-1773468420848-c2bce498.png",
|
|
imageAlt: "CloudVault Pro - Cloud Infrastructure Platform",
|
|
},
|
|
{
|
|
id: "prod-2",
|
|
name: "SecureNet AI",
|
|
price: "Contact Sales",
|
|
variant: "Advanced",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/securenet-ai-interface-with-artificial-i-1773468421822-ed1d2826.png",
|
|
imageAlt: "SecureNet AI - AI-Powered Security Platform",
|
|
},
|
|
{
|
|
id: "prod-3",
|
|
name: "AdminHub Suite",
|
|
price: "Contact Sales",
|
|
variant: "Complete",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/adminhub-suite-comprehensive-management--1773468420999-cdaae29c.png",
|
|
imageAlt: "AdminHub Suite - Unified Admin Platform",
|
|
},
|
|
{
|
|
id: "prod-4",
|
|
name: "DataSync Analytics",
|
|
price: "Contact Sales",
|
|
variant: "Pro",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/datasync-analytics-platform-showing-real-1773468421956-23253e8b.png",
|
|
imageAlt: "DataSync Analytics - Real-time Analytics Engine",
|
|
},
|
|
]}
|
|
gridVariant="asymmetric-60-wide-40-narrow"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
containerClassName="py-24"
|
|
/>
|
|
</div>
|
|
|
|
{/* Metrics Section */}
|
|
<div id="metrics-home" data-section="metrics-home">
|
|
<MetricCardTwo
|
|
title="Our Impact"
|
|
description="Proven results delivered to our enterprise clients worldwide."
|
|
metrics={[
|
|
{ id: "metric-1", value: "99.99%", description: "System Availability" },
|
|
{ id: "metric-2", value: "2.3x", description: "Average Efficiency Gain" },
|
|
{ id: "metric-3", value: "$2.5M", description: "Total Cost Savings" },
|
|
{ id: "metric-4", value: "156", description: "Enterprise Deployments" },
|
|
{ id: "metric-5", value: "50", description: "AWS Certifications" },
|
|
{ id: "metric-6", value: "24/7", description: "Support Coverage" },
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="Performance"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
containerClassName="py-20"
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div id="testimonials-home" data-section="testimonials-home">
|
|
<TestimonialCardOne
|
|
title="What Our Clients Say"
|
|
description="Real feedback from companies using TechFlow solutions."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "testi-1",
|
|
name: "John Morrison",
|
|
role: "CTO",
|
|
company: "TechVentures Inc.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/professional-headshot-portrait-of-a-male-1773468420691-36a9fc29.png",
|
|
imageAlt: "John Morrison testimonial",
|
|
},
|
|
{
|
|
id: "testi-2",
|
|
name: "Lisa Zhang",
|
|
role: "Operations Director",
|
|
company: "Global Solutions Ltd.",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/professional-headshot-of-a-confident-fem-1773468419938-3f0e2faa.png",
|
|
imageAlt: "Lisa Zhang testimonial",
|
|
},
|
|
{
|
|
id: "testi-3",
|
|
name: "David Kumar",
|
|
role: "IT Manager",
|
|
company: "Innovation Corp",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/professional-portrait-of-a-male-it-manag-1773468420326-ab1e03bd.png",
|
|
imageAlt: "David Kumar testimonial",
|
|
},
|
|
{
|
|
id: "testi-4",
|
|
name: "Rachel Evans",
|
|
role: "VP Engineering",
|
|
company: "FutureSoft Systems",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/professional-headshot-of-a-female-vp-of--1773468419537-f1a135a2.png",
|
|
imageAlt: "Rachel Evans testimonial",
|
|
},
|
|
{
|
|
id: "testi-5",
|
|
name: "Michael Park",
|
|
role: "Chief Architect",
|
|
company: "DataFlow Analytics",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/professional-portrait-of-a-male-chief-ar-1773468421014-090930fd.png",
|
|
imageAlt: "Michael Park testimonial",
|
|
},
|
|
{
|
|
id: "testi-6",
|
|
name: "Amanda Cross",
|
|
role: "Security Officer",
|
|
company: "Enterprise Security Group",
|
|
rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/professional-portrait-of-a-female-securi-1773468420473-b555f6a5.png",
|
|
imageAlt: "Amanda Cross testimonial",
|
|
},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
containerClassName="py-20"
|
|
/>
|
|
</div>
|
|
|
|
{/* Social Proof Section */}
|
|
<div id="socialproof-home" data-section="socialproof-home">
|
|
<SocialProofOne
|
|
title="Trusted by Industry Leaders"
|
|
description="Our platform powers operations at Fortune 500 companies and innovative startups."
|
|
names={[
|
|
"TechCorp Global",
|
|
"CloudInnovate Systems",
|
|
"Enterprise Digital",
|
|
"NextGen Solutions",
|
|
"DataFlow Analytics",
|
|
"Cyber Security Plus",
|
|
"Innovation Labs",
|
|
"Global Tech Partners",
|
|
"Digital Transform Inc",
|
|
]}
|
|
logos={[
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/professional-tech-company-logo-for-techc-1773468419689-cc00323e.png",
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/cloudinnovate-systems-logo-modern-cloud--1773468419878-c9e5068f.png",
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/enterprise-digital-logo-professional-cor-1773468421317-063e9537.png",
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/nextgen-solutions-logo-forward-thinking--1773468420524-013385c4.png",
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/dataflow-analytics-logo-design-represent-1773468420502-f4974014.png",
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/cyber-security-plus-logo-professional-se-1773468420953-1dc19014.png",
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/innovation-labs-logo-design-representing-1773468420196-bebd5c16.png",
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/global-tech-partners-logo-design-represe-1773468419661-f3d8edf1.png",
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AvLudIr4ncsBbBgCQiecCKQUgi/digital-transform-inc-logo-brand-mark-re-1773468422565-607c8059.png",
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
showCard={true}
|
|
speed={40}
|
|
tag="Partners"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
containerClassName="py-16"
|
|
/>
|
|
</div>
|
|
|
|
{/* FAQ Section */}
|
|
<div id="faq-home" data-section="faq-home">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our IT solutions and admin platform."
|
|
faqs={[
|
|
{
|
|
id: "faq-1",
|
|
title: "What is the TechFlow Admin Platform?",
|
|
content: "TechFlow Admin Platform is an enterprise-grade solution that provides unified management, monitoring, and automation of your entire IT infrastructure. It integrates with multiple cloud providers and supports comprehensive resource management.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
title: "What security measures does TechFlow implement?",
|
|
content: "We implement military-grade encryption, multi-factor authentication, regular penetration testing, and continuous compliance monitoring. All data is encrypted in transit and at rest with SOC 2 Type II certification.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
title: "What is your uptime SLA?",
|
|
content: "We guarantee 99.99% uptime with redundant systems across multiple geographic regions. Our infrastructure includes automatic failover and real-time monitoring with 24/7 support team response.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
title: "How does pricing work?",
|
|
content: "TechFlow uses a flexible pricing model based on resource consumption and features. We offer custom enterprise pricing, volume discounts, and no long-term contracts required. Contact our sales team for a personalized quote.",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
title: "Can TechFlow integrate with existing systems?",
|
|
content: "Yes, TechFlow provides comprehensive API documentation and pre-built integrations with popular enterprise tools. Our team can also develop custom integrations based on your specific requirements.",
|
|
},
|
|
{
|
|
id: "faq-6",
|
|
title: "What support options are available?",
|
|
content: "We offer 24/7/365 email, phone, and chat support. Premium packages include dedicated account managers, priority response times, and custom SLAs tailored to your organization.",
|
|
},
|
|
]}
|
|
tag="Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
showCard={true}
|
|
animationType="smooth"
|
|
containerClassName="py-20"
|
|
/>
|
|
</div>
|
|
|
|
{/* Contact Section */}
|
|
<div id="contact-page" data-section="contact-page">
|
|
<ContactText
|
|
text="Ready to transform your IT operations? Get in touch with our team to schedule a personalized demo and discover how TechFlow can streamline your enterprise infrastructure."
|
|
animationType="reveal-blur"
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "/admin" },
|
|
{ text: "Schedule Demo", href: "#" },
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
ariaLabel="Get in touch with TechFlow"
|
|
containerClassName="py-32"
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="TechFlow"
|
|
copyrightText="© 2025 TechFlow Inc. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{ label: "Admin Dashboard", href: "/admin" },
|
|
{ label: "Cloud Solutions", href: "/services" },
|
|
{ label: "Security Suite", href: "/services" },
|
|
{ label: "Analytics Platform", href: "/services" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Our Team", href: "/about" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "API Reference", href: "#" },
|
|
{ label: "Support Center", href: "#" },
|
|
{ label: "Community Forum", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Security Policy", href: "#" },
|
|
{ label: "Compliance", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
containerClassName="py-16"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |