Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-27 07:11:29 +00:00

View File

@@ -16,397 +16,163 @@ import { CheckCircle, FileText, Map, PieChart, Search } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="large"
background="fluid"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid"
headingFontWeight="bold"
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="large"
background="fluid"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "How it works",
id: "explainer",
},
{
name: "Dashboard",
id: "dashboard",
},
{
name: "Support",
id: "contact",
},
]}
brandName="TransferPath"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "How it works", id: "explainer" },
{ name: "Dashboard", id: "dashboard" },
{ name: "Support", id: "contact" },
]}
brandName="TransferPath"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Know exactly which classes you need to transfer"
description="TransferPath simplifies your academic journey by mapping your completed coursework to target degree requirements, saving you time and tuition."
testimonials={[
{
name: "Alex R.",
handle: "@alexr",
testimonial: "I saved an entire semester of tuition thanks to TransferPath!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-65666.jpg?_wi=1",
},
{
name: "Jordan P.",
handle: "@jordanp",
testimonial: "The easiest way to track my credits for transfer.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/pretty-self-confident-millennial-girl-wears-pink-shirt-knitted-vest-headband-looks-directly-camera-has-walk-outside-spare-time-poses-outside_273609-55310.jpg?_wi=1",
},
{
name: "Sam L.",
handle: "@saml",
testimonial: "Finally, I know exactly what I need to take.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-78641.jpg",
},
{
name: "Taylor W.",
handle: "@taylorw",
testimonial: "Game changer for my transfer process.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-female-remote-worker-holds-notepad-pen-writes-down-notes-planner-going-make-project-strolls-outside-wears-green-jumper-looks-away_273609-55350.jpg",
},
{
name: "Casey M.",
handle: "@caseym",
testimonial: "Simple, intuitive, and accurate.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-smiling-with-arms-crossed_1187-3243.jpg",
},
]}
buttons={[
{
text: "Plan My Transfer",
href: "#explainer",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/young-activists-taking-action_23-2149502779.jpg?_wi=1"
imageAlt="TransferPath platform overview"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/close-up-portrait-pretty-young-woman-isolated_273609-35589.jpg",
alt: "student portrait studio headshot",
},
{
src: "http://img.b2bpic.net/free-photo/thoughtful-redhead-woman-black-wall_176420-16401.jpg",
alt: "student portrait studio headshot",
},
{
src: "http://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79354.jpg",
alt: "student portrait studio headshot",
},
{
src: "http://img.b2bpic.net/free-photo/young-beautiful-girl-black-turtleneck-with-annoyed-expression_141793-55215.jpg",
alt: "student portrait studio headshot",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-happy-young-woman-emotion-concept-emotion-joy_169016-66653.jpg",
alt: "student portrait studio headshot",
},
]}
avatarText="Join 10,000+ students"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Know exactly which classes you need to transfer"
description="TransferPath simplifies your academic journey by mapping your completed coursework to target degree requirements, saving you time and tuition."
testimonials={[
{ name: "Alex R.", handle: "@alexr", testimonial: "I saved an entire semester of tuition thanks to TransferPath!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-65666.jpg" },
{ name: "Jordan P.", handle: "@jordanp", testimonial: "The easiest way to track my credits for transfer.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-self-confident-millennial-girl-wears-pink-shirt-knitted-vest-headband-looks-directly-camera-has-walk-outside-spare-time-poses-outside_273609-55310.jpg" },
{ name: "Sam L.", handle: "@saml", testimonial: "Finally, I know exactly what I need to take.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-78641.jpg" },
{ name: "Taylor W.", handle: "@taylorw", testimonial: "Game changer for my transfer process.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-female-remote-worker-holds-notepad-pen-writes-down-notes-planner-going-make-project-strolls-outside-wears-green-jumper-looks-away_273609-55350.jpg" },
{ name: "Casey M.", handle: "@caseym", testimonial: "Simple, intuitive, and accurate.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-smiling-with-arms-crossed_1187-3243.jpg" }
]}
buttons={[{ text: "Plan My Transfer", href: "#explainer" }]}
imageSrc="http://img.b2bpic.net/free-photo/young-activists-taking-action_23-2149502779.jpg"
imageAlt="TransferPath platform overview"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-pretty-young-woman-isolated_273609-35589.jpg", alt: "student portrait" },
{ src: "http://img.b2bpic.net/free-photo/thoughtful-redhead-woman-black-wall_176420-16401.jpg", alt: "student portrait" },
{ src: "http://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79354.jpg", alt: "student portrait" },
{ src: "http://img.b2bpic.net/free-photo/young-beautiful-girl-black-turtleneck-with-annoyed-expression_141793-55215.jpg", alt: "student portrait" },
{ src: "http://img.b2bpic.net/free-photo/portrait-happy-young-woman-emotion-concept-emotion-joy_169016-66653.jpg", alt: "student portrait" }
]}
avatarText="Join 10,000+ students"
/>
</div>
<div id="explainer" data-section="explainer">
<SplitAbout
textboxLayout="split"
useInvertedBackground={true}
title="Your shortest path to a new degree"
description="Planning your transfer doesn't have to be confusing. Follow these three steps to build your roadmap."
bulletPoints={[
{
title: "1. Enter your schools",
description: "Select your current and target institutions.",
icon: Search,
},
{
title: "2. Add completed courses",
description: "Log the courses you've already taken.",
icon: CheckCircle,
},
{
title: "3. See your shortest path",
description: "Get an optimized plan for your remaining credits.",
icon: Map,
},
]}
mediaAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/school-icons-set_1009-223.jpg"
imageAlt="Academic path visualization"
/>
</div>
<div id="explainer" data-section="explainer">
<SplitAbout
textboxLayout="split"
useInvertedBackground={true}
title="Your shortest path to a new degree"
description="Planning your transfer doesn't have to be confusing. Follow these three steps to build your roadmap."
bulletPoints={[
{ title: "1. Enter your schools", description: "Select your current and target institutions.", icon: Search },
{ title: "2. Add completed courses", description: "Log the courses you've already taken.", icon: CheckCircle },
{ title: "3. See your shortest path", description: "Get an optimized plan for your remaining credits.", icon: Map },
]}
mediaAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-vector/school-icons-set_1009-223.jpg"
imageAlt="Academic path visualization"
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Autocomplete Search",
description: "Find your schools and courses instantly.",
icon: Search,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/school-learning-background_23-2147493131.jpg",
imageAlt: "Search",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/zoom-out-front-side_187299-39704.jpg",
imageAlt: "Search",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/young-activists-taking-action_23-2149502779.jpg?_wi=2",
imageAlt: "search school icon flat",
},
{
title: "Progress Tracking",
description: "See how much of your degree is met.",
icon: PieChart,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/ipad-online-learning-icons-background_23-2147591991.jpg",
imageAlt: "Progress",
},
{
imageSrc: "http://img.b2bpic.net/free-vector/20-academy-flat-color-icon-pack-like-ruler-design-account-study-magnet_1142-22861.jpg",
imageAlt: "Progress",
},
],
imageSrc: "http://img.b2bpic.net/free-vector/vintage-school-infographics-template-collection_23-2148657515.jpg",
imageAlt: "search school icon flat",
},
{
title: "PDF Exports",
description: "Download your plan for advising meetings.",
icon: FileText,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-65666.jpg?_wi=2",
imageAlt: "Export",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/athlete-background-successful-concept-finish-line_53876-153361.jpg",
imageAlt: "Export",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/pretty-self-confident-millennial-girl-wears-pink-shirt-knitted-vest-headband-looks-directly-camera-has-walk-outside-spare-time-poses-outside_273609-55310.jpg?_wi=2",
imageAlt: "search school icon flat",
},
]}
title="Built for modern students"
description="Powerful tools to manage your academic future with ease."
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Autocomplete Search", description: "Find your schools and courses instantly.", icon: Search, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/school-learning-background_23-2147493131.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/zoom-out-front-side_187299-39704.jpg" }] },
{ title: "Progress Tracking", description: "See how much of your degree is met.", icon: PieChart, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/ipad-online-learning-icons-background_23-2147591991.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/20-academy-flat-color-icon-pack-like-ruler-design-account-study-magnet_1142-22861.jpg" }] },
{ title: "PDF Exports", description: "Download your plan for advising meetings.", icon: FileText, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-65666.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/athlete-background-successful-concept-finish-line_53876-153361.jpg" }] }
]}
title="Built for modern students"
description="Powerful tools to manage your academic future with ease."
/>
</div>
<div id="product" data-section="product">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "1",
name: "Credit Transfer Tracker",
price: "Free",
imageSrc: "http://img.b2bpic.net/free-photo/shocked-young-brunette-caucasian-girl-optical-glasses-looks-isolated-purple-wall_141793-70400.jpg",
},
{
id: "2",
name: "Path Optimizer",
price: "$19",
imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",
},
{
id: "3",
name: "Advisor Portal Access",
price: "$49",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg",
},
{
id: "4",
name: "Transfer Insights",
price: "$29",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-dancer_107420-63943.jpg",
},
{
id: "5",
name: "PDF Export Tool",
price: "$9",
imageSrc: "http://img.b2bpic.net/free-photo/woman-carries-yoga-mat-rests-after-training-concentrated-into-distance-wears-sweatshirt-poses-healthy-lifestyle-wellbeing-concept_273609-56249.jpg",
},
{
id: "6",
name: "Articulation API",
price: "$99",
imageSrc: "http://img.b2bpic.net/free-photo/positive-asian-business-male-taking-off-face-mask-virus-protection-show-his-smile-with-cheerful-get-well-fight-spread-covid-19-epidemic-health-ideas-concept_609648-1045.jpg",
},
]}
title="Platform Capabilities"
description="Comprehensive tools for academic planning success."
/>
</div>
<div id="product" data-section="product">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{ id: "1", name: "Credit Transfer Tracker", price: "Free", imageSrc: "http://img.b2bpic.net/free-photo/shocked-young-brunette-caucasian-girl-optical-glasses-looks-isolated-purple-wall_141793-70400.jpg" },
{ id: "2", name: "Path Optimizer", price: "$19", imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg" },
{ id: "3", name: "Advisor Portal Access", price: "$49", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg" },
{ id: "4", name: "Transfer Insights", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-dancer_107420-63943.jpg" },
{ id: "5", name: "PDF Export Tool", price: "$9", imageSrc: "http://img.b2bpic.net/free-photo/woman-carries-yoga-mat-rests-after-training-concentrated-into-distance-wears-sweatshirt-poses-healthy-lifestyle-wellbeing-concept_273609-56249.jpg" },
{ id: "6", name: "Articulation API", price: "$99", imageSrc: "http://img.b2bpic.net/free-photo/positive-asian-business-male-taking-off-face-mask-virus-protection-show-his-smile-with-cheerful-get-well-fight-spread-covid-19-epidemic-health-ideas-concept_609648-1045.jpg" }
]}
title="Platform Capabilities"
description="Comprehensive tools for academic planning success."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "10k+",
description: "Students served",
},
{
id: "m2",
value: "500+",
description: "Schools indexed",
},
{
id: "m3",
value: "1M+",
description: "Credits saved",
},
]}
title="Our Impact"
description="Empowering thousands of students every day."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "10k+", description: "Students served" },
{ id: "m2", value: "500+", description: "Schools indexed" },
{ id: "m3", value: "1M+", description: "Credits saved" }
]}
title="Our Impact"
description="Empowering thousands of students every day."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Sarah J.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-football-game_23-2149015522.jpg",
},
{
id: "2",
name: "Mike C.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg",
},
{
id: "3",
name: "Emily R.",
imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-with-trendy-hairdo-frowns-face-with-pleasure_273609-8674.jpg",
},
{
id: "4",
name: "David K.",
imageSrc: "http://img.b2bpic.net/free-photo/confident-young-student-girl-wearing-glasses-back-bag-standing-with-closed-posture-holding-coffee-cup-isolated-orange-with-copy-space_141793-77208.jpg",
},
{
id: "5",
name: "Anna S.",
imageSrc: "http://img.b2bpic.net/free-photo/snarling-angry-man_1154-81.jpg",
},
]}
cardTitle="Success Stories"
cardAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={true}
cardTitle="Success Stories"
cardTag="Testimonials"
cardAnimation="slide-up"
testimonials={[
{ id: "1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-person-football-game_23-2149015522.jpg" },
{ id: "2", name: "Mike C.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg" },
{ id: "3", name: "Emily R.", imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-with-trendy-hairdo-frowns-face-with-pleasure_273609-8674.jpg" },
{ id: "4", name: "David K.", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-student-girl-wearing-glasses-back-bag-standing-with-closed-posture-holding-coffee-cup-isolated-orange-with-copy-space_141793-77208.jpg" },
{ id: "5", name: "Anna S.", imageSrc: "http://img.b2bpic.net/free-photo/snarling-angry-man_1154-81.jpg" }
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Start your journey today"
description="Have questions about your transfer? Send us a message."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "How can we help?",
rows: 4,
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/smiling-man-his-work-time-office-job_23-2149571041.jpg"
imageAlt="Support team contact"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Start your journey today"
description="Have questions about your transfer? Send us a message."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true }
]}
textarea={{ name: "message", placeholder: "How can we help?", rows: 4, required: true }}
imageSrc="http://img.b2bpic.net/free-photo/smiling-man-his-work-time-office-job_23-2149571041.jpg"
imageAlt="Support team contact"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="TransferPath"
columns={[
{
title: "Platform",
items: [
{
label: "How it works",
href: "#explainer",
},
{
label: "Features",
href: "#feature",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "#",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="TransferPath"
columns={[
{ title: "Platform", items: [{ label: "How it works", href: "#explainer" }, { label: "Features", href: "#feature" }] },
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Contact", href: "#contact" }] },
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);