Update src/app/about/page.tsx

This commit is contained in:
2026-03-14 05:33:28 +00:00
parent fca47aa9fa
commit a6ed481302

View File

@@ -1,63 +1,58 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import Link from 'next/link';
import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, DollarSign, Camera, HelpCircle, Award } from 'lucide-react';
export const metadata = {
title: "About Paintasy - Professional Face Painting & Body Art", description: "Learn about Paintasy Face and Body Art. Discover our company story, mission, and team of professional face painters dedicated to creating magical moments.", keywords: "about paintasy, face painting team, professional artists, company story, mission statement"
};
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Palette, Award, Shield, CheckCircle } from "lucide-react";
export default function AboutPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Gallery", id: "/gallery" },
{ name: "Gallery", id: "gallery" },
{ name: "Packages", id: "packages" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
title: "Services", items: [
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: "Company", items: [
title: "Company",
items: [
{ label: "About Us", href: "/about" },
{ label: "Gallery", href: "/gallery" },
{ label: "Packages", href: "/#packages-home" },
{ label: "FAQ", href: "/#faq-home" },
{ label: "Packages", href: "/packages" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect", 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: "Service Areas", items: [
title: "Service Areas",
items: [
{ label: "Local Events", href: "/contact" },
{ label: "Regional Coverage", href: "/contact" },
{ label: "Book Now", href: "/#packages-home" },
{ label: "Book Now", href: "/packages" },
{ label: "Get Quote", href: "/contact" },
],
},
@@ -78,156 +73,103 @@ export default function AboutPage() {
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="Paintasy"
navItems={navItems}
brandName="Paintasy"
bottomLeftText="Creative Face & Body Art"
bottomRightText="paintasy@events.com"
/>
</div>
<div id="hero-about" data-section="hero-about" className="mx-auto px-4 md:px-6">
<div id="about-page-hero" data-section="about-page-hero">
<HeroBillboardGallery
title="About Paintasy Face and Body Art"
description="Discover our story, mission, and the team behind professional face painting and body art entertainment. We're passionate about creating magical moments and unforgettable experiences."
title="About Paintasy"
description="Professional face painting and body art entertainment bringing creativity and joy to events."
background={{ variant: "radial-gradient" }}
tag="Our Story"
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{ text: "Learn More", href: "#mission-about" },
{ text: "Meet Our Team", href: "#team-about" },
]}
buttonAnimation="blur-reveal"
mediaItems={[
{
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: "Paintasy founder painting with passion"
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=2",
imageAlt: "Professional face painter at work",
},
]}
mediaAnimation="opacity"
ariaLabel="About page 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"
titleClassName="text-5xl font-extrabold"
descriptionClassName="text-lg opacity-90"
/>
</div>
<div id="mission-about" data-section="mission-about" className="mx-auto px-4 md:px-6">
<div id="about-story" data-section="about-story">
<MetricSplitMediaAbout
title="Our Mission & Values"
description="At Paintasy, our mission is to bring joy, creativity, and color to every event we serve. We believe that face painting and body art are more than just entertainment—they're an art form that transforms moments into magical memories. We're committed to professional excellence, artistic innovation, and making every client feel valued and celebrated."
tag="Mission Statement"
tagIcon={Target}
title="Our Story & Mission"
description="Paintasy was founded on the belief that creative entertainment transforms events into unforgettable celebrations. We started with a passion for face painting and body art, and have grown into a professional team dedicated to bringing magic and color to every event we touch.\n\nOur mission is simple: deliver exceptional artistic service, genuine happiness, and professional entertainment that exceeds expectations. From children's birthday parties to corporate celebrations and festival events, we pour our hearts into creating beautiful, memorable experiences."
tag="Professional Team"
tagIcon={Award}
tagAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1"
imageAlt="Professional artist at work"
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=3"
imageAlt="Our professional face painting artist"
mediaAnimation="blur-reveal"
metrics={[
{ value: "15+", title: "Years Combined Experience" },
{ value: "2000+", title: "Happy Clients" },
{ value: "50+", title: "Events Per Year" },
{ value: "500+", title: "Events Painted" },
{ value: "1000+", title: "Happy Faces" },
{ value: "10+", title: "Years Experience" },
{ value: "100%", title: "Satisfaction Rate" },
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
ariaLabel="Mission and values section"
containerClassName="gap-12"
useInvertedBackground={true}
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-2xl"
/>
</div>
<div id="team-about" data-section="team-about" className="mx-auto px-4 md:px-6">
<TeamCardEleven
title="Meet Our Team"
description="Our team consists of professional artists, each with unique talents and a passion for creating unforgettable face painting and body art experiences."
<div id="about-values" data-section="about-values">
<FeatureCardTen
title="Our Values"
description="What drives us in everything we do."
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={true}
tag="Professional Artists"
tagIcon={Palette}
tagAnimation="slide-up"
groups={[
useInvertedBackground={false}
features={[
{
id: "founders", groupTitle: "Founders & Lead Artists", members: [
{
id: "founder-1", title: "Alex Martinez", subtitle: "Co-Founder & Lead Artist", detail: "With 15 years of professional face painting experience, Alex founded Paintasy with a vision of bringing professional-grade face art to every event. Specializing in intricate designs and themed artwork.", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg", imageAlt: "Alex Martinez, co-founder"
},
{
id: "founder-2", title: "Jordan Chen", subtitle: "Co-Founder & Creative Director", detail: "Jordan brings artistic vision and innovation to every project. With a background in fine arts and body painting, Jordan leads our creative direction and ensures every design exceeds expectations.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1", imageAlt: "Jordan Chen, creative director"
},
]
id: "value-1",
title: "Creativity",
description:
"We believe in artistic expression and creative design. Every face is a canvas.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=3",
imageAlt: "Creative face painting designs",
},
items: [
{ icon: Palette, text: "Artistic innovation" },
{ icon: CheckCircle, text: "Unique designs" },
],
reverse: false,
},
{
id: "artists", groupTitle: "Professional Artists", members: [
{
id: "artist-1", title: "Maya Patel", subtitle: "Face Painting Specialist", detail: "Specializes in kids' party designs and fast-paced festival work. Maya is known for her energetic personality and ability to make every child feel special with personalized designs.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1", imageAlt: "Maya Patel, face painting specialist"
},
{
id: "artist-2", title: "Chris Thompson", subtitle: "Body Art & Festival Artist", detail: "Expert in body painting and large-scale festival events. Chris combines speed with artistry, delivering stunning designs even in high-volume environments.", imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1", imageAlt: "Chris Thompson, body art specialist"
},
{
id: "artist-3", title: "Lisa Wong", subtitle: "Corporate & Custom Design Artist", detail: "Brings professionalism and creativity to corporate events. Lisa excels at custom branding designs and creates memorable experiences for team building activities.", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1", imageAlt: "Lisa Wong, corporate artist"
},
]
id: "value-2",
title: "Safety & Professionalism",
description:
"We use only hypoallergenic, professional-grade face paints and maintain strict hygiene standards.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=5",
imageAlt: "Safe professional face painting",
},
items: [
{ icon: Shield, text: "Hypoallergenic products" },
{ icon: CheckCircle, text: "Safety certified" },
],
reverse: true,
},
]}
ariaLabel="Team members section"
containerClassName="gap-12"
itemClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90 max-w-3xl"
itemClassName=""
mediaWrapperClassName=""
/>
</div>
<div id="company-story" data-section="company-story" className="mx-auto px-4 md:px-6">
<TestimonialAboutCard
tag="Company Story"
tagIcon={Heart}
tagAnimation="slide-up"
title="Our Journey"
description="Paintasy was founded on a simple belief: face painting and body art should be more than just entertainment—it should be an art form that brings joy, creativity, and magic to every event."
subdescription="What started as a passion project has grown into a trusted name in professional event entertainment. From small birthday parties to large-scale festivals, we've been committed to delivering exceptional service and unforgettable experiences. Our team's dedication to quality, safety, and artistic excellence has earned us the trust of hundreds of happy clients. Today, Paintasy continues to innovate and push creative boundaries, making every event we touch a little bit more magical."
icon={Sparkles}
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="Paintasy company story"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
ariaLabel="Company story section"
titleClassName="text-4xl font-extrabold"
descriptionClassName="text-lg opacity-90"
subdescriptionClassName="text-base opacity-80 leading-relaxed"
/>
</div>
<div id="contact-about" data-section="contact-about" className="mx-auto px-4 md:px-6">
<ContactText
text="Want to learn more about booking Paintasy for your event or interested in joining our team? Get in touch with us today. We'd love to discuss how we can make your event unforgettable."
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Request a Quote", href: "/contact" },
{ text: "Call Us", href: "tel:+15551234567" },
]}
ariaLabel="Contact call-to-action 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-about" data-section="footer-about" className="mx-auto px-4 md:px-6">
<div id="footer" data-section="footer">
<FooterSimple
columns={footerColumns}
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>