Add src/app/products/page.tsx
This commit is contained in:
143
src/app/products/page.tsx
Normal file
143
src/app/products/page.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmall"
|
||||
background="noise"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"},
|
||||
{
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Collections", id: "/products"},
|
||||
{
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "Testimonials", id: "#testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/luxury-floral-perfume-logo-template-concept_23-2148467151.jpg"
|
||||
logoAlt="AromaLux Logo"
|
||||
brandName="AromaLux"
|
||||
button={{
|
||||
text: "Shop Now", href: "/products"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
title="Our Exquisite Products"
|
||||
description="Explore a diverse range of fragrances, each a masterpiece waiting to be discovered."
|
||||
buttons={[
|
||||
{
|
||||
text: "Back to Home", href: "/"}
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163167.jpg?_wi=1", imageAlt: "Product display"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Aura Bloom", price: "$120", variant: "Eau de Parfum", imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307320.jpg?_wi=2", imageAlt: "Aura Bloom Perfume"},
|
||||
{
|
||||
id: "p2", name: "Serenity Mist", price: "$110", variant: "Eau de Toilette", imageSrc: "http://img.b2bpic.net/free-photo/swirls-foam-blue-liquid_23-2148346909.jpg?_wi=2", imageAlt: "Serenity Mist Perfume"},
|
||||
{
|
||||
id: "p3", name: "Ignite Elixir", price: "$135", variant: "Extrait de Parfum", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163167.jpg?_wi=2", imageAlt: "Ignite Elixir Perfume"},
|
||||
{
|
||||
id: "p4", name: "Blooming Charm", price: "$105", variant: "Eau de Parfum", imageSrc: "http://img.b2bpic.net/free-photo/serum-bottle-yellow-flower-arrangement_23-2149353084.jpg", imageAlt: "Blooming Charm Perfume"},
|
||||
{
|
||||
id: "p5", name: "Noir Allure", price: "$140", variant: "Extrait de Parfum", imageSrc: "http://img.b2bpic.net/free-photo/luxury-black-perfume-bottle-with-gold-cap-dark-textured-background_84443-84117.jpg", imageAlt: "Noir Allure Perfume"},
|
||||
{
|
||||
id: "p6", name: "Solstice Glow", price: "$125", variant: "Eau de Parfum", imageSrc: "http://img.b2bpic.net/free-photo/golden-smoke-black-screen_23-2148227231.jpg", imageAlt: "Solstice Glow Perfume"},
|
||||
]}
|
||||
title="Our Exquisite Collections"
|
||||
description="Explore a diverse range of fragrances, each a masterpiece waiting to be discovered."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{
|
||||
label: "All Fragrances", href: "/products"},
|
||||
{
|
||||
label: "Gift Sets", href: "#offerings"},
|
||||
{
|
||||
label: "New Arrivals", href: "/products"},
|
||||
{
|
||||
label: "Discovery Sets", href: "#offerings"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "Our Story", href: "#about"},
|
||||
{
|
||||
label: "Craftsmanship", href: "#features"},
|
||||
{
|
||||
label: "Sustainability", href: "#features"},
|
||||
{
|
||||
label: "Careers", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "FAQ", href: "#faq"},
|
||||
{
|
||||
label: "Contact Us", href: "#contact"},
|
||||
{
|
||||
label: "Shipping & Returns", href: "#"},
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="AromaLux"
|
||||
copyrightText="© 2024 AromaLux. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user