Merge version_4 into main

Merge version_4 into main
This commit was merged in pull request #7.
This commit is contained in:
2026-05-09 13:38:34 +00:00
3 changed files with 110 additions and 79 deletions

View File

@@ -2,61 +2,38 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FooterCard from "@/components/sections/footer/FooterCard";
export default function CheckoutPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="mediumSizeLargeTitles"
background="aurora"
cardStyle="soft-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="mediumSizeLargeTitles"
background="aurora"
cardStyle="soft-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Courses", id: "/" },
{ name: "About", id: "/" },
{ name: "Stories", id: "/" },
{ name: "Pricing", id: "/" },
]}
button={{ text: "Get Started", href: "/" }}
brandName="LearnFlow"
/>
</div>
<div id="checkout-form" data-section="checkout-form" className="py-20">
<ContactSplitForm
title="Secure Checkout"
description="Please enter your payment details to confirm your order and unlock your new course materials instantly."
inputs={[
{ name: "fullName", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "cardNumber", type: "text", placeholder: "Card Number", required: true },
{ name: "expiry", type: "text", placeholder: "MM/YY", required: true },
{ name: "cvv", type: "text", placeholder: "CVV", required: true }
]}
buttonText="Complete Payment"
onSubmit={(data) => console.log("Payment Processing", data)}
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="LearnFlow"
copyrightText="© 2025 LearnFlow"
/>
</div>
<NavbarStyleCentered
navItems={[{ name: "Home", id: "/" }, { name: "Courses", id: "/#products" }]}
brandName="LearnFlow"
/>
<main className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
<h1 className="text-4xl font-bold mb-6">Checkout</h1>
<div className="p-8 border rounded-xl">
<p>Your order summary and payment details.</p>
<button className="mt-6 px-8 py-3 bg-primary text-white rounded-full">
Complete Purchase
</button>
</div>
</main>
<FooterCard logoText="LearnFlow" />
</ReactLenis>
</ThemeProvider>
);

View File

