Files
7c35541f-e46e-421e-8108-3a5…/src/app/page.tsx
2026-03-26 15:06:17 +00:00

191 lines
9.7 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumSmall"
sizing="largeSmallSizeLargeTitles"
background="grid"
cardStyle="subtle-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home", id: "/"},
{
name: "Shop", id: "/shop"},
{
name: "About", id: "/about"},
{
name: "Contact", id: "/contact"},
]}
brandName="Kings Arts"
button={{
text: "Shop Now", href: "/shop"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
background={{
variant: "radial-gradient"}}
title="Kings Arts: Where Creativity Finds Its Canvas"
description="Discover exquisite artworks, unique supplies, and inspiring workshops for every artist."
buttons={[
{
text: "Explore Gallery", href: "/shop"},
{
text: "Join Workshop", href: "/contact"},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-wearing-headphones_23-2149911898.jpg", imageAlt: "Abstract painting with vibrant colors"},
{
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-vase_23-2148986269.jpg", imageAlt: "Modern abstract ceramic sculpture"},
{
imageSrc: "http://img.b2bpic.net/free-photo/positive-woman-red-hanging-art-pictures_1398-1920.jpg", imageAlt: "Serene watercolor landscape painting"},
{
imageSrc: "http://img.b2bpic.net/free-photo/colorful-mural-graffiti-wallpaper_23-2149007743.jpg", imageAlt: "Textured mixed media artwork"},
{
imageSrc: "http://img.b2bpic.net/free-photo/purple-floral-wall-textured-background_53876-102790.jpg", imageAlt: "Expressive oil portrait painting"},
{
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-art-nouveau-frame-borders-ornament-collection_23-2149685449.jpg", imageAlt: "Classic still life painting"},
]}
mediaAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{
type: "text", content: "Our Passion for Art Fuels Every Creation at "},
{
type: "text", content: "Kings Arts"},
]}
buttons={[
{
text: "Learn More About Us", href: "/about"},
]}
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
carouselMode="buttons"
products={[
{
id: "p1", name: "Vibrant Abstract Canvas", price: "$250.00", variant: "Acrylic on Canvas", imageSrc: "http://img.b2bpic.net/free-photo/frame-reflected-desk_1203-260.jpg", imageAlt: "Colorful abstract painting"},
{
id: "p2", name: "Minimalist Ceramic Sculpture", price: "$180.00", variant: "Hand-formed Clay", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-abstract-art-cover-collection_23-2148972447.jpg", imageAlt: "Abstract ceramic sculpture"},
{
id: "p3", name: "Serene Landscape Print", price: "$95.00", variant: "Limited Edition Giclée", imageSrc: "http://img.b2bpic.net/free-photo/painter-works-with-finger-painting-technique-her-latest-artwork-piece_482257-124724.jpg", imageAlt: "Fine art print of a serene landscape"},
{
id: "p4", name: "Artisan Crafted Necklace", price: "$120.00", variant: "Mixed Metal & Stone", imageSrc: "http://img.b2bpic.net/free-photo/cropped-photo-woman-tasting-cheese-wooden-board-with-christmas-decorations-background_132075-11273.jpg", imageAlt: "Handmade artistic necklace"},
]}
title="Curated Masterpieces & Artisan Crafts"
description="Explore our diverse collection, from vibrant paintings to intricate sculptures and handcrafted jewelry."
buttons={[
{
text: "View All Products", href: "/shop"},
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={false}
title="Unleash Your Inner Artist"
description="Kings Arts offers more than just products; we provide experiences to nurture your artistic journey."
accordionItems={[
{
id: "f1", title: "Art Workshops & Classes", content: "Join our diverse range of workshops, from beginner basics to advanced techniques in various mediums. Learn from experienced artists in an inspiring studio environment."},
{
id: "f2", title: "Custom Art Commissions", content: "Have a vision? Our artists can bring your unique ideas to life. Commission personalized artworks, portraits, or custom pieces tailored to your specifications."},
{
id: "f3", title: "Quality Art Supplies", content: "Discover a curated selection of high-quality art materials, tools, and accessories. We stock everything you need to create your next masterpiece, from paints to canvases."},
]}
imageSrc="http://img.b2bpic.net/free-photo/happy-painter_8353-11006.jpg"
imageAlt="People attending an art workshop, painting on canvases"
mediaAnimation="opacity"
mediaPosition="right"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
carouselMode="auto"
testimonials={[
{
id: "t1", name: "Sarah Miller", handle: "@ArtLoverSarah", testimonial: "Kings Arts is my go-to for unique pieces and quality supplies. Their collection is always inspiring, and the staff are incredibly knowledgeable and passionate.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/confused-superwoman-with-red-cape-optical-glasses-stands-sideways-putting-hand-chin-isolated-orange-wall_141793-95619.jpg", imageAlt: "Portrait of Sarah Miller"},
{
id: "t2", name: "David Chen", handle: "@CreativeDave", testimonial: "The workshops at Kings Arts transformed my painting skills! I learned so much, and the atmosphere was welcoming and supportive. Highly recommend!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-smiling-cheerfully-pointin-with-thumbs-back_141793-55345.jpg", imageAlt: "Portrait of David Chen"},
{
id: "t3", name: "Emily Rodriguez", handle: "@ArtisticEm", testimonial: "I commissioned a custom portrait for my husband, and Kings Arts exceeded all expectations. The artwork is stunning and truly captured our essence. A treasured piece!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/unknown-young-man-posing-front-view_23-2149417576.jpg", imageAlt: "Portrait of Emily Rodriguez"},
{
id: "t4", name: "Mark Johnson", handle: "@CanvasCrafter", testimonial: "The quality of art supplies here is unmatched. It's fantastic to have a local store that truly understands artists' needs. My favorite art store!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-man-painting-with-acrylics_23-2148854549.jpg", imageAlt: "Portrait of Mark Johnson"},
]}
showRating={true}
title="What Our Customers Say"
description="Hear from our community of artists and art lovers who trust Kings Arts for their creative needs."
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "radial-gradient"}}
text="Ready to create? Get in touch with Kings Arts for inquiries, custom orders, or workshop details. We'd love to hear from you!"
buttons={[
{
text: "Contact Us", href: "/contact"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Kings Arts"
leftLink={{
text: "Privacy Policy", href: "#"}}
rightLink={{
text: "Terms of Service", href: "#"}}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}