Update src/app/gallery/page.tsx

This commit is contained in:
2026-03-14 05:31:04 +00:00
parent 83935e2b93
commit a527552d07

View File

@@ -5,16 +5,15 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Camera } from 'lucide-react';
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: "Packages", id: "/packages" },
{ name: "About", id: "about" },
{ name: "Book Event", id: "/booking" },
{ name: "Contact", id: "/contact" },
];
@@ -50,7 +49,7 @@ export default function GalleryPage() {
title: "Service Areas", items: [
{ label: "Local Events", href: "/contact" },
{ label: "Regional Coverage", href: "/contact" },
{ label: "Book Now", href: "/booking" },
{ label: "Book Now", href: "/packages" },
{ label: "Get Quote", href: "/contact" },
],
},
@@ -78,55 +77,58 @@ export default function GalleryPage() {
/>
</div>
<div id="gallery-section" data-section="gallery-section" className="mx-auto px-4 md:px-6">
<div id="gallery-full" data-section="gallery-full" className="mx-auto px-4 md:px-6 py-20">
<ProductCardFour
title="Event Photo Gallery"
description="Browse our complete portfolio of real event photos showcasing our face painting and body art work across parties, festivals, corporate events, and special occasions."
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="slide-up"
animationType="opacity"
useInvertedBackground={false}
gridVariant="bento-grid"
carouselMode="buttons"
products={[
{
id: "event-1", name: "Birthday Party Designs", price: "Kids Celebration", variant: "Face Painting", imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1", imageAlt: "Children with colorful birthday party face painting"},
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: "event-2", name: "Festival Face Art", price: "Creative Expression", variant: "Outdoor Event", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Professional artist applying festival face art"},
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: "event-3", name: "Professional Body Painting", price: "Artistic Excellence", 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 art from special event"},
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: "event-4", name: "Themed Party Artwork", price: "Custom Themes", variant: "Party Entertainment", imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Custom themed face painting for party guests"},
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: "event-5", name: "Festival Crowd Service", price: "High Volume", variant: "Festival Event", imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=1", imageAlt: "Festival attendees enjoying rapid face painting service"},
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: "event-6", name: "Corporate Event Entertainment", price: "Professional Service", variant: "Business Event", imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1", imageAlt: "Corporate event attendees with professional face painting"},
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: "event-7", name: "Workshop & Tutorial", price: "Educational", variant: "Live Demonstration", 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: "Live face painting demonstration and technique"},
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: "event-8", name: "School Event Entertainment", price: "Youth Programs", variant: "School Carnival", imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1", imageAlt: "School event with children enjoying face painting"},
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: "/booking" }]}
buttons={[{ text: "Book Your Event", href: "/packages" }]}
buttonAnimation="blur-reveal"
ariaLabel="Complete photo gallery of events"
ariaLabel="Complete photo gallery with all artworks"
containerClassName="gap-12"
cardNameClassName="text-4xl font-extrabold"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl"
/>
</div>
<div id="gallery-contact" data-section="gallery-contact" 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="Inspired by our gallery? Book Paintasy for your next event and create your own memorable moments. Let us bring creativity and color to your celebration."
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: "Book Now", href: "/booking" },
{ text: "Get a Quote", href: "/contact" },
{ text: "Request a Quote", href: "/contact" },
{ text: "View Packages", href: "/packages" },
]}
ariaLabel="Gallery call-to-action section"
ariaLabel="Contact section for gallery page"
containerClassName="py-16"
contentClassName="max-w-3xl mx-auto"
textClassName="text-4xl font-extrabold text-center"