Update src/app/gallery/page.tsx
This commit is contained in:
@@ -1,57 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import Link from "next/link";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Camera, Sparkles } from 'lucide-react';
|
||||
|
||||
export default function GalleryPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Packages", id: "packages" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Packages", id: "/packages" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Gallery",
|
||||
items: [
|
||||
{ label: "Kids Designs", href: "#gallery" },
|
||||
{ label: "Festival Art", href: "#gallery" },
|
||||
{ label: "Body Painting", href: "#gallery" },
|
||||
{ label: "Custom Designs", href: "#gallery" },
|
||||
title: "Services", items: [
|
||||
{ label: "Kids Party Face Painting", href: "/services" },
|
||||
{ label: "Festival Face Art", href: "/services" },
|
||||
{ label: "Corporate Events", href: "/services" },
|
||||
{ label: "Body Painting", href: "/services" },
|
||||
{ label: "Custom Designs", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{ label: "All Services", href: "/services" },
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/packages" },
|
||||
{ label: "Pricing", href: "/packages" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social Media",
|
||||
items: [
|
||||
title: "Connect", items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "TikTok", href: "https://tiktok.com" },
|
||||
{ label: "Email", href: "mailto:paintasy@events.com" },
|
||||
{ label: "Phone", href: "tel:+15551234567" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Book Now",
|
||||
items: [
|
||||
{ label: "View Packages", href: "/packages" },
|
||||
{ label: "Request Quote", href: "/contact" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
title: "Service Areas", items: [
|
||||
{ label: "Local Events", href: "/contact" },
|
||||
{ label: "Regional Coverage", href: "/contact" },
|
||||
{ label: "Book Now", href: "/packages" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -71,134 +70,83 @@ export default function GalleryPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Paintasy"
|
||||
navItems={navItems}
|
||||
bottomLeftText="Creative Face & Body Art"
|
||||
bottomRightText="paintasy@events.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery-page-hero" data-section="gallery-page-hero">
|
||||
<HeroBillboardGallery
|
||||
title="Event Photo Gallery"
|
||||
description="Real photos from real events. Browse our portfolio of professional face painting and body art work."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Event",
|
||||
href: "/packages",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=2",
|
||||
imageAlt: "Festival face painting event photography",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
titleClassName="text-5xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
ariaLabel="Gallery page hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery-showcase" data-section="gallery-showcase">
|
||||
<div id="gallery-full" data-section="gallery-full" className="mx-auto px-4 md:px-6 py-20">
|
||||
<ProductCardFour
|
||||
title="Complete Portfolio"
|
||||
description="Browse our complete collection of face painting and body art from events throughout the year."
|
||||
title="Complete Photo Gallery"
|
||||
description="Explore our full collection of face painting and body art work from events, festivals, and celebrations. Real photos showcasing our professional artistry and creativity."
|
||||
tag="Portfolio"
|
||||
tagIcon={Camera}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="opacity"
|
||||
useInvertedBackground={true}
|
||||
useInvertedBackground={false}
|
||||
gridVariant="bento-grid"
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "gallery-kids-1",
|
||||
name: "Kids Face Painting",
|
||||
price: "Colorful Designs",
|
||||
variant: "Birthday Parties",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=2",
|
||||
imageAlt: "Kids birthday party face painting designs",
|
||||
},
|
||||
id: "gallery-kids-1", name: "Butterfly Dreams", price: "Kids Party", variant: "Birthday Event", imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "Butterfly face painting design on child"},
|
||||
{
|
||||
id: "gallery-festival-1",
|
||||
name: "Festival Face Art",
|
||||
price: "Creative Artistry",
|
||||
variant: "Outdoor Events",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=3",
|
||||
imageAlt: "Festival face painting artwork showcase",
|
||||
},
|
||||
id: "gallery-kids-2", name: "Superhero Masks", price: "Kids Party", variant: "Birthday Event", imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Superhero themed face painting for children"},
|
||||
{
|
||||
id: "gallery-body-1",
|
||||
name: "Body Painting Art",
|
||||
price: "Professional Service",
|
||||
variant: "Special Events",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=2",
|
||||
imageAlt: "Professional body art photography",
|
||||
},
|
||||
id: "gallery-festival-1", name: "Festival Fantasy", price: "Festival Art", variant: "Outdoor Event", imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=1", imageAlt: "Vibrant festival face painting with multiple colors"},
|
||||
{
|
||||
id: "gallery-custom-1",
|
||||
name: "Custom Designs",
|
||||
price: "Personalized Art",
|
||||
variant: "Themed Events",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=2",
|
||||
imageAlt: "Custom themed face painting designs",
|
||||
},
|
||||
id: "gallery-festival-2", name: "Rainbow Celebration", price: "Festival Art", variant: "Outdoor Event", imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1", imageAlt: "Rainbow colored festival face art"},
|
||||
{
|
||||
id: "gallery-kids-2",
|
||||
name: "Princess & Character",
|
||||
price: "Enchanting Designs",
|
||||
variant: "Theme Parties",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=3",
|
||||
imageAlt: "Princess character face painting designs",
|
||||
},
|
||||
id: "gallery-body-1", name: "Body Art Elegance", price: "Body Painting", variant: "Special Event", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1", imageAlt: "Professional body painting artwork"},
|
||||
{
|
||||
id: "gallery-festival-2",
|
||||
name: "Festival Entertainment",
|
||||
price: "Live Entertainment",
|
||||
variant: "Large Events",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=4",
|
||||
imageAlt: "Festival face painter with audience",
|
||||
},
|
||||
id: "gallery-custom-1", name: "Artistic Creation", price: "Custom Design", variant: "Themed Event", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Artist applying custom face painting design"},
|
||||
{
|
||||
id: "gallery-body-2",
|
||||
name: "Artistic Body Designs",
|
||||
price: "High Impact Art",
|
||||
variant: "Photo Shoots",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=3",
|
||||
imageAlt: "Artistic body painting photoshoot",
|
||||
},
|
||||
id: "gallery-kids-3", name: "Princess Tiara", price: "Kids Party", variant: "Birthday Event", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-adult-man-his-30s-that-is-painting-big-canvas-with-lot-brushes-palette-while-sitting-floor-art-studio_662251-323.jpg?_wi=1", imageAlt: "Princess themed face painting on young girl"},
|
||||
{
|
||||
id: "gallery-corporate",
|
||||
name: "Corporate Events",
|
||||
price: "Professional Art",
|
||||
variant: "Team Events",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=3",
|
||||
imageAlt: "Corporate event face painting",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "/packages",
|
||||
},
|
||||
id: "gallery-festival-3", name: "Glitter Dreams", price: "Festival Art", variant: "Outdoor Event", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Glittery festival face painting design"},
|
||||
{
|
||||
id: "gallery-corporate-1", name: "Brand Activation", price: "Corporate Event", variant: "Professional", imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1", imageAlt: "Corporate event face painting for brand activation"},
|
||||
]}
|
||||
buttons={[{ text: "Book Your Event", href: "/packages" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
ariaLabel="Complete photo gallery with all artworks"
|
||||
containerClassName="gap-12"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
ariaLabel="Photo gallery portfolio section"
|
||||
cardNameClassName=""
|
||||
cardPriceClassName=""
|
||||
cardVariantClassName=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery-footer" data-section="gallery-footer">
|
||||
<div id="contact-gallery" data-section="contact-gallery" className="mx-auto px-4 md:px-6">
|
||||
<ContactText
|
||||
text="Love what you see? Let's bring these creative designs to your next event! Contact Paintasy today to book your professional face and body art experience."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Request a Quote", href: "/contact" },
|
||||
{ text: "View Packages", href: "/packages" },
|
||||
]}
|
||||
ariaLabel="Contact section for gallery page"
|
||||
containerClassName="py-16"
|
||||
contentClassName="max-w-3xl mx-auto"
|
||||
textClassName="text-4xl font-extrabold text-center"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-gallery" data-section="footer-gallery" className="mx-auto px-4 md:px-6">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2024 Paintasy Face and Body Art."
|
||||
bottomRightText="Authentic Event Photography"
|
||||
ariaLabel="Gallery page footer"
|
||||
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
|
||||
bottomRightText="Professional Event Entertainment | Creative Services"
|
||||
ariaLabel="Site footer with links"
|
||||
containerClassName="gap-12"
|
||||
columnsClassName="grid-cols-2 lg:grid-cols-4"
|
||||
columnTitleClassName="font-extrabold text-lg"
|
||||
columnItemClassName="hover:opacity-70 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user