Add src/app/shop/page.tsx
This commit is contained in:
163
src/app/shop/page.tsx
Normal file
163
src/app/shop/page.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Zap, Package } from 'lucide-react';
|
||||
|
||||
export default function ShopPage() {
|
||||
const allProducts = [
|
||||
{
|
||||
id: "1", name: "Advanced Python Course", price: "$299", variant: "Lifetime Access · 40 Hours", imageSrc: "https://img.b2bpic.net/free-photo/person-computing-software-code-laptop_482257-85707.jpg", imageAlt: "Python programming course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 1"),
|
||||
onProductClick: () => console.log("Clicked product 1")
|
||||
},
|
||||
{
|
||||
id: "2", name: "Web Development Bootcamp", price: "$499", variant: "12 Weeks · Job Guarantee", imageSrc: "https://img.b2bpic.net/free-photo/side-view-attractive-hispanic-developer-programming-software-using-computer-while-working-from-home_662251-988.jpg", imageAlt: "Web development course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 2"),
|
||||
onProductClick: () => console.log("Clicked product 2")
|
||||
},
|
||||
{
|
||||
id: "3", name: "Data Science Masterclass", price: "$399", variant: "14 Weeks · Certification", imageSrc: "https://img.b2bpic.net/free-photo/man-working-energy-innovations-his-laptop_23-2148820170.jpg", imageAlt: "Data science course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 3"),
|
||||
onProductClick: () => console.log("Clicked product 3")
|
||||
},
|
||||
{
|
||||
id: "4", name: "Cloud & DevOps Course", price: "$349", variant: "10 Weeks · Hands-on Labs", imageSrc: "https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg", imageAlt: "Cloud and DevOps training", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 4"),
|
||||
onProductClick: () => console.log("Clicked product 4")
|
||||
},
|
||||
{
|
||||
id: "5", name: "Cybersecurity Fundamentals", price: "$379", variant: "12 Weeks · Certification", imageSrc: "https://img.b2bpic.net/free-photo/close-up-colleagues-learning-work_23-2149300706.jpg", imageAlt: "Cybersecurity training course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 5"),
|
||||
onProductClick: () => console.log("Clicked product 5")
|
||||
},
|
||||
{
|
||||
id: "6", name: "JavaScript & React Advanced", price: "$329", variant: "8 Weeks · Project-Based", imageSrc: "https://img.b2bpic.net/free-photo/mid-shot-counselor-cabinet_23-2148759108.jpg", imageAlt: "JavaScript and React course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 6"),
|
||||
onProductClick: () => console.log("Clicked product 6")
|
||||
},
|
||||
{
|
||||
id: "7", name: "Machine Learning Basics", price: "$449", variant: "16 Weeks · Hands-on Labs", imageSrc: "https://img.b2bpic.net/free-photo/closeup-senior-lecturer-with-arms-crossed_1262-1753.jpg", imageAlt: "Machine learning course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 7"),
|
||||
onProductClick: () => console.log("Clicked product 7")
|
||||
},
|
||||
{
|
||||
id: "8", name: "Mobile App Development with Flutter", price: "$369", variant: "10 Weeks · Cross-Platform", imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg", imageAlt: "Flutter mobile development course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 8"),
|
||||
onProductClick: () => console.log("Clicked product 8")
|
||||
},
|
||||
{
|
||||
id: "9", name: "Database Design & SQL", price: "$279", variant: "6 Weeks · Fundamentals", imageSrc: "https://img.b2bpic.net/free-photo/cheerful-young-man-holding-folder-outdoor_74855-2121.jpg", imageAlt: "Database and SQL course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 9"),
|
||||
onProductClick: () => console.log("Clicked product 9")
|
||||
},
|
||||
{
|
||||
id: "10", name: "UI/UX Design Principles", price: "$319", variant: "8 Weeks · Design Thinking", imageSrc: "https://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6609.jpg", imageAlt: "UI/UX design course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 10"),
|
||||
onProductClick: () => console.log("Clicked product 10")
|
||||
},
|
||||
{
|
||||
id: "11", name: "AWS Solutions Architect", price: "$429", variant: "12 Weeks · Certification Prep", imageSrc: "https://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6612.jpg", imageAlt: "AWS architect course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 11"),
|
||||
onProductClick: () => console.log("Clicked product 11")
|
||||
},
|
||||
{
|
||||
id: "12", name: "Docker & Kubernetes Essentials", price: "$389", variant: "10 Weeks · Container Orchestration", imageSrc: "https://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg", imageAlt: "Docker and Kubernetes course", isFavorited: false,
|
||||
onFavorite: () => console.log("Favorited product 12"),
|
||||
onProductClick: () => console.log("Clicked product 12")
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="sharp"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="IT Home"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Courses", id: "courses" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Enroll Now", href: "contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
title="Explore Our Complete Course Shop"
|
||||
description="Browse our comprehensive selection of in-demand tech courses designed to advance your career. Find the perfect course to match your learning goals."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="All Products"
|
||||
tagIcon={Zap}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
|
||||
imageAlt="IT Home courses showcase"
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
products={allProducts}
|
||||
title="All Available Courses"
|
||||
description="Discover our complete collection of technology courses with flexible learning options and industry certifications."
|
||||
tag="Shop"
|
||||
tagIcon={Package}
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="IT Home"
|
||||
copyrightText="© 2025 IT Home. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Programs", items: [
|
||||
{ label: "Web Development", href: "courses" },
|
||||
{ label: "Data Science", href: "courses" },
|
||||
{ label: "Python Programming", href: "courses" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Our Team", href: "team" },
|
||||
{ label: "Careers", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Contact Us", href: "contact" },
|
||||
{ label: "FAQ", href: "faq" },
|
||||
{ label: "Student Portal", href: "https://portal.ithome.example.com" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user