Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 714ae68926 | |||
| ca9c0ea096 | |||
| fd9d341e15 | |||
| 98baec1ec5 | |||
| 2c60b981cd | |||
| 5fc0346913 | |||
| a9294f927f | |||
| 871e59e9dd | |||
| 35d69def37 | |||
| 512495345b |
@@ -1,46 +1,19 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Halant } from "next/font/google";
|
|
||||||
import { Inter } from "next/font/google";
|
|
||||||
import { Public_Sans } from "next/font/google";
|
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
|
||||||
import Tag from "@/tag/Tag";
|
|
||||||
|
|
||||||
const halant = Halant({
|
|
||||||
variable: "--font-halant", subsets: ["latin"],
|
|
||||||
weight: ["300", "400", "500", "600", "700"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const inter = Inter({
|
|
||||||
variable: "--font-inter", subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const publicSans = Public_Sans({
|
|
||||||
variable: "--font-public-sans", subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Premium Product Showcase | Your Shop", description: "Explore our curated collection of premium products. Each item is carefully selected for quality, style, and craftsmanship.", keywords: "premium products, curated collection, luxury items, product showcase, quality goods", robots: {
|
title: "Simple Landing Page", description: "A simple landing page with hero, gallery and contact sections"
|
||||||
index: true,
|
|
||||||
follow: true,
|
|
||||||
},
|
|
||||||
openGraph: {
|
|
||||||
title: "Premium Product Collection", description: "Discover our carefully curated selection of high-quality products.", siteName: "Your Shop", type: "website"},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en">
|
||||||
<ServiceWrapper>
|
<body>
|
||||||
<body
|
{children}
|
||||||
className={`${halant.variable} ${inter.variable} ${publicSans.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
|
||||||
{children}
|
|
||||||
|
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
@@ -1409,7 +1382,6 @@ export default function RootLayout({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</body>
|
</body>
|
||||||
</ServiceWrapper>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
246
src/app/page.tsx
246
src/app/page.tsx
@@ -1,188 +1,124 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
||||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
||||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
||||||
import ContactText from '@/components/sections/contact/ContactText';
|
export default function Home() {
|
||||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
const navItems = [
|
||||||
import { Sparkles, Star } from 'lucide-react';
|
{ name: "Home", id: "/" },
|
||||||
|
{ name: "Gallery", id: "#gallery" },
|
||||||
|
{ name: "Contact", id: "#contact" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const galleryImages = [
|
||||||
|
{ imageSrc: "/placeholders/placeholder-16-9.svg?_wi=1", imageAlt: "Gallery item 1" },
|
||||||
|
{ imageSrc: "/placeholders/placeholder-16-9.svg?_wi=2", imageAlt: "Gallery item 2" },
|
||||||
|
{ imageSrc: "/placeholders/placeholder-16-9.svg?_wi=3", imageAlt: "Gallery item 3" },
|
||||||
|
{ imageSrc: "/placeholders/placeholder-16-9.svg?_wi=4", imageAlt: "Gallery item 4" },
|
||||||
|
{ imageSrc: "/placeholders/placeholder-16-9.svg?_wi=5", 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 (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="hover-bubble"
|
defaultButtonVariant="hover-magnetic"
|
||||||
defaultTextAnimation="reveal-blur"
|
defaultTextAnimation="entrance-slide"
|
||||||
borderRadius="pill"
|
borderRadius="rounded"
|
||||||
contentWidth="mediumLarge"
|
contentWidth="medium"
|
||||||
sizing="mediumLarge"
|
sizing="medium"
|
||||||
background="circleGradient"
|
background="none"
|
||||||
cardStyle="subtle-shadow"
|
cardStyle="solid"
|
||||||
primaryButtonStyle="gradient"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="solid"
|
secondaryButtonStyle="solid"
|
||||||
headingFontWeight="semibold"
|
headingFontWeight="bold"
|
||||||
>
|
>
|
||||||
<div id="nav" data-section="nav">
|
<NavbarStyleFullscreen
|
||||||
<NavbarStyleFullscreen
|
navItems={navItems}
|
||||||
navItems={[
|
brandName="Landing"
|
||||||
{ name: "Home", id: "home" },
|
bottomLeftText="Global"
|
||||||
{ name: "Collection", id: "products" },
|
bottomRightText="contact@example.com"
|
||||||
{ name: "About", id: "about" },
|
/>
|
||||||
{ name: "Contact", id: "contact" },
|
|
||||||
{ name: "Gallery", id: "featured" }
|
|
||||||
]}
|
|
||||||
brandName="Your Shop"
|
|
||||||
bottomLeftText="Curated Collection"
|
|
||||||
bottomRightText="hello@yourshop.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboardScroll
|
<HeroBillboardCarousel
|
||||||
title="Discover Our Collection"
|
title="Welcome to Our Landing Page"
|
||||||
description="Explore our curated selection of premium products. Each item is carefully chosen for quality and style."
|
description="Explore our beautiful gallery and get in touch with us today"
|
||||||
|
background={{ variant: "plain" }}
|
||||||
tag="Showcase"
|
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={[
|
buttons={[
|
||||||
{ text: "Browse Collection", href: "#products" }
|
{ text: "View Gallery", href: "#gallery" },
|
||||||
|
{ text: "Contact Us", href: "#contact" },
|
||||||
]}
|
]}
|
||||||
|
mediaItems={galleryImages}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="products" data-section="products">
|
<div id="gallery" data-section="gallery">
|
||||||
<ProductCardTwo
|
<FeatureCardOne
|
||||||
title="Featured Items"
|
features={galleryItems}
|
||||||
description="Our hand-selected collection of premium products. Browse through our carefully curated items."
|
title="Our Gallery"
|
||||||
tag="Collection"
|
description="Discover our collection of beautiful and inspiring work"
|
||||||
tagIcon={Star}
|
tag="Portfolio"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
gridVariant="uniform-all-items-equal"
|
||||||
animationType="slide-up"
|
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}
|
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>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactText
|
<ContactSplitForm
|
||||||
text="Interested in our collection? Get in touch to inquire about availability, custom orders, or to learn more about our products."
|
title="Get In Touch"
|
||||||
animationType="entrance-slide"
|
description="We'd love to hear from you. Send us a message and we'll respond as soon as possible."
|
||||||
background={{ variant: "plain" }}
|
inputs={[
|
||||||
useInvertedBackground={false}
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||||
buttons={[
|
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||||
{ text: "Contact Us", href: "#" },
|
|
||||||
{ text: "Subscribe for Updates", href: "#" }
|
|
||||||
]}
|
]}
|
||||||
|
textarea={{
|
||||||
|
name: "message", placeholder: "Your Message", rows: 5,
|
||||||
|
required: true,
|
||||||
|
}}
|
||||||
|
useInvertedBackground={false}
|
||||||
|
imageSrc="/placeholders/placeholder-16-9.svg?_wi=6"
|
||||||
|
mediaAnimation="none"
|
||||||
|
buttonText="Send Message"
|
||||||
|
onSubmit={(data) => console.log("Form submitted:", data)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<footer>
|
||||||
<FooterBaseCard
|
<FooterBaseCard
|
||||||
logoText="Your Shop"
|
logoText="Landing"
|
||||||
columns={[
|
columns={footerColumns}
|
||||||
{
|
copyrightText="© 2025 | Landing Page"
|
||||||
title: "Collection", items: [
|
onPrivacyClick={() => console.log("Privacy clicked")}
|
||||||
{ 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."
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</footer>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user