[V0_FILE]png:file="public/images/lv-barber-expo-background.png" url="https://sjc.microlink.io/PYkSv2AOZd3kakqw7Foa5CCuTivPBsuGDNdhaeWdXg5_p85GgQZv4d6lBaWVrWFddxE3JkO0FNPBaSD9Gh1MRQ.jpeg" isMerged="true" [V0_FILE]png:file="public/images/vendor-booth-pricing.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1268694831653307496-TMhN50spvax7krEOZ9EUJ9jWPzU5j3.png" isMerged="true" [V0_FILE]png:file="public/images/floor-plan.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8716852820483880719-NvumDJOhzpWEcvS83hfuLGe1AfS6xe.png" isMerged="true" [V0_FILE]jpeg:file="public/images/event-poster.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6242245710067933588-qFRCeLwPjTKcP6K7C7zipxJR2ZqZ79.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/houston-barber-expo-logo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6242245710067933588-n9zTrAPIRdEK1UE67w254Q221Ui533.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Houston Barber Expo", description: "The biggest barber event in Houston, Texas!", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="actions/checkout.ts" isMerged="true" "use server" import { z } from "zod" // Define a schema for the item to be purchased const purchaseItemSchema = z.object({ id: z.string(), name: z.string(), quantity: z.number().min(1), price: z.number().min(0), }) // Define the input schema for the checkout action const checkoutInputSchema = z.array(purchaseItemSchema) export async function checkout(items: unknown) { // Changed type to unknown for initial check // Simulate a delay for network request await new Promise((resolve) => setTimeout(resolve, 1500)) try { // Explicitly check for null or undefined before parsing if (items === null || items === undefined) { console.error("Received null or undefined items in checkout action.") return { success: false, message: "Invalid input: items cannot be null or undefined." } } // Validate the input const validatedItems = checkoutInputSchema.parse(items) if (validatedItems.length === 0) { return { success: false, message: "No items selected for purchase." } } let totalAmount = 0 validatedItems.forEach((item) => { totalAmount += item.quantity * item.price }) // Simulate a successful payment console.log(`Processing purchase for ${validatedItems.length} items. Total: $${totalAmount.toFixed(2)}`) console.log("Items:", validatedItems) return { success: true, message: `Purchase successful! Total: $${totalAmount.toFixed(2)}` } } catch (error) { console.error("Checkout error:", error) if (error instanceof z.ZodError) { return { success: false, message: `Validation error: ${error.errors[0].message}` } } return { success: false, message: "An unexpected error occurred during checkout." } } } [V0_FILE]jpeg:file="public/images/post-houston-aerial.jpeg" url="https://sjc.microlink.io/USar8APPlB_KN8EVDKsRtyGpyvSvdJzPGCAm7KWgKZQWhJJVzuYDjkSIG6nTVl_KtXkkomd45unTlvC57CRxGw.jpeg" isMerged="true" [V0_FILE]png:file="public/images/diamond-glowing-yellow.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/B65092CE-7964-4CAF-BFA3-F5DC8BF5EA25-TfoNF9UYbaR4HrOnK2yUxTZbGi2pjP.png" isMerged="true" [V0_FILE]png:file="public/images/platinum-glowing-blue.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/57394A08-0EF4-4A2E-B431-0722FF86D310-qAh5w6wSvDAii9QCNOyQPQCHm24YSG.png" isMerged="true" [V0_FILE]png:file="public/images/bronze-glowing-orange.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/215B9515-4F84-4636-9C6F-22687EBE185E-A4UtnUq979sGd4ZvvB5T7w0xw0IslA.png" isMerged="true" [V0_FILE]png:file="public/images/silver-glowing-white.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0C898602-56AD-484D-85D5-2AC97D0BB7E3-1dtnM5rwoVMDW9i086BCgUGOckoPki.png" isMerged="true" [V0_FILE]png:file="public/images/silver-new-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/28AA5D8B-C971-43C3-B99F-2DC1F42CA4DA-qhvJPR2Dfoydo7oDjQChyInk4tsQuV.png" isMerged="true" [V0_FILE]png:file="public/images/diamond-glowing-blue.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/57394A08-0EF4-4A2E-B431-0722FF86D310-raZbbA9ivVxXNj173oMzTvZDI7JrmB.png" isMerged="true" [V0_FILE]png:file="public/images/platinum-glowing-light-gray.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0C898602-56AD-484D-85D5-2AC97D0BB7E3-zpltbqgpdh1pLlmmroWS26JvH0ARUC.png" isMerged="true" [V0_FILE]jpeg:file="public/images/location-layout-reference.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6AE87789-773E-4400-BD1D-32AF3C83F63D-TAkoJMp0UklWcC4D2uHXJRDKk2eMz2.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/post-houston-new-aerial.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8714-1txu7Hz7mvDe7R061gleV711HPiu3z.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/post-houston-interior.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8715-WO3v8TnJ49V0hmYYLwXMUofNGXC9VU.jpeg" isMerged="true" [V0_FILE]png:file="public/images/vendors-black-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/B82A0BB4-E8E4-4DFF-85AF-DEF97956E838-8EaJvm8zUwpHS30Wp3fACLO7UUwEhO.png" isMerged="true" [V0_FILE]png:file="public/images/get-tickets-black-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5C9F4F2B-36A1-495B-9B67-E7E9757CC012-ljoSeUsIp4w51XZ0SNCX8UVhsHMOyI.png" isMerged="true" [V0_FILE]png:file="public/images/schedule-black-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/55949000-C5E1-419A-8DB7-D11CA5245280-1DB8tu4v0TX9EuzVPh0y13oFP0wZA6.png" isMerged="true" [V0_FILE]png:file="public/images/register-compete-black-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/45D14CA7-6C7E-4C6A-B33B-EC2B2BC9BD8D-p9gdIOZI06dXoEDwf6WvD4tT7M6MXC.png" isMerged="true" [V0_FILE]png:file="public/images/houston-skyline-htown.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4F667E6C-EDD4-4FC0-B861-1ACBED12B990-6nOaLGMwxY51PJz0woP9tyLMmuO7ta.png" isMerged="true" [V0_FILE]png:file="public/images/houston-skyline-htown-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4C4C594D-30E7-4FCC-AA23-80F728C89AD5-5gVJ0WwvRtBthUvSFPVkvrpApgACi0.png" isMerged="true" [V0_FILE]png:file="public/images/houston-barber-expo-new-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8153D34E-C650-4EBE-AD73-BC344E88398C-wmNH2dVKIa9HIKbflsPADZLZHVNoZZ.png" isMerged="true" [V0_FILE]typescriptreact:file="event-details-section.tsx" isQuickEdit="true" isMerged="true" import Image from "next/image" export default function EventDetailsSection() { return (

) } [V0_FILE]png:file="public/images/diamond-gem-yellow.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/B65092CE-7964-4CAF-BFA3-F5DC8BF5EA25-PggCN4Lyj5MrxqUhhK64QEDhdQtC9z.png" isMerged="true" [V0_FILE]png:file="public/images/diamond-gem-light-blue.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0C898602-56AD-484D-85D5-2AC97D0BB7E3-wxEYBe4ISGknB3fksStWwJXxPM3bk8.png" isMerged="true" [V0_FILE]png:file="public/images/diamond-gem-silver.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/28AA5D8B-C971-43C3-B99F-2DC1F42CA4DA-k65P6HVdujDAhmcDHptJTpfTO6EJN2.png" isMerged="true" [V0_FILE]png:file="public/images/diamond-gem-blue.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/57394A08-0EF4-4A2E-B431-0722FF86D310-s0FGG0V3DUITjCVuTj3pHIrJChW1a2.png" isMerged="true" [V0_FILE]png:file="public/images/diamond-gem-bronze.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/215B9515-4F84-4636-9C6F-22687EBE185E-c4CPUouqZgEjNFXeTW7TZPmHwBcUoo.png" isMerged="true" [V0_FILE]png:file="public/images/iced-out-new-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8B5745DE-5728-48B3-909E-D1E53A83218A-oIXmDnh2x4tnBwIBmCd5Rszch2WVzP.png" isMerged="true" [V0_FILE]png:file="public/images/boppr-new-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0DB5E4BC-5D84-4D25-98F2-1737E42A74CF-7HgOQjMFWRyllWO0VM0LMc4TCzo2ep.png" isMerged="true" [V0_FILE]png:file="public/images/squire-new-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/E0ACAD1F-1FAF-4410-AA56-A93A0DE99A1A-CsWOU1aHTdxTQzOhZcrVqO7kS9Yo24.png" isMerged="true" [V0_FILE]jpeg:file="public/images/aggieland-barber-logo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4076494485094166210-VyWGBECBE2QWBto2MRmaD12tMc2Jpi.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="floor-plan-section.tsx" isQuickEdit="true" isMerged="true" import Image from "next/image" export default function FloorPlanSection() { return (

