263 lines
12 KiB
TypeScript
263 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { Award, Headphones, Shield, Smile, Zap, PieChart, MessageSquare, Lock, Layout } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="largeSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Features", id: "features"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Nexus"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Design Your Future"
|
|
description="Innovative solutions tailored to elevate your business performance. We build modern, scalable systems for growth."
|
|
buttons={[
|
|
{
|
|
text: "Explore More", href: "#about"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-foliage-detail_23-2151913858.jpg?_wi=1"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/dried-leaf-plant_1150-10824.jpg", alt: "dried leaf plant"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/view-woman-wearing-stylish-fedora-hat_23-2150711574.jpg", alt: "View of woman wearing stylish fedora hat"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-view-famous-antelope-canyon-arizona-usa_181624-51636.jpg", alt: "Beautiful view of the famous Antelope Canyon, Arizona, USA"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/vertical-closeup-shot-female-wearing-brown-dress-metallic-leaf-shaped-ring_181624-23911.jpg", alt: "Vertical closeup shot of a female wearing a brown dress and a metallic leaf-shaped ring"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/zen-arch-poster-set-modern-boho-linear-geometric-shapes-lines-simple-figures-pastel-colors-vector_88138-1694.jpg", alt: "Zen arch poster set modern boho linear geometric shapes lines simple figures in pastel colors vector"},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Scalable Growth"},
|
|
{
|
|
type: "text", text: "Modern Architecture"},
|
|
{
|
|
type: "text", text: "Data Analytics"},
|
|
{
|
|
type: "text", text: "Global Security"},
|
|
{
|
|
type: "text", text: "Customer Success"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
useInvertedBackground={true}
|
|
tag="Our Mission"
|
|
title="A New Way To Build"
|
|
description="We specialize in creating intuitive digital experiences that drive engagement and business success."
|
|
subdescription="Our team uses cutting-edge methodology to ensure your projects stand out in a competitive market."
|
|
icon={Shield}
|
|
imageSrc="http://img.b2bpic.net/free-photo/adult-male-illustrator-working-tablet-device_23-2149863235.jpg?_wi=1"
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Scalable Infrastructure", description: "Robust architecture built to handle unlimited growth.", buttonIcon: Zap,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-female-with-pink-hair-sitting-her-workplace-typing-keyboard-drinking-tea-using_343059-198.jpg", imageAlt: "Stylish young female with pink hair sitting at her workplace typing on keyboard drinking tea using"},
|
|
{
|
|
title: "Advanced Analytics", description: "Data-driven insights for smarter business decisions.", buttonIcon: PieChart,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-foliage-detail_23-2151913858.jpg?_wi=2", imageAlt: "Stylish young female with pink hair sitting at her workplace typing on keyboard drinking tea using"},
|
|
{
|
|
title: "Real-time Support", description: "24/7 dedicated assistance for your team.", buttonIcon: MessageSquare,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/adult-male-illustrator-working-tablet-device_23-2149863235.jpg?_wi=2", imageAlt: "Stylish young female with pink hair sitting at her workplace typing on keyboard drinking tea using"},
|
|
{
|
|
title: "Secure Workflow", description: "Enterprise-grade security standards included.", buttonIcon: Lock,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling_1187-3196.jpg?_wi=1", imageAlt: "Stylish young female with pink hair sitting at her workplace typing on keyboard drinking tea using"},
|
|
{
|
|
title: "Design Systems", description: "Cohesive brand identities built to last.", buttonIcon: Layout,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-age-concept-close-up-portrait-positive-elegant-60-year-old-female-with-gray-hair-wrinkled-face-posing-against-white-brick-wall_344912-1854.jpg?_wi=1", imageAlt: "Stylish young female with pink hair sitting at her workplace typing on keyboard drinking tea using"},
|
|
]}
|
|
title="Core Capabilities"
|
|
description="Everything you need to manage your business effectively."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Jane Doe", role: "CEO", company: "Growth Co", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling_1187-3196.jpg?_wi=2"},
|
|
{
|
|
id: "2", name: "John Smith", role: "CTO", company: "Tech Corp", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-age-concept-close-up-portrait-positive-elegant-60-year-old-female-with-gray-hair-wrinkled-face-posing-against-white-brick-wall_344912-1854.jpg?_wi=2"},
|
|
{
|
|
id: "3", name: "Sarah Lee", role: "Design Lead", company: "Creative Lab", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-keeping-hands-hips-outdoors_1262-20425.jpg"},
|
|
{
|
|
id: "4", name: "Mike Brown", role: "Manager", company: "Startup Inc", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/headshot-funny-black-woman-with-curly-hair-laughs-good-joke-has-toothy-smile-shows-white-perfect-teeth-wears-striped-casual-t-shirt-poses-terrace-cafeteria_273609-29078.jpg"},
|
|
{
|
|
id: "5", name: "Emily White", role: "Founder", company: "Brand Agency", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-teenage-girl-sitting-cafe_1262-3048.jpg"},
|
|
]}
|
|
title="Trusted by Leaders"
|
|
description="See why top professionals choose our platform."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "150+", title: "Projects Completed", description: "Successful deliveries worldwide.", icon: Award,
|
|
},
|
|
{
|
|
id: "m2", value: "98%", title: "Client Satisfaction", description: "Consistently high rating.", icon: Smile,
|
|
},
|
|
{
|
|
id: "m3", value: "24/7", title: "Global Support", description: "Always ready to assist.", icon: Headphones,
|
|
},
|
|
]}
|
|
title="Impact In Numbers"
|
|
description="Our track record demonstrates clear results for our partners."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "basic", badge: "Essential", price: "$29", subtitle: "For small teams", features: [
|
|
"Core features", "1 User seat", "Email support"],
|
|
},
|
|
{
|
|
id: "pro", badge: "Pro", price: "$89", subtitle: "For growing business", features: [
|
|
"Advanced features", "5 User seats", "Priority support"],
|
|
},
|
|
{
|
|
id: "ent", badge: "Enterprise", price: "Contact us", subtitle: "For large operations", features: [
|
|
"Custom solution", "Unlimited users", "24/7 support"],
|
|
},
|
|
]}
|
|
title="Flexible Pricing"
|
|
description="Simple plans designed for teams of any size."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "How do we start?", content: "Reach out via our contact page and we'll schedule a discovery call."},
|
|
{
|
|
id: "q2", title: "Is support included?", content: "Yes, we offer multiple tiers of dedicated support for all our plans."},
|
|
{
|
|
id: "q3", title: "Can I upgrade anytime?", content: "Absolutely. You can change your plan at any point."},
|
|
]}
|
|
title="Common Questions"
|
|
description="Get clear answers about our services."
|
|
faqsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={true}
|
|
title="Get In Touch"
|
|
description="Have questions? We are here to help."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Email Address", required: true,
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/desk-office-with-objects_23-2147982285.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-vector/boho-zen-arch-posters-with-abstract-linear-geometric-shapes-golden-elements_88138-1727.jpg"
|
|
logoText="Nexus"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{
|
|
label: "Features", href: "#features"},
|
|
{
|
|
label: "Pricing", href: "#pricing"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About", href: "#about"},
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|