Merge version_3 into main
Merge version_3 into main
This commit was merged in pull request #4.
This commit is contained in:
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Your Shop - Premium Collection", description: "Explore our curated selection of premium products"
|
||||
title: "Simple Landing Page", description: "A simple landing page with hero, gallery and contact sections"
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
249
src/app/page.tsx
249
src/app/page.tsx
@@ -1,189 +1,124 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Sparkles, Star } from 'lucide-react';
|
||||
import { ThemeProvider } from "@/components/providers/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
||||
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
|
||||
export default function Home() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Gallery", id: "#gallery" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
];
|
||||
|
||||
const galleryImages = [
|
||||
{ imageSrc: "/placeholders/placeholder-16-9.svg", imageAlt: "Gallery item 1" },
|
||||
{ imageSrc: "/placeholders/placeholder-16-9.svg", imageAlt: "Gallery item 2" },
|
||||
{ imageSrc: "/placeholders/placeholder-16-9.svg", imageAlt: "Gallery item 3" },
|
||||
{ imageSrc: "/placeholders/placeholder-16-9.svg", imageAlt: "Gallery item 4" },
|
||||
{ imageSrc: "/placeholders/placeholder-16-9.svg", imageAlt: "Gallery item 5" },
|
||||
];
|
||||
|
||||
const galleryItems = galleryImages.map((item, index) => ({
|
||||
title: `Item ${index + 1}`,
|
||||
description: `Beautiful gallery item showcasing our work and creativity`,
|
||||
imageSrc: item.imageSrc,
|
||||
imageAlt: item.imageAlt,
|
||||
}));
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#gallery" },
|
||||
{ label: "Gallery", href: "#gallery" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "/" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Collection", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Gallery", id: "featured" }
|
||||
]}
|
||||
brandName="Your Shop"
|
||||
bottomLeftText="Curated Collection"
|
||||
bottomRightText="hello@yourshop.com"
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Landing"
|
||||
bottomLeftText="Global"
|
||||
bottomRightText="contact@example.com"
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
title="Discover Our Collection"
|
||||
description="Explore our curated selection of premium products. Each item is carefully chosen for quality and style."
|
||||
<HeroBillboardCarousel
|
||||
title="Welcome to Our Landing Page"
|
||||
description="Explore our beautiful gallery and get in touch with us today"
|
||||
background={{ variant: "plain" }}
|
||||
tag="Showcase"
|
||||
tagIcon={Sparkles}
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-orange-slices-drinkl_23-2149418285.jpg"
|
||||
imageAlt="Premium product showcase"
|
||||
buttons={[
|
||||
{ text: "Browse Collection", href: "#products" },
|
||||
{ text: "View Gallery", href: "#featured" }
|
||||
{ text: "View Gallery", href: "#gallery" },
|
||||
{ text: "Contact Us", href: "#contact" },
|
||||
]}
|
||||
mediaItems={galleryImages}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
title="Featured Items"
|
||||
description="Our hand-selected collection of premium products. Browse through our carefully curated items."
|
||||
tag="Collection"
|
||||
tagIcon={Star}
|
||||
<div id="gallery" data-section="gallery">
|
||||
<FeatureCardOne
|
||||
features={galleryItems}
|
||||
title="Our Gallery"
|
||||
description="Discover our collection of beautiful and inspiring work"
|
||||
tag="Portfolio"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
gridVariant="bento-grid"
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "Premium Line", name: "Signature Collection Item", price: "Contact for pricing", rating: 5,
|
||||
reviewCount: "showcased", imageSrc: "http://img.b2bpic.net/free-photo/woman-leaning-studio-lamp_23-2148565483.jpg", imageAlt: "Premium product one"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "Exclusive", name: "Luxury Selection Piece", price: "Contact for pricing", rating: 5,
|
||||
reviewCount: "showcased", imageSrc: "http://img.b2bpic.net/free-photo/food-crisis-concept-still-life_23-2150198337.jpg", imageAlt: "Premium product two"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "Curated", name: "Special Edition Item", price: "Contact for pricing", rating: 5,
|
||||
reviewCount: "showcased", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-arrangement-with-water_23-2149176106.jpg", imageAlt: "Premium product three"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{ type: "text", content: "Our Collection" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#featured" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="featured" data-section="featured">
|
||||
<FeatureCardMedia
|
||||
title="Highlighted Selections"
|
||||
description="Explore our most sought-after items, each representing quality craftsmanship and unique design."
|
||||
tag="Featured"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Bestseller", description: "Our most popular item, loved for its exceptional quality and timeless appeal.", tag: "#1 Choice", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Limited Edition", description: "Exclusive selection featuring rare items with unique characteristics and premium finish.", tag: "Exclusive", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-blanket-with-cup-coffee_23-2147911498.jpg"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Customer Favorite", description: "Highly rated collection pieces chosen by our most discerning customers.", tag: "Fan Pick", imageSrc: "http://img.b2bpic.net/free-photo/happy-women-traveling-train-vacation-travel-ideas_1150-14786.jpg"
|
||||
},
|
||||
{
|
||||
id: "4", title: "New Addition", description: "Latest items added to our collection, showcasing contemporary design and quality.", tag: "New", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-paper-bags_23-2147771813.jpg"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialproof" data-section="socialproof">
|
||||
<SocialProofOne
|
||||
title="Trusted By"
|
||||
description="Our collection is appreciated by customers and featured in leading publications."
|
||||
tag="Partners"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Premium Retailers", "Design Magazines", "Lifestyle Brands", "Fashion Platforms", "Curated Collections", "Style Influencers", "Design Studios"
|
||||
]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Interested in our collection? Get in touch to inquire about availability, custom orders, or to learn more about our products."
|
||||
animationType="entrance-slide"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Contact Us", href: "#" },
|
||||
{ text: "Subscribe for Updates", href: "#" }
|
||||
<ContactSplitForm
|
||||
title="Get In Touch"
|
||||
description="We'd love to hear from you. Send us a message and we'll respond as soon as possible."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Your Message", rows: 5,
|
||||
required: true,
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="/placeholders/placeholder-16-9.svg"
|
||||
mediaAnimation="none"
|
||||
buttonText="Send Message"
|
||||
onSubmit={(data) => console.log("Form submitted:", data)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<footer>
|
||||
<FooterBaseCard
|
||||
logoText="Your Shop"
|
||||
columns={[
|
||||
{
|
||||
title: "Collection", items: [
|
||||
{ label: "All Items", href: "#products" },
|
||||
{ label: "Featured", href: "#featured" },
|
||||
{ label: "New Arrivals", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Our Story", href: "#" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Inquiries", href: "#" },
|
||||
{ label: "Information", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Use", href: "#" },
|
||||
{ label: "Cookies", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Your Shop. All rights reserved."
|
||||
logoText="Landing"
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 | Landing Page"
|
||||
onPrivacyClick={() => console.log("Privacy clicked")}
|
||||
/>
|
||||
</div>
|
||||
</footer>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user