Initial commit

src/app/about/page.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import TextAbout from '@/components/sections/about/TextAbout';
+import TeamCardSix from '@/components/sections/team/TeamCardSix';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Users } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="TechAcademy"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Courses", id: "/courses" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          button={{
+            text: "Enroll Now",
+            href: "/pricing"
+          }}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextAbout
+          title="Founded by industry veterans who believe that high-quality technical education should be accessible, practical, and transformative for every aspiring technology professional"
+          useInvertedBackground="noInvert"
+          buttons={[
+            { text: "Our Story", href: "/about" },
+            { text: "Join Our Mission", href: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardSix
+          title="Meet Our Expert Instructors"
+          description="Learn from seasoned professionals with decades of combined experience from leading tech companies and startups worldwide"
+          tag="Team"
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+          tagIcon={Users}
+          members={[
+            {
+              id: "1",
+              name: "Sarah Chen",
+              role: "Lead Full-Stack Developer",
+              imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg",
+              imageAlt: "Sarah Chen, Full-Stack Developer"
+            },
+            {
+              id: "2",
+              name: "Marcus Johnson",
+              role: "Machine Learning Engineer",
+              imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5367.jpg",
+              imageAlt: "Marcus Johnson, ML Engineer"
+            },
+            {
+              id: "3",
+              name: "Emily Rodriguez",
+              role: "UI/UX Design Director",
+              imageSrc: "https://img.b2bpic.net/free-photo/teacher-holding-english-class_23-2149402693.jpg",
+              imageAlt: "Emily Rodriguez, Design Director"
+            },
+            {
+              id: "4",
+              name: "David Kim",
+              role: "Cybersecurity Specialist",
+              imageSrc: "https://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969905.jpg",
+              imageAlt: "David Kim, Security Specialist"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardThirteen
+          title="What Makes TechAcademy Different"
+          description="Our graduates share what sets our educational approach apart from traditional learning methods"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+          showRating={true}
+          testimonials={[
+            {
+              id: "1",
+              name: "Jennifer Walsh",
+              handle: "@jennw",
+              testimonial: "Unlike other bootcamps, TechAcademy focuses on understanding, not just memorizing. The instructors actually care about your long-term success.",
+              rating: 5,
+              imageSrc: "https://img.b2bpic.net/free-vector/blue-circle-with-white-user_78370-4707.jpg"
+            },
+            {
+              id: "2",
+              name: "Carlos Martinez",
+              handle: "@carlosm",
+              testimonial: "The personalized attention and small class sizes made all the difference. I felt supported throughout my entire learning journey.",
+              rating: 5,
+              imageSrc: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg"
+            },
+            {
+              id: "3",
+              name: "Priya Patel",
+              handle: "@priyap",
+              testimonial: "Real industry projects and mentorship from actual tech professionals. This isn't just education, it's career transformation.",
+              rating: 5,
+              imageSrc: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg"
+            }
+          ]}
+        />
+      </div>
+
+      <FooterLogoReveal
+        logoText="TechAcademy"
+        logoLineHeight={1.2}
+      />
+    </ThemeProvider>
+  );
+}

src/app/blog/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import ReactLenis from "lenis/react";
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+
+type BlogPost = {
+    id: string;
+    category: string;
+    title: string;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    authorAvatar: string;
+    date: string;
+    onBlogClick?: () => void;
+};
+
+const defaultPosts: BlogPost[] = [
+    {
+        id: "1",        category: "Design",        title: "UX review presentations",        excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?",        imageSrc: "/placeholders/placeholder3.avif",        imageAlt: "Abstract design with purple and silver tones",        authorName: "Olivia Rhye",        authorAvatar: "/placeholders/placeholder3.avif",        date: "20 Jan 2025",        onBlogClick: () => console.log("Blog 1 clicked"),
+    },
+    {
+        id: "2",        category: "Development",        title: "Building scalable applications",        excerpt: "Learn the best practices for building applications that can handle millions of users.",        imageSrc: "/placeholders/placeholder4.webp",        imageAlt: "Development workspace",        authorName: "John Smith",        authorAvatar: "/placeholders/placeholder4.webp",        date: "18 Jan 2025",        onBlogClick: () => console.log("Blog 2 clicked"),
+    },
+    {
+        id: "3",        category: "Marketing",        title: "Content strategy essentials",        excerpt: "Discover how to create a content strategy that drives engagement and conversions.",        imageSrc: "/placeholders/placeholder3.avif",        imageAlt: "Marketing strategy board",        authorName: "Sarah Johnson",        authorAvatar: "/placeholders/placeholder3.avif",        date: "15 Jan 2025",        onBlogClick: () => console.log("Blog 3 clicked"),
+    },
+    {
+        id: "4",        category: "Product",        title: "Product management 101",        excerpt: "Everything you need to know to become an effective product manager in 2025.",        imageSrc: "/placeholders/placeholder4.webp",        imageAlt: "Product planning session",        authorName: "Mike Davis",        authorAvatar: "/placeholders/placeholder4.webp",        date: "12 Jan 2025",        onBlogClick: () => console.log("Blog 4 clicked"),
+    },
+];
+
+export default function BlogPage() {
+    const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchPosts = async () => {
+            try {
+                const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+                const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+
+                if (!apiUrl || !projectId) {
+                    console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts");
+                    setIsLoading(false);
+                    return;
+                }
+
+                const url = `${apiUrl}/posts/${projectId}?status=published`;
+                const response = await fetch(url, {
+                    method: "GET",                    headers: {
+                        "Content-Type": "application/json"},
+                });
+
+                if (response.ok) {
+                    const resp = await response.json();
+                    const data = resp.data;
+                    if (Array.isArray(data) && data.length > 0) {
+                        const mappedPosts = data.map((post: any) => ({
+                            id: post.id || String(Math.random()),
+                            category: post.category || "General",                            title: post.title || "Untitled",                            excerpt: post.excerpt || post.content.slice(0, 30) || "",                            imageSrc: post.imageUrl || "/placeholders/placeholder3.avif",                            imageAlt: post.imageAlt || post.title || "",                            authorName: post.author?.name || "Anonymous",                            authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif",                            date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
+                            onBlogClick: () => console.log(`Blog ${post.id} clicked`),
+                        }));
+                        setPosts(mappedPosts);
+                    }
+                } else {
+                    console.warn(`API request failed with status ${response.status}, using default posts`);
+                }
+            } catch (error) {
+                console.error("Error fetching posts:", error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchPosts();
+    }, []);
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="shift-hover"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="soft"
+            contentWidth="mediumLarge"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="layered-gradient"
+            primaryButtonStyle="primary-glow"
+            secondaryButtonStyle="layered"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <div className="min-h-screen bg-background">
+                    <NavbarLayoutFloatingInline
+                        brandName="TechAcademy"
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Courses", id: "courses" },
+                            { name: "About", id: "about" },
+                            { name: "Contact", id: "contact" }
+                        ]}
+                        button={{
+                            text: "Enroll Now",                            href: "/pricing"
+                        }}
+                    />
+
+                    {isLoading ? (
+                        <div className="w-content-width mx-auto py-20 text-center">
+                            <p className="text-foreground">Loading posts...</p>
+                        </div>
+                    ) : (
+                        <BlogCardOne
+                            blogs={posts}
+                            title="Latest Tech Insights"
+                            description="Discover the latest trends, tutorials, and insights in technology and software development from our expert instructors and industry professionals."
+                            textboxLayout="default"
+                            useInvertedBackground="noInvert"
+                            carouselMode="buttons"
+                            animationType="slide-up"
+                            tag="Blog"
+                        />
+                    )}
+
+                    <FooterLogoReveal
+                        logoText="TechAcademy"
+                        logoLineHeight={1.2}
+                    />
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/contact/page.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Phone } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="TechAcademy"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Courses", id: "/courses" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          button={{
+            text: "Enroll Now",
+            href: "/pricing"
+          }}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactFaq
+          ctaTitle="Let's Start Your Tech Journey"
+          ctaDescription="Connect with our education specialists for personalized guidance on course selection, career paths, and enrollment options."
+          ctaIcon={Phone}
+          ctaButton={{
+            text: "Schedule Your Consultation",
+            href: "#"
+          }}
+          useInvertedBackground="noInvert"
+          animationType="slide-up"
+          faqs={[
+            {
+              id: "1",
+              title: "How do I choose the right course?",
+              content: "Our enrollment specialists will assess your background, career goals, and schedule to recommend the perfect learning path. Book a free consultation to get started."
+            },
+            {
+              id: "2",
+              title: "What support is available during courses?",
+              content: "All students receive access to instructor office hours, peer forums, and technical support. Professional plan members get priority access to live mentoring sessions."
+            },
+            {
+              id: "3",
+              title: "Do you offer corporate training?",
+              content: "Yes! Our Enterprise solutions include custom curriculum development, team training programs, and dedicated account management for organizations of all sizes."
+            },
+            {
+              id: "4",
+              title: "Can I get a demo or trial?",
+              content: "Absolutely! We offer free course previews and can arrange detailed demos of our learning platform. Contact us to schedule your personalized tour."
+            }
+          ]}
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqDouble
+          title="Support & Contact Information"
+          description="Find answers to common questions about enrollment, technical support, and getting the most from your TechAcademy experience"
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+          animationType="smooth"
+          faqs={[
+            {
+              id: "1",
+              title: "What are your support hours?",
+              content: "Our support team is available Monday-Friday 9 AM to 6 PM EST. Professional and Enterprise customers receive priority support with faster response times."
+            },
+            {
+              id: "2",
+              title: "How can I contact an instructor directly?",
+              content: "Professional plan members can schedule one-on-one sessions with instructors. All students can participate in weekly office hours and ask questions in course forums."
+            },
+            {
+              id: "3",
+              title: "Do you have a mobile app?",
+              content: "Yes! Our mobile app allows you to access course videos, take notes, and participate in community discussions on iOS and Android devices."
+            },
+            {
+              id: "4",
+              title: "What if I need technical help?",
+              content: "We provide comprehensive technical support including setup guides, troubleshooting resources, and direct assistance with development environments and tools."
+            },
+            {
+              id: "5",
+              title: "Can I speak with recent graduates?",
+              content: "Yes! We can connect prospective students with recent graduates who can share their experiences and career outcomes. Just ask during your consultation."
+            },
+            {
+              id: "6",
+              title: "Do you offer scholarships or financial aid?",
+              content: "We offer need-based scholarships and payment plans. Additionally, some employers provide tuition reimbursement for professional development courses."
+            }
+          ]}
+        />
+      </div>
+
+      <FooterLogoReveal
+        logoText="TechAcademy"
+        logoLineHeight={1.2}
+      />
+    </ThemeProvider>
+  );
+}

