180 lines
6.2 KiB
TypeScript
180 lines
6.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Star } from "lucide-react";
|
|
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Shop", id: "shop" },
|
|
{ name: "Custom", id: "custom" },
|
|
{ name: "About", id: "about" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Shop",
|
|
items: [
|
|
{ label: "All Magnets", href: "/shop" },
|
|
{ label: "Classic Magnets", href: "/shop?category=classic" },
|
|
{ label: "Photo Magnets", href: "/shop?category=photo" },
|
|
{ label: "Custom Design", href: "/custom" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Blog", href: "/blog" },
|
|
{ label: "Careers", href: "/careers" },
|
|
{ label: "Contact", href: "/contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Customer Support",
|
|
items: [
|
|
{ label: "FAQ", href: "/faq" },
|
|
{ label: "Shipping Info", href: "/shipping" },
|
|
{ label: "Returns", href: "/returns" },
|
|
{ label: "Size Guide", href: "/sizing" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy Policy", href: "/privacy" },
|
|
{ label: "Terms & Conditions", href: "/terms" },
|
|
{ label: "Cookie Settings", href: "/cookies" },
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function ShopPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Mister Magnesik"
|
|
navItems={navItems}
|
|
button={{
|
|
text: "Cart",
|
|
href: "/cart",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboardSplit
|
|
logoText="Shop All Magnets"
|
|
description="Discover our complete collection of premium magnets, from classic designs to personalized photo magnets."
|
|
background={{ variant: "animated-grid" }}
|
|
buttons={[
|
|
{ text: "Browse Collection", href: "#products" },
|
|
{ text: "Create Custom", href: "/custom" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
layoutOrder="default"
|
|
imageSrc="http://img.b2bpic.net/free-vector/colorful-sale-signs_53876-90903.jpg?_wi=2"
|
|
imageAlt="Shop All Magnets - Complete Collection"
|
|
mediaAnimation="slide-up"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="All Magnets"
|
|
description="Browse our extensive collection of magnets in various shapes, sizes, and styles."
|
|
tag="Full Catalog"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "product-1",
|
|
name: "Classic Round Magnet",
|
|
price: "$4.99",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/gradient-memorial-day-background_23-2149344867.jpg?_wi=2",
|
|
imageAlt: "Classic Round Magnet",
|
|
},
|
|
{
|
|
id: "product-2",
|
|
name: "Heart-Shaped Photo Magnet",
|
|
price: "$7.99",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/valentines-day-heart-wooden-background_23-2148379977.jpg?_wi=2",
|
|
imageAlt: "Heart-Shaped Photo Magnet",
|
|
},
|
|
{
|
|
id: "product-3",
|
|
name: "Square Picture Frame Magnet",
|
|
price: "$8.99",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-gray-frame-with-dried-rose-buds-strawberries-red-black-currants-blue-surface_141793-17634.jpg?_wi=2",
|
|
imageAlt: "Square Picture Frame Magnet",
|
|
},
|
|
{
|
|
id: "product-4",
|
|
name: "Hexagon Marble Magnet",
|
|
price: "$6.99",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/realistic-golden-frame-design_23-2149251352.jpg?_wi=2",
|
|
imageAlt: "Hexagon Marble Magnet",
|
|
},
|
|
{
|
|
id: "product-5",
|
|
name: "Oval Metallic Magnet",
|
|
price: "$5.99",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-matchsticks-with-geometric-shapes_23-2149600202.jpg?_wi=2",
|
|
imageAlt: "Oval Metallic Magnet",
|
|
},
|
|
{
|
|
id: "product-6",
|
|
name: "Star-Shaped Glitter Magnet",
|
|
price: "$6.49",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cardboard-packaging-with-transparent-window_187299-46681.jpg?_wi=2",
|
|
imageAlt: "Star-Shaped Glitter Magnet",
|
|
},
|
|
{
|
|
id: "product-7",
|
|
name: "Diamond Sparkle Magnet",
|
|
price: "$9.99",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cup-dried-flowers-vase-home-interior-living-room_169016-57860.jpg?_wi=2",
|
|
imageAlt: "Diamond Sparkle Magnet",
|
|
},
|
|
{
|
|
id: "product-8",
|
|
name: "Circle Wave Magnet",
|
|
price: "$5.49",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-round-mystery-box_23-2149516474.jpg?_wi=2",
|
|
imageAlt: "Circle Wave Magnet",
|
|
},
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Mister Magnesik"
|
|
copyrightText="© 2025 Mister Magnesik. All rights reserved."
|
|
columns={footerColumns}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |