Merge version_2 into main #4
340
src/app/page.tsx
340
src/app/page.tsx
@@ -2,15 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { BarChart, Users, Zap } from "lucide-react";
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { ShieldCheck, Zap, Eye, Brain } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -18,241 +18,113 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="large"
|
||||
background="grid"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Curriculum", id: "features"},
|
||||
{
|
||||
name: "Pricing", id: "pricing"},
|
||||
{
|
||||
name: "Support", id: "faq"},
|
||||
]}
|
||||
brandName="LearnAI"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Detection Plans", id: "pricing" },
|
||||
{ name: "Support", id: "faq" },
|
||||
]}
|
||||
brandName="DeepGuard AI"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
title="Master the Future of AI Learning"
|
||||
description="Accelerate your career with industry-leading AI curriculum, expert-led workshops, and hands-on projects designed for the next generation of engineers."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Learning", href: "#features"},
|
||||
{
|
||||
text: "Contact Us", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-render-network-communications-with-flowing-connecting-lines-dots_1048-13580.jpg"
|
||||
imageAlt="AI technology learning background"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/waist-up-shot-thoughtful-young-woman-with-curly-hair-wears-spectacles-casual-clothes-carries-tablet-strolls-outside-urban-setting-clever-female-student-holds-modern-gadget-poses-street_273609-56927.jpg", alt: "Student portrait 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-female-student-stands-with-digital-tablet-her-hands-outside_169016-25043.jpg", alt: "Student portrait 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285308.jpg", alt: "Student portrait 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-guy-glasses-holding-tablet-looking_74855-3039.jpg", alt: "Student portrait 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/tired-man-computer_23-2147717292.jpg", alt: "Student portrait 5"},
|
||||
]}
|
||||
avatarText="Join 10,000+ active learners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particle-design_1048-13547.jpg", alt: "Particle tech design"},
|
||||
{
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/3d-render-abstract-cyber-particles-background-with-shallow-depth-field_1048-13249.jpg", alt: "Cyber particles"},
|
||||
{
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-flowing-particles_1048-14872.jpg", alt: "Flowing particles"},
|
||||
{
|
||||
type: "image", src: "http://img.b2bpic.net/free-photo/3d-abstract-digital-particle-waves-design-background_1048-12573.jpg", alt: "Digital wave design"},
|
||||
{
|
||||
type: "text", text: "AI-Powered Excellence"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Unmask the Truth in Every Frame"
|
||||
description="Advanced AI-powered detection engine that identifies manipulated images and deepfake videos with industry-leading precision."
|
||||
buttons={[{ text: "Scan Now", href: "#contact" }, { text: "View Tech Specs", href: "#features" }]}
|
||||
carouselItems={[
|
||||
{ id: "1", videoSrc: "https://img.b2bpic.net/free-video/ai-detection-abstract.mp4" },
|
||||
{ id: "2", imageSrc: "https://img.b2bpic.net/free-photo/digital-security-shield.jpg" },
|
||||
{ id: "3", videoSrc: "https://img.b2bpic.net/free-video/neural-network.mp4" },
|
||||
{ id: "4", imageSrc: "https://img.b2bpic.net/free-photo/ai-face-recognition.jpg" },
|
||||
{ id: "5", videoSrc: "https://img.b2bpic.net/free-video/binary-code-data.mp4" },
|
||||
{ id: "6", imageSrc: "https://img.b2bpic.net/free-photo/cyber-security-background.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Foundation Pathways", description: "Master core concepts through interactive sessions.", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/artificial-intelligence-elements-collection-flat-style_23-2147868685.jpg", imageAlt: "Foundations"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/network-concept-with-squares_23-2148999176.jpg", imageAlt: "Foundations Details"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Analytics Dashboard", description: "Track your progress with real-time performance tracking.", icon: BarChart,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/public-examination-preparation-concept_23-2149369872.jpg", imageAlt: "Analytics"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-tablet_53876-41005.jpg", imageAlt: "Analytics Details"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Collaborative Mentorship", description: "Learn side-by-side with industry experts.", icon: Users,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg?_wi=1", imageAlt: "Mentorship"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-female-entrepreneur-collaborates-with-her-experts-team_482257-122594.jpg", imageAlt: "Mentorship Details"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Curriculum Built for Success"
|
||||
description="Comprehensive pathways from foundational ML to advanced neural architectures."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Detection Capabilities"
|
||||
description="Our proprietary models are trained on millions of samples to ensure peak performance."
|
||||
features={[
|
||||
{ id: "f1", title: "Deepfake Video Detection", tags: ["Video", "AI"], imageSrc: "https://img.b2bpic.net/free-photo/video-content-analysis.jpg" },
|
||||
{ id: "f2", title: "Image Alteration Tracing", tags: ["Image", "Forensics"], imageSrc: "https://img.b2bpic.net/free-photo/photo-manipulation-detect.jpg" },
|
||||
{ id: "f3", title: "Real-time Threat Monitoring", tags: ["Live", "Security"], imageSrc: "https://img.b2bpic.net/free-photo/live-stream-security.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic", badge: "Essential", price: "$199", subtitle: "For beginners", buttons: [
|
||||
{
|
||||
text: "Enroll Now"},
|
||||
],
|
||||
features: [
|
||||
"Core ML concepts", "Access to community", "Monthly workshops"],
|
||||
},
|
||||
{
|
||||
id: "pro", badge: "Pro", price: "$499", subtitle: "For professionals", buttons: [
|
||||
{
|
||||
text: "Enroll Now"},
|
||||
],
|
||||
features: [
|
||||
"Everything in Basic", "Advanced project modules", "Mentorship access", "Industry certification"],
|
||||
},
|
||||
]}
|
||||
title="Flexible Learning Plans"
|
||||
description="Choose the learning path that matches your current expertise."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Flexible Enterprise Plans"
|
||||
description="Choose the plan that best protects your content footprint."
|
||||
plans={[
|
||||
{ id: "basic", badge: "Starter", price: "$99", subtitle: "Small content creators", features: ["100 scans/mo", "Basic detection", "Email support"] },
|
||||
{ id: "pro", badge: "Enterprise", price: "$499", subtitle: "Large-scale operations", features: ["Unlimited scans", "Advanced deepfake analysis", "API access", "Dedicated account manager"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Alice M.", role: "Engineer", company: "Tech", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg?_wi=2"},
|
||||
{
|
||||
id: "2", name: "Bob D.", role: "Developer", company: "Lab", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-sunglasses-sitting-along-with-laptop-white-space_140725-11140.jpg"},
|
||||
{
|
||||
id: "3", name: "Charlie S.", role: "Analyst", company: "Growth", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/paralysed-disabled-invalid-handicapped-work-colleague-looking-front-tired-upset-caused-his-disabilities-working-economic-business-office_482257-2084.jpg"},
|
||||
{
|
||||
id: "4", name: "Diana K.", role: "Manager", company: "Product", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-queer-girl-glasses-denim-jacket-standing-near-rainbow-wall-cross-hands-chest-smiling-camera-happy-lifestyle-urban-life-generation-concept_197531-30548.jpg"},
|
||||
{
|
||||
id: "5", name: "Ethan R.", role: "Researcher", company: "Science", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167349.jpg"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "10k+", label: "Learners"},
|
||||
{
|
||||
value: "500+", label: "Expert Tutors"},
|
||||
{
|
||||
value: "95%", label: "Placement Rate"},
|
||||
]}
|
||||
title="Voices of the Community"
|
||||
description="Hear how LearnAI has transformed professional journeys."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Security experts trust our platform for media authenticity verification."
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah Chen", date: "Oct 2024", title: "Security Lead", quote: "DeepGuard AI has become an essential part of our verification stack.", tag: "Verification", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-professional-woman.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "Do I need coding experience?", content: "Our beginner courses start from the fundamentals."},
|
||||
{
|
||||
id: "q2", title: "Can I get a certificate?", content: "All advanced programs include official industry certifications."},
|
||||
{
|
||||
id: "q3", title: "How long are the courses?", content: "Programs typically last 8-12 weeks based on intensity."},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
title="Common Inquiries"
|
||||
description="Everything you need to know about starting your AI journey."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg"
|
||||
imageAlt="Digital tablet for online learning"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common questions about our detection technology."
|
||||
faqs={[
|
||||
{ id: "faq1", title: "How accurate is the detector?", content: "Our system achieves 99.8% precision on industry-standard benchmark datasets." },
|
||||
{ id: "faq2", title: "Does it support live streaming?", content: "Yes, we provide an API specifically optimized for low-latency live media analysis." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
tag="Get in touch"
|
||||
title="Start Your AI Journey"
|
||||
description="Sign up for our newsletter to get industry news, tips, and course early access."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/arrow-symbol-illustrated_23-2151909716.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="Abstract tech background blue"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Get Protected"
|
||||
title="Ready to secure your media?"
|
||||
description="Join the leaders in authenticity verification today."
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="LearnAI"
|
||||
columns={[
|
||||
{
|
||||
title: "Explore", items: [
|
||||
{
|
||||
label: "Pathways", href: "#features"},
|
||||
{
|
||||
label: "Pricing", href: "#pricing"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#"},
|
||||
{
|
||||
label: "Careers", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="DeepGuard AI"
|
||||
columns={[{ items: [{ label: "Security Features" }, { label: "API Documentation" }, { label: "Privacy Policy" }] }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1f3251;
|
||||
--background: #020617;
|
||||
--card: #0f172a;
|
||||
--foreground: #e2e8f0;
|
||||
--primary-cta: #1f7cff;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #0a0a0a;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #15479c;
|
||||
--background-accent: #a8cce8;
|
||||
--accent: #f96b2f;
|
||||
--background-accent: #1f7cff;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user