Houston Barber Expo 2025 floor plan

) } [V0_FILE]typescriptreact:file="faqs-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" export default function FAQsSection() { return (

FAQS

How do I buy my ticket? Tickets can be purchased online through our official ticketing partner. A link will be provided on our website's "Get Tickets" page. Can I buy a ticket at the door? While tickets may be available at the door, we highly recommend purchasing them in advance online to ensure entry and avoid potential sell-outs. What is the location? The Houston Barber Expo 2025 will be held at The Post Houston, located at 401 Franklin St, Houston, TX 77201. Where do I park? The Post offers several paid parking options, and Downtown Houston provides free metered parking on Sundays. How do I become a vendor? Information on becoming a vendor, including booth options and application forms, can be found in our "Vendor Information" section. What booths are available? We offer Diamond, Platinum, Gold, Silver, and Bronze vendor booths with varying sizes, locations, and perks. Details are available on our "Vendor Booth" page.

TRAVEL FAQS

How do I make a reservation at The Post Houston? For hotel accommodations in Houston, please visit our "Hotel Accommodations" page for recommended hotels and booking details. Which airport do we fly into? The closest major airports to The Post Houston are George Bush Intercontinental Airport (IAH) and William P. Hobby Airport (HOU). How do we get to The Post Houston from the airport? Various transportation options are available from IAH and HOU, including taxis, ride-sharing services, and public transportation. What is the location? The Post Houston is located at 401 Franklin St, Houston, TX 77201. Does The Post Houston Have Food options? The Post Houston has a huge international food hall with dozens of vendors—everything from BBQ, ramen, tacos, and sushi to vegan options, coffee, and desserts.

) } [V0_FILE]jpeg:file="public/images/houston-barber-expo-crowd.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8799-SS9Zb44eUF5Ja1oxGynRDxAC4Nkrti.jpeg" isMerged="true" [V0_FILE]jpeg:file="public/images/houston-barber-expo-main-stage.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8799-GmidHr8LkNAPZjJYM5GvlMkNk1Phbj.jpeg" isMerged="true" [V0_FILE]png:file="public/images/houston-barber-expo-vertical.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8800-mdnjMEpmioRyvbpovmtiSmxBNNrHa5.png" isMerged="true" [V0_FILE]jpeg:file="public/images/houston-barber-expo-crowd-stage.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8800-krBhMDU6as0Mub7kipbrzqnFQdQAMX.jpeg" isMerged="true" [V0_FILE]png:file="public/images/zelle-payment-qr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8823390621939869665-OFqcFNsrCqPYLhfZmt8LOQwbfDiATq.png" isMerged="true" [V0_FILE]typescriptreact:file="vendor-selection-form.tsx" isMerged="true" "use client" import { useState, useActionState, useEffect } from "react" import { Minus, Plus, Zap } from "lucide-react" import { useToast } from "@/hooks/use-toast" import Image from "next/image" import { Button } from "@/components/ui/button" import { checkout } from "./actions/checkout" export default function VendorSelectionForm() { const [booths, setBooths] = useState({ diamond: { id: "diamond-booth", quantity: 0, price: 750, icon: Diamond

, name: "Diamond Booth", }, platinum: { id: "platinum-booth", quantity: 0, price: 650, icon:

, name: "Platinum Booth", }, gold: { id: "gold-booth", quantity: 0, price: 550, icon: Gold

, name: "Gold Booth", }, silver: { id: "silver-booth", quantity: 0, price: 450, icon: Silver

, name: "Silver Booth", }, bronze: { id: "bronze-booth", quantity: 0, price: 350, icon: Bronze

, name: "Bronze Booth", }, electricity: { id: "electricity-add-on", quantity: 0, price: 185, icon: , name: "Electricity Add-on", }, }) const [state, formAction, isPending] = useActionState(checkout, null) const { toast } = useToast() useEffect(() => { if (state?.message) { toast({ title: state.success ? "Purchase Successful" : "Purchase Failed", description: state.message, variant: state.success ? "default" : "destructive", }) if (state.success) { // Reset quantities on successful purchase setBooths( (prevBooths) => Object.fromEntries( Object.entries(prevBooths).map(([key, value]) => [key, { ...value, quantity: 0 }]), ) as typeof booths, ) } } }, [state, toast]) const handleQuantityChange = (type: keyof typeof booths, delta: number) => { setBooths((prevBooths) => ({ ...prevBooths, [type]: { ...prevBooths[type], quantity: Math.max(0, prevBooths[type].quantity + delta), }, })) } const scrollToPayment = () => { const paymentSection = document.getElementById("payment-information") if (paymentSection) { paymentSection.scrollIntoView({ behavior: "smooth" }) } } const totalSelectedBooths = Object.values(booths).reduce((sum, booth) => sum + booth.quantity, 0) return (

GET YOUR VENDOR BOOTH

BOOTH

QUANTITY

{Object.entries(booths).map(([key, { quantity, price, icon, name }]) => (

{icon} {name} ${price}

{quantity}

))}

{/* Zelle Payment Section */}

PAYMENT INFORMATION

Bonnie Patino

Contact: 281-743-0078

VERY IMPORTANT:

In Zelle memo add your Company/Name, Phone Number, Email Address and any other important information.

) } [V0_FILE]typescriptreact:file="payment-information-section.tsx" isQuickEdit="true" isMerged="true" import Image from "next/image" export default function PaymentInformationSection() { return (

PAYMENT INFORMATION

Bonnie Patino

Contact: 281-743-0078

VERY IMPORTANT:

In Zelle memo add your Company/Name, Phone Number, Email Address and any other important information.

) } [V0_FILE]typescriptreact:file="contact-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" export default function ContactSection() { return (

CONTACT US

Have Questions or Want Us to Visit Your Barber School?

We'd love to connect! If you have questions about the Houston Barber Expo or would like to schedule a visit from our founder, Kamal Osman, to your barber school, don't hesitate to reach out.

Our team is here to support you and provide any information you need.

📩 Contact us today — we're happy to help!

Have questions or need assistance? Feel free to reach out to us! Our team is here to help.

{/* Existing form code */}

</div>
            <Button className="w-full bg-[#007bff] px-8 py-3 text-lg font-bold text-white hover:bg-[#0056b3]">
              SEND MESSAGE
            </Button>
          </form>

{/* Existing contact information code */}
          <p className="mt-8 text-sm text-gray-200">
            You can also email us directly at{" "}
            <a href="mailto:houstonbarberexpo@yahoo.com" className="text-[#007bff] hover:underline">
              houstonbarberexpo@yahoo.com
            </a>{" "}
            or call us at <span className="font-semibold text-white">(713) 555-1234</span>.
          </p>
          <p className="mt-4 text-sm text-gray-200">Our office hours are Monday - Friday, 9:00 AM - 5:00 PM CDT.</p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpeg:file="public/images/bobby-judge.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/384DE7C9-7003-41E1-A443-6802FAE750F2-SgjRiro33PGQyArECWYUAAUl1S3kBv.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/dejon-judge.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DE08A3E7-8AA1-4AB4-85B0-AA3096273C1F-t7bI7IIAsGgqZQM5mIy0lE25IJGwxu.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/aggieland-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/92DF871B-4566-4C91-A853-08EBE4AC2B45-XocJXIexHR5xZdwYqE0horjJsfXHQ9.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/prestige-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8A857DA8-01B4-4EEB-9A16-0FB62E238C34-BDYGgc3LzeLNJSl926Rfpi2qLCeIYS.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/roderick-educator.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2F8D5F36-7483-4292-AE07-1050F13B2B17-uOony9CtaJ9JjmeqJ6rklqhTHElJPf.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/youssef-educator.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8980.png-16wBgzTSyWA7WvEk77MAvjF7atE5Qw.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/prann-educator.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/92790FD0-8A71-4F9E-ABB3-C40025667A78-sY8GLlGg7aFiCqupq9vkTM7SqYYXoH.jpeg" isMerged="true"
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]jpeg:file="public/images/organski-vendor-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/E7943851-C121-4175-B318-C086F39A4D43-oqTTL9Kw21k1SststXs7rB4tXtzWvA.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/thecut-vendor-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5DE23806-F6E3-4A0B-9914-CAF9DD386804-6WxhQ14Prk9YUG0BSjNkPuV6x1TZcI.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/prann-educator-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/92790FD0-8A71-4F9E-ABB3-C40025667A78-EGtgDfvYJMhLK11CIEEJhkWW8HaBke.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/dejon-judge-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DE08A3E7-8AA1-4AB4-85B0-AA3096273C1F-3HuQbHypvZIQmv02Cokrb6J3pedVBD.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/bobby-judge-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/384DE7C9-7003-41E1-A443-6802FAE750F2-CYPSkpT6cFbXDqLm2elJJJus3s0I02.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/pearland-barber-college.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6F89F9CD-1473-4998-97B7-496F4CCF2D10-GKF4ew8lutKydfrvlcYHjsGvQmokTc.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/roderick-educator-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2F8D5F36-7483-4292-AE07-1050F13B2B17-854ltjHyzky2IZuMVx9a7Lp8KiK7B6.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/aggieland-vendor-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/92DF871B-4566-4C91-A853-08EBE4AC2B45-i9FtuCitDrssaDpCaTtHr3TQjlZcol.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/prestige-vendor-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8A857DA8-01B4-4EEB-9A16-0FB62E238C34-izBVjdhYy5eCiKjJCCfX3CGwnY6Owy.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/wavz-vendor-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/C8661490-4A08-4066-BCB4-C6FB7C43EEB0-KlxlbIHYcugTouhNwxEFw6oYSYsF0z.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/vendor-booths-section.tsx" isMerged="true"
{
  /* Featured Vendors Section */
}
;<div className="mb-16">
  <h3 className="mb-10 text-center text-3xl font-bold uppercase text-white">FEATURED VENDORS</h3>
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
    <div className="flex justify-center">
      <Image
        src="/images/aggieland-vendor-new.jpeg"
        alt="Aggieland Barber Supply - Featured Vendor"
        width={280}
        height={350}
        className="object-contain rounded-lg"
      />
    </div>
    <div className="flex justify-center">
      <Image
        src="/images/wavz-vendor-new.jpeg"
        alt="WAVZ - Featured Vendor"
        width={280}
        height={350}
        className="object-contain rounded-lg"
      />
    </div>
    <div className="flex justify-center">
      <Image
        src="/images/prestige-vendor-new.jpeg"
        alt="Prestige Barber Supply - Featured Vendor"
        width={280}
        height={350}
        className="object-contain rounded-lg"
      />
    </div>
    <div className="flex justify-center">
      <Image
        src="/images/organski-vendor-new.jpeg"
        alt="Organski Professional - Featured Vendor"
        width={280}
        height={350}
        className="object-contain rounded-lg"
      />
    </div>
    <div className="flex justify-center">
      <Image
        src="/images/thecut-vendor-new.jpeg"
        alt="The Cut App - Featured Vendor"
        width={280}
        height={350}
        className="object-contain rounded-lg"
      />
    </div>
  </div>
</div>
[V0_FILE]jpeg:file="public/images/morono-educator.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8979.png-yMf1FsY9CyK9LZRI4p9YgDIAvdxzUC.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/youssef-educator-updated.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8980.png-VzwwlTsgPUePAcHLVdGEC5G92yXWug.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="about-section.tsx" isEdit="true" isMerged="true"
import Image from "next/image"

export default function AboutSection() {
  return (
    <section className="bg-black py-16">
      <div className="container mx-auto px-4">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-6 py-3 text-center text-3xl font-bold uppercase tracking-wide text-white">
            ABOUT HOUSTON BARBER EXPO
          </h2>
        </div>

<div className="mx-auto max-w-4xl text-center text-lg text-gray-300 mt-8">
          <p className="mb-6 text-xl text-white font-semibold">
            We're thrilled to announce the return of the Houston Barber Expo for its highly anticipated second annual
            event in 2025—a premier gathering designed to unite barbers, stylists, and grooming professionals from
            across the region.
          </p>

<p className="mb-6">
            Set to become a cornerstone of the barbering community, this dynamic event offers a one-of-a-kind platform
            for competition, education, networking, and celebration of the craft. Whether you're here to showcase your
            skills, learn from industry leaders, or connect with fellow professionals, the 2025 Houston Barber Expo is
            the place to be!
          </p>

<div className="mb-8 text-left max-w-3xl mx-auto">
            <h3 className="text-xl font-bold text-white mb-4">The Houston Barber Expo will feature:</h3>
            <ul className="space-y-2 text-gray-100">
              <li>
                • Four professional competition categories, each offering $1,000 cash prizes, trophies, and prestige.
              </li>
              <li>• Two student competitions with $500 prizes each.</li>
              <li>• One braiding competition awarding a $1,000 grand prize.</li>
              <li>• Educational classes led by top educators from around the country.</li>
              <li>• Live music, dynamic hair showcases, and vibrant entertainment during every barber battle.</li>
            </ul>
          </div>

<p className="mb-6">
            This event is more than a competition—it's a celebration of growth, innovation, and excellence in the
            barbering industry. We expect to attract a diverse crowd of professionals, students, and the general public.
          </p>

<p className="mb-8">
            The expo will be held at POST Houston, a vibrant, mixed-use cultural and entertainment hub located in the
            heart of downtown Houston. The venue offers ample parking and a dynamic atmosphere, making it the perfect
            setting for this exciting event.
          </p>

<div className="mb-8 p-6 bg-gray-900 rounded-lg border border-gray-700">
            <h3 className="text-xl font-bold text-white mb-2">EVENT LOCATION</h3>
            <p className="text-gray-100 text-lg">
              <strong>The POST Houston</strong>
              <br />
              401 Franklin St, Houston, TX 77201
            </p>
          </div>

<div className="mb-8 p-6 bg-blue-900 rounded-lg border border-blue-700">
            <h3 className="text-xl font-bold text-white mb-4">Join Us</h3>
            <p className="text-gray-100 mb-4">
              Whether you're a seasoned professional, an up-and-coming student, an educator, or a grooming brand — the
              Houston Barber Expo 2025 is your opportunity to be part of something bigger.
            </p>
            <p className="text-white font-semibold">
              Let's come together to celebrate the craft, elevate the industry, and build lasting connections. Get your
              tickets NOW!
            </p>
          </div>

<a
            href="https://www.eventbrite.com/e/the-houston-barber-expo-tickets-1302277259339?aff=oddtdtcreator&fbclid=PAQ0xDSwMNtOBleHRuA2FlbQIxMQABp3P6wyWsgMaNMsPQDvrd7Gv5IDC_O0WiN0KqnS6QQlVoLr-VPC-XwGyrC20J_aem_nJPMsbfgJNXWDbQatFE_gg"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center bg-[#007bff] px-8 py-3 text-lg font-bold text-white hover:bg-[#0056b3] rounded-lg transition-colors duration-200"
          >
            GET TICKETS
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpg:file="public/images/floor-plan.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/floor-plan-XMprfIAPzTJq4qllxgTZvEmrgD7Gnx.jpg" isMerged="true"
[V0_FILE]jpeg:file="public/images/vendor-booth-pricing.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Vendor%20Booth.jpg-iKj8G9SHGEB7mYaDO7DofmQ5AbHUyi.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/venue-space.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/65692d582800036a4d1e0228_The-office-cover.jpg-qXKJmPF0kyfgEK7HZ0DY2IaUW9tcHa.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Tabs, TabsContent } from "@/components/ui/tabs"

import HeroSection from "../hero-section"
import AboutSection from "../about-section"
import RegisterToCompeteSection from "../register-to-compete-section"
import GetTicketsSection from "../get-tickets-section"
import SponsersSection from "../sponsers-section"
import BecomeSponserSection from "../become-sponser-section"
import VendorBoothsSection from "../vendor-booths-section"
import VenueDetailsSection from "../venue-details-section"
import PaymentInformationSection from "../payment-information-section"
import EventDetailsSection from "../event-details-section"
import FAQsSection from "../faqs-section"
import LocationSection from "../location-section"
import EducationSeminarsSection from "../education-seminars-section"
import ScheduleSection from "../schedule-section"
import HotelAccommodationsSection from "../hotel-accommodations-section"
import ContactSection from "../contact-section"
import JudgesSection from "../judges-section"
import Footer from "../footer"
import TabHeader from "../tab-header"

export default function Page() {
  const [activeTab, setActiveTab] = useState("home")

const handleTabChange = (tab: string) => {
    setActiveTab(tab)
  }

return (
    <main>
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsContent value="home" className="mt-0">
          <HeroSection onTabChange={handleTabChange} />
          <div id="home">
            <AboutSection />
          </div>
        </TabsContent>

<Footer onTabChange={handleTabChange} />
    </main>
  )
}
[V0_FILE]png:file="public/images/zelle-payment-qr-bonnie.png" url="https://blobs.vusercontent.net/blob/pasted-text-Mm3qOu7YQSQQGLMs74IVup4QOkJp9X.txt" isMerged="true"
[V0_FILE]png:file="public/images/zelle-payment-qr-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8984-YJPxxQxqAVUffgevhjH4feFwX98YIh.png" isMerged="true"
[V0_FILE]jpeg:file="public/images/venue-space-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8985-JSr6MFIRO4IiftLYHhwuBaIWGtWahl.jpeg" isMerged="true"
[V0_FILE]png:file="public/images/zelle-payment-qr-updated.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_8984-5zIlQcgG1l77FrXiSTCr5sUgK8uwwE.png" isMerged="true"
[V0_FILE]typescriptreact:file="location-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
export default function LocationSection() {
  return (
    <section className="bg-black py-16">
      <div className="container mx-auto px-4 text-center">
        <div className="mx-auto max-w-3xl text-center text-lg text-gray-100">
          <p className="mb-4 text-5xl font-extrabold text-white">The Post Houston</p>
          <p className="mb-8 text-3xl font-semibold text-white">401 Franklin St, Houston, TX 77201</p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="venue-details-section.tsx" isEdit="true" isMerged="true"
export default function VenueDetailsSection() {
  return (
    <section className="bg-black py-16">
      <div className="container mx-auto px-4">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-6 py-3 text-center text-3xl font-bold uppercase tracking-wide text-white">
            VENDOR'S
          </h2>
        </div>

<div className="mx-auto max-w-3xl text-center text-lg text-gray-300">
          <p className="mb-2 text-2xl font-bold text-white">30,000 sqft Venue</p>
          <p className="mb-4 text-xl font-semibold text-white">The Post Houston</p>
          <p className="mb-2 text-xl font-bold text-white">2024 Attendance 7,000+</p>
          <p className="mb-8 text-xl font-bold text-white">Anticipated attendance for 2025 12,000</p>
          <p className="mb-8">
            The long anticipated wait is over and we will be campaigning for an entire year! Legendary partnerships and
            relationships will be born again at Houston Barber Expo 2025. Be a part of this luxurious experience and get
            your booth(s) today!
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpeg:file="public/images/og-judge-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1058785522538160349-9TQBTqqNACOqYPiyx7wLKbuootQejM.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/laura-judge-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1751873952676184022-JXVeMhx2TQRJLLLZ7ajeBnh1rm572k.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/joe-finn-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7400929522149517505-tIQdKJDP744dHb2zEOeP4GWnteHk30.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/regale-barber-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1768354603328084962-zu4nbjFqMkOrGk3baqEDuaP7sgLiRb.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/pearland-barber-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2866856754956817858-owcl0cOs3tdGqgNgpqEyu6h6aXdjsy.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/heal-haircare-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6958136404424819498-TvEgGko3u5fJolCCPUy2AajD1advfw.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/blood-veins-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5165695174847856604-rOfbjGt9ItUQCOeqwIcCCuOfp171p0.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/texas-barber-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8283339498499600022-XVEon7LPccaObiysKuSaWAL1kuPCyL.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/elite-barber-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8996219573416333363-9V6BENAakKVFqHJomlHgCnSd9nxeEk.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/blurred-barber-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-kRejNURbk7antZfsJoVYNfuqAA9Pv0.png" isMerged="true"
[V0_FILE]jpeg:file="public/images/thomas-r-salons-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1517127019356887611-qXpX1YziM2opC77v5Goz9qNtyQTU0I.jpeg" isMerged="true"
[V0_FILE]jpg:file="public/images/zelle-qr-code-only.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/zelle-qr-code-only-fbnT8q2ipa2tgt2qf7GU9fJbOfdPpq.jpg" isMerged="true"
[V0_FILE]jpeg:file="public/images/dejon-judge-crispy-kutz.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5448193463601119424-vm7RasFNCZ0DZDGLKbjqo5P1XvqvhL.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/realtor-bonnie-sponsor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5382960562151489894-dFdhi47Yyvcd9cZEgql0Xpk6rsflgW.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/blurred-barber-vendor-duplicate.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-M6DJp1XZKvd8oAuBjtQfDFxxs7lnnk.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx" isQuickEdit="true" isMerged="true"
import type * as React from "react"
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"
import { type Button, buttonVariants } from "@/components/ui/button"

function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <nav
      role="navigation"
      aria-label="pagination"
      data-slot="pagination"
      className={cn("mx-auto flex w-full justify-center", className)}
      {...props}
    />
  )
}

function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
  return <ul data-slot="pagination-content" className={cn("flex flex-row items-center gap-1", className)} {...props} />
}

function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />
}

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, "size"> &
  React.ComponentProps<"a">

function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
  return (
    <a
      aria-current={isActive ? "page" : undefined}
      data-slot="pagination-link"
      data-active={isActive}
      className={cn(
        buttonVariants({
          variant: isActive ? "outline" : "ghost",
          size,
        }),
        className,
      )}
      {...props}
    />
  )
}

function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      size="default"
      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
      {...props}
    >
      <ChevronLeftIcon />
      <span className="hidden sm:block">Previous</span>
    </PaginationLink>
  )
}

function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink
      aria-label="Go to next page"
      size="default"
      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
      {...props}
    >
      <span className="hidden sm:block">Next</span>
      <ChevronRightIcon />
    </PaginationLink>
  )
}

function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      aria-hidden
      data-slot="pagination-ellipsis"
      className={cn("flex size-9 items-center justify-center", className)}
      {...props}
    >
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More pages</span>
    </span>
  )
}