src/app/courses/page.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Code, Layers, Zap, Palette, Smartphone, Eye, BarChart3, Brain, Trending, Shield, Lock, Key, Sparkles } from "lucide-react";
+
+export default function CoursesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="TechAcademy"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Courses", id: "/courses" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          button={{
+            text: "Enroll Now",
+            href: "/pricing"
+          }}
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardTen
+          title="Our Comprehensive Course Catalog"
+          description="Explore our full range of professional IT courses designed by industry experts. Each track includes hands-on projects, real-world applications, and career-focused training."
+          tag="Courses"
+          features={[
+            {
+              id: "1",
+              title: "Full-Stack Development Bootcamp",
+              description: "Complete web development training covering frontend frameworks (React, Vue), backend technologies (Node.js, Python), databases, and deployment. Build 10+ real-world projects and graduate job-ready.",
+              media: { imageSrc: "https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg" },
+              items: [
+                { icon: Code, text: "React, Vue, Node.js" },
+                { icon: Layers, text: "API Development & Databases" },
+                { icon: Zap, text: "10+ Portfolio Projects" }
+              ],
+              reverse: false
+            },
+            {
+              id: "2",
+              title: "UI/UX Design Mastery",
+              description: "Master user experience design from research to prototyping. Learn Figma, Adobe Creative Suite, user research methodologies, and design thinking principles used by top tech companies.",
+              media: { imageSrc: "https://img.b2bpic.net/free-photo/guy-girl-are-sitting-table-african-girl-computer-science-class-kids-playing-computer-games_1157-42298.jpg" },
+              items: [
+                { icon: Palette, text: "Figma & Adobe Creative Suite" },
+                { icon: Smartphone, text: "Mobile-First Design" },
+                { icon: Eye, text: "User Research & Testing" }
+              ],
+              reverse: true
+            },
+            {
+              id: "3",
+              title: "Advanced Data Science Program",
+              description: "Deep dive into machine learning, AI, and data analysis. Master Python, R, TensorFlow, and big data technologies. Work with real datasets and build predictive models.",
+              media: { imageSrc: "https://img.b2bpic.net/free-photo/woman-two-students-looking-tablet_259150-60236.jpg" },
+              items: [
+                { icon: BarChart3, text: "Python, R, TensorFlow" },
+                { icon: Brain, text: "Machine Learning & AI" },
+                { icon: Trending, text: "Big Data Analytics" }
+              ],
+              reverse: false
+            },
+            {
+              id: "4",
+              title: "Cybersecurity Professional Track",
+              description: "Comprehensive security training covering ethical hacking, penetration testing, network security, and compliance frameworks. Prepare for industry certifications.",
+              media: { imageSrc: "https://img.b2bpic.net/free-photo/woman-looking-into-tablet-happy-girl_259150-60239.jpg" },
+              items: [
+                { icon: Shield, text: "Penetration Testing" },
+                { icon: Lock, text: "Network Security" },
+                { icon: Key, text: "Security Certifications" }
+              ],
+              reverse: true
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardEight
+          title="Course Pricing Options"
+          description="Flexible payment plans for individual courses or comprehensive learning tracks. All options include lifetime access and ongoing support."
+          tag="Pricing"
+          plans={[
+            {
+              id: "individual",
+              badge: "Single Course",
+              price: "$299",
+              subtitle: "Per course - Perfect for specific skills",
+              buttons: [{ text: "Choose Course", href: "/contact" }],
+              features: [
+                "Individual course access",
+                "Course materials & videos",
+                "Community forum support",
+                "Course completion certificate",
+                "6 months instructor support"
+              ]
+            },
+            {
+              id: "track",
+              badge: "Most Popular",
+              badgeIcon: Sparkles,
+              price: "$799",
+              subtitle: "Full learning track - Best value",
+              buttons: [{ text: "Start Track", href: "/contact" }],
+              features: [
+                "Complete learning track (3-4 courses)",
+                "Live mentoring sessions",
+                "Project feedback & reviews",
+                "Industry portfolio development",
+                "Job placement assistance",
+                "Lifetime access to all materials"
+              ]
+            },
+            {
+              id: "unlimited",
+              badge: "All Access",
+              price: "$1299",
+              subtitle: "All courses & tracks - Maximum learning",
+              buttons: [{ text: "Get All Access", href: "/contact" }],
+              features: [
+                "Access to all current courses",
+                "Access to all future courses",
+                "Priority mentoring & support",
+                "Advanced project collaborations",
+                "Direct instructor access",
+                "Career coaching sessions",
+                "Corporate partnership opportunities"
+              ]
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="invertDefault"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqDouble
+          title="Course Information FAQ"
+          description="Common questions about our course structure, requirements, and learning experience"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+          animationType="smooth"
+          faqs={[
+            {
+              id: "1",
+              title: "What are the course prerequisites?",
+              content: "Most beginner courses require no prior experience. Intermediate and advanced tracks may require completion of foundational courses or equivalent knowledge. Each course page lists specific prerequisites."
+            },
+            {
+              id: "2",
+              title: "How are courses structured?",
+              content: "Courses combine video lectures, hands-on coding exercises, real-world projects, and peer collaboration. Most tracks include 8-12 weeks of content with 10-15 hours per week commitment."
+            },
+            {
+              id: "3",
+              title: "Can I switch between courses?",
+              content: "Yes! If you have an active subscription or track enrollment, you can switch between courses within your plan. Individual course purchases are specific to that course only."
+            },
+            {
+              id: "4",
+              title: "What software/tools do I need?",
+              content: "Most courses use free, open-source tools. We provide detailed setup guides and may offer cloud-based development environments. Some specialized courses may require specific software."
+            },
+            {
+              id: "5",
+              title: "Are there live sessions?",
+              content: "Yes! Track enrollments and higher tiers include weekly live mentoring sessions, Q&A with instructors, and collaborative project reviews."
+            },
+            {
+              id: "6",
+              title: "How is progress tracked?",
+              content: "Our learning platform tracks your progress through modules, assignments, and projects. You'll receive regular feedback and can see detailed analytics of your learning journey."
+            }
+          ]}
+        />
+      </div>
+
+      <FooterLogoReveal
+        logoText="TechAcademy"
+        logoLineHeight={1.2}
+      />
+    </ThemeProvider>
+  );
+}

src/app/globals.css

@@ -0,0 +1,538 @@
+@import "tailwindcss";
+
+:root {
+  /* Base units */
+  /* --vw is set by ThemeProvider */
+
+  --background: #f7f6f7;;
+  --card: #ffffff;;
+  --foreground: #032419;;
+  --primary-cta: #2bb889;;
+  --secondary-cta: #ffffff;;
+  --accent: #09b97e;;
+  --background-accent: #a8e8c3;;
+
+  /* Base spacing units */
+  --vw-0_25: calc(var(--vw) * 0.25);
+  --vw-0_5: calc(var(--vw) * 0.5);
+  --vw-0_625: calc(var(--vw) * 0.625);
+  --vw-0_75: calc(var(--vw) * 0.75);
+  --vw-1: calc(var(--vw) * 1);
+  --vw-1_25: calc(var(--vw) * 1.25);
+  --vw-1_5: calc(var(--vw) * 1.5);
+  --vw-1_75: calc(var(--vw) * 1.75);
+  --vw-2: calc(var(--vw) * 2);
+  --vw-2_25: calc(var(--vw) * 2.25);
+  --vw-2_5: calc(var(--vw) * 2.5);
+  --vw-2_75: calc(var(--vw) * 2.75);
+  --vw-3: calc(var(--vw) * 3);
+
+  /* width */
+  --width-5: clamp(4rem, 5vw, 6rem);
+  --width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
+  --width-10: clamp(7.5rem, 10vw, 10rem);
+  --width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
+  --width-15: clamp(11.25rem, 15vw, 15rem);
+  --width-17: clamp(12.75rem, 17vw, 17rem);
+  --width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
+  --width-20: clamp(15rem, 20vw, 20rem);
+  --width-21: clamp(15.75rem, 21vw, 21rem);
+  --width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
+  --width-25: clamp(18.75rem, 25vw, 25rem);
+  --width-26: clamp(19.5rem, 26vw, 26rem);
+  --width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
+  --width-30: clamp(22.5rem, 30vw, 30rem);
+  --width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
+  --width-35: clamp(26.25rem, 35vw, 35rem);
+  --width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
+  --width-40: clamp(30rem, 40vw, 40rem);
+  --width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
+  --width-45: clamp(33.75rem, 45vw, 45rem);
+  --width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
+  --width-50: clamp(37.5rem, 50vw, 50rem);
+  --width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
+  --width-55: clamp(41.25rem, 55vw, 55rem);
+  --width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
+  --width-60: clamp(45rem, 60vw, 60rem);
+  --width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
+  --width-65: clamp(48.75rem, 65vw, 65rem);
+  --width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
+  --width-70: clamp(52.5rem, 70vw, 70rem);
+  --width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
+  --width-75: clamp(56.25rem, 75vw, 75rem);
+  --width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
+  --width-80: clamp(60rem, 80vw, 80rem);
+  --width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
+  --width-85: clamp(63.75rem, 85vw, 85rem);
+  --width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
+  --width-90: clamp(67.5rem, 90vw, 90rem);
+  --width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
+  --width-95: clamp(71.25rem, 95vw, 95rem);
+  --width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
+  --width-100: clamp(75rem, 100vw, 100rem);
+  /* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
+  --width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+  --width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
+  --width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+  --width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
+  --width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
+  --width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
+  --width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
+
+  --height-4: 1rem;
+  --height-5: 1.25rem;
+  --height-6: 1.5rem;
+  --height-7: 1.75rem;
+  --height-8: 2rem;
+  --height-9: 2.25rem;
+  --height-10: 2.5rem;
+  --height-11: 2.75rem;
+  --height-12: 3rem;
+  --height-30: 7.5rem;
+  --height-90: 22.5rem;
+  --height-100: 25rem;
+  --height-110: 27.5rem;
+  --height-120: 30rem;
+  --height-130: 32.5rem;
+  --height-140: 35rem;
+  --height-150: 37.5rem;
+
+  /* hero page padding */
+  --padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
+  --padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
+  --padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
+  --padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
+}
+
+@media (max-width: 767px) {
+  :root {
+    /* --vw and text sizing are set by ThemeProvider */
+
+    --width-5: 5vw;
+    --width-7_5: 7.5vw;
+    --width-10: 10vw;
+    --width-12_5: 12.5vw;
+    --width-15: 15vw;
+    --width-17_5: 17.5vw;
+    --width-20: 20vw;
+    --width-22_5: 22.5vw;
+    --width-25: 25vw;
+    --width-27_5: 27.5vw;
+    --width-30: 30vw;
+    --width-32_5: 32.5vw;
+    --width-35: 35vw;
+    --width-37_5: 37.5vw;
+    --width-40: 40vw;
+    --width-42_5: 42.5vw;
+    --width-45: 45vw;
+    --width-47_5: 47.5vw;
+    --width-50: 50vw;
+    --width-52_5: 52.5vw;
+    --width-55: 55vw;
+    --width-57_5: 57.5vw;
+    --width-60: 60vw;
+    --width-62_5: 62.5vw;
+    --width-65: 65vw;
+    --width-67_5: 67.5vw;
+    --width-70: 70vw;
+    --width-72_5: 72.5vw;
+    --width-75: 75vw;
+    --width-77_5: 77.5vw;
+    --width-80: 80vw;
+    --width-82_5: 82.5vw;
+    --width-85: 85vw;
+    --width-87_5: 87.5vw;
+    --width-90: 90vw;
+    --width-92_5: 92.5vw;
+    --width-95: 95vw;
+    --width-97_5: 97.5vw;
+    --width-100: 100vw;
+    /* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
+    --width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+    --width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
+    --width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+    --width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
+    --width-carousel-item-3: var(--width-content-width);
+    --width-carousel-item-4: var(--width-content-width);
+    --width-x-padding-mask-fade: 10vw;
+
+    --height-4: 3.5vw;
+    --height-5: 4.5vw;
+    --height-6: 5.5vw;
+    --height-7: 6.5vw;
+    --height-8: 7.5vw;
+    --height-9: 8.5vw;
+    --height-10: 9vw;
+    --height-11: 10vw;
+    --height-12: 11vw;
+    --height-30: 25vw;
+    --height-90: 81vw;
+    --height-100: 90vw;
+    --height-110: 99vw;
+    --height-120: 108vw;
+    --height-130: 117vw;
+    --height-140: 126vw;
+    --height-150: 135vw;
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-primary-cta: var(--primary-cta);
+  --color-secondary-cta: var(--secondary-cta);
+  --color-accent: var(--accent);
+  --color-background-accent: var(--background-accent);
+
+  /* theme border radius */
+  --radius-theme: var(--theme-border-radius);
+  --radius-theme-capped: var(--theme-border-radius-capped);
+
+  /* text */
+  --text-2xs: var(--text-2xs);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --text-3xl: var(--text-3xl);
+  --text-4xl: var(--text-4xl);
+  --text-5xl: var(--text-5xl);
+  --text-6xl: var(--text-6xl);
+  --text-7xl: var(--text-7xl);
+  --text-8xl: var(--text-8xl);
+  --text-9xl: var(--text-9xl);
+
+  /* height */
+  --height-4: var(--height-4);
+  --height-5: var(--height-5);
+  --height-6: var(--height-6);
+  --height-7: var(--height-7);
+  --height-8: var(--height-8);
+  --height-9: var(--height-9);
+  --height-11: var(--height-11);
+  --height-12: var(--height-12);
+
+  --height-10: var(--height-10);
+  --height-30: var(--height-30);
+  --height-90: var(--height-90);
+  --height-100: var(--height-100);
+  --height-110: var(--height-110);
+  --height-120: var(--height-120);
+  --height-130: var(--height-130);
+  --height-140: var(--height-140);
+  --height-150: var(--height-150);
+
+  --height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
+
+  /* width */
+  --width-5: var(--width-5);
+  --width-7_5: var(--width-7_5);
+  --width-10: var(--width-10);
+  --width-12_5: var(--width-12_5);
+  --width-15: var(--width-15);
+  --width-17: var(--width-17);
+  --width-17_5: var(--width-17_5);
+  --width-20: var(--width-20);
+  --width-21: var(--width-21);
+  --width-22_5: var(--width-22_5);
+  --width-25: var(--width-25);
+  --width-26: var(--width-26);
+  --width-27_5: var(--width-27_5);
+  --width-30: var(--width-30);
+  --width-32_5: var(--width-32_5);
+  --width-35: var(--width-35);
+  --width-37_5: var(--width-37_5);
+  --width-40: var(--width-40);
+  --width-42_5: var(--width-42_5);
+  --width-45: var(--width-45);
+  --width-47_5: var(--width-47_5);
+  --width-50: var(--width-50);
+  --width-52_5: var(--width-52_5);
+  --width-55: var(--width-55);
+  --width-57_5: var(--width-57_5);
+  --width-60: var(--width-60);
+  --width-62_5: var(--width-62_5);
+  --width-65: var(--width-65);
+  --width-67_5: var(--width-67_5);
+  --width-70: var(--width-70);
+  --width-72_5: var(--width-72_5);
+  --width-75: var(--width-75);
+  --width-77_5: var(--width-77_5);
+  --width-80: var(--width-80);
+  --width-82_5: var(--width-82_5);
+  --width-85: var(--width-85);
+  --width-87_5: var(--width-87_5);
+  --width-90: var(--width-90);
+  --width-92_5: var(--width-92_5);
+  --width-95: var(--width-95);
+  --width-97_5: var(--width-97_5);
+  --width-100: var(--width-100);
+  --width-content-width: var(--width-content-width);
+  --width-carousel-padding: var(--width-carousel-padding);
+  --width-carousel-padding-controls: var(--width-carousel-padding-controls);
+  --width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
+  --width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
+  --width-carousel-item-3: var(--width-carousel-item-3);
+  --width-carousel-item-4: var(--width-carousel-item-4);
+  --width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
+  --width-content-width-expanded: var(--width-content-width-expanded);
+
+  /* gap */
+  --spacing-1: var(--vw-0_25);
+  --spacing-2: var(--vw-0_5);
+  --spacing-3: var(--vw-0_75);
+  --spacing-4: var(--vw-1);
+  --spacing-5: var(--vw-1_25);
+  --spacing-6: var(--vw-1_5);
+  --spacing-7: var(--vw-1_75);
+  --spacing-8: var(--vw-2);
+
+  --spacing-x-1: var(--vw-0_25);
+  --spacing-x-2: var(--vw-0_5);
+  --spacing-x-3: var(--vw-0_75);
+  --spacing-x-4: var(--vw-1);
+  --spacing-x-5: var(--vw-1_25);
+  --spacing-x-6: var(--vw-1_5);
+
+  /* border radius */
+  --radius-none: 0;
+  --radius-sm: var(--vw-0_5);
+  --radius: var(--vw-0_75);
+  --radius-md: var(--vw-1);
+  --radius-lg: var(--vw-1_25);
+  --radius-xl: var(--vw-1_75);
+  --radius-full: 999px;
+
+  /* padding */
+  --padding-1: var(--vw-0_25);
+  --padding-2: var(--vw-0_5);
+  --padding-2.5: var(--vw-0_625);
+  --padding-3: var(--vw-0_75);
+  --padding-4: var(--vw-1);
+  --padding-5: var(--vw-1_25);
+  --padding-6: var(--vw-1_5);
+  --padding-7: var(--vw-1_75);
+  --padding-8: var(--vw-2);
+
+  --padding-x-1: var(--vw-0_25);
+  --padding-x-2: var(--vw-0_5);
+  --padding-x-3: var(--vw-0_75);
+  --padding-x-4: var(--vw-1);
+  --padding-x-5: var(--vw-1_25);
+  --padding-x-6: var(--vw-1_5);
+  --padding-x-7: var(--vw-1_75);
+  --padding-x-8: var(--vw-2);
+
+  --padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
+  --padding-hero-page-padding: var(--padding-hero-page-padding);
+  --padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
+  --padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
+
+  /* margin */
+  --margin-1: var(--vw-0_25);
+  --margin-2: var(--vw-0_5);
+  --margin-3: var(--vw-0_75);
+  --margin-4: var(--vw-1);
+  --margin-5: var(--vw-1_25);
+  --margin-6: var(--vw-1_5);
+  --margin-7: var(--vw-1_75);
+  --margin-8: var(--vw-2);
+
+  --margin-x-1: var(--vw-0_25);
+  --margin-x-2: var(--vw-0_5);
+  --margin-x-3: var(--vw-0_75);
+  --margin-x-4: var(--vw-1);
+  --margin-x-5: var(--vw-1_25);
+  --margin-x-6: var(--vw-1_5);
+  --margin-x-7: var(--vw-1_75);
+  --margin-x-8: var(--vw-2);
+}
+
+@layer components {}
+
+@layer utilities {
+
+  .tag-card {
+    @apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
+  }
+
+  .mask-padding-x {
+    -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
+    mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
+  }
+
+  .mask-fade-bottom {
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
+  }
+
+  .mask-fade-y {
+    mask-image: linear-gradient(to bottom,
+        transparent 0%,
+        black var(--vw-1_5),
+        black calc(100% - var(--vw-1_5)),
+        transparent 100%);
+  }
+
+  .mask-fade-bottom-large {
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
+  }
+
+  .mask-fade-bottom-long {
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
+  }
+
+  .mask-fade-top-long {
+    -webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
+    mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
+  }
+
+  .mask-fade-xy {
+    -webkit-mask-image:
+      linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
+      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
+    mask-image:
+      linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
+      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
+  /* ANIMATION */
+
+  .animation-container {
+    animation:
+      fadeInOpacity 0.8s ease-in-out forwards,
+      fadeInTranslate 0.6s forwards;
+  }
+
+  .animation-container-fade {
+    animation: fadeInOpacity 0.8s ease-in-out forwards;
+  }
+
+  @keyframes fadeInOpacity {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeInTranslate {
+    from {
+      transform: translateY(0.75vh);
+    }
+
+    to {
+      transform: translateY(0vh);
+    }
+  }
+
+  @keyframes aurora {
+    from {
+      background-position: 50% 50%, 50% 50%;
+    }
+
+    to {
+      background-position: 350% 50%, 350% 50%;
+    }
+  }
+
+  @keyframes spin-slow {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes spin-reverse {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+
+  .animate-spin-slow {
+    animation: spin-slow 15s linear infinite;
+  }
+
+  .animate-spin-reverse {
+    animation: spin-reverse 10s linear infinite;
+  }
+
+  @keyframes marquee-vertical {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-50%);
+    }
+  }
+
+  .animate-marquee-vertical {
+    animation: marquee-vertical 20s linear infinite;
+  }
+
+  @keyframes orbit {
+    from {
+      transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
+    }
+    to {
+      transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
+    }
+  }
+
+  @keyframes map-dot-pulse {
+    0%, 100% {
+      transform: scale(0.4);
+      opacity: 0.6;
+    }
+    50% {
+      transform: scale(1.4);
+      opacity: 1;
+    }
+  }
+
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
+}
+
+html {
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-inter), sans-serif;
+  position: relative;
+  min-height: 100vh;
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-dm-sans), sans-serif;
+}

src/app/page.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import Link from "next/link";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import TextAbout from '@/components/sections/about/TextAbout';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Code, Layers, Zap, Palette, Smartphone, Eye, BarChart3, Brain, Trending, Shield, Lock, Key, Lightbulb, Sparkles } from "lucide-react";
+
+export default function HomePage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="TechAcademy"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Courses", id: "/courses" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          button={{
+            text: "Enroll Now",
+            href: "/pricing"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogo
+          logoText="TechAcademy"
+          description="Master in-demand IT skills with expert instructors and flexible learning paths designed for modern professionals"
+          buttons={[
+            { text: "Explore Courses", href: "/courses" },
+            { text: "Start Learning", href: "/pricing" }
+          ]}
+          imageSrc="https://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891341.jpg"
+          imageAlt="Technology and learning environment"
+          showDimOverlay={true}
+          logoLineHeight={1.2}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextAbout
+          title="Empowering the next generation of IT professionals through comprehensive, industry-aligned education and hands-on training"
+          useInvertedBackground="invertDefault"
+          buttons={[
+            { text: "Learn More", href: "/about" },
+            { text: "View Team", href: "/about" }
+          ]}
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardTen
+          title="Comprehensive Learning Pathways"
+          description="Our academy offers structured courses covering the full spectrum of IT technologies and specializations"
+          tag="Features"
+          features={[
+            {
+              id: "1",
+              title: "Programming & Development",
+              description: "Master the latest programming languages and development frameworks. From Python and JavaScript to full-stack web development, our courses provide hands-on experience with real-world projects and industry best practices.",
+              media: { imageSrc: "https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg" },
+              items: [
+                { icon: Code, text: "JavaScript, Python, Java" },
+                { icon: Layers, text: "Frontend & Backend Development" },
+                { icon: Zap, text: "Real-time Project Work" }
+              ],
+              reverse: false
+            },
+            {
+              id: "2",
+              title: "Web & UI Design",
+              description: "Learn modern web design principles and UI/UX best practices. Create stunning interfaces using HTML5, CSS3, and JavaScript, with a focus on responsive design and user-centered development.",
+              media: { imageSrc: "https://img.b2bpic.net/free-photo/guy-girl-are-sitting-table-african-girl-computer-science-class-kids-playing-computer-games_1157-42298.jpg" },
+              items: [
+                { icon: Palette, text: "UI/UX Design Principles" },
+                { icon: Smartphone, text: "Responsive Design" },
+                { icon: Eye, text: "Modern Design Tools" }
+              ],
+              reverse: true
+            },
+            {
+              id: "3",
+              title: "Data Science & Analytics",
+              description: "Dive into data-driven decision making with our comprehensive data science curriculum. Learn data analysis, visualization, machine learning, and AI techniques used by leading tech companies.",
+              media: { imageSrc: "https://img.b2bpic.net/free-photo/woman-two-students-looking-tablet_259150-60236.jpg" },
+              items: [
+                { icon: BarChart3, text: "Data Analysis & Visualization" },
+                { icon: Brain, text: "Machine Learning Models" },
+                { icon: Trending, text: "Predictive Analytics" }
+              ],
+              reverse: false
+            },
+            {
+              id: "4",
+              title: "Cybersecurity Essentials",
+              description: "Protect digital assets and understand modern security threats. Our cybersecurity training covers network security, ethical hacking, cryptography, and compliance standards.",
+              media: { imageSrc: "https://img.b2bpic.net/free-photo/woman-looking-into-tablet-happy-girl_259150-60239.jpg" },
+              items: [
+                { icon: Shield, text: "Network Security" },
+                { icon: Lock, text: "Ethical Hacking" },
+                { icon: Key, text: "Cryptography & Compliance" }
+              ],
+              reverse: true
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardEight
+          title="Flexible Pricing Plans"
+          description="Choose the learning plan that fits your goals and budget. All plans include lifetime access to course materials and community support."
+          tag="Pricing"
+          plans={[
+            {
+              id: "starter",
+              badge: "Popular",
+              price: "$199",
+              subtitle: "Per month - Ideal for beginners",
+              buttons: [{ text: "Get Started", href: "/contact" }],
+              features: [
+                "Access to 2-3 core courses",
+                "Video tutorials and documentation",
+                "Community forum access",
+                "Certificate of completion",
+                "Lifetime access to materials"
+              ]
+            },
+            {
+              id: "professional",
+              badge: "Most Popular",
+              badgeIcon: Sparkles,
+              price: "$399",
+              subtitle: "Per month - For professionals",
+              buttons: [{ text: "Start Now", href: "/contact" }],
+              features: [
+                "Access to all 8+ courses",
+                "Live mentoring sessions",
+                "Code review and feedback",
+                "Industry-recognized certificates",
+                "Job placement assistance",
+                "Exclusive webinars and workshops"
+              ]
+            },
+            {
+              id: "enterprise",
+              badge: "For Teams",
+              price: "Custom",
+              subtitle: "Tailored for organizations",
+              buttons: [{ text: "Contact Sales", href: "/contact" }],
+              features: [
+                "Custom curriculum design",
+                "Team training programs",
+                "Priority technical support",
+                "Advanced analytics dashboard",
+                "Dedicated account manager",
+                "Corporate certifications",
+                "On-site or remote training"
+              ]
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="invertDefault"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardThirteen
+          title="Student Success Stories"
+          description="Hear from graduates who transformed their careers through TechAcademy"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+          showRating={true}
+          testimonials={[
+            {
+              id: "1",
+              name: "James Wilson",
+              handle: "@jameswilson",
+              testimonial: "The course structure was perfect for my learning style. Within 3 months, I secured a junior developer position. Highly recommended!",
+              rating: 5,
+              imageSrc: "https://img.b2bpic.net/free-vector/blue-circle-with-white-user_78370-4707.jpg"
+            },
+            {
+              id: "2",
+              name: "Sophia Martinez",
+              handle: "@sophiam",
+              testimonial: "Outstanding mentorship and practical projects. The instructors genuinely care about student success. Best investment ever!",
+              rating: 5,
+              imageSrc: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186122.jpg"
+            },
+            {
+              id: "3",
+              name: "Alex Thompson",
+              handle: "@alextech",
+              testimonial: "From zero coding experience to building full-stack applications. The curriculum is comprehensive and well-paced.",
+              rating: 5,
+              imageSrc: "https://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg"
+            },
+            {
+              id: "4",
+              name: "Lisa Chen",
+              handle: "@lisachen",
+              testimonial: "Career transition made easy. The job placement support helped me land a role at a top tech company.",
+              rating: 5,
+              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2148827181.jpg"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactFaq
+          ctaTitle="Ready to Start Learning?"
+          ctaDescription="Join thousands of students transforming their careers. Get personalized guidance on selecting the right course for your goals."
+          ctaIcon={Lightbulb}
+          ctaButton={{
+            text: "Schedule a Consultation",
+            href: "/contact"
+          }}
+          useInvertedBackground="invertDefault"
+          animationType="slide-up"
+          faqs={[
+            {
+              id: "1",
+              title: "Which course is best for me?",
+              content: "Start with our career assessment tool or speak with an advisor. If you're interested in web development, our Full-Stack track is ideal. For data-focused roles, try Data Science. Need help with cybersecurity? Our Security Essentials course is perfect."
+            },
+            {
+              id: "2",
+              title: "How do I access course materials?",
+              content: "After enrollment, you'll receive immediate access to the learning platform. All video lectures, code repositories, and project materials are available in your dashboard with lifetime access."
+            },
+            {
+              id: "3",
+              title: "Can I pause my learning?",
+              content: "Absolutely. With lifetime access, you control your learning pace. Pause anytime without losing access to materials. Many students take breaks between courses."
+            },
+            {
+              id: "4",
+              title: "How much time should I dedicate weekly?",
+              content: "We recommend 10-15 hours per week for optimal learning. However, you can adjust based on your schedule. Part-time learners can take 6-9 months for a full course."
+            }
+          ]}
+        />
+      </div>
+
+      <FooterLogoReveal
+        logoText="TechAcademy"
+        logoLineHeight={1.2}
+      />
+    </ThemeProvider>
+  );
+}

src/app/pricing/page.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Sparkles, Lightbulb } from "lucide-react";
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="TechAcademy"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Courses", id: "/courses" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          button={{
+            text: "Enroll Now",
+            href: "/pricing"
+          }}
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardEight
+          title="Choose Your Learning Path"
+          description="Invest in your future with flexible pricing options designed for every career stage and budget. All plans include lifetime access to materials and ongoing support."
+          tag="Pricing"
+          plans={[
+            {
+              id: "starter",
+              badge: "Best for Beginners",
+              price: "$199",
+              subtitle: "Per month - Start your tech journey",
+              buttons: [{ text: "Start Learning", href: "/contact" }],
+              features: [
+                "Access to 2-3 foundational courses",
+                "Self-paced video tutorials",
+                "Community forum access",
+                "Basic project templates",
+                "Course completion certificates",
+                "Email support within 48 hours"
+              ]
+            },
+            {
+              id: "professional",
+              badge: "Most Popular",
+              badgeIcon: Sparkles,
+              price: "$399",
+              subtitle: "Per month - Accelerate your career",
+              buttons: [{ text: "Go Professional", href: "/contact" }],
+              features: [
+                "Access to all 8+ comprehensive courses",
+                "Live weekly mentoring sessions",
+                "Code review and project feedback",
+                "Industry-recognized certificates",
+                "Job placement assistance program",
+                "Exclusive webinars and workshops",
+                "Priority support within 24 hours"
+              ]
+            },
+            {
+              id: "enterprise",
+              badge: "For Organizations",
+              price: "Custom",
+              subtitle: "Tailored corporate training solutions",
+              buttons: [{ text: "Contact Sales", href: "/contact" }],
+              features: [
+                "Custom curriculum development",
+                "Team-based learning programs",
+                "Dedicated account management",
+                "Advanced analytics dashboard",
+                "On-site or remote training options",
+                "Corporate certification programs",
+                "Priority technical support",
+                "Bulk enrollment discounts"
+              ]
+            }
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardThirteen
+          title="Success Stories from Our Students"
+          description="See how TechAcademy students transformed their careers and achieved their professional goals"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="invertDefault"
+          showRating={true}
+          testimonials={[
+            {
+              id: "1",
+              name: "Michael Brown",
+              handle: "@mbrown",
+              testimonial: "The Professional plan gave me everything I needed. Live sessions were game-changers, and the job placement support landed me a $75k role!",
+              rating: 5,
+              imageSrc: "https://img.b2bpic.net/free-photo/selfie-portrait-videocall_23-2149186124.jpg"
+            },
+            {
+              id: "2",
+              name: "Rachel Davis",
+              handle: "@racheld",
+              testimonial: "Started with the beginner plan and upgraded after 2 months. The progression path is clear and the mentorship is invaluable. Worth every dollar!",
+              rating: 5,
+              imageSrc: "https://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg"
+            },
+            {
+              id: "3",
+              name: "David Kim",
+              handle: "@davidkim",
+              testimonial: "Our company used the Enterprise plan to upskill our entire development team. The custom curriculum was perfectly aligned with our tech stack.",
+              rating: 5,
+              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2148827181.jpg"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactFaq
+          ctaTitle="Ready to Transform Your Career?"
+          ctaDescription="Join thousands of successful graduates. Our enrollment specialists will help you choose the perfect plan and get started today."
+          ctaIcon={Lightbulb}
+          ctaButton={{
+            text: "Start Your Journey",
+            href: "/contact"
+          }}
+          useInvertedBackground="noInvert"
+          animationType="slide-up"
+          faqs={[
+            {
+              id: "1",
+              title: "Can I upgrade or downgrade my plan?",
+              content: "Absolutely! You can change your plan anytime. When upgrading, you'll get immediate access to additional features. Downgrades take effect at your next billing cycle."
+            },
+            {
+              id: "2",
+              title: "Is there a money-back guarantee?",
+              content: "Yes! We offer a 14-day money-back guarantee on all plans. If you're not completely satisfied, contact us for a full refund within your first 14 days."
+            },
+            {
+              id: "3",
+              title: "Do you offer payment plans?",
+              content: "Yes, we offer flexible payment options including monthly billing and discounted annual plans. Enterprise customers can also arrange custom payment terms."
+            },
+            {
+              id: "4",
+              title: "What happens if I pause my subscription?",
+              content: "You can pause your subscription for up to 3 months per year. During the pause, you'll retain access to previously accessed materials but won't receive new content or live sessions."
+            }
+          ]}
+        />
+      </div>
+
+      <FooterLogoReveal
+        logoText="TechAcademy"
+        logoLineHeight={1.2}
+      />
+    </ThemeProvider>
+  );
+}