Switch to version 3: modified src/app/gallery/page.tsx

This commit is contained in:
2026-03-14 05:38:46 +00:00
parent d3122a6d9e
commit d1143bca8f

View File

@@ -2,83 +2,59 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles, Instagram, Facebook, Heart, Star, Camera, Phone, Mail } from 'lucide-react';
export const metadata = {
title: "Gallery - Paintasy Face and Body Art | Event Photos", description: "Browse our complete gallery of professional face painting and body art work from real events, festivals, corporate events, and parties."};
import { Camera, Sparkles } from 'lucide-react';
export default function GalleryPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Gallery", id: "gallery" },
{ name: "Packages", id: "/" },
{ name: "About", id: "/" },
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Gallery", id: "/gallery" },
{ name: "Packages", id: "/packages" },
{ name: "About", id: "about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Services", items: [
{ label: "Kids Party Face Painting", href: "/" },
{ label: "Festival Face Art", href: "/" },
{ label: "Corporate Events", href: "/" },
{ label: "Body Painting", href: "/" },
{ label: "Custom Designs", href: "/" },
{ 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: "Company", items: [
{ label: "About Us", href: "/" },
{ label: "About Us", href: "/about" },
{ label: "Gallery", href: "/gallery" },
{ label: "Packages", href: "/" },
{ label: "FAQ", href: "/" },
{ label: "Packages", href: "/packages" },
{ label: "FAQ", href: "#faq" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Follow Us", items: [
title: "Connect", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" },
{ label: "TikTok", href: "https://tiktok.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Email", href: "mailto:paintasy@events.com" },
{ label: "Phone", href: "tel:+15551234567" },
],
},
{
title: "Get in Touch", items: [
{ label: "Email: paintasy@events.com", href: "mailto:paintasy@events.com" },
{ label: "Phone: +1 (555) 123-4567", href: "tel:+15551234567" },
{ label: "Book Now", href: "/contact" },
title: "Service Areas", items: [
{ label: "Local Events", href: "/contact" },
{ label: "Regional Coverage", href: "/contact" },
{ label: "Book Now", href: "/packages" },
{ label: "Get Quote", href: "/contact" },
],
},
];
const galleryItems = [
{
id: "gallery-kids-1", name: "Butterfly Dreams", price: "Kids Party", variant: "Colorful & Playful", imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "Colorful butterfly face painting design on child"},
{
id: "gallery-kids-2", name: "Superhero Mask", price: "Kids Party", variant: "Popular Design", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Superhero mask face painting artwork"},
{
id: "gallery-festival-1", name: "Festival Glitter Art", price: "Festival Event", variant: "Artistic Design", imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=1", imageAlt: "Vibrant multicolored festival face painting"},
{
id: "gallery-festival-2", name: "Rainbow Artist", price: "Festival Event", variant: "Crowd Favorite", imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1", imageAlt: "Rainbow themed face painting at outdoor festival"},
{
id: "gallery-body-1", name: "Professional Body Art", price: "Special Event", variant: "Premium Service", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1", imageAlt: "Professional body painting artwork on model"},
{
id: "gallery-custom-1", name: "Themed Corporate Art", price: "Corporate Event", variant: "Custom Design", imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Custom corporate themed face painting design"},
{
id: "gallery-kids-3", name: "Princess Crown", price: "Kids Party", variant: "Elegant Design", imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1", imageAlt: "Princess crown face painting with glitter details"},
{
id: "gallery-artist-1", name: "Artist at Work", price: "Behind the Scenes", variant: "Professional Skill", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Professional face painter creating detailed artwork"},
{
id: "gallery-family-1", name: "Family Fun", price: "Group Event", variant: "Multiple Designs", imageSrc: "http://img.b2bpic.net/free-photo/family-portrait-surprised-father-has-yellow-face-from-paints-cheerful-two-daughters-shows-palms-dirty-with-watercolours-paint-picture-pastime-isolated-lilac-wall-this-is-art_273609-26128.jpg?_wi=1", imageAlt: "Family with coordinated face painting designs"},
];
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -96,75 +72,64 @@ export default function GalleryPage() {
<NavbarStyleFullscreen
brandName="Paintasy"
navItems={navItems}
bottomLeftText="Creative Face & Body Art Gallery"
bottomRightText="Follow us on Instagram @paintasy_art"
bottomLeftText="Creative Face & Body Art"
bottomRightText="paintasy@events.com"
/>
</div>
<div id="hero-gallery" data-section="hero-gallery" className="mx-auto px-4 md:px-6">
<HeroBillboardGallery
title="Our Creative Portfolio"
description="Explore our gallery of real event photos showcasing professional face painting and body art. From kids parties to festivals, see the creativity and artistry that brings magic to every event."
background={{ variant: "radial-gradient" }}
tag="Professional Event Photos"
<div id="gallery-full" data-section="gallery-full" className="mx-auto px-4 md:px-6 py-20">
<ProductCardFour
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"
buttons={[
{ text: "Book Our Artists", href: "/contact" },
{ text: "View Full Gallery", href: "#gallery-showcase" },
]}
buttonAnimation="blur-reveal"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg", imageAlt: "Professional face painting showcase"},
]}
mediaAnimation="opacity"
ariaLabel="Gallery hero section"
className="min-h-screen"
containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
/>
</div>
<div id="gallery-showcase" data-section="gallery-showcase" className="mx-auto px-4 md:px-6">
<ProductCardOne
title="Featured Gallery Collection"
description="Browse our portfolio of real event photos. Each image represents the professional quality, creativity, and artistic excellence we bring to every booking. From intimate birthday parties to large-scale festival events."
tag="Portfolio Showcase"
tagIcon={Sparkles}
tagAnimation="slide-up"
textboxLayout="default"
animationType="blur-reveal"
animationType="opacity"
useInvertedBackground={false}
gridVariant="bento-grid"
carouselMode="buttons"
products={galleryItems}
buttons={[
{ text: "Book Your Event", href: "/contact" },
{ text: "Request Custom Quote", href: "/contact" },
products={[
{
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-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-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-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-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-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-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-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="Gallery showcase section"
ariaLabel="Complete photo gallery with all artworks"
containerClassName="gap-12"
textBoxTitleClassName="text-4xl font-extrabold"
textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
cardNameClassName=""
cardPriceClassName=""
cardVariantClassName=""
/>
</div>
<div id="social-connect" data-section="social-connect" className="mx-auto px-4 md:px-6">
<div id="contact-gallery" data-section="contact-gallery" className="mx-auto px-4 md:px-6">
<ContactText
text="Follow Paintasy on Social Media for more creative inspiration, behind-the-scenes moments, and special event highlights. Connect with us across all platforms and see the artistry in action!"
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={true}
useInvertedBackground={false}
buttons={[
{ text: "Instagram @paintasy_art", href: "https://instagram.com" },
{ text: "Facebook Page", href: "https://facebook.com" },
{ text: "Contact Us", href: "/contact" },
{ text: "Request a Quote", href: "/contact" },
{ text: "View Packages", href: "/packages" },
]}
ariaLabel="Social media connection section"
ariaLabel="Contact section for gallery page"
containerClassName="py-16"
contentClassName="max-w-3xl mx-auto"
textClassName="text-4xl font-extrabold text-center"
@@ -176,8 +141,8 @@ export default function GalleryPage() {
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
bottomRightText="Follow us: Instagram • Facebook • TikTok"
ariaLabel="Site footer with social links"
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"
@@ -186,4 +151,4 @@ export default function GalleryPage() {
</div>
</ThemeProvider>
);
}
}