152 lines
6.6 KiB
TypeScript
152 lines
6.6 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLarge"
|
|
background="fluid"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Tutorials", id: "hero"},
|
|
{
|
|
name: "Lessons", id: "blog"},
|
|
{
|
|
name: "Frameworks", id: "features"},
|
|
{
|
|
name: "Community", id: "testimonial"},
|
|
]}
|
|
brandName="Code3D"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="CODE 3D TUTORIALS"
|
|
description="Master full-stack development with immersive 3D-assisted visual guides. Real-time coding, interactive architecture visualization, and professional-grade projects."
|
|
buttons={[
|
|
{
|
|
text: "Start Learning", href: "#blog"},
|
|
{
|
|
text: "View Curriculum", href: "#features"},
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010125.jpg?_wi=1", imageAlt: "React Fundamentals"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-workspace-with-smartphone-laptop-copy-space_23-2148430932.jpg?_wi=1", imageAlt: "Advanced 3D Logic"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-technologies_23-2151941513.jpg?_wi=1", imageAlt: "Backend Systems"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
title="Latest Coding Lessons"
|
|
description="Weekly hands-on tutorials for modern web development."
|
|
blogs={[
|
|
{
|
|
id: "1", category: "Frontend", title: "Mastering React Hooks", excerpt: "A deep dive into custom hooks and state management patterns.", imageSrc: "http://img.b2bpic.net/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010125.jpg?_wi=2", authorName: "Code Instructor", authorAvatar: "https://i.pravatar.cc/150?u=1", date: "Nov 1, 2024"},
|
|
{
|
|
id: "2", category: "Backend", title: "Node.js Scalability", excerpt: "Scaling microservices for high-traffic applications.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-workspace-with-smartphone-laptop-copy-space_23-2148430932.jpg?_wi=2", authorName: "Dev Lead", authorAvatar: "https://i.pravatar.cc/150?u=2", date: "Nov 2, 2024"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardMedia
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1", title: "Interactive Code", description: "Write and test your code directly in our 3D-integrated sandbox.", tag: "Sandbox", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-abstract-colorful-bent-papers_23-2148428721.jpg"},
|
|
{
|
|
id: "f2", title: "Architecture Viz", description: "Understand complex patterns via immersive, interactive models.", tag: "3D", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-futuristic-technologies_23-2151941513.jpg?_wi=2"},
|
|
]}
|
|
title="Learning Environment"
|
|
description="We combine theory with 3D visualization to make complex concepts intuitive."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardTen
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Game Changer", quote: "The visual aids helped me grasp microservices instantly.", name: "Alex River", role: "Full Stack Dev", imageSrc: "https://i.pravatar.cc/150?u=6"},
|
|
{
|
|
id: "2", title: "Highly Recommended", quote: "Best coding tutorials for visual learners like myself.", name: "Jordan Smith", role: "Junior Dev", imageSrc: "https://i.pravatar.cc/150?u=7"},
|
|
]}
|
|
title="Student Success"
|
|
description="Voices from our growing developer community."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "What stacks are taught?", content: "We focus on full-stack JS, TypeScript, React, Next.js, and Node."},
|
|
{
|
|
id: "q2", title: "Is the platform free?", content: "Core tutorials are free; advanced projects have premium access."},
|
|
]}
|
|
title="Common Questions"
|
|
description="Need help navigating your learning journey?"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-ferromagnetic-burgundy-metal_23-2148253548.jpg"
|
|
logoText="Code3D"
|
|
columns={[
|
|
{
|
|
title: "Learn", items: [
|
|
{ label: "Courses", href: "#" },
|
|
{ label: "Roadmaps", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Community", items: [
|
|
{ label: "Forum", href: "#" },
|
|
{ label: "Discord", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|