344 lines
14 KiB
TypeScript
344 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import { BarChart2, Crown, Key, Leaf, LineChart, Lock, Share2, ShieldCheck, Star, Zap, RefreshCcw, AreaChart } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Features", id: "#features"},
|
|
{
|
|
name: "Pricing", id: "#pricing"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
button={{
|
|
text: "Get Started", href: "#contact"}}
|
|
brandName="THE PE4K"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
title="Reach THE PE4K of Digital Innovation"
|
|
description="Empowering your business with cutting-edge technology and strategic insights to scale new heights. Discover solutions that redefine possibilities."
|
|
buttons={[
|
|
{
|
|
text: "Explore Solutions", href: "#features"},
|
|
{
|
|
text: "Get a Quote", href: "#contact"},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-low-poly-abstract-background-with-connecting-lines-dots_1048-11673.jpg", imageAlt: "Futuristic data visualization interface"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-futuristic-digital-technology-background_53876-104787.jpg", imageAlt: "Abstract digital brain neural network"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/sky-april-18-2024_58702-17111.jpg", imageAlt: "Mountain peak silhouette with digital overlay"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-colleagues-pitching-investment-strategy-manager_482257-123615.jpg", imageAlt: "Sleek minimalist office environment"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/global-communication-phone-wallpaper-business-network-design_53876-160272.jpg", imageAlt: "Abstract geometric shapes growth connection"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-working-home-night_23-2149090962.jpg", imageAlt: "Modern workspace with laptop dashboard"},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={true}
|
|
tag="About Us"
|
|
title="Driving Future-Forward Growth with Advanced Solutions"
|
|
buttons={[
|
|
{
|
|
text: "Our Mission", href: "#"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Seamless Integration", description: "Connect effortlessly with your existing tools and workflows, enhancing productivity without disruption.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572131.jpg", imageAlt: "Seamless integration network"},
|
|
items: [
|
|
{
|
|
icon: Share2,
|
|
text: "API-first design"},
|
|
{
|
|
icon: Zap,
|
|
text: "Real-time sync"},
|
|
{
|
|
icon: RefreshCcw,
|
|
text: "Automated updates"},
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
title: "Advanced Security", description: "Protect your data with enterprise-grade encryption and robust security protocols, ensuring peace of mind.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-concept-illustration_23-2151883586.jpg", imageAlt: "Digital shield data protection"},
|
|
items: [
|
|
{
|
|
icon: ShieldCheck,
|
|
text: "End-to-end encryption"},
|
|
{
|
|
icon: Key,
|
|
text: "Multi-factor authentication"},
|
|
{
|
|
icon: Lock,
|
|
text: "Compliance ready"},
|
|
],
|
|
reverse: true
|
|
},
|
|
{
|
|
title: "Intelligent Analytics", description: "Gain deep insights into your operations with AI-powered analytics and customizable dashboards for informed decision-making.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-technologies_23-2151941514.jpg", imageAlt: "Upward trending financial graph"},
|
|
items: [
|
|
{
|
|
icon: LineChart,
|
|
text: "Predictive insights"},
|
|
{
|
|
icon: BarChart2,
|
|
text: "Customizable reports"},
|
|
{
|
|
icon: AreaChart,
|
|
text: "Real-time monitoring"},
|
|
],
|
|
reverse: false
|
|
}
|
|
]}
|
|
title="Unlock Your Potential with Our Key Features"
|
|
description="Our platform is engineered to deliver unparalleled performance and transformative results."
|
|
tag="Core Capabilities"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "200%", description: "Average ROI for clients"},
|
|
{
|
|
id: "m2", value: "10K+", description: "Satisfied global users"},
|
|
{
|
|
id: "m3", value: "99.9%", description: "Uptime reliability"},
|
|
]}
|
|
title="Quantifiable Success, Proven Results"
|
|
description="Our commitment to excellence translates into measurable achievements for our clients worldwide."
|
|
tag="Our Impact"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Data Solutions Co.", "CyberSecure Inc.", "AI Innovations Ltd.", "CloudFusion Services", "FinTech Visionaries", "Creative Tech Agency", "Sustainable Tech Solutions"]}
|
|
title="Trusted by Industry Leaders"
|
|
description="Collaborating with innovators to drive progress and achieve collective success in the digital landscape."
|
|
tag="Partnerships"
|
|
speed={40}
|
|
showCard={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "starter", badge: "Growth", badgeIcon: Leaf,
|
|
price: "$299/month", subtitle: "Ideal for growing businesses", buttons: [
|
|
{
|
|
text: "Start Free Trial", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Access to Core Features", "10 GB Data Storage", "Standard Support", "Basic Analytics"],
|
|
},
|
|
{
|
|
id: "professional", badge: "Popular", badgeIcon: Star,
|
|
price: "$799/month", subtitle: "For established companies", buttons: [
|
|
{
|
|
text: "Get Started", href: "#contact"},
|
|
],
|
|
features: [
|
|
"All Starter Features", "50 GB Data Storage", "Priority Support", "Advanced Analytics", "Custom Integrations"],
|
|
},
|
|
{
|
|
id: "enterprise", badge: "Premium", badgeIcon: Crown,
|
|
price: "Custom", subtitle: "Tailored for large organizations", buttons: [
|
|
{
|
|
text: "Contact Sales", href: "#contact"},
|
|
],
|
|
features: [
|
|
"All Professional Features", "Unlimited Data Storage", "Dedicated Account Manager", "AI-Powered Insights", "On-site Training & Support"],
|
|
},
|
|
]}
|
|
title="Flexible Plans to Elevate Your Business"
|
|
description="Choose the perfect plan that scales with your ambition, from startups to enterprise solutions."
|
|
tag="Pricing"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="THE PE4K transformed our approach to data, providing insights that were truly game-changing. Their platform is robust, intuitive, and their support is exceptional. We've seen significant improvements in efficiency and decision-making."
|
|
rating={5}
|
|
author="Jordan M."
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg", alt: "Sarah Johnson"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg", alt: "Michael Chen"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg", alt: "Emily Rodriguez"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-boy-with-leather-jacket-standing-bright-circular-light-pattern_181624-57047.jpg", alt: "David Kim"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/confident-middle-aged-man-wearing-white-t-shirt-with-tie-isolated-orange-wall_141793-91019.jpg", alt: "Alex Lee"},
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "What makes THE PE4K different?", content: "We combine cutting-edge AI with a user-centric design approach, offering solutions that are not only powerful but also incredibly intuitive and tailored to your specific business needs."},
|
|
{
|
|
id: "q2", title: "Is my data secure with THE PE4K?", content: "Absolutely. We employ enterprise-grade security protocols, including end-to-end encryption, multi-factor authentication, and regular security audits, to ensure your data is always protected."},
|
|
{
|
|
id: "q3", title: "Can THE PE4K integrate with my existing systems?", content: "Yes, our platform is designed with an API-first approach, enabling seamless integration with a wide range of third-party applications and your existing IT infrastructure."},
|
|
]}
|
|
sideTitle="Your Questions, Our Answers"
|
|
sideDescription="Find quick answers to the most common questions about our platform and services."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Ready to Reach THE PE4K?"
|
|
description="Let's discuss how our innovative solutions can empower your business. Fill out the form below, and we'll get back to you shortly."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
{
|
|
name: "company", type: "text", placeholder: "Company Name", required: false,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your project...", rows: 4,
|
|
required: true,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/hispanic-woman-using-digital-tablet_53876-95106.jpg"
|
|
imageAlt="Modern contact center with communication lines"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="THE PE4K"
|
|
columns={[
|
|
{
|
|
title: "Solutions", items: [
|
|
{
|
|
label: "Features", href: "#features"},
|
|
{
|
|
label: "Pricing", href: "#pricing"},
|
|
{
|
|
label: "Integrations", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Careers", href: "#"},
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{
|
|
label: "Blog", href: "#"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Support", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 THE PE4K. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|