@@ -0,0 +1,49 @@
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FooterCard from "@/components/sections/footer/FooterCard";
export default function CourseDetailPage({ params }: { params: { id: string } }) {
const [cart, setCart] = useState<any[]>([]);
const addToCart = (product: any) => {
setCart([...cart, product]);
alert("Added to cart!");
};
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="mediumSizeLargeTitles"
background="aurora"
cardStyle="soft-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<ReactLenis root>
<NavbarStyleCentered
navItems={[{ name: "Home", id: "/" }, { name: "Courses", id: "/#products" }]}
brandName="LearnFlow"
/>
<main className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
<h1 className="text-4xl font-bold mb-6">Course Details: {params.id}</h1>
<p className="text-lg mb-8">Comprehensive learning path to master the industry standards.</p>
<button
onClick={() => addToCart({ id: params.id, name: "Professional Course" })}
className="px-8 py-3 bg-primary text-white rounded-full font-bold hover:opacity-90"
>
Add to Cart
</button>
</main>
<FooterCard logoText="LearnFlow" />
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -2,18 +2,18 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Brain, BookOpen, Target, Award, Users } from "lucide-react";
import { Brain, BookOpen, Target, Award, Users, CheckCircle, Clock, GraduationCap } from "lucide-react";
export default function LandingPage() {
return (
@@ -37,6 +37,7 @@ export default function LandingPage() {
{ name: "About", id: "#about" },
{ name: "Stories", id: "#testimonials" },
{ name: "Pricing", id: "#pricing" },
{ name: "FAQ", id: "#faq" },
]}
button={{ text: "Get Started", href: "#contact" }}
brandName="LearnFlow"
@@ -86,7 +87,7 @@ export default function LandingPage() {
useInvertedBackground={true}
products={[
{ id: "p1", name: "Full-Stack Dev", price: "$199", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-vector/language-school-flat-recolor-set-people-with-dialogue-speech-bubbles-communicating-by-net-isolated-vector-illustration_1284-68794.jpg" },
{ id: "p2", name: "UX/UI Mastery", price: "$149", variant: "Design", imageSrc: "http://img.b2bpic.net/free-psd/creative-design-template_23-2150377690.jpg" },
{ id: "p2", name: "UX/UI Mastery", price: "$149", variant: "Design", imageSrc: "http://img.b2psd/creative-design-template_23-2150377690.jpg" },
{ id: "p3", name: "Data Scientist", price: "$299", variant: "Analytics", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169840.jpg" },
]}
title="Popular Courses"
@@ -100,26 +101,24 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "basic", title: "Basic Access", price: "$29", period: "/mo", features: ["Full course access", "Basic community support"], button: { text: "Start Basic" } },
{ id: "pro", title: "Pro Access", price: "$59", period: "/mo", features: ["Full course access", "Live Q&A", "Mentorship"], button: { text: "Go Pro" } },
{ id: "basic", title: "Basic Access", price: "$29", period: "/mo", features: ["Full course access", "Standard email support"], button: { text: "Start Basic" } },
{ id: "pro", title: "Pro Access", price: "$59", period: "/mo", features: ["Full course access", "Priority email support", "1-on-1 Mentorship"], button: { text: "Go Pro" } },
]}
title="Membership Plans"
description="Pick a plan that fits your learning journey."
title="Course Membership"
description="Choose your plan to unlock access to our professional curriculum."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
gridVariant="bento-grid"
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
textboxLayout="split"
useInvertedBackground={true}
title="Course Statistics"
title="Course Impact Metrics"
metrics={[
{ id: "m1", value: "50K+", title: "Students", description: "Enrolled in programs", icon: Users },
{ id: "m2", value: "200+", title: "Lessons", description: "High quality content", icon: BookOpen },
{ id: "m3", value: "98%", title: "Success", description: "Career placement", icon: Target },
{ id: "m4", value: "4.9/5", title: "Rating", description: "Student satisfaction", icon: Award },
{ id: "m1", value: "50K+", title: "Students Enrolled", items: ["Across 100+ countries", "Industry-standard curriculum"] },
{ id: "m2", value: "98%", title: "Career Success", items: ["Placement in top companies", "Verified skill growth"] },
{ id: "m3", value: "4.9/5", title: "Avg Satisfaction", items: ["High completion rates", "Hands-on projects"] },
]}
/>
</div>
@@ -138,27 +137,33 @@ export default function LandingPage() {
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={true}
<FaqSplitText
sideTitle="Course Support FAQ"
sideDescription="Common questions regarding curriculum, payments, and student resources."
faqs={[
{ id: "f1", title: "Do I have lifetime access?", content: "Yes, once you purchase a course, you get lifetime access." },
{ id: "f2", title: "Can I get a refund?", content: "We offer a 30-day money-back guarantee for all course purchases." },
{ id: "f1", title: "What payment methods do you accept?", content: "We support credit cards (Stripe), PayPal, and wire transfers for corporate enterprise partners." },
{ id: "f2", title: "Is there a student discount?", content: "Yes, verify your .edu email to receive 20% off all course memberships." },
{ id: "f3", title: "Can I get a refund?", content: "We offer a full refund if requested within 14 days of purchase, no questions asked." },
]}
title="FAQs"
description="Answers to common questions."
faqsAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
<ContactSplitForm
title="Student Support"
description="Need help with a course, payment issues, or technical access? Our team is here to assist you."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email Address", required: true },
{ name: "order", type: "text", placeholder: "Order or Invoice ID (if applicable)" }
]}
textarea={{ name: "message", placeholder: "How can we help you?", required: true }}
buttonText="Submit Support Ticket"
useInvertedBackground={false}
background={{ variant: "sparkles-gradient" }}
tag="Get Started"
title="Ready to Start Your Journey?"
description="Join LearnFlow today and build the skills for a brighter future."
buttons={[{ text: "Enroll Now", href: "#" }]}
imageSrc="http://img.b2bpic.net/free-photo/customer-service-support-contact-center_1134-266.jpg?_wi=1"
mediaPosition="left"
/>
</div>