export {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationItem,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
}
[V0_FILE]jpeg:file="public/images/rick-blurred-judge.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3130506200526590165-wTv6VISx1f9alAHRi6pCAmqGozlAeF.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/anti-broke-barbers-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6333352264122905605-pxb3ZWYrFQ6n9DQiRTcTuEbZyI5nDL.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/hands-in-motion-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3054831959728448199-AQSJYfBM8vteoQM4xDcNDK1d3lLvIg.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/alleviate-pain-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2635299711297281824-KKfLaDgVz93xTmz1uaT9nTXkz0FWsN.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/alpha-series-pro-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6000776851096343559-MTJvXFpTy16TyKkz9OLbu4SYdI3AUs.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/raw-n-unkut-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1251248573904080305-TdZhPLy3C8VVR602y4gtEmg5E6DmhX.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/carter-judge.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6829572248255943867-SScAhCcJzEWw8Q34m78nQmmz2ohmB7.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="sponsers-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
export default function SponsersSection() {
  return (
    <section className="bg-black py-16">
      <div className="container mx-auto px-4">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-8 py-4 text-center text-4xl font-extrabold uppercase tracking-wide text-white shadow-lg">
            SPONSOR
          </h2>
        </div>

<div className="text-center">
          <div className="max-w-4xl mx-auto">
            <h3 className="mb-8 text-3xl font-bold uppercase text-white">Become a Sponsor</h3>
            <p className="text-xl text-gray-100 mb-8">
              Partner with the Houston Barber Expo and showcase your brand to hundreds of industry professionals,
              barbers, stylists, and students from across the region.
            </p>

<div className="bg-gray-900 p-8 rounded-lg mb-8">
              <h4 className="text-2xl font-bold text-white mb-4">Sponsorship Opportunities</h4>
              <p className="text-gray-300 mb-6">
                Join us as a sponsor and gain exclusive access to our growing community of barbering professionals.
                Multiple sponsorship tiers available to fit your marketing goals and budget.
              </p>

{/* QR Code Placeholder */}
              <div className="bg-white p-8 rounded-lg inline-block">
                <div className="w-48 h-48 bg-gray-200 flex items-center justify-center rounded-lg">
                  <p className="text-gray-600 text-center">
                    QR Code
                    <br />
                    Coming Soon
                  </p>
                </div>
              </div>

<p className="text-gray-300 mt-6">
                Scan the QR code above or contact us directly for detailed sponsorship packages and pricing.
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="bg-gray-800 p-6 rounded-lg">
                <h5 className="text-white font-bold mb-2">Brand Exposure</h5>
                <p className="text-gray-300">Maximum visibility to industry professionals</p>
              </div>
              <div className="bg-gray-800 p-6 rounded-lg">
                <h5 className="text-white font-bold mb-2">Networking</h5>
                <p className="text-gray-300">Connect with key decision makers</p>
              </div>
              <div className="bg-gray-800 p-6 rounded-lg">
                <h5 className="text-white font-bold mb-2">Growth</h5>
                <p className="text-gray-300">Expand your market reach</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="tab-header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Image from "next/image"
import { Menu } from "lucide-react"
import { useState } from "react"

import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

type TabHeaderProps = {
  onTabChange?: (tab: string) => void
}

export default function TabHeader({ onTabChange }: TabHeaderProps) {
  const [isSheetOpen, setIsSheetOpen] = useState(false)

const handleNavClick = (tab: string) => {
    if (onTabChange) {
      onTabChange(tab)
    }
    // Close mobile menu after navigation
    setIsSheetOpen(false)
  }

return (
    <header className="bg-black py-4 px-4 md:px-6 lg:px-8">
      <div className="flex h-16 items-center justify-between">
        <button
          onClick={() => handleNavClick("home")}
          className="flex items-center gap-2 hover:opacity-80 transition-opacity"
          aria-label="Houston Barber Expo Home"
        >
          <Image src="/images/houston-barber-expo-new-logo.png" alt="Houston Barber Expo Logo" width={50} height={50} />
        </button>

<nav className="hidden items-center gap-6 text-sm font-medium text-white lg:flex">
          <button onClick={() => handleNavClick("home")} className="hover:text-gray-300 transition-colors">
            HOME
          </button>
          <button onClick={() => handleNavClick("competitions")} className="hover:text-gray-300 transition-colors">
            COMPETITIONS
          </button>
          <button onClick={() => handleNavClick("get-tickets")} className="hover:text-gray-300 transition-colors">
            GET TICKETS
          </button>
          <button
            onClick={() => handleNavClick("education-seminars")}
            className="hover:text-gray-300 transition-colors"
          >
            EDUCATION SEMINARS
          </button>
          <button onClick={() => handleNavClick("schedule")} className="hover:text-gray-300 transition-colors">
            SCHEDULE
          </button>
          <button onClick={() => handleNavClick("judges")} className="hover:text-gray-300 transition-colors">
            JUDGES
          </button>
          <button
            onClick={() => handleNavClick("vendor-information")}
            className="hover:text-gray-300 transition-colors"
          >
            VENDOR INFORMATION
          </button>
          <button onClick={() => handleNavClick("hotels")} className="hover:text-gray-300 transition-colors">
            HOTEL ACCOMMODATIONS
          </button>
          <button onClick={() => handleNavClick("location")} className="hover:text-gray-300 transition-colors">
            LOCATION
          </button>
          <button onClick={() => handleNavClick("contact")} className="hover:text-gray-300 transition-colors">
            CONTACT
          </button>
        </nav>

<div className="flex items-center gap-2">
          <Button
            onClick={() => handleNavClick("get-tickets")}
            className="hidden bg-[#007bff] text-white hover:bg-[#0056b3] lg:inline-flex"
          >
            GET TICKETS
          </Button>
          <Button
            onClick={() => handleNavClick("sponsors")}
            variant="outline"
            className="hidden border-white text-white hover:bg-white hover:text-black lg:inline-flex bg-transparent"
          >
            SPONSOR
          </Button>
          <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
            <SheetTrigger asChild>
              <Button
                variant="outline"
                size="icon"
                className="lg:hidden bg-transparent border-white"
                aria-label="Toggle navigation menu"
              >
                <Menu className="h-6 w-6 text-white" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="bg-black text-white border-gray-800 overflow-y-auto">
              <div className="grid gap-4 py-6 min-h-full">
                <button
                  onClick={() => handleNavClick("home")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  HOME
                </button>
                <button
                  onClick={() => handleNavClick("competitions")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  COMPETITIONS
                </button>
                <button
                  onClick={() => handleNavClick("get-tickets")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  GET TICKETS
                </button>
                <button
                  onClick={() => handleNavClick("education-seminars")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  EDUCATION SEMINARS
                </button>
                <button
                  onClick={() => handleNavClick("judges")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  JUDGES
                </button>
                <button
                  onClick={() => handleNavClick("vendor-information")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  BECOME A VENDOR
                </button>
                <button
                  onClick={() => handleNavClick("become-sponsor")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  BECOME A SPONSOR
                </button>
                <button
                  onClick={() => handleNavClick("schedule")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  SCHEDULE
                </button>
                <button
                  onClick={() => handleNavClick("hotels")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  HOTEL ACCOMMODATIONS
                </button>
                <button
                  onClick={() => handleNavClick("location")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  LOCATION
                </button>
                <button
                  onClick={() => handleNavClick("contact")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  CONTACT
                </button>
                <div className="border-t border-gray-700 pt-4 mt-4">
                  <Button
                    onClick={() => handleNavClick("get-tickets")}
                    className="w-full mb-3 bg-[#007bff] text-white hover:bg-[#0056b3]"
                  >
                    GET TICKETS
                  </Button>
                  <Button
                    onClick={() => handleNavClick("sponsors")}
                    variant="outline"
                    className="w-full border-white text-white hover:bg-white hover:text-black bg-transparent"
                  >
                    SPONSOR
                  </Button>
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Image from "next/image"
import Link from "next/link"
import { Instagram } from "lucide-react"

type FooterProps = {
  onTabChange?: (tab: string) => void
}

export default function Footer({ onTabChange }: FooterProps) {
  const handleNavClick = (tab: string) => {
    if (onTabChange) {
      onTabChange(tab)
    }
  }

return (
    <footer className="bg-black py-16 text-gray-100">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
          {/* Logo Only */}
          <div className="flex flex-col items-center md:items-start">
            <button onClick={() => handleNavClick("home")} className="hover:opacity-80 transition-opacity">
              <Image
                src="/images/houston-barber-expo-new-logo.png"
                alt="Houston Barber Expo Logo"
                width={120}
                height={120}
                className="mb-6"
              />
            </button>
          </div>

{/* Navigation */}
          <div>
            <h3 className="mb-6 text-2xl font-bold uppercase text-white">NAVIGATION</h3>
            <ul className="space-y-3 text-base">
              <li>
                <button
                  onClick={() => handleNavClick("home")}
                  className="hover:text-white transition-colors duration-200"
                >
                  Home
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNavClick("get-tickets")}
                  className="hover:text-white transition-colors duration-200"
                >
                  Get Tickets
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNavClick("vendor-information")}
                  className="hover:text-white transition-colors duration-200"
                >
                  Vendor Information
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNavClick("education-seminars")}
                  className="hover:text-white transition-colors duration-200"
                >
                  Education Seminars
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNavClick("schedule")}
                  className="hover:text-white transition-colors duration-200"
                >
                  Schedule
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNavClick("competitions")}
                  className="hover:text-white transition-colors duration-200"
                >
                  Competitions
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNavClick("sponsor")}
                  className="hover:text-white transition-colors duration-200"
                >
                  Sponsor
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNavClick("location")}
                  className="hover:text-white transition-colors duration-200"
                >
                  Location
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNavClick("contact")}
                  className="hover:text-white transition-colors duration-200"
                >
                  Contact
                </button>
              </li>
            </ul>
          </div>

{/* Support */}
          <div>
            <h3 className="mb-6 text-2xl font-bold uppercase text-white">SUPPORT</h3>
            <ul className="space-y-3 text-base">
              <li>
                <button
                  onClick={() => handleNavClick("contact")}
                  className="hover:text-white transition-colors duration-200"
                >
                  FAQs
                </button>
              </li>
              <li>
                <button
                  onClick={() => handleNavClick("contact")}
                  className="hover:text-white transition-colors duration-200"
                >
                  Contact
                </button>
              </li>
              <li>
                <a
                  href="mailto:houstonbarberexpo@yahoo.com"
                  className="hover:text-white transition-colors duration-200"
                >
                  houstonbarberexpo@yahoo.com
                </a>
              </li>
            </ul>
          </div>

{/* Get Connected - moved to span across remaining space */}
          <div className="md:col-span-2 lg:col-span-1">
            <h3 className="mb-6 text-2xl font-bold uppercase text-white">GET CONNECTED</h3>
            <p className="mb-4 text-base">Follow us:</p>
            <div className="flex justify-start">
              <Link
                href="https://www.instagram.com/thehoustonbarberexpo/"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Instagram"
                className="group"
              >
                <div className="relative flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-600 via-pink-500 to-orange-400 transition-transform duration-200 hover:scale-110">
                  <Instagram className="h-7 w-7 text-white" />
                </div>
              </Link>
            </div>
          </div>
        </div>

<div className="mt-16 border-t border-gray-700 pt-8 text-center text-sm text-gray-300">
          <p>© Copyright 2025 © Houston Barber Expo. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]png:file="public/images/register-compete-new-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/50B9C412-43F6-4F40-81E7-1885C55C83D2-LXcDZuGoP3PKQtHR4mbSgd5tNNuiXl.png" isMerged="true"
[V0_FILE]png:file="public/images/schedule-new-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/A348FDC0-7427-4995-9924-BBE8D15F915A-JBB9ZO0XEM1NNc9ejBvQU17ZX6eTSD.png" isMerged="true"
[V0_FILE]png:file="public/images/vendors-new-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/C406E134-71CB-4411-96BC-244C408A658A-Ls6I67uJidKnrttQb316OUVIGwUKcj.png" isMerged="true"
[V0_FILE]png:file="public/images/get-tickets-new-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/551B03B8-8620-4ABF-83E7-9C1AECD724AC-iuVMGTAzmePtPlYAawKkVoNDpSTxMb.png" isMerged="true"
[V0_FILE]typescriptreact:file="education-seminars-section.tsx" isEdit="true" isMerged="true"
"use client"

import { ExternalLink } from "lucide-react"
import Image from "next/image"

export default function EducationSeminarsSection() {
  const eventbriteUrl =
    "https://www.eventbrite.com/e/the-houston-barber-expo-tickets-1302277259339?aff=oddtdtcreator&fbclid=PAQ0xDSwMNtOBleHRuA2FlbQIxMQABp3P6wyWsgMaNMsPQDvrd7Gv5IDC_O0WiN0KqnS6QQlVoLr-VPC-XwGyrC20J_aem_nJPMsbfgJNXWDbQatFE_gg"

return (
    <section id="education-seminars" className="bg-black py-16">
      <div className="container mx-auto px-4 text-center">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-6 py-3 text-center text-3xl font-bold uppercase tracking-wide text-white">
            EDUCATION SEMINARS
          </h2>
        </div>

<div className="mx-auto max-w-4xl text-lg text-gray-300">
          <div className="mb-16">
            <h3 className="mb-10 text-3xl font-bold uppercase text-white">SPECIAL GUEST</h3>
            <div className="flex justify-center">
              <Image
                src="/images/curtis-smith-special-guest.jpeg"
                alt="Curtis Smith - Special Guest @XOTICS"
                width={400}
                height={500}
                className="object-contain rounded-lg"
              />
            </div>
          </div>

<div className="mb-12 p-8 bg-gray-900 rounded-lg border border-gray-700">
            <h3 className="text-2xl font-bold text-white mb-6 flex items-center justify-center">
              <span className="mr-2">📚</span>
              Educational Panel
            </h3>
            <p className="text-xl text-orange-400 font-bold mb-6">9 AM - 1 PM</p>

<div className="space-y-4 text-left">
              <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                <span className="text-white font-semibold">Jack Of All Fades 💈</span>
                <span className="text-orange-400">9 AM</span>
              </div>
              <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                <span className="text-white font-semibold">Morono 💈</span>
                <span className="text-orange-400">10 AM</span>
              </div>
              <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                <span className="text-white font-semibold">Yousef The Barber 💈</span>
                <span className="text-orange-400">11 AM</span>
              </div>
              <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                <span className="text-white font-semibold">Cole Cutz 💈</span>
                <span className="text-orange-400">12 PM</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-white font-semibold">The Cut App 💈</span>
                <span className="text-orange-400">1 PM</span>
              </div>
            </div>
          </div>

<p className="mb-6 text-xl text-gray-100">
            Advance your craft with expert-led sessions designed to inspire and inform.
          </p>
          <p className="mb-6">
            Join respected educators and industry influencers for a series of insightful seminars covering the latest
            trends, techniques, and professional best practices in barbering.
          </p>
          <div className="text-white font-semibold text-lg mb-6">
            <p>🗓 Date: Sunday, October 19, 2025</p>
            <p>🕘 Time: 9:00 AM – 1:00 PM CDT</p>
          </div>
          <p className="text-xl font-bold text-blue-400">Stay sharp. Stay ahead.</p>

<p className="mt-12 mb-8 text-white">
            An Education Pass is required to attend these seminars. Secure your spot today!
          </p>
          <a
            href={eventbriteUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 bg-[#007bff] hover:bg-[#0056b3] text-white font-bold py-3 px-8 text-lg rounded-lg transition-colors duration-200"
          >
            GET EDUCATION PASS
            <ExternalLink className="h-4 w-4" />
          </a>

<div className="mt-16">
            <h3 className="mb-10 text-3xl font-bold uppercase text-white">MEET OUR EDUCATORS</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <div className="flex justify-center">
                <Image
                  src="/images/roderick-educator-new.jpeg"
                  alt="Roderick - Educator"
                  width={300}
                  height={400}
                  className="object-contain rounded-lg"
                />
              </div>
              <div className="flex justify-center">
                <Image
                  src="/images/youssef-educator-updated.jpeg"
                  alt="Youssef - Educator"
                  width={300}
                  height={400}
                  className="object-contain rounded-lg"
                />
              </div>
              <div className="flex justify-center">
                <Image
                  src="/images/prann-educator-new.jpeg"
                  alt="Prann - Educator"
                  width={300}
                  height={400}
                  className="object-contain rounded-lg"
                />
              </div>
              <div className="flex justify-center">
                <Image
                  src="/images/morono-educator.jpeg"
                  alt="Morono - Educator"
                  width={300}
                  height={400}
                  className="object-contain rounded-lg"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpeg:file="public/images/realtor-bonnie-new-sponsor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5382960562151489894-LUs2uDQg2VfX51tg9CfabEmXH56d88.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/hands-in-motion-vendor-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3054831959728448199-NKmJFzWhmVfRLExtYSVAc0usZF47nw.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="become-sponser-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
export default function BecomeSponsorSection() {
  const contactEmail = "houstonbarberexpo@gmail.com"

return (
    <section className="bg-black py-16">
      <div className="container mx-auto px-4">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-8 py-4 text-center text-4xl font-extrabold uppercase tracking-wide text-white shadow-lg">
            BECOME A SPONSOR
          </h2>
        </div>

<div className="mx-auto max-w-4xl text-lg text-gray-300">
          <div className="mb-12 text-center">
            <p className="text-xl text-gray-100 mb-6">
              To make this event a success, we are currently seeking sponsorship partners. We would be honored to
              collaborate with your esteemed organization and showcase your brand to a broad and engaged audience.
            </p>
          </div>

<h3 className="mb-8 text-3xl font-bold text-white text-center">Sponsorship Opportunities</h3>

<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            {/* Diamond Sponsor */}
            <div className="rounded-lg border border-gray-300 bg-white p-6 shadow-md">
              <div className="mb-4 flex items-center gap-2">
                <span className="text-2xl">💎</span>
                <h3 className="text-2xl font-bold text-gray-800">Diamond Sponsor</h3>
              </div>
              <p className="mb-4 text-3xl font-extrabold text-blue-600">$10,000</p>
              <ul className="space-y-2 text-sm text-gray-700">
                <li>• Platinum Vendor Booth</li>
                <li>• Prime location near the main stage</li>
                <li>• 20' x 20' booth space</li>
                <li>• Logo on event marketing materials</li>
                <li>• Mention in event promotion</li>
                <li>• Monetary Sponsorships</li>
                <li>• Naming rights to a major competition category</li>
                <li>• Premium booth location</li>
                <li>• Full-page ad in the event program</li>
                <li>• Logo on all event materials and website</li>
                <li>• Social media shoutouts</li>
                <li>• Solo and collaborative flyers</li>
              </ul>
            </div>

{/* Platinum Sponsor */}
            <div className="rounded-lg border border-gray-300 bg-white p-6 shadow-md">
              <div className="mb-4 flex items-center gap-2">
                <span className="text-2xl">🔷</span>
                <h3 className="text-2xl font-bold text-gray-800">Platinum Sponsor</h3>
              </div>
              <p className="mb-4 text-3xl font-extrabold text-gray-600">$7,500</p>
              <ul className="space-y-2 text-sm text-gray-700">
                <li>• Platinum Vendor Booth</li>
                <li>• 20' x 20' booth space</li>
                <li>• Monetary Sponsorships</li>
                <li>• Naming rights to a professional competition</li>
                <li>• Full-page ad in the event program</li>
                <li>• Logo on event materials and website</li>
                <li>• Social media mentions</li>
                <li>• Solo and collaborative flyers</li>
                <li>• Premium booth location</li>
              </ul>
            </div>

{/* Gold Sponsor */}
            <div className="rounded-lg border border-gray-300 bg-white p-6 shadow-md">
              <div className="mb-4 flex items-center gap-2">
                <span className="text-2xl">🥇</span>
                <h3 className="text-2xl font-bold text-gray-800">Gold Sponsor</h3>
              </div>
              <p className="mb-4 text-3xl font-extrabold text-yellow-600">$5,000</p>
              <ul className="space-y-2 text-sm text-gray-700">
                <li>• Gold Vendor Booth</li>
                <li>• 20' x 15' booth space</li>
                <li>• Monetary Sponsorships</li>
                <li>• Naming rights to a professional competition</li>
                <li>• Quarter-page ad in the event program</li>
                <li>• Logo on event materials and website</li>
              </ul>
            </div>

{/* Silver Sponsor */}
            <div className="rounded-lg border border-gray-300 bg-white p-6 shadow-md">
              <div className="mb-4 flex items-center gap-2">
                <span className="text-2xl">🥈</span>
                <h3 className="text-2xl font-bold text-gray-800">Silver Sponsor</h3>
              </div>
              <p className="mb-4 text-3xl font-extrabold text-gray-500">$3,500</p>
              <ul className="space-y-2 text-sm text-gray-700">
                <li>• Silver Vendor Booth</li>
                <li>• 20' x 10' booth space</li>
                <li>• Monetary Sponsorships</li>
                <li>• Student category sponsorship</li>
                <li>• Logo on event materials and flyers</li>
              </ul>
            </div>

{/* Bronze Sponsor */}
            <div className="rounded-lg border border-gray-300 bg-white p-6 shadow-md">
              <div className="mb-4 flex items-center gap-2">
                <span className="text-2xl">🥉</span>
                <h3 className="text-2xl font-bold text-gray-800">Bronze Sponsor</h3>
              </div>
              <p className="mb-4 text-3xl font-extrabold text-orange-600">$2,500</p>
              <ul className="space-y-2 text-sm text-gray-700">
                <li>• Bronze Vendor Booth</li>
                <li>• 15' x 10' booth space</li>
                <li>• Monetary Sponsorships</li>
                <li>• Student category sponsorship</li>
                <li>• Logo on event materials and flyers</li>
              </ul>
            </div>
          </div>

{/* Sponsorship Benefits */}
          <div className="mt-16 rounded-lg border border-gray-300 bg-white p-8 shadow-md">
            <h3 className="mb-6 text-3xl font-bold text-gray-800">Sponsorship Benefits</h3>
            <div className="space-y-6 text-gray-700">
              <div>
                <h4 className="font-semibold text-gray-800 mb-2">Brand Visibility</h4>
                <p>
                  Reach a broad and diverse audience, including barbers, industry professionals, and the general public.
                </p>
              </div>
              <div>
                <h4 className="font-semibold text-gray-800 mb-2">Networking Opportunities</h4>
                <p>
                  Connect directly with potential clients, partners, and key influencers within the barbering industry.
                </p>
              </div>
              <div>
                <h4 className="font-semibold text-gray-800 mb-2">Community Engagement</h4>
                <p>
                  Demonstrate your support for the local community and your commitment to the growth of the barbering
                  profession.
                </p>
              </div>
              <div>
                <h4 className="font-semibold text-gray-800 mb-2">Marketing Exposure</h4>
                <p>
                  Gain high-impact brand placement across all marketing channels, including social media, event
                  programs, stage signage, and promotional materials.
                </p>
              </div>
            </div>
          </div>

<div className="mt-12 text-center">
            <p className="mb-6 text-lg">
              We believe the Houston Barber Expo 2025 offers a unique and valuable platform for sponsors to achieve
              meaningful exposure in the nation's fourth-largest city. Houston is home to a vibrant, growing community
              of students, professionals, and enthusiasts who are deeply engaged in the culture and craft of barbering.
            </p>
            <p className="mb-8 text-lg">
              Your sponsorship will play a key role in the success of this event—while also helping to elevate and
              advance the barbering industry as a whole. We welcome the opportunity to partner with you and make the
              Houston Barber Expo a standout annual event.
            </p>
            <p className="mb-8 text-white">
              For more information or to confirm your sponsorship, please don't hesitate to reach out to us directly at{" "}
              {contactEmail}.
            </p>
          </div>

{/* Featured Sponsor */}
          <div className="mt-16 border-t border-gray-700 pt-12">
            <h3 className="mb-8 text-3xl font-bold text-white text-center">Featured Sponsor</h3>
            <div className="flex justify-center">
              <div className="bg-gray-900 rounded-lg p-6 max-w-md">
                <img
                  src="/images/realtor-bonnie-new-sponsor.jpeg"
                  alt="Realtor Bonnie - Houston Barber Expo Sponsor"
                  className="w-full rounded-lg mb-4"
                />
                <div className="text-center text-white">
                  <h4 className="text-xl font-bold mb-2">Bonnie Diaz | REALTOR®</h4>
                  <p className="text-orange-400 font-semibold mb-2">Realm Real Estate Professionals</p>
                  <p className="text-gray-300 text-sm mb-1">Top Producing Realtor | Mentor | Mobile Notary</p>
                  <p className="text-gray-300 text-sm mb-2">Houston, TX | 281.743.0078</p>
                  <p className="text-gray-400 text-xs">@REALTOR.BONNIE</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpeg:file="public/images/all7lats-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6521788170378134957-WWIRayL6OhCPdYakIv1JzepDuR9o8u.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/sebastian-judge-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5850285736653033162-LeSDPcXtW5K9TGqASWMDgwQBftQIOV.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/kz-judge-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3343639570904377039-Reh04H5Fis7e0Zf2kLyNFDdw73ILX9.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="register-to-compete-section.tsx" isEdit="true" isMerged="true"
"use client"

import { ExternalLink, ChevronDown, ChevronUp } from "lucide-react"
import { useState } from "react"

export default function RegisterToCompeteSection() {
  const [showRules, setShowRules] = useState(false)
  const eventbriteUrl =
    "https://www.eventbrite.com/e/the-houston-barber-expo-tickets-1302277259339?aff=oddtdtcreator&fbclid=PAQ0xDSwMNtOBleHRuA2FlbQIxMQABp3P6wyWsgMaNMsPQDvrd7Gv5IDC_O0WiN0KqnS6QQlVoLr-VPC-XwGyrC20J_aem_nJPMsbfgJNXWDbQatFE_gg"

const competitions = [
    {
      name: "Fastest Fade",
      entryFee: "$150",
      startTime: "2:15 PM",
      duration: "15 minutes",
      requirements:
        "Competitors have 15 minutes to complete a fully faded haircut, anything goes enhancements color designs etc. Models must have an inch and a half or more of hair for this category.",
      prize: "$500, Trophy, Clippers & More",
    },
    {
      name: "Traditional Fade & Beard",
      entryFee: "$150",
      startTime: "2:40 PM",
      duration: "30 minutes",
      requirements:
        "Your model's hair must be longer than 2 inches all around. We are looking for artistic creativity with traditional total look styling and fading.",
      prize: "$1000, Trophy, Clippers & More",
    },
    {
      name: "Braiding Competition",
      entryFee: "$150",
      startTime: "3:20 PM",
      duration: "1 hour 15 minutes",
      requirements:
        "Braiders will be given 1 hour & 15 minutes. Anything goes hair extensions, color enhancements, dye, etc.",
      prize: "$1000, Trophy, Product Swag Bag",
    },
    {
      name: "Student Fade & Beard",
      entryFee: "$100",
      startTime: "3:20 PM",
      duration: "40 minutes",
      requirements:
        "Students will have approximately 40 minutes to complete a full fade and beard. 'Do You' you have full artistic freedom to use enhancements or no enhancements, fade of your choice and make sure you sculpt the beard properly.",
      prize: "$500, Trophy, Clippers",
    },
    {
      name: "Student Tag Team",
      entryFee: "$150",
      startTime: "4:10 PM",
      duration: "40 minutes",
      requirements:
        "Students have approximately 40 minutes for this category. Choose a haircut of your desire, anything goes! You will also be judged on how well you represent your Barber College.",
      prize: "$500, Trophy, Clippers & More",
    },
    {
      name: "Professional Freestyle Design",
      entryFee: "$150",
      startTime: "5:10 PM",
      duration: "50 minutes",
      requirements:
        "Professionals will have exactly 50 minutes anything goes enhancements, color wardrobe. You have full creative freedom to 'Do You'",
      prize: "$1000, Trophy, Clippers & More",
    },
    {
      name: "Professional Tag Team",
      entryFee: "$150",
      startTime: "6:05 PM",
      duration: "50 minutes",
      requirements:
        "Two competitors will have 50 minutes to complete the haircut design & total look of their choice. Anything goes in this category. 'Do You'",
      prize: "$1000, Trophy, Clippers & More",
    },
  ]

return (
    <section id="register-to-compete" className="bg-black py-16">
      <div className="container mx-auto px-4 text-center">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-6 py-3 text-center text-3xl font-bold uppercase tracking-wide text-white">
            REGISTER TO COMPETE
          </h2>
        </div>

<div className="mx-auto max-w-4xl text-lg text-gray-300">
          <p className="mb-6">
            Are you ready to showcase your skills and compete against the best barbers in the nation? The Houston Barber
            Expo features thrilling competitions across various categories.
          </p>

<div className="mb-8">
            <button
              onClick={() => setShowRules(!showRules)}
              className="inline-flex items-center gap-2 bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-200 mb-6"
            >
              {showRules ? "Hide" : "View"} Competition Rules & Details
              {showRules ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
            </button>

{showRules && (
              <div className="bg-gray-900 rounded-lg p-6 text-left">
                <div className="mb-6 p-4 bg-orange-600 rounded-lg">
                  <p className="text-white font-semibold text-center">
                    ⚠️ IMPORTANT: Please arrive 45 minutes early prior to your competition time for all categories
                  </p>
                </div>

<div className="grid gap-6">
                  {competitions.map((comp, index) => (
                    <div key={index} className="border border-gray-700 rounded-lg p-4">
                      <div className="flex justify-between items-start mb-3">
                        <h4 className="text-xl font-bold text-white">{comp.name}</h4>
                        <div className="text-right">
                          <div className="text-[#007bff] font-semibold text-lg">{comp.entryFee}</div>
                          <div className="text-sm text-gray-400">{comp.startTime}</div>
                        </div>
                      </div>

<div className="mb-3">
                        <span className="text-orange-400 font-semibold">Duration:</span> {comp.duration}
                      </div>

<div className="mb-3">
                        <span className="text-orange-400 font-semibold">Requirements:</span>
                        <p className="text-gray-300 mt-1">{comp.requirements}</p>
                      </div>

<div>
                        <span className="text-orange-400 font-semibold">1st Place Prize:</span>
                        <p className="text-green-400 font-semibold mt-1">{comp.prize}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>

<h3 className="mb-4 text-2xl font-bold text-white">Competition Categories:</h3>
          <ul className="mb-6 list-disc space-y-2 text-left pl-8">
            <li>
              Fastest Fade - <span className="text-[#007bff] font-semibold">$150</span>
            </li>
            <li>
              Traditional Fade & Beard - <span className="text-[#007bff] font-semibold">$150</span>
            </li>
            <li>
              Braiding - <span className="text-[#007bff] font-semibold">$150</span>
            </li>
            <li>
              Professional Freestyle Design - <span className="text-[#007bff] font-semibold">$150</span>
            </li>
            <li>
              Professional Tag Team - <span className="text-[#007bff] font-semibold">$150</span>
            </li>
            <li>
              Student Fade and Beard - <span className="text-[#007bff] font-semibold">$100</span>
            </li>
            <li>
              Student Tag Team - <span className="text-[#007bff] font-semibold">$150</span>
            </li>
          </ul>
          <p className="mb-8">
            Entry fees are listed above for each category. Click "View Competition Rules & Details" above to see
            complete rules, timing, requirements, and prize information for each category. Limited slots available.
          </p>
          <a
            href={eventbriteUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 bg-[#007bff] hover:bg-[#0056b3] text-white font-bold py-3 px-8 text-lg rounded-lg transition-colors duration-200"
          >
            REGISTER NOW
            <ExternalLink className="h-4 w-4" />
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpeg:file="public/images/smash-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/223982681139864869-pHfXhNih2JmAUdMOV2njfdVgfbQ6Gq.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cocco-hair-pro-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6549905109692237203-3tHg5ZxPzBUUISuinq0aewKLjUDkmN.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/coccohairpro-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6549905109692237203-nvKNP0gu0qEr6rNVHWz0GGzfz4nMyw.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/xotics-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5015743932879859483-0BmxvZXDKNXL8E3MnDhBV9r1Sb7a6A.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/barber-battle-schedule.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1334924838321453714-zNjV2eQLKEDGntWK1vcDDAVCURY7ou.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/lynnda-judge-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8199511843856362727-mQU1vrUmOvprmBvQlDQwPu26nVvSbj.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/houston-barber-expo-main-logo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-VDJeR2qzCISgbOyMhdZsOCYYGvbQtz.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="hero-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Image from "next/image"
import { Menu } from "lucide-react"
import { useState, useEffect } from "react"
import type { JSX } from "react/jsx-runtime"

import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

type HeroSectionProps = {
  onTabChange?: (tab: string) => void
}

// Helper function to calculate time remaining
const calculateTimeLeft = () => {
  const eventDate = new Date("2025-10-19T09:00:00-05:00") // Sunday, October 19, 2025, 9 AM CDT
  const now = new Date()
  const difference = eventDate.getTime() - now.getTime()

let timeLeft = {
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  }

if (difference > 0) {
    timeLeft = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    }
  }

return timeLeft
}

export default function HeroSection({ onTabChange }: HeroSectionProps) {
  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
  const [mounted, setMounted] = useState(false)
  const [isSheetOpen, setIsSheetOpen] = useState(false)

useEffect(() => {
    setMounted(true)
    const timer = setInterval(() => {
      setTimeLeft(calculateTimeLeft())
    }, 1000)

return () => clearInterval(timer)
  }, [])

const handleNavClick = (tab: string) => {
    if (onTabChange) {
      onTabChange(tab)
    }
    // Close mobile menu after navigation
    setIsSheetOpen(false)
  }

// Don't render the timer until mounted to avoid hydration mismatch
  if (!mounted) {
    return (
      <div className="relative h-[850px] w-full overflow-hidden bg-black">
        <Image
          src="/images/houston-barber-expo-main-logo.jpeg"
          alt="Houston Barber Expo logo with space background"
          fill
          priority
          className="object-cover opacity-40"
        />
        {/* </CHANGE> */}
        <header className="absolute inset-x-0 top-0 z-10 flex h-20 items-center justify-between px-4 md:px-6 lg:px-8">
          <button
            onClick={() => handleNavClick("home")}
            className="flex items-center gap-2"
            aria-label="Houston Barber Expo Home"
          >
            <Image
              src="/images/houston-barber-expo-new-logo.png"
              alt="Houston Barber Expo Logo"
              width={60}
              height={60}
            />
          </button>
          <nav className="hidden items-center gap-6 text-sm font-medium text-white lg:flex">
            <button onClick={() => handleNavClick("home")} className="hover:text-gray-300 transition-colors">
              HOME
            </button>
            <button onClick={() => handleNavClick("competitions")} className="hover:text-gray-300 transition-colors">
              COMPETITIONS
            </button>
            <button onClick={() => handleNavClick("get-tickets")} className="hover:text-gray-300 transition-colors">
              GET TICKETS
            </button>
            <button
              onClick={() => handleNavClick("education-seminars")}
              className="hover:text-gray-300 transition-colors"
            >
              EDUCATION SEMINARS
            </button>
            <button onClick={() => handleNavClick("schedule")} className="hover:text-gray-300 transition-colors">
              SCHEDULE
            </button>
            <button
              onClick={() => handleNavClick("vendor-information")}
              className="hover:text-gray-300 transition-colors"
            >
              VENDOR INFORMATION
            </button>
            <button onClick={() => handleNavClick("hotels")} className="hover:text-gray-300 transition-colors">
              HOTEL ACCOMMODATIONS
            </button>
            <button onClick={() => handleNavClick("location")} className="hover:text-gray-300 transition-colors">
              LOCATION
            </button>
            <button onClick={() => handleNavClick("contact")} className="hover:text-gray-300 transition-colors">
              CONTACT
            </button>
          </nav>
          <div className="flex items-center gap-2">
            <Button
              onClick={() => handleNavClick("get-tickets")}
              className="hidden bg-[#007bff] text-white hover:bg-[#0056b3] lg:inline-flex"
            >
              GET TICKETS
            </Button>
            <Button
              onClick={() => handleNavClick("sponsors")}
              variant="outline"
              className="hidden border-white text-white hover:bg-white hover:text-black lg:inline-flex bg-transparent"
            >
              SPONSOR
            </Button>
            <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
              <SheetTrigger asChild>
                <Button
                  variant="outline"
                  size="icon"
                  className="lg:hidden bg-transparent border-white"
                  aria-label="Toggle navigation menu"
                >
                  <Menu className="h-6 w-6 text-white" />
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="bg-black text-white border-gray-800 overflow-y-auto">
                <div className="grid gap-4 py-6 min-h-full">
                  <button
                    onClick={() => handleNavClick("home")}
                    className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                  >
                    HOME
                  </button>
                  <button
                    onClick={() => handleNavClick("competitions")}
                    className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                  >
                    COMPETITIONS
                  </button>
                  <button
                    onClick={() => handleNavClick("get-tickets")}
                    className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                  >
                    GET TICKETS
                  </button>
                  <button
                    onClick={() => handleNavClick("education-seminars")}
                    className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                  >
                    EDUCATION SEMINARS
                  </button>
                  <button
                    onClick={() => handleNavClick("vendor-information")}
                    className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                  >
                    BECOME A VENDOR
                  </button>
                  <button
                    onClick={() => handleNavClick("become-sponsor")}
                    className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                  >
                    BECOME A SPONSOR
                  </button>
                  <button
                    onClick={() => handleNavClick("schedule")}
                    className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                  >
                    SCHEDULE
                  </button>
                  <button
                    onClick={() => handleNavClick("hotels")}
                    className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                  >
                    HOTEL ACCOMMODATIONS
                  </button>
                  <button
                    onClick={() => handleNavClick("location")}
                    className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                  >
                    LOCATION
                  </button>
                  <button
                    onClick={() => handleNavClick("contact")}
                    className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                  >
                    CONTACT
                  </button>
                  <div className="border-t border-gray-700 pt-4 mt-4">
                    <Button
                      onClick={() => handleNavClick("get-tickets")}
                      className="w-full mb-3 bg-[#007bff] text-white hover:bg-[#0056b3]"
                    >
                      GET TICKETS
                    </Button>
                    <Button
                      onClick={() => handleNavClick("sponsors")}
                      variant="outline"
                      className="w-full border-white text-white hover:bg-white hover:text-black bg-transparent"
                    >
                      SPONSOR
                    </Button>
                  </div>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </header>
        <div className="relative z-0 flex h-full flex-col items-center justify-center text-white">
          <div className="flex flex-col items-center">
            <div className="flex items-center justify-center gap-4 md:gap-8">
              <span className="text-2xl">Loading...</span>
            </div>
            <p className="mt-4 text-center text-xl font-semibold">Sunday, October 19, 2025</p>
            <div className="mt-8 flex flex-col items-center gap-4 md:flex-row">
              <Button
                onClick={() => handleNavClick("get-tickets")}
                className="bg-[#007bff] px-8 py-3 text-lg font-bold text-white hover:bg-[#0056b3]"
              >
                GET YOUR TICKETS
              </Button>
              <Button
                onClick={() => handleNavClick("sponsors")}
                variant="outline"
                className="border-white px-8 py-3 text-lg font-bold text-white hover:bg-white hover:text-black bg-transparent"
              >
                SPONSOR
              </Button>
            </div>
          </div>
        </div>
        <div
          className="absolute inset-x-0 bottom-0 h-24 bg-black"
          style={{
            background: "linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)",
            height: "150px",
          }}
        />
        <div className="absolute bottom-0 left-0 right-0 z-10 flex justify-around bg-black/70 py-4 text-white md:hidden">
          <button
            onClick={() => handleNavClick("competitions")}
            className="flex flex-col items-center gap-1 text-xs font-bold uppercase hover:text-gray-300 transition-colors"
          >
            <Image src="/images/register-compete-new-icon.png" alt="Register to Compete" width={40} height={40} />
            REGISTER TO COMPETE
          </button>
          <button
            onClick={() => handleNavClick("get-tickets")}
            className="flex flex-col items-center gap-1 text-xs font-bold uppercase hover:text-gray-300 transition-colors"
          >
            <Image src="/images/get-tickets-new-icon.png" alt="Get Tickets" width={40} height={40} />
            GET TICKETS
          </button>
          <button
            onClick={() => handleNavClick("vendor-information")}
            className="flex flex-col items-center gap-1 text-xs font-bold uppercase hover:text-gray-300 transition-colors"
          >
            <Image src="/images/vendors-new-icon.png" alt="Vendors" width={40} height={40} />
            VENDORS
          </button>
          <button
            onClick={() => handleNavClick("schedule")}
            className="flex flex-col items-center gap-1 text-xs font-bold uppercase hover:text-gray-300 transition-colors"
          >
            <Image src="/images/schedule-new-icon.png" alt="Schedule" width={40} height={40} />
            SCHEDULE
          </button>
        </div>
      </div>
    )
  }

const timerComponents: JSX.Element[] = []

Object.keys(timeLeft).forEach((interval) => {
    if (timeLeft[interval as keyof typeof timeLeft] !== undefined) {
      timerComponents.push(
        <div key={interval} className="flex flex-col items-center">
          <span className="text-4xl md:text-6xl font-extrabold tabular-nums">
            {String(timeLeft[interval as keyof typeof timeLeft]).padStart(2, "0")}
          </span>
          <span className="text-sm md:text-lg uppercase">{interval}</span>
        </div>,
      )
    }
  })

return (
    <div className="relative h-[850px] w-full overflow-hidden bg-black">
      <Image
        src="/images/houston-barber-expo-main-logo.jpeg"
        alt="Houston Barber Expo logo with space background"
        fill
        priority
        className="object-cover opacity-40"
      />
      {/* </CHANGE> */}
      <header className="absolute inset-x-0 top-0 z-10 flex h-20 items-center justify-between px-4 md:px-6 lg:px-8">
        <button
          onClick={() => handleNavClick("home")}
          className="flex items-center gap-2 hover:opacity-80 transition-opacity"
          aria-label="Houston Barber Expo Home"
        >
          <Image src="/images/houston-barber-expo-new-logo.png" alt="Houston Barber Expo Logo" width={60} height={60} />
        </button>
        <nav className="hidden items-center gap-6 text-sm font-medium text-white lg:flex">
          <button onClick={() => handleNavClick("home")} className="hover:text-gray-300 transition-colors">
            HOME
          </button>
          <button onClick={() => handleNavClick("competitions")} className="hover:text-gray-300 transition-colors">
            COMPETITIONS
          </button>
          <button onClick={() => handleNavClick("get-tickets")} className="hover:text-gray-300 transition-colors">
            GET TICKETS
          </button>
          <button
            onClick={() => handleNavClick("education-seminars")}
            className="hover:text-gray-300 transition-colors"
          >
            EDUCATION SEMINARS
          </button>
          <button onClick={() => handleNavClick("schedule")} className="hover:text-gray-300 transition-colors">
            SCHEDULE
          </button>
          <button
            onClick={() => handleNavClick("vendor-information")}
            className="hover:text-gray-300 transition-colors"
          >
            VENDOR INFORMATION
          </button>
          <button onClick={() => handleNavClick("hotels")} className="hover:text-gray-300 transition-colors">
            HOTEL ACCOMMODATIONS
          </button>
          <button onClick={() => handleNavClick("location")} className="hover:text-gray-300 transition-colors">
            LOCATION
          </button>
          <button onClick={() => handleNavClick("contact")} className="hover:text-gray-300 transition-colors">
            CONTACT
          </button>
        </nav>
        <div className="flex items-center gap-2">
          <Button
            onClick={() => handleNavClick("get-tickets")}
            className="hidden bg-[#007bff] text-white hover:bg-[#0056b3] lg:inline-flex"
          >
            GET TICKETS
          </Button>
          <Button
            onClick={() => handleNavClick("sponsors")}
            variant="outline"
            className="hidden border-white text-white hover:bg-white hover:text-black lg:inline-flex bg-transparent"
          >
            SPONSOR
          </Button>
          <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
            <SheetTrigger asChild>
              <Button
                variant="outline"
                size="icon"
                className="lg:hidden bg-transparent border-white"
                aria-label="Toggle navigation menu"
              >
                <Menu className="h-6 w-6 text-white" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="bg-black text-white border-gray-800 overflow-y-auto">
              <div className="grid gap-4 py-6 min-h-full">
                <button
                  onClick={() => handleNavClick("home")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  HOME
                </button>
                <button
                  onClick={() => handleNavClick("competitions")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  COMPETITIONS
                </button>
                <button
                  onClick={() => handleNavClick("get-tickets")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  GET TICKETS
                </button>
                <button
                  onClick={() => handleNavClick("education-seminars")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  EDUCATION SEMINARS
                </button>
                <button
                  onClick={() => handleNavClick("vendor-information")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  BECOME A VENDOR
                </button>
                <button
                  onClick={() => handleNavClick("become-sponsor")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  BECOME A SPONSOR
                </button>
                <button
                  onClick={() => handleNavClick("schedule")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  SCHEDULE
                </button>
                <button
                  onClick={() => handleNavClick("hotels")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  HOTEL ACCOMMODATIONS
                </button>
                <button
                  onClick={() => handleNavClick("location")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  LOCATION
                </button>
                <button
                  onClick={() => handleNavClick("contact")}
                  className="flex w-full items-center py-3 text-lg font-semibold hover:text-gray-300 text-left transition-colors"
                >
                  CONTACT
                </button>
                <div className="border-t border-gray-700 pt-4 mt-4">
                  <Button
                    onClick={() => handleNavClick("get-tickets")}
                    className="w-full mb-3 bg-[#007bff] text-white hover:bg-[#0056b3]"
                  >
                    GET TICKETS
                  </Button>
                  <Button
                    onClick={() => handleNavClick("sponsors")}
                    variant="outline"
                    className="w-full border-white text-white hover:bg-white hover:text-black bg-transparent"
                  >
                    SPONSOR
                  </Button>
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </header>
      <div className="relative z-0 flex h-full flex-col items-center justify-center text-white">
        <div className="flex flex-col items-center">
          <div className="flex items-center justify-center gap-4 md:gap-8">
            {timerComponents.length ? timerComponents : <span className="text-2xl">Event is Live!</span>}
          </div>
          <p className="mt-4 text-center text-xl font-semibold">Sunday, October 19, 2025</p>
          <div className="mt-8 flex flex-col items-center gap-4 md:flex-row">
            <Button
              onClick={() => handleNavClick("get-tickets")}
              className="bg-[#007bff] px-8 py-3 text-lg font-bold text-white hover:bg-[#0056b3]"
            >
              GET YOUR TICKETS
            </Button>
            <Button
              onClick={() => handleNavClick("sponsors")}
              variant="outline"
              className="border-white px-8 py-3 text-lg font-bold text-white hover:bg-white hover:text-black bg-transparent"
            >
              SPONSOR
            </Button>
          </div>
        </div>
      </div>
      <div
        className="absolute inset-x-0 bottom-0 h-24 bg-black"
        style={{
          background: "linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)",
          height: "150px",
        }}
      />
      <div className="absolute bottom-0 left-0 right-0 z-10 flex justify-around bg-black/70 py-4 text-white md:hidden">
        <button
          onClick={() => handleNavClick("competitions")}
          className="flex flex-col items-center gap-1 text-xs font-bold uppercase hover:text-gray-300 transition-colors"
        >
          <Image src="/images/register-compete-new-icon.png" alt="Register to Compete" width={40} height={40} />
          REGISTER TO COMPETE
        </button>
        <button
          onClick={() => handleNavClick("get-tickets")}
          className="flex flex-col items-center gap-1 text-xs font-bold uppercase hover:text-gray-300 transition-colors"
        >
          <Image src="/images/get-tickets-new-icon.png" alt="Get Tickets" width={40} height={40} />
          GET TICKETS
        </button>
        <button
          onClick={() => handleNavClick("vendor-information")}
          className="flex flex-col items-center gap-1 text-xs font-bold uppercase hover:text-gray-300 transition-colors"
        >
          <Image src="/images/vendors-new-icon.png" alt="Vendors" width={40} height={40} />
          VENDORS
        </button>
        <button
          onClick={() => handleNavClick("schedule")}
          className="flex flex-col items-center gap-1 text-xs font-bold uppercase hover:text-gray-300 transition-colors"
        >
          <Image src="/images/schedule-new-icon.png" alt="Schedule" width={40} height={40} />
          SCHEDULE
        </button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="hotel-accommodations-section.tsx" isEdit="true" isMerged="true"
import { ExternalLink } from "lucide-react"

export default function HotelAccommodationsSection() {
  return (
    <section id="hotel-accommodations" className="bg-black py-16">
      <div className="container mx-auto px-4 text-center">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-6 py-3 text-center text-3xl font-bold uppercase tracking-wide text-white">
            HOTEL ACCOMMODATIONS
          </h2>
        </div>
        <div className="mx-auto max-w-4xl text-lg text-gray-300">
          <p className="mb-8">
            Planning your trip to Houston? We recommend staying at The Whitehall, conveniently located near The Post
            Houston. Book now to receive special expo discount rates!
          </p>

<div className="mx-auto max-w-2xl">
            <div className="rounded-lg border border-gray-300 bg-white p-6 shadow-md">
              <h3 className="mb-2 text-xl font-bold text-gray-800">The Whitehall</h3>
              <p className="mb-4 text-gray-600">
                <span className="font-semibold">Address:</span> 1700 Smith St, Houston, TX 77002
              </p>
              <p className="text-sm text-gray-700">
                Experience comfort and convenience at The Whitehall, perfectly located near The Post Houston. Enjoy
                modern accommodations and easy access to the expo venue with our special discount rates.
              </p>
              <p className="mt-4 text-sm font-semibold text-gray-600">Special Expo Discount Available</p>
              <a
                href="https://reservations.travelclick.com/13424?hotelid=13424"
                target="_blank"
                rel="noopener noreferrer"
                className="mt-6 inline-flex items-center gap-2 bg-[#007bff] hover:bg-[#0056b3] text-white font-bold py-2 px-6 text-sm rounded-lg transition-colors duration-200"
              >
                BOOK NOW WITH DISCOUNT
                <ExternalLink className="h-4 w-4" />
              </a>
            </div>
          </div>

<p className="mt-12 text-white">
            Book your accommodations early to secure the best rates and ensure a comfortable stay during the Houston
            Barber Expo 2025!
          </p>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="get-tickets-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { ExternalLink, Star } from "lucide-react"

export default function GetTicketsSection() {
  const eventbriteUrl =
    "https://www.eventbrite.com/e/the-houston-barber-expo-tickets-1302277259339?aff=oddtdtcreator&fbclid=PAQ0xDSwMNtOBleHRuA2FlbQIxMQABp3P6wyWsgMaNMsPQDvrd7Gv5IDC_O0WiN0KqnS6QQlVoLr-VPC-XwGyrC20J_aem_nJPMsbfgJNXWDbQatFE_gg"

const ticketTypes = [
    { name: "General Admission", price: 35, description: "Access to the expo show floor and all vendor booths" },
    {
      name: "Premium Admission",
      price: 75,
      description: "Enhanced expo experience with additional perks and priority access",
    },
    {
      name: "VIP Pass",
      price: 150,
      isVip: true,
      benefits: [
        "@nocloggairbrush Enhancement Machine",
        "One Plug Multi-Charger",
        "@organskypro Products",
        "@theveien Beard Oil",
        "@bopprbrand Digital Business Card",
        "Surprise Gift 🎁",
        "Front Row Access to the Educational Seminar",
        "1-Hour Early Entry at 1 PM ⏰",
        "@thecutapp Surprise Gift",
      ],
    },
    {
      name: "Competition Registration",
      price: "150 / 100",
      description: "$150 for most categories, $100 for Student Fade & Beard",
      link: "#register-to-compete",
    },
    {
      name: "Vendor Booths",
      price: "350-750",
      description: "Diamond, Platinum, Gold, Silver, and Bronze booth options available",
      link: "#vendor-booths",
    },
  ]

const handleLearnMoreClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
    e.preventDefault()
    const element = document.querySelector(href)
    if (element) {
      element.scrollIntoView({ behavior: "smooth", block: "start" })
    }
  }

return (
    <section id="get-tickets" className="bg-black py-16">
      <div className="container mx-auto px-4 text-center">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-6 py-3 text-center text-3xl font-bold uppercase tracking-wide text-white">
            GET TICKETS
          </h2>
        </div>

<div className="mx-auto max-w-4xl text-lg text-gray-100">
          <p className="mb-6">
            Don't miss out on the biggest barber event in Houston! Secure your tickets now for the Houston Barber Expo
            2025. We offer various ticket options to suit your needs.
          </p>

<h3 className="mb-4 text-2xl font-bold text-white">Ticket Types:</h3>

<div className="grid md:grid-cols-2 gap-6 mb-8">
            {ticketTypes.map((ticket) => (
              <div
                key={ticket.name}
                className={`border rounded-lg p-6 ${
                  ticket.isVip
                    ? "border-yellow-500 bg-gradient-to-br from-yellow-900/20 to-orange-900/20"
                    : "border-gray-700 bg-gray-900/50"
                }`}
              >
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2">
                    {ticket.isVip && <Star className="h-5 w-5 text-yellow-500 fill-yellow-500" />}
                    <span className="font-semibold text-white text-xl">{ticket.name}</span>
                  </div>
                  <span className="text-2xl font-bold text-white">${ticket.price}</span>
                </div>

{!ticket.isVip && ticket.description && (
                  <p className="text-sm text-gray-400 mb-3">{ticket.description}</p>
                )}

{ticket.link && (
                  <a
                    href={ticket.link}
                    onClick={(e) => handleLearnMoreClick(e, ticket.link!)}
                    className="inline-block mt-2 text-[#007bff] hover:text-[#0056b3] font-semibold text-sm transition-colors"
                  >
                    Learn More →
                  </a>
                )}

{ticket.isVip && (
                  <div className="text-left mt-4">
                    <p className="text-yellow-500 font-bold mb-3 text-center">
                      🎟️ VIP TICKETS & SWAG BAGS AVAILABLE NOW! 🎟️
                    </p>
                    <p className="text-sm text-gray-300 mb-3 font-semibold">Your exclusive VIP pass includes:</p>
                    <ul className="space-y-2 text-sm text-gray-300">
                      {ticket.benefits.map((benefit, index) => (
                        <li key={index} className="flex items-start gap-2">
                          <span className="text-yellow-500 font-bold">{index + 1}️⃣</span>
                          <span>{benefit}</span>
                        </li>
                      ))}
                    </ul>
                    <p className="text-red-500 font-bold text-center mt-4 text-sm">
                      🔥 Don't miss out — limited VIP passes available!
                    </p>
                  </div>
                )}
              </div>
            ))}
          </div>

<p className="mb-8">
            Tickets are selling fast! Purchase yours today to guarantee your entry and experience all that the Houston
            Barber Expo has to offer.
          </p>

<a
            href={eventbriteUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 bg-[#007bff] hover:bg-[#0056b3] text-white font-bold py-3 px-8 text-lg rounded-lg transition-colors duration-200"
          >
            BUY TICKETS NOW
            <ExternalLink className="h-4 w-4" />
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpeg:file="public/images/tavares-judge-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5825748946493365784-w3Z4e8fcl3BFBFBWi3PPNb88ucgqoY.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/barber-battle-schedule-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4360650417574573859-edurMI6ZJeFIwpf31g20aHxcUPmrRe.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/lynnda-judge-promo-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3311509371977578148-eRmU1qwRFh27KXenC22yZXJx9YSW3y.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/colorshock-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5877957578676570323-jvgddRtqZTa4JNO98SFMzjkYPQGmBy.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/curtis-smith-special-guest.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8853264744563345146-AjDNjgNaqK0CcdepC6QuYJor1KxPCL.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/exotic-pop-sponsor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8580069378227686551-Hcw89EVIx8TMKxZ3hSLnLQkPcb5u28.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/squire-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1236721699748511181-j2vDvEGyVSc03cU6DJHILYWBMvT57J.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/jay-lopez-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/88504065954125338-P1X6MLUm2DZ9sUHJc4OhEpdB4klf8W.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/josh-judge-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2463049838053813148-4D5GdW0Lyy84BufVy4IPNmVl55JyUv.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/dj-huskey-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4302028623086525137-4DmtOftuVDSfgFPlpwGd6ur40AgUOG.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="schedule-section.tsx" isEdit="true" isMerged="true"
import Image from "next/image"

export default function ScheduleSection() {
  return (
    <section id="schedule" className="bg-black py-16">
      <div className="container mx-auto px-4 text-center">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-6 py-3 text-center text-3xl font-bold uppercase tracking-wide text-white">
            THE HOUSTON BARBER EXPO ITINERARY
          </h2>
        </div>

<div className="mx-auto max-w-4xl text-lg text-gray-100">
          <div className="grid md:grid-cols-2 gap-8">
            {/* Educational Panel */}
            <div className="p-8 bg-gray-900 rounded-lg border border-gray-700">
              <h3 className="text-2xl font-bold text-white mb-6 flex items-center justify-center">
                <span className="mr-2">📚</span>
                Educational Panel
              </h3>
              <p className="text-xl text-orange-400 font-bold mb-6">9 AM - 1 PM</p>

<div className="space-y-4 text-left">
                <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                  <span className="text-white font-semibold">Jack Of All Fades 💈</span>
                  <span className="text-orange-400">9 AM</span>
                </div>
                <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                  <span className="text-white font-semibold">Morono 💈</span>
                  <span className="text-orange-400">10 AM</span>
                </div>
                <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                  <span className="text-white font-semibold">Yousef The Barber 💈</span>
                  <span className="text-orange-400">11 AM</span>
                </div>
                <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                  <span className="text-white font-semibold">Cole Cutz 💈</span>
                  <span className="text-orange-400">12 PM</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-white font-semibold">The Cut App 💈</span>
                  <span className="text-orange-400">1 PM</span>
                </div>
              </div>
            </div>

{/* Barber Battle Times */}
            <div className="p-8 bg-gray-900 rounded-lg border border-gray-700">
              <h3 className="text-2xl font-bold text-white mb-6 flex items-center justify-center">
                <span className="mr-2">⚔️</span>
                Barber Battle Times
              </h3>

<div className="space-y-4 text-left">
                <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                  <div>
                    <span className="text-white font-semibold">Fastest Taper</span>
                    <span className="text-gray-400 text-sm block">15min</span>
                  </div>
                  <span className="text-orange-400">2:15PM - 2:30PM</span>
                </div>
                <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                  <div>
                    <span className="text-white font-semibold">Fade & Beard</span>
                    <span className="text-gray-400 text-sm block">30min</span>
                  </div>
                  <span className="text-orange-400">2:40PM - 3:10PM</span>
                </div>
                <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                  <div>
                    <span className="text-white font-semibold">Braiding Battle</span>
                    <span className="text-gray-400 text-sm block">1:15mins</span>
                  </div>
                  <span className="text-orange-400">3:20PM - 4:35PM</span>
                </div>
                <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                  <div>
                    <span className="text-white font-semibold">STU Fade & Beard</span>
                    <span className="text-gray-400 text-sm block">40min</span>
                  </div>
                  <span className="text-orange-400">3:20PM - 4:00PM</span>
                </div>
                <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                  <div>
                    <span className="text-white font-semibold">STU Tag Team</span>
                    <span className="text-gray-400 text-sm block">50min</span>
                  </div>
                  <span className="text-orange-400">4:10PM - 5:00PM</span>
                </div>
                <div className="flex justify-between items-center border-b border-gray-700 pb-2">
                  <div>
                    <span className="text-white font-semibold">PRO Freestyle Design</span>
                    <span className="text-gray-400 text-sm block">50min</span>
                  </div>
                  <span className="text-orange-400">5:10PM - 6:00PM</span>
                </div>
                <div className="flex justify-between items-center">
                  <div>
                    <span className="text-white font-semibold">PRO Tag Team</span>
                    <span className="text-gray-400 text-sm block">50min</span>
                  </div>
                  <span className="text-orange-400">6:10PM - 7:00PM</span>
                </div>
              </div>
            </div>
          </div>

<div className="mt-12 mb-8">
            <h3 className="text-3xl font-bold text-white mb-8 flex items-center justify-center">
              <span className="mr-2">⚔️</span>
              BARBER BATTLE SCHEDULE
            </h3>
            <div className="flex justify-center">
              <Image
                src="/images/barber-battle-schedule-new.jpeg"
                alt="Houston Barber Expo - Barber Battle Schedule with Cash Prizes"
                width={600}
                height={800}
                className="rounded-lg border border-gray-600"
              />
            </div>
          </div>

{/* Trophy Announcement */}
          <div className="mt-8 p-6 bg-gradient-to-r from-yellow-900 to-orange-900 rounded-lg border border-yellow-700">
            <h3 className="text-2xl font-bold text-white mb-2 flex items-center justify-center">
              <span className="mr-2">🏆</span>
              Trophy Announcement
            </h3>
            <p className="text-yellow-200 text-lg">On the Rooftop</p>
          </div>

{/* Event Date */}
          <div className="mt-8 text-center">
            <p className="font-bold text-3xl text-white mb-2">Sunday, October 19, 2025</p>
            <p className="text-gray-300 text-lg">The Post Houston • 401 Franklin St, Houston, TX 77201</p>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpeg:file="public/images/extravagant-techniques-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3181926184059010630-zLqXqWAPuB9x5RPNNHfWtbb1vaJS6H.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/houston-visionary-webs-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8980418518426599553-BmitrOjiJx8bZLYWZo3YU6qhfzvE60.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/thecut-educators-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3847181860660155519-gjQkryiRysaefb1c4aJctJsvkOcYI5.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/dennis-judge-leader.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7731793108298561430-oajGSBm8taTETEDlIht4iUVdDQEdi3.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="judges-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Image from "next/image"

export default function JudgesSection() {
  return (
    <section className="bg-black py-16">
      <div className="container mx-auto px-4">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-8 py-4 text-center text-4xl font-extrabold uppercase tracking-wide text-white shadow-lg">
            JUDGES
          </h2>
        </div>

<div className="text-center">
          <h3 className="mb-8 text-3xl font-bold uppercase text-white">Meet the Judges — Houston Barber Expo</h3>

<div className="max-w-5xl mx-auto mb-12">
            <p className="text-xl text-gray-100 mb-6">
              At the heart of the Houston Barber Expo lies a commitment to excellence, skill, and community — and our
              judges represent the very best of the industry. Each judge brings years of experience, a passion for the
              craft, and a sharp eye for talent, precision, and innovation. From master barbers to international
              educators and platform artists, these professionals have dedicated their lives to shaping the culture of
              barbering.
            </p>

<p className="text-xl text-gray-100 mb-6">
              With careers that span competitions, celebrity clientele, successful barbershops, and educational
              seminars, our judges not only recognize greatness — they inspire it. Their role at the Expo is to evaluate
              technique, creativity, cleanliness, and overall presentation with fairness and expertise, ensuring that
              every competitor has the opportunity to shine on a professional stage.
            </p>

<p className="text-xl text-gray-100 mb-12">
              Whether you're a competitor, attendee, or fellow barber, you can trust that the Houston Barber Expo judges
              uphold the highest standards — and they're here to celebrate the next generation of industry leaders.
            </p>
          </div>

<h3 className="mb-10 text-3xl font-bold uppercase text-white">OFFICIAL JUDGES</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
            <div className="flex justify-center">
              <Image
                src="/images/og-judge-promo.jpeg"
                alt="OG The Barber - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/laura-judge-promo.jpeg"
                alt="Laura - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/bobby-judge.jpeg"
                alt="Bobby - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/dejon-judge.jpeg"
                alt="Dejon - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/sebastian-judge-promo.jpeg"
                alt="Sebastian - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/rick-blurred-judge.jpeg"
                alt="Rick - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/carter-judge.jpeg"
                alt="Carter - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/kz-judge-promo.jpeg"
                alt="KZ - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/lynnda-judge-promo-new.jpeg"
                alt="Lynnda - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/tavares-judge-promo.jpeg"
                alt="Tavares - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/josh-judge-promo.jpeg"
                alt="Josh - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/dennis-judge-leader.jpeg"
                alt="Dennis - Official Judge & Leader"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/sponsors-section.tsx" isEdit="true" isMerged="true"
import Image from "next/image"

export default function SponsersSection() {
  return (
    <section className="bg-black py-16">
      <div className="container mx-auto px-4">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gray-800 px-8 py-4 text-center text-4xl font-extrabold uppercase tracking-wide text-white shadow-lg">
            SPONSERS
          </h2>
        </div>

<div className="text-center">
          <h3 className="mb-10 text-3xl font-bold uppercase text-white">DIAMOND SPONSERS</h3>
          <div className="flex flex-wrap items-center justify-center gap-16 mb-16">
            <Image
              src="/images/aggieland-barber-logo.jpeg"
              alt="Aggieland Barber and Beauty Supply Logo"
              width={220}
              height={100}
              className="object-contain"
            />
            <Image
              src="/images/pearland-barber-college.jpeg"
              alt="Pearland Barber College - Diamond Sponser"
              width={300}
              height={400}
              className="object-contain rounded-lg"
            />
          </div>

<h3 className="mb-10 text-3xl font-bold uppercase text-white">OFFICIAL SPONSORS</h3>
          <div className="flex justify-center mb-16">
            <Image
              src="/images/exotic-pop-sponsor.jpeg"
              alt="Exotic Pop - Official Sponsor"
              width={300}
              height={400}
              className="object-contain rounded-lg"
            />
          </div>

<h3 className="mb-10 text-3xl font-bold uppercase text-white">OFFICIAL JUDGES</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            <div className="flex justify-center">
              <Image
                src="/images/bobby-judge-new.jpeg"
                alt="Bobby - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/dejon-judge-crispy-kutz.jpeg"
                alt="Dejon - Official Judge"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
          </div>

<h3 className="mb-10 text-3xl font-bold uppercase text-white">SPECIAL GUESTS</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            <div className="flex justify-center">
              <Image
                src="/images/curtis-smith-special-guest.jpeg"
                alt="Curtis Smith - Special Guest"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/dj-huskey-promo.jpeg"
                alt="DJ Huskey - Entertainment"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
          </div>

<h3 className="mb-10 text-3xl font-bold uppercase text-white">EDUCATORS</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
            <div className="flex justify-center">
              <Image
                src="/images/roderick-educator-new.jpeg"
                alt="Roderick - Educator"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/youssef-educator-updated.jpeg"
                alt="Youssef - Educator"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/prann-educator-new.jpeg"
                alt="Prann - Educator"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/morono-educator.jpeg"
                alt="Morono - Educator"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/thecut-educators-promo.jpeg"
                alt="The Cut App Educators"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
          </div>

<p className="text-gray-300 text-xl">More sponsers coming soon!</p>

<div className="mt-16 flex justify-center">
            <div className="text-center">
              <h3 className="mb-6 text-2xl font-bold uppercase text-white">ADDITIONAL SPONSOR</h3>
              <Image
                src="/images/realtor-bonnie-new-sponsor.jpeg"
                alt="Realtor Bonnie - Sponsor"
                width={300}
                height={400}
                className="object-contain rounded-lg mb-4"
              />
              <div className="text-white space-y-2">
                <h4 className="text-xl font-bold">Bonnie Diaz | REALTOR®</h4>
                <p className="text-lg font-semibold text-orange-400">Realm Real Estate Professionals</p>
                <p className="text-gray-300">Top Producing Realtor | Mentor | Mobile Notary</p>
                <p className="text-gray-300">Houston, TX | 281.743.0078</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpeg:file="public/images/clutch-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6204329027435612419-ywM4xoJ0ZPTMjfqLLlTn1qZ5tFgOK4.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/alleviate-pain-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2635299711297281824-iRglb6uKRoDDS4HPdahakc2Vb8TTqK.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/allflats-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6521788170378134957-8rc1vLVyytNNSGQaFzR8ejWzFVWDJt.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/elite-supply-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8996219573416333363-2B37yBUY6c0gvzKFYLywyZITusFlsj.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/emerald-shears-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4173450536284082877-5FyNPqhMEz9Tao2E2ckzFH1IsTevts.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/antibroke-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6333352264122905605-iIqcK4aqClwtwJvVqrUAWvfPwMtVvd.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/hands-in-motion-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3054831959728448199-I4W9jxwUSOLPbEvxLwUoycxkjzuwo2.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/rawnunkut-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1251248573904080305-xF9A5DaIQuGUXuAOpieF6MPIj7Oume.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/jdc-capes-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9101675189272485061-IeJRM0Na2qaZEDMOdpZ2PUhEP7p8Fx.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/alpha-series-vendor-promo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6000776851096343559-Ng4lYDfZQhvyWXxZifxeW78HxQiZA8.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/pearland-barber-college-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2866856754956817858-hl1K8siPYLw3qGQufT21yF22CVyUXM.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/joe-finn-collection-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7400929522149517505-oWEFCgSEs0jpoiU3Y901nSGLzwqSt9.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/blood-veins-bandages-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5165695174847856604-jlCvdydLz5O8lXGcmRJ0anV3wFtGVS.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/jdc-capes-vendor-new.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9101675189272485061-6q3rgxQv33dcn7gkHoHVHxcd5znXRc.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/texas-barber-battle-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8283339498499600022-x5NGG6RqvQ1NaBajmNF1tyr0Be3PO4.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/blurred-by-the-bay-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3202494575939573861-q8AhA98dNFwu2PK5fFulFvcpQUiQ81.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/regale-barber-supply-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1768354603328084962-2kyipdXYwFqV5vI65j6lx6C7ykC558.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/thomas-r-salons-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1517127019356887611-nuopZdrEUxLOJsKS77gjVLcNLIfSeL.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/heal-hair-care-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6958136404424819498-cATAz2CWaYo42UBTltZOJSIru9TYO1.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/organski-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/E7943851-C121-4175-B318-C086F39A4D43-KcFllWriat0IWLzywPggJ70EQmNJzn.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/thecut-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/5DE23806-F6E3-4A0B-9914-CAF9DD386804-4KutBinKLQuyhKtZx8uUFMHi1E6OVP.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/wavz-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/C8661490-4A08-4066-BCB4-C6FB7C43EEB0-TIgz1eir4fBTDh4aswzAYC4krRai5b.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/prestige-barber-supply-vendor.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8A857DA8-01B4-4EEB-9A16-0FB62E238C34-94uSFYzFGPR5A6djDz8Sx05OZVwMgq.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="vendor-booths-section.tsx" isEdit="true" isQuickEdit="true"
import Image from "next/image"

export default function VendorBoothsSection() {
  return (
    <section id="vendor-booths" className="bg-gradient-to-b from-gray-900 via-black to-gray-900 py-16">
      <div className="container mx-auto px-4">
        <div className="mb-12 flex justify-center">
          <h2 className="bg-gradient-to-r from-orange-500 to-red-600 px-8 py-4 text-center text-4xl font-bold uppercase tracking-wide text-white shadow-lg">
            VENDOR BOOTH INFORMATION
          </h2>
        </div>

<div className="mb-16">
          <h3 className="text-3xl font-bold uppercase text-white mb-10 text-center">OFFICIAL VENDORS</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
            <div className="flex justify-center">
              <Image
                src="/images/organski-vendor.jpeg"
                alt="Organski Professional - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/thecut-vendor.jpeg"
                alt="The Cut App - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/wavz-vendor.jpeg"
                alt="WAVZ - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/prestige-barber-supply-vendor.jpeg"
                alt="Prestige Barber Supply - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/pearland-barber-college-vendor.jpeg"
                alt="Pearland Barber College - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/joe-finn-collection-vendor.jpeg"
                alt="Joe Finn Collection - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/blood-veins-bandages-vendor.jpeg"
                alt="Blood Veins & Bandages - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/jdc-capes-vendor-new.jpeg"
                alt="JDC Capes - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/texas-barber-battle-vendor.jpeg"
                alt="Texas Barber Battle & Expo - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/blurred-by-the-bay-vendor.jpeg"
                alt="Blurred by the Bay - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/regale-barber-supply-vendor.jpeg"
                alt="Regale Barber Supply - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/thomas-r-salons-vendor.jpeg"
                alt="Thomas R Salons - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/heal-hair-care-vendor.jpeg"
                alt="H.E.A.L Hair Care - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/clutch-vendor-promo.jpeg"
                alt="Clutch Barber Supply - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/alleviate-pain-vendor-promo.jpeg"
                alt="Alleviate Pain Solutions - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/allflats-vendor-promo.jpeg"
                alt="All Flats LV - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/elite-supply-vendor-promo.jpeg"
                alt="Elite Barber Supply - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/emerald-shears-vendor-promo.jpeg"
                alt="Emerald Shears - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/antibroke-vendor-promo.jpeg"
                alt="Anti Broke Barbers Club - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/hands-in-motion-vendor-promo.jpeg"
                alt="Hands In Motion - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/rawnunkut-vendor-promo.jpeg"
                alt="Raw N Unkut - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/xotics-vendor-promo.jpeg"
                alt="XOTICS by Curtis Smith - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/coccohairpro-vendor-promo.jpeg"
                alt="COCCOHAIRPRO - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/colorshock-vendor-promo.jpeg"
                alt="ColorShock - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/squire-vendor-promo.jpeg"
                alt="Squire - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/jay-lopez-vendor-promo.jpeg"
                alt="Jay Lopez - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/extravagant-techniques-vendor.jpeg"
                alt="Extravagant Techniques - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/houston-visionary-webs-vendor.jpeg"
                alt="Houston Visionary Webs - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
            <div className="flex justify-center">
              <Image
                src="/images/aggieland-vendor-new.jpeg"
                alt="Aggieland Barber Supply - Official Vendor"
                width={300}
                height={400}
                className="object-contain rounded-lg"
              />
            </div>
          </div>
        </div>

{/* Quick Comparison Table */}
        <div className="mt-16">
          <h3 className="text-3xl font-bold uppercase text-white mb-8 text-center">QUICK COMPARISON</h3>
          <div className="bg-white rounded-xl p-8 shadow-xl overflow-x-auto">
            <table className="w-full text-left">
              <thead>
                <tr className="border-b-2 border-gray-200">
                  <th className="pb-4 text-gray-800 font-bold">Package</th>
                  <th className="pb-4 text-gray-800 font-bold text-center">Price</th>
                  <th className="pb-4 text-gray-800 font-bold text-center">Size</th>
                  <th className="pb-4 text-gray-800 font-bold text-center">Entry Passes</th>
                  <th className="pb-4 text-gray-800 font-bold text-center">Location Priority</th>
                </tr>
              </thead>
              <tbody className="text-gray-700">
                <tr className="border-b border-gray-100">
                  <td className="py-4 font-semibold text-blue-600">Diamond</td>
                  <td className="py-4 text-center font-bold">$750</td>
                  <td className="py-4 text-center">12×20 ft</td>
                  <td className="py-4 text-center">4</td>
                  <td className="py-4 text-center">1st - Prime</td>
                </tr>
                <tr className="border-b border-gray-100">
                  <td className="py-4 font-semibold text-gray-600">Platinum</td>
                  <td className="py-4 text-center font-bold">$650</td>
                  <td className="py-4 text-center">10×10 ft</td>
                  <td className="py-4 text-center">2</td>
                  <td className="py-4 text-center">2nd - High Traffic</td>
                </tr>
                <tr className="border-b border-gray-100">
                  <td className="py-4 font-semibold text-yellow-600">Gold</td>
                  <td className="py-4 text-center font-bold">$550</td>
                  <td className="py-4 text-center">10×10 ft</td>
                  <td className="py-4 text-center">4</td>
                  <td className="py-4 text-center">3rd</td>
                </tr>
                <tr className="border-b border-gray-100">
                  <td className="py-4 font-semibold text-gray-500">Silver</td>
                  <td className="py-4 text-center font-bold">$450</td>
                  <td className="py-4 text-center">10×10 ft</td>
                  <td className="py-4 text-center">2</td>
                  <td className="py-4 text-center">4th</td>
                </tr>
                <tr>
                  <td className="py-4 font-semibold text-orange-600">Bronze</td>
                  <td className="py-4 text-center font-bold">$350</td>
                  <td className="py-4 text-center">10×10 ft</td>
                  <td className="py-4 text-center">2</td>
                  <td className="py-4 text-center">General Floor</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  )
}</article></body></html>