Files
ece18562-34fe-431d-a0b0-2cc…/src/app/programs/page.tsx

197 lines
7.8 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Compass } from "lucide-react";
export default function ProgramsPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Programs", id: "programs" },
{ name: "Admissions", id: "admissions" },
{ name: "Campus Life", id: "campus" },
{ name: "Contact", id: "contact" },
];
const handleNavClick = (id: string) => {
const routes: Record<string, string> = {
home: "/",
about: "/about",
programs: "/programs",
admissions: "/admissions",
campus: "/campus-life",
contact: "/contact",
};
if (routes[id]) {
window.location.href = routes[id];
}
};
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="largeSmallSizeMediumTitles"
background="aurora"
cardStyle="solid"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={navItems}
brandName="Richfield College"
button={{
text: "Apply Now",
href: "/admissions",
}}
animateOnLoad={true}
className="backdrop-blur-md bg-opacity-80"
navItemClassName="text-sm font-semibold hover:text-var(--primary-cta)"
buttonClassName="bg-var(--primary-cta) text-var(--primary-cta-text) px-6 py-2 rounded-soft"
buttonTextClassName="font-bold"
/>
</div>
<div id="programs-page-hero" data-section="programs-page-hero">
<HeroSplitKpi
title="Our Programs"
description="Career-focused programs designed to prepare you for success in today's dynamic professional landscape."
background={{ variant: "radial-gradient" }}
kpis={[
{ value: "4", label: "Program Types" },
{ value: "50+", label: "Industry Partners" },
{ value: "95%", label: "Placement Rate" },
]}
enableKpiAnimation={true}
tag="Explore Opportunities"
tagIcon={Compass}
tagAnimation="slide-up"
buttons={[{ text: "Discover Programs", href: "#programs-list" }]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/young-blonde-lady-outdoors_171337-19434.jpg"
imageAlt="Campus Learning Facilities"
mediaAnimation="blur-reveal"
imagePosition="right"
className="w-full"
containerClassName="max-w-7xl mx-auto"
titleClassName="text-5xl md:text-6xl font-bold text-var(--foreground)"
descriptionClassName="text-lg text-var(--foreground) opacity-90"
/>
</div>
<div id="programs-page-products" data-section="programs-page-products">
<ProductCardThree
title="Explore Our Programs"
description="Each program is designed with industry input to ensure you graduate career-ready."
products={[
{
id: "program-business",
name: "Business Management",
price: "From R35,000/semester",
imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-lady-outdoors_171337-19434.jpg",
imageAlt: "Business Management Program",
},
{
id: "program-it",
name: "Information Technology",
price: "From R38,000/semester",
imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-lady-outdoors_171337-19434.jpg",
imageAlt: "IT Program",
},
{
id: "program-marketing",
name: "Marketing & Entrepreneurship",
price: "From R33,000/semester",
imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-lady-outdoors_171337-19434.jpg",
imageAlt: "Marketing Program",
},
{
id: "program-finance",
name: "Finance & Accounting",
price: "From R36,000/semester",
imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-lady-outdoors_171337-19434.jpg",
imageAlt: "Finance Program",
},
]}
gridVariant="two-columns-alternating-heights"
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
tag="Academic Offerings"
tagIcon={Compass}
tagAnimation="slide-up"
className="w-full"
containerClassName="max-w-7xl mx-auto"
cardClassName="bg-var(--card) rounded-soft overflow-hidden hover:shadow-xl transition-all"
imageClassName="w-full h-64 object-cover"
cardNameClassName="text-2xl font-bold text-var(--foreground) mt-4"
textBoxTitleClassName="text-4xl md:text-5xl font-bold text-var(--foreground) mb-4"
textBoxDescriptionClassName="text-lg text-var(--foreground) opacity-80 mb-8"
/>
</div>
<div id="footer-programs" data-section="footer-programs">
<FooterBaseCard
logoText="Richfield College"
columns={[
{
title: "Programs",
items: [
{ label: "Business Management", href: "/programs" },
{ label: "Information Technology", href: "/programs" },
{ label: "Marketing & Entrepreneurship", href: "/programs" },
{ label: "Finance & Accounting", href: "/programs" },
],
},
{
title: "Student Life",
items: [
{ label: "Campus Experience", href: "/campus-life" },
{ label: "Student Support", href: "/#" },
{ label: "Internships", href: "/#" },
{ label: "Clubs & Events", href: "/#" },
],
},
{
title: "About",
items: [
{ label: "Our Mission", href: "/about" },
{ label: "Faculty", href: "/#" },
{ label: "Careers", href: "/#" },
{ label: "News & Blog", href: "/#" },
],
},
{
title: "Contact",
items: [
{ label: "Admissions", href: "/admissions" },
{ label: "Email: info@richfield.edu.za", href: "mailto:info@richfield.edu.za" },
{ label: "Phone: +27 (11) 234-5678", href: "tel:+27112345678" },
{ label: "Bryanston, Johannesburg", href: "/#" },
],
},
]}
copyrightText="© 2025 Richfield College. All rights reserved. Premium education for ambitious futures."
className="w-full"
containerClassName="max-w-7xl mx-auto"
cardClassName="bg-var(--foreground) text-white rounded-soft p-12"
logoTextClassName="text-2xl font-bold text-var(--primary-cta) mb-8"
columnsClassName="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"
columnClassName="flex flex-col"
columnTitleClassName="font-bold text-lg mb-4 text-var(--primary-cta)"
columnItemClassName="text-white opacity-80 hover:opacity-100 transition-opacity mb-3 text-sm"
copyrightTextClassName="text-center text-white opacity-60 text-xs"
/>
</div>
</ThemeProvider>
);
}