Merge version_1 into main #2
325
src/app/page.tsx
325
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { PenTool, Image, Layout } from 'lucide-react';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
@@ -13,220 +14,132 @@ import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Courses",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="DesignAcademy"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Courses", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="DesignAcademy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Master the Art of Digital Design"
|
||||
description="Unlock your creative potential with our professional digital design class. Learn logo design, Photoshop, Illustrator, and more from industry experts."
|
||||
tag="Design Class 2025"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-landing-page_23-2149127866.jpg?_wi=1",
|
||||
imageAlt: "Digital design studio workspace",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-artwork-studio-room-with-colorful-pencils-vase-drawing-occupation-nobody-creativity-space-art-tools-wooden-easel-craft-equipment-artistic-design-masterpiece_482257-9388.jpg?_wi=1",
|
||||
imageAlt: "Professional design environment",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-landing-page_23-2149127866.jpg?_wi=2",
|
||||
imageAlt: "Creative interface display",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-artwork-studio-room-with-colorful-pencils-vase-drawing-occupation-nobody-creativity-space-art-tools-wooden-easel-craft-equipment-artistic-design-masterpiece_482257-9388.jpg?_wi=2",
|
||||
imageAlt: "Design software workspace",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-landing-page_23-2149127866.jpg?_wi=3",
|
||||
imageAlt: "Digital art studio",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Rated 5/5 by 500+ design students"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "plain" }}
|
||||
title="Master the Art of Digital Design"
|
||||
description="Unlock your creative potential with our professional digital design class. Learn logo design, Photoshop, Illustrator, and more from industry experts."
|
||||
tag="Design Class 2025"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-landing-page_23-2149127866.jpg", imageAlt: "Digital design studio workspace"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-artwork-studio-room-with-colorful-pencils-vase-drawing-occupation-nobody-creativity-space-art-tools-wooden-easel-craft-equipment-artistic-design-masterpiece_482257-9388.jpg", imageAlt: "Professional design environment"}
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="Rated 5/5 by 500+ design students"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Empowering Creative Minds"
|
||||
description={[
|
||||
"Our class is dedicated to providing comprehensive training in essential digital design tools. We bridge the gap between creative passion and professional capability.",
|
||||
"Whether you're looking to launch a career in graphic design or enhance your personal projects, we provide the curriculum and mentorship to help you succeed.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Empowering Creative Minds"
|
||||
description={[
|
||||
"Our class is dedicated to providing comprehensive training in essential digital design tools. We bridge the gap between creative passion and professional capability.", "Whether you're looking to launch a career in graphic design or enhance your personal projects, we provide the curriculum and mentorship to help you succeed."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Logo Creation",
|
||||
description: "Master identity design and vector construction techniques to build iconic brands.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-working-remotely-project_23-2149273687.jpg",
|
||||
buttonIcon: "PenTool",
|
||||
},
|
||||
{
|
||||
title: "Photo Manipulation",
|
||||
description: "Deep-dive into Photoshop for professional-grade image editing, compositing, and retouching.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-training-innovation-concept-with-futuristic-interface-screens_1134-352.jpg",
|
||||
buttonIcon: "Image",
|
||||
},
|
||||
{
|
||||
title: "Vector Illustration",
|
||||
description: "Learn the intricacies of Illustrator to create complex illustrations, infographics, and typography.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photographer-working-retouching-pictures-with-software-media-production-studio-graphic-designer-doing-editing-work-touch-screen-computer-tablet-with-stylus-image-retouch_482257-38058.jpg",
|
||||
buttonIcon: "Layout",
|
||||
},
|
||||
]}
|
||||
title="Professional Skill Sets"
|
||||
description="Gain hands-on experience in the software that defines modern visual communication."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Logo Creation", description: "Master identity design and vector construction techniques to build iconic brands.", imageSrc: "http://img.b2bpic.net/free-photo/person-working-remotely-project_23-2149273687.jpg", buttonIcon: PenTool,
|
||||
},
|
||||
{
|
||||
title: "Photo Manipulation", description: "Deep-dive into Photoshop for professional-grade image editing, compositing, and retouching.", imageSrc: "http://img.b2bpic.net/free-photo/digital-training-innovation-concept-with-futuristic-interface-screens_1134-352.jpg", buttonIcon: Image,
|
||||
},
|
||||
{
|
||||
title: "Vector Illustration", description: "Learn the intricacies of Illustrator to create complex illustrations, infographics, and typography.", imageSrc: "http://img.b2bpic.net/free-photo/photographer-working-retouching-pictures-with-software-media-production-studio-graphic-designer-doing-editing-work-touch-screen-computer-tablet-with-stylus-image-retouch_482257-38058.jpg", buttonIcon: Layout,
|
||||
},
|
||||
]}
|
||||
title="Professional Skill Sets"
|
||||
description="Gain hands-on experience in the software that defines modern visual communication."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex R.",
|
||||
handle: "@alexdesigns",
|
||||
testimonial: "This class transformed my approach to branding. Absolutely professional!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-black-hat-smiling_176420-8505.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah K.",
|
||||
handle: "@sarahdraws",
|
||||
testimonial: "The Photoshop module alone was worth the enrollment. Life-changing!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-architect-using-touch-screen-building-model-maquette-layout-engineer-working-with-blueprint-plan-construction-development-graphic-design-architectural-office_482257-31903.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mark D.",
|
||||
handle: "@markgraphics",
|
||||
testimonial: "I'm now freelancing thanks to the skills I learned here.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businesspeople-planning-glass-wall_53876-15196.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Emma L.",
|
||||
handle: "@emmalovesdesign",
|
||||
testimonial: "Exceptional curriculum and really accessible mentors.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-designer-working-out-office_23-2150379242.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jason T.",
|
||||
handle: "@jt_design",
|
||||
testimonial: "Professional standards, real-world projects, perfect class.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sad-african-man-with-markers-hair-blue-wall_176420-2488.jpg",
|
||||
},
|
||||
]}
|
||||
title="Student Success Stories"
|
||||
description="Hear from the designers we've trained."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Alex R.", handle: "@alexdesigns", testimonial: "This class transformed my approach to branding. Absolutely professional!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-black-hat-smiling_176420-8505.jpg"},
|
||||
{
|
||||
id: "2", name: "Sarah K.", handle: "@sarahdraws", testimonial: "The Photoshop module alone was worth the enrollment. Life-changing!", imageSrc: "http://img.b2bpic.net/free-photo/woman-architect-using-touch-screen-building-model-maquette-layout-engineer-working-with-blueprint-plan-construction-development-graphic-design-architectural-office_482257-31903.jpg"},
|
||||
{
|
||||
id: "3", name: "Mark D.", handle: "@markgraphics", testimonial: "I'm now freelancing thanks to the skills I learned here.", imageSrc: "http://img.b2bpic.net/free-photo/businesspeople-planning-glass-wall_53876-15196.jpg"},
|
||||
{
|
||||
id: "4", name: "Emma L.", handle: "@emmalovesdesign", testimonial: "Exceptional curriculum and really accessible mentors.", imageSrc: "http://img.b2bpic.net/free-photo/interior-designer-working-out-office_23-2150379242.jpg"},
|
||||
{
|
||||
id: "5", name: "Jason T.", handle: "@jt_design", testimonial: "Professional standards, real-world projects, perfect class.", imageSrc: "http://img.b2bpic.net/free-photo/sad-african-man-with-markers-hair-blue-wall_176420-2488.jpg"},
|
||||
]}
|
||||
title="Student Success Stories"
|
||||
description="Hear from the designers we've trained."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get Started"
|
||||
title="Ready to Start Designing?"
|
||||
description="Enroll now for our next intake and begin your design journey."
|
||||
buttons={[
|
||||
{
|
||||
text: "Enroll Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get Started"
|
||||
title="Ready to Start Designing?"
|
||||
description="Enroll now for our next intake and begin your design journey."
|
||||
buttons={[
|
||||
{ text: "Enroll Now", href: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="DesignAcademy"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="DesignAcademy"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user