286 lines
9.6 KiB
TypeScript
286 lines
9.6 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="large"
|
|
background="aurora"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Products",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Solutions",
|
|
id: "solutions",
|
|
},
|
|
{
|
|
name: "Enterprise",
|
|
id: "enterprise",
|
|
},
|
|
]}
|
|
brandName="Datacore"
|
|
button={{
|
|
text: "Login",
|
|
href: "/login",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Your Networks. One Rapid Interface."
|
|
description="Streamline your connectivity and manage your infrastructure with Datacore's unified, lightning-fast dashboard built for modern engineering teams."
|
|
testimonials={[
|
|
{
|
|
name: "Alice Chen",
|
|
handle: "@ac",
|
|
testimonial: "Datacore changed how we manage our entire edge network.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-92084.jpg?_wi=1",
|
|
imageAlt: "abstract technology background data flow",
|
|
},
|
|
{
|
|
name: "Mark Stevens",
|
|
handle: "@mstevens",
|
|
testimonial: "Rapid, reliable, and perfectly integrated.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-technology-background-with-plexus-design_1048-14928.jpg?_wi=1",
|
|
imageAlt: "abstract technology background data flow",
|
|
},
|
|
{
|
|
name: "Elena Rodriguez",
|
|
handle: "@elenar",
|
|
testimonial: "The best interface in the networking space.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background_1258-69112.jpg?_wi=1",
|
|
imageAlt: "abstract technology background data flow",
|
|
},
|
|
{
|
|
name: "Sam Patel",
|
|
handle: "@spatel",
|
|
testimonial: "A massive improvement to our daily workflow.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-with-connecting-lines-dots-modern-communications_1048-13763.jpg?_wi=1",
|
|
imageAlt: "abstract technology background data flow",
|
|
},
|
|
{
|
|
name: "Julia Wong",
|
|
handle: "@juliaw",
|
|
testimonial: "Datacore is the standard for modern networking.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-background-with-light-sunset-projector-lamp_53876-103667.jpg?_wi=1",
|
|
imageAlt: "abstract technology background data flow",
|
|
},
|
|
]}
|
|
tag="Say Hello to Datacore v3.2"
|
|
tagAnimation="blur-reveal"
|
|
buttons={[
|
|
{
|
|
text: "Book a Free Demo",
|
|
href: "#demo",
|
|
},
|
|
{
|
|
text: "Get Started Now",
|
|
href: "#start",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-92084.jpg?_wi=2"
|
|
imageAlt="Datacore Network Interface Dashboard"
|
|
mediaAnimation="opacity"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/3d-render-modern-technology-background-with-plexus-design_1048-14928.jpg",
|
|
alt: "User 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background_1258-69112.jpg",
|
|
alt: "User 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/3d-render-abstract-with-connecting-lines-dots-modern-communications_1048-13763.jpg",
|
|
alt: "User 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/aesthetic-background-with-light-sunset-projector-lamp_53876-103667.jpg",
|
|
alt: "User 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-92084.jpg",
|
|
alt: "User 5",
|
|
},
|
|
]}
|
|
avatarText="Trusted by 500+ engineers"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Rapid Deployment",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Zero Latency",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Secure Infrastructure",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Edge Networking",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Unified Interface",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="feature" data-section="feature">
|
|
<FeatureCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
title="Built for Modern Scalability"
|
|
description="Powerful tools designed to keep your team ahead of the curve, providing seamless integration across all your network assets."
|
|
tag="Advanced Capabilities"
|
|
features={[
|
|
{
|
|
title: "Automated Routing",
|
|
description: "Intelligent traffic shaping that learns from your network patterns.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-technology-background-with-plexus-design_1048-14928.jpg?_wi=2",
|
|
imageAlt: "Feature 1",
|
|
},
|
|
{
|
|
title: "Real-time Monitoring",
|
|
description: "Instant insights with sub-millisecond telemetry updates.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background_1258-69112.jpg?_wi=2",
|
|
imageAlt: "Feature 2",
|
|
},
|
|
{
|
|
title: "Global Edge Sync",
|
|
description: "Deploy configurations globally in seconds, not hours.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-with-connecting-lines-dots-modern-communications_1048-13763.jpg?_wi=2",
|
|
imageAlt: "Feature 3",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Transparent Scaling Plans"
|
|
description="Choose the tier that fits your engineering team's growth trajectory."
|
|
plans={[
|
|
{
|
|
id: "p1",
|
|
badge: "Pro",
|
|
price: "$49/mo",
|
|
subtitle: "For growing teams",
|
|
buttons: [
|
|
{
|
|
text: "Get Started",
|
|
href: "#",
|
|
},
|
|
],
|
|
features: [
|
|
"Feature A",
|
|
"Feature B",
|
|
"Feature C",
|
|
],
|
|
},
|
|
{
|
|
id: "p2",
|
|
badge: "Enterprise",
|
|
price: "Custom",
|
|
subtitle: "For global scale",
|
|
buttons: [
|
|
{
|
|
text: "Contact Sales",
|
|
href: "#",
|
|
},
|
|
],
|
|
features: [
|
|
"Everything in Pro",
|
|
"Dedicated Support",
|
|
"SLA Guarantee",
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Common Questions"
|
|
description="Everything you need to know about setting up your Datacore environment."
|
|
imageSrc="http://img.b2bpic.net/free-photo/aesthetic-background-with-light-sunset-projector-lamp_53876-103667.jpg?_wi=2"
|
|
imageAlt="FAQ Background"
|
|
mediaAnimation="opacity"
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "Is Datacore hard to integrate?",
|
|
content: "Our API-first approach makes integration simple.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "Can I switch plans later?",
|
|
content: "Yes, you can upgrade or downgrade at any time via your dashboard.",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Trusted by Industry Leaders"
|
|
description="Join hundreds of innovative engineering teams relying on our infrastructure."
|
|
names={[
|
|
"Nexus Corp",
|
|
"Velocity Systems",
|
|
"EdgeScale",
|
|
"Cloudify",
|
|
"DataStream",
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|