Update src/app/gallery/page.tsx

This commit is contained in:
2026-03-14 05:23:55 +00:00
parent 32f75d97d3
commit d41a00dc0c

View File

@@ -1,57 +1,59 @@
"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 const metadata = {
title: "Gallery - Face Painting & Body Art Portfolio | Paintasy", description: "View our complete gallery of professional face painting and body art work. Real photos from parties, festivals, corporate events, and special occasions. Browse creative designs by category.", keywords: "face painting gallery, body art portfolio, face painting photos, face painter work, professional face art, event entertainment"};
export default function GalleryPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Gallery", id: "gallery" },
{ name: "Packages", id: "packages" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Gallery", id: "/gallery" },
{ name: "Packages", id: "/" },
{ name: "About", id: "/" },
{ 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" },
{ label: "Packages", href: "/packages" },
{ label: "Pricing", href: "/packages" },
{ label: "About", href: "/about" },
title: "Company", items: [
{ label: "About Us", href: "/" },
{ label: "Gallery", href: "/gallery" },
{ label: "Packages", href: "/" },
{ label: "FAQ", href: "/" },
{ 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: "/" },
{ label: "Get Quote", href: "/contact" },
],
},
];
@@ -71,136 +73,148 @@ 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-kids" data-section="gallery-kids" className="mx-auto px-4 md:px-6 pt-24">
<ProductCardFour
title="Complete Portfolio"
description="Browse our complete collection of face painting and body art from events throughout the year."
title="Kids Party Face Painting Gallery"
description="Creative, colorful face painting designs perfect for children's birthday parties and celebrations. Safe, high-quality art that brings smiles to young faces."
tag="Kids Designs"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
animationType="opacity"
useInvertedBackground={true}
gridVariant="bento-grid"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
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: "kids-1", name: "Butterfly Dreams", price: "Kids Design", variant: "Birthday Favorite", imageSrc: "http://img.b2bpic.net/free-photo/cute-girl-with-painted-face_23-2149089213.jpg", imageAlt: "Colorful butterfly face painting for kids"},
{
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: "kids-2", name: "Superhero Mask", price: "Kids Design", variant: "Party Popular", imageSrc: "http://img.b2bpic.net/free-photo/boy-face-painting_23-2148784394.jpg", imageAlt: "Superhero mask 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: "kids-3", name: "Princess Crown", price: "Kids Design", variant: "Girls Favorite", imageSrc: "http://img.b2bpic.net/free-photo/little-girl-with-face-painting_23-2149089210.jpg", imageAlt: "Princess themed face painting with crown design"},
{
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: "kids-4", name: "Animal Fun", price: "Kids Design", variant: "All Ages", imageSrc: "http://img.b2bpic.net/free-photo/child-face-painted-tiger_23-2148948273.jpg", imageAlt: "Tiger face painting design for children"},
{
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: "kids-5", name: "Galaxy Stars", price: "Kids Design", variant: "Popular Choice", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-stars-face-paint_23-2149089215.jpg", imageAlt: "Galaxy and stars face 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-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-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: "kids-6", name: "Glitter Rainbow", price: "Kids Design", variant: "Party Favorite", imageSrc: "http://img.b2bpic.net/free-photo/child-with-rainbow-face-paint_23-2148948275.jpg", imageAlt: "Rainbow glitter face painting design"},
]}
buttons={[{ text: "Book Kids Party Painting", href: "/contact" }]}
buttonAnimation="blur-reveal"
ariaLabel="Kids party face painting gallery"
containerClassName="gap-12"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90"
ariaLabel="Photo gallery portfolio section"
descriptionClassName="text-lg opacity-90 max-w-3xl"
/>
</div>
<div id="gallery-footer" data-section="gallery-footer">
<div id="gallery-festival" data-section="gallery-festival" className="mx-auto px-4 md:px-6 pt-16">
<ProductCardFour
title="Festival & Event Face Art"
description="Professional face painting showcasing artistic designs from festivals, outdoor events, and large gatherings. Fast, creative service with stunning results."
tag="Festival Art"
tagIcon={Camera}
tagAnimation="slide-up"
textboxLayout="default"
animationType="opacity"
useInvertedBackground={true}
gridVariant="three-columns-all-equal-width"
carouselMode="buttons"
products={[
{
id: "festival-1", name: "Artistic Abstraction", price: "Festival Design", variant: "Modern Art", imageSrc: "http://img.b2bpic.net/free-photo/face-art-festival_23-2148784315.jpg", imageAlt: "Abstract artistic face painting design"},
{
id: "festival-2", name: "Geometric Patterns", price: "Festival Design", variant: "Contemporary", imageSrc: "http://img.b2bpic.net/free-photo/geometric-face-paint-design_23-2148948280.jpg", imageAlt: "Geometric pattern face painting artwork"},
{
id: "festival-3", name: "Nature Inspired", price: "Festival Design", variant: "Organic Art", imageSrc: "http://img.b2bpic.net/free-photo/nature-themed-face-art_23-2149089220.jpg", imageAlt: "Nature inspired face painting with floral elements"},
{
id: "festival-4", name: "Metallic Shine", price: "Festival Design", variant: "Bold Statement", imageSrc: "http://img.b2bpic.net/free-photo/metallic-face-paint_23-2148948282.jpg", imageAlt: "Metallic gold and silver face painting design"},
{
id: "festival-5", name: "Vibrant Expression", price: "Festival Design", variant: "Artistic", imageSrc: "http://img.b2bpic.net/free-photo/vibrant-face-paint-art_23-2149089225.jpg", imageAlt: "Vibrant multicolor face painting creation"},
{
id: "festival-6", name: "Cosmic Design", price: "Festival Design", variant: "Space Theme", imageSrc: "http://img.b2bpic.net/free-photo/cosmic-face-art_23-2148948285.jpg", imageAlt: "Cosmic and space themed face painting"},
]}
buttons={[{ text: "Book Festival Entertainment", href: "/contact" }]}
buttonAnimation="blur-reveal"
ariaLabel="Festival and event face art gallery"
containerClassName="gap-12"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl"
/>
</div>
<div id="gallery-body-art" data-section="gallery-body-art" className="mx-auto px-4 md:px-6 pt-16">
<ProductCardFour
title="Professional Body Art & Advanced Designs"
description="Premium body painting and advanced face art designs for special occasions. Professional artwork by experienced face painters specializing in detailed, high-impact designs."
tag="Professional Art"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
animationType="opacity"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
carouselMode="buttons"
products={[
{
id: "body-1", name: "Full Body Art", price: "Premium Design", variant: "Special Events", imageSrc: "http://img.b2bpic.net/free-photo/body-art-painting_23-2149159240.jpg", imageAlt: "Professional full body art painting"},
{
id: "body-2", name: "Elegant Face Art", price: "Premium Design", variant: "Professional", imageSrc: "http://img.b2bpic.net/free-photo/elegant-face-design_23-2148948290.jpg", imageAlt: "Elegant professional face art design"},
{
id: "body-3", name: "Detailed Portrait", price: "Premium Design", variant: "Artistic", imageSrc: "http://img.b2bpic.net/free-photo/detailed-portrait-face-art_23-2149089230.jpg", imageAlt: "Detailed portrait style face painting"},
{
id: "body-4", name: "Character Design", price: "Premium Design", variant: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/character-face-art_23-2148948292.jpg", imageAlt: "Character themed face art design"},
{
id: "body-5", name: "Fantasy Makeup", price: "Premium Design", variant: "Special Occasion", imageSrc: "http://img.b2bpic.net/free-photo/fantasy-face-makeup_23-2149089235.jpg", imageAlt: "Fantasy themed face makeup art"},
{
id: "body-6", name: "Custom Artwork", price: "Premium Design", variant: "Bespoke", imageSrc: "http://img.b2bpic.net/free-photo/custom-face-art_23-2148948295.jpg", imageAlt: "Custom face art design created for client"},
]}
buttons={[{ text: "Request Custom Design", href: "/contact" }]}
buttonAnimation="blur-reveal"
ariaLabel="Professional body art and advanced designs gallery"
containerClassName="gap-12"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl"
/>
</div>
<div id="contact-gallery" data-section="contact-gallery" className="mx-auto px-4 md:px-6 pt-16">
<ContactText
text="Love what you see in our gallery? Our professional face painters are ready to create custom designs for your next event. Whether it's a kids party, festival, or corporate celebration, we bring creativity and expertise to every face painting service."
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Book Face Painting Now", href: "/contact" },
{ text: "View Packages", href: "/" },
]}
ariaLabel="Gallery contact section"
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 pt-16">
<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>
);
}
}