Skip to content

Instantly share code, notes, and snippets.

@DaBigHomie

DaBigHomie/bright-orange-atltequilaweek-com.markdown

Created July 6, 2025 14:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DaBigHomie/719e385bb668d26a40bdb8a2dce01458 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DaBigHomie/719e385bb668d26a40bdb8a2dce01458 to your computer and use it in GitHub Desktop.
Download ZIP
bright orange atltequilaweek.com
Raw
index.html
<div id="root"></div>
<!-- React CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- GSAP CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<!-- Three.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- Google Fonts (Inter and Playfair Display) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap" rel="stylesheet">
<!-- Ensure your image path is correct, or use a placeholder if the original is not accessible -->
<!-- The original image "tequila-fest-update-0626.webp" would need to be hosted publicly or uploaded to CodePen Assets. -->
<!-- For demonstration, using a placeholder for the hero image if the path isn't direct in CodePen -->
<!-- If you've uploaded it to CodePen Assets, use that direct URL. -->
Raw
script.js
// Define color palette for consistent styling (duplicated here for CodePen's JS scope)
const colors = {
mainOrange: "#FE8F00", // Brightest orange from the flyers
accentOrange: "#FD6A00", // Reddish orange from the flyers
secondaryBgOrange: "#FF9800", // A slightly softer mid-orange
textLight: "#FFFFFF",
textDark: "#2D2D2D",
buttonGradientStart: "#FFFFFF",
buttonGradientEnd: "#FDD835" // Brighter yellow
};
// --- Component: ThreeDBackground (for the Hero Section) ---
const ThreeDBackground = () => {
const mountRef = React.useRef(null); // Use React.useRef in CodePen's JS pane
React.useEffect(() => {
// Use React.useEffect
const currentMount = mountRef.current;
if (!currentMount) return;
// Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // alpha: true for transparent background
renderer.setSize(window.innerWidth, window.innerHeight);
currentMount.appendChild(renderer.domElement);
// Objects: Simple spheres and a light
const geometry = new THREE.IcosahedronGeometry(1, 1); // Dodecahedron or Icosahedron for abstract shapes
const material1 = new THREE.MeshPhongMaterial({
color: 0xffffff,
flatShading: true,
transparent: true,
opacity: 0.2
});
const material2 = new THREE.MeshPhongMaterial({
color: 0xfd6a00,
flatShading: true,
transparent: true,
opacity: 0.15
});
const spheres = [];
for (let i = 0; i < 50; i++) {
const sphere = new THREE.Mesh(
geometry,
i % 2 === 0 ? material1 : material2
);
sphere.position.set(
(Math.random() - 0.5) * 40,
(Math.random() - 0.5) * 40,
(Math.random() - 0.5) * 40
);
sphere.scale.setScalar(Math.random() * 0.5 + 0.1); // Random size
scene.add(sphere);
spheres.push(sphere);
}
// Lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1);
camera.add(pointLight); // Light attached to camera
scene.add(camera);
camera.position.z = 5;
// Animation loop
const animate = () => {
requestAnimationFrame(animate);
// Rotate spheres
spheres.forEach((sphere) => {
sphere.rotation.x += 0.001 * (Math.random() > 0.5 ? 1 : -1);
sphere.rotation.y += 0.001 * (Math.random() > 0.5 ? 1 : -1);
});
renderer.render(scene, camera);
};
animate();
// Handle window resize
const onWindowResize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
};
window.addEventListener("resize", onWindowResize);
// Cleanup
return () => {
window.removeEventListener("resize", onWindowResize);
if (currentMount && renderer.domElement) {
currentMount.removeChild(renderer.domElement);
}
renderer.dispose();
geometry.dispose();
material1.dispose();
material2.dispose();
scene.children.forEach((child) => {
if (child.geometry) child.geometry.dispose();
if (child.material) child.material.dispose();
});
scene.clear();
};
}, []);
return React.createElement("div", {
ref: mountRef,
className: "absolute inset-0 z-0 opacity-70"
});
};
// --- Component: TicketOption ---
const TicketOption = ({ data }) => {
const cardRef = React.useRef(null); // Use React.useRef
React.useEffect(() => {
// Use React.useEffect
// Ensure GSAP and ScrollTrigger are available before using them
if (typeof gsap !== "undefined" && typeof ScrollTrigger !== "undefined") {
// GSAP animation for ticket cards on scroll
gsap.fromTo(
cardRef.current,
{ opacity: 0, y: 50, scale: 0.95 },
{
opacity: 1,
y: 0,
scale: 1,
duration: 0.8,
ease: "power3.out",
scrollTrigger: {
trigger: cardRef.current,
start: "top 85%", // When top of card is 85% from top of viewport
toggleActions: "play none none none"
// markers: true, // For debugging scroll trigger
}
}
);
}
}, []);
return React.createElement(
"div",
{
ref: cardRef,
className: `relative flex flex-col justify-between section-background-secondary rounded-2xl shadow-2xl p-8 sm:p-10 transform transition-all duration-500 ease-in-out hover:scale-105 border-t-8 border-white ${
data.isFeatured ? "border-b-8 border-white" : ""
}`
},
data.isFeatured &&
React.createElement(
"span",
{
className:
"absolute -top-4 left-1/2 -translate-x-1/2 bg-white text-dark-orange font-bold px-4 py-2 rounded-full shadow-lg text-sm uppercase tracking-wider whitespace-nowrap"
},
"Most Popular"
),
// Aligned elements by giving a fixed min-height to the description
React.createElement(
"div",
{ className: "flex flex-col items-center text-center mb-6" }, // Removed space-y-4 here to control spacing more precisely below
React.createElement(
"h3",
{ className: "text-3xl sm:text-4xl font-extrabold text-white mb-4" },
data.heading
), // Added mb-4
React.createElement(
"p",
{
className:
"text-xl sm:text-2xl text-gray-900 mb-6 min-h-[72px] flex items-center justify-center"
},
data.description
), // Added mb-6 and min-h for consistent height, flex for vertical centering if short
React.createElement(
"p",
{
className: "text-6xl sm:text-7xl font-black text-white",
style: { textShadow: "2px 2px 5px rgba(0,0,0,0.5)" }
},
data.price
)
),
React.createElement(
"button",
{
className:
"w-full ticket-button px-8 py-4 text-xl font-extrabold rounded-full hover:scale-105 transition-transform duration-300"
},
data.buttonText
)
);
};
// --- Main App Component ---
const App = () => {
// Removed React.FC type as it's not needed for CodePen
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false); // Use React.useState
// Refs for GSAP scroll triggers
const heroRef = React.useRef(null);
const aboutRef = React.useRef(null);
const eventsRef = React.useRef(null);
const ticketsRef = React.useRef(null);
const sponsorsRef = React.useRef(null);
const contactRef = React.useRef(null);
React.useEffect(() => {
// Use React.useEffect
// Check if GSAP and ScrollTrigger are loaded before using them
if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
console.warn(
"GSAP or ScrollTrigger not loaded. Animations will not play."
);
return;
}
const sections = [aboutRef, eventsRef, ticketsRef, sponsorsRef, contactRef];
sections.forEach((ref) => {
if (ref.current) {
gsap.fromTo(
ref.current.querySelector("h2"),
{ opacity: 0, y: 50 },
{
opacity: 1,
y: 0,
duration: 1,
ease: "power3.out",
scrollTrigger: {
trigger: ref.current,
start: "top 80%",
toggleActions: "play none none none"
}
}
);
gsap.fromTo(
ref.current.querySelectorAll("p, .grid, form"),
{ opacity: 0, y: 30 },
{
opacity: 1,
y: 0,
duration: 0.8,
ease: "power2.out",
stagger: 0.1,
scrollTrigger: {
trigger: ref.current,
start: "top 75%",
toggleActions: "play none none none"
}
}
);
}
});
// Hero section text animation
if (heroRef.current) {
gsap.fromTo(
heroRef.current.querySelector("img"),
{ scale: 0.8, opacity: 0 },
{ scale: 1, opacity: 1, duration: 1.5, ease: "elastic.out(1, 0.5)" }
);
gsap.fromTo(
heroRef.current.querySelector("h2"),
{ opacity: 0, y: 20 },
{ opacity: 1, y: 0, duration: 1, delay: 0.5, ease: "power2.out" }
);
gsap.fromTo(
heroRef.current.querySelector("p.mb-12"),
{ opacity: 0, y: 20 },
{ opacity: 1, y: 0, duration: 1, delay: 0.7, ease: "power2.out" }
);
gsap.fromTo(
heroRef.current.querySelector(".ticket-button"),
{ opacity: 0, scale: 0.8 },
{ opacity: 1, scale: 1, duration: 1, delay: 1, ease: "back.out(1.7)" }
);
}
}, []);
const toggleMobileMenu = React.useCallback(() => {
// Use React.useCallback
setIsMobileMenuOpen((prev) => !prev);
}, []);
// Simulating Prismic data for tickets
const ticketOptions = [
{
heading: "Early Bird Pass",
description:
"Limited availability! Get full access at an unbeatable price.",
price: "$50",
buttonText: "Snag Early Bird!"
},
{
heading: "General Admission",
description: "Access to all public tastings & main events.",
price: "$75",
buttonText: "Buy GA Pass!",
isFeatured: true // Mark this as featured
},
{
heading: "VIP Experience",
description:
"Includes masterclass access, exclusive tastings & VIP lounge.",
price: "$150",
buttonText: "Unlock VIP Access!"
}
];
return React.createElement(
"div",
{
className: "min-h-screen",
style: { backgroundColor: colors.mainOrange, color: colors.textDark }
},
// Navigation Bar
React.createElement(
"nav",
{ className: "fixed w-full z-50 bg-black bg-opacity-85 shadow-2xl py-4" },
React.createElement(
"div",
{
className: "container mx-auto flex justify-between items-center px-4"
},
React.createElement(
"a",
{
href: "#",
className: "text-3xl font-extrabold text-white drop-shadow-md"
},
"ATL Tequila Week"
),
React.createElement(
"div",
{ className: "hidden md:flex space-x-8" },
React.createElement(
"a",
{
href: "#about",
className:
"text-white hover:text-gray-300 text-lg font-semibold transition duration-300 transform hover:scale-110"
},
"About"
),
React.createElement(
"a",
{
href: "#events",
className:
"text-white hover:text-gray-300 text-lg font-semibold transition duration-300 transform hover:scale-110"
},
"Events"
),
React.createElement(
"a",
{
href: "#tickets",
className:
"text-white hover:text-gray-300 text-lg font-semibold transition duration-300 transform hover:scale-110"
},
"Tickets"
),
React.createElement(
"a",
{
href: "#sponsors",
className:
"text-white hover:text-gray-300 text-lg font-semibold transition duration-300 transform hover:scale-110"
},
"Sponsors"
),
React.createElement(
"a",
{
href: "#contact",
className:
"text-white hover:text-gray-300 text-lg font-semibold transition duration-300 transform hover:scale-110"
},
"Contact"
)
),
// Mobile Menu Button
React.createElement(
"button",
{
id: "mobile-menu-button",
className: "md:hidden text-white focus:outline-none",
onClick: toggleMobileMenu
},
React.createElement(
"svg",
{
className: "w-8 h-8",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
},
React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
d: "M4 6h16M4 12h16m-7 6h7"
})
)
)
),
// Mobile Menu
React.createElement(
"div",
{
id: "mobile-menu",
className: `md:hidden mt-2 pb-2 bg-black bg-opacity-90 transition-all duration-300 ease-in-out ${
isMobileMenuOpen ? "block" : "hidden"
}`
},
React.createElement(
"a",
{
href: "#about",
className:
"block px-6 py-3 text-white hover:bg-gray-800 text-lg font-medium",
onClick: toggleMobileMenu
},
"About"
),
React.createElement(
"a",
{
href: "#events",
className:
"block px-6 py-3 text-white hover:bg-gray-800 text-lg font-medium",
onClick: toggleMobileMenu
},
"Events"
),
React.createElement(
"a",
{
href: "#tickets",
className:
"block px-6 py-3 text-white hover:bg-gray-800 text-lg font-medium",
onClick: toggleMobileMenu
},
"Tickets"
),
React.createElement(
"a",
{
href: "#sponsors",
className:
"block px-6 py-3 text-white hover:bg-gray-800 text-lg font-medium",
onClick: toggleMobileMenu
},
"Sponsors"
),
React.createElement(
"a",
{
href: "#contact",
className:
"block px-6 py-3 text-white hover:bg-gray-800 text-lg font-medium",
onClick: toggleMobileMenu
},
"Contact"
)
)
),
// Hero Section
React.createElement(
"header",
{
ref: heroRef,
className:
"hero-section relative flex flex-col justify-center items-center h-screen pt-16"
},
React.createElement(ThreeDBackground, null), // Abstract 3D background
React.createElement("div", { className: "hero-overlay" }),
React.createElement(
"div",
{
className:
"content-container relative z-10 p-8 flex flex-col items-center"
},
React.createElement("img", {
src: "tequila-fest-update-0626.webp",
alt: "ATL Tequila Week Logo",
className:
"mx-auto max-w-full lg:max-w-4xl h-auto rounded-lg shadow-2xl mb-10 transform scale-100 transition duration-700 ease-in-out"
}),
React.createElement(
"h2",
{
className:
"text-6xl md:text-8xl font-black mb-6 drop-shadow-2xl leading-tight text-white"
},
"Experience the Spirit"
),
React.createElement(
"p",
{
className:
"text-xl md:text-3xl mb-12 text-white max-w-4xl mx-auto drop-shadow-lg font-light"
},
"Join us for a week-long celebration of tequila, culture, and unforgettable moments in Atlanta!"
),
React.createElement(
"a",
{
href: "#tickets",
className:
"ticket-button px-12 py-5 text-xl font-extrabold rounded-full inline-block uppercase tracking-widest"
},
"Secure Your Spot Now!"
)
)
),
// About Section
React.createElement(
"section",
{
id: "about",
ref: aboutRef,
className: "py-20 md:py-32 section-background-primary text-center"
},
React.createElement(
"div",
{ className: "container mx-auto px-4 max-w-5xl" },
React.createElement(
"h2",
{ className: "text-5xl md:text-6xl font-extrabold mb-10 text-white" },
"About ATL Tequila Week"
),
React.createElement(
"p",
{ className: "text-xl md:text-2xl leading-relaxed mb-8 text-white" },
"ATL Tequila Week is Atlanta's premier event dedicated to the rich heritage and diverse world of tequila. From ",
React.createElement(
"strong",
{ className: "text-white" },
"July 22-27"
),
", immerse yourself in a series of exclusive tastings, masterclasses, culinary experiences, and vibrant parties featuring the finest tequilas and mezcals."
),
React.createElement(
"p",
{ className: "text-xl md:text-2xl leading-relaxed text-white" },
"Whether you're a connoisseur or new to the agave spirit, there's something for everyone to savor. Prepare for an unforgettable journey through the flavors of Mexico, right here in the heart of Atlanta!"
)
)
),
// Events Section
React.createElement(
"section",
{
id: "events",
ref: eventsRef,
className: "py-20 md:py-32 section-background-secondary"
},
React.createElement(
"div",
{ className: "container mx-auto px-4" },
React.createElement(
"h2",
{
className:
"text-5xl md:text-6xl font-extrabold text-center mb-16 text-white"
},
"Featured Events"
),
React.createElement(
"div",
{
className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"
},
// Event Card 1: Grand Tasting
React.createElement(
"div",
{
className:
"event-card section-background-primary rounded-2xl shadow-xl overflow-hidden transform"
},
React.createElement("img", {
src:
"https://placehold.co/600x400/5a4a3c/f1c40f?text=Grand+Tasting",
alt: "Grand Tasting Event",
className: "w-full h-56 object-cover"
}),
React.createElement(
"div",
{ className: "p-8" },
React.createElement(
"h3",
{ className: "text-3xl font-extrabold mb-3 text-white" },
"Grand Tequila Tasting"
),
React.createElement(
"p",
{ className: "text-gray-900 mb-5 text-lg" },
React.createElement(
"strong",
{ className: "text-white" },
"Monday, July 22"
),
" | 7:00 PM - 10:00 PM"
),
React.createElement(
"p",
{ className: "text-gray-900 mb-6 text-lg" },
"Sample dozens of premium tequilas and mezcals from renowned distilleries."
),
React.createElement(
"button",
{
className:
"w-full bg-white hover:bg-gray-200 text-gray-900 font-bold py-4 px-6 rounded-lg text-lg transition duration-300 transform hover:scale-105"
},
"View Details"
)
)
),
// Event Card 2: Mixology Masterclass
React.createElement(
"div",
{
className:
"event-card section-background-primary rounded-2xl shadow-xl overflow-hidden transform"
},
React.createElement("img", {
src:
"https://placehold.co/600x400/5a4a3c/f1c40f?text=Mixology+Class",
alt: "Mixology Masterclass",
className: "w-full h-56 object-cover"
}),
React.createElement(
"div",
{ className: "p-8" },
React.createElement(
"h3",
{ className: "text-3xl font-extrabold mb-3 text-white" },
"Mixology Masterclass"
),
React.createElement(
"p",
{ className: "text-gray-900 mb-5 text-lg" },
React.createElement(
"strong",
{ className: "text-white" },
"Wednesday, July 24"
),
" | 6:00 PM - 8:00 PM"
),
React.createElement(
"p",
{ className: "text-gray-900 mb-6 text-lg" },
"Discover the secrets to crafting perfect tequila cocktails with expert mixologists."
),
React.createElement(
"button",
{
className:
"w-full bg-white hover:bg-gray-200 text-gray-900 font-bold py-4 px-6 rounded-lg text-lg transition duration-300 transform hover:scale-105"
},
"View Details"
)
)
),
// Event Card 3: Flavors of Mexico Dinner
React.createElement(
"div",
{
className:
"event-card section-background-primary rounded-2xl shadow-xl overflow-hidden transform"
},
React.createElement("img", {
src:
"https://placehold.co/600x400/5a4a3c/f1c40f?text=Mexican+Dinner",
alt: "Flavors of Mexico Dinner",
className: "w-full h-56 object-cover"
}),
React.createElement(
"div",
{ className: "p-8" },
React.createElement(
"h3",
{ className: "text-3xl font-extrabold mb-3 text-white" },
"Flavors of Mexico Dinner"
),
React.createElement(
"p",
{ className: "text-gray-900 mb-5 text-lg" },
React.createElement(
"strong",
{ className: "text-white" },
"Friday, July 26"
),
" | 7:30 PM - 10:30 PM"
),
React.createElement(
"p",
{ className: "text-gray-900 mb-6 text-lg" },
"A curated culinary journey with tequila pairings by a renowned chef."
),
React.createElement(
"button",
{
className:
"w-full bg-white hover:bg-gray-200 text-gray-900 font-bold py-4 px-6 rounded-lg text-lg transition duration-300 transform hover:scale-105"
},
"View Details"
)
)
),
// Whisky Mistress / FlipFlopSundays Highlight
React.createElement(
"div",
{
className:
"event-card section-background-secondary rounded-2xl shadow-xl overflow-hidden transform lg:col-span-3 p-8 border-4 border-white"
},
React.createElement(
"div",
{
className:
"flex flex-col md:flex-row items-center justify-center"
},
React.createElement("img", {
src:
"https://placehold.co/400x250/2c241d/f1c40f?text=Whisky+Mistress+Venue",
alt: "Whisky Mistress Venue",
className:
"w-full md:w-1/3 h-auto object-cover rounded-xl mb-6 md:mb-0 md:mr-8 shadow-lg"
}),
React.createElement(
"div",
null,
React.createElement(
"h3",
{ className: "text-4xl font-extrabold text-gray-900 mb-4" },
"Exclusive After-Parties at Whisky Mistress!"
),
React.createElement(
"p",
{ className: "text-gray-900 mb-6" },
"Don't miss the official ATL Tequila Week after-parties hosted by ",
React.createElement(
"strong",
{ className: "text-gray-900 font-bold" },
"FlipFlopSundays"
),
" at the iconic ",
React.createElement(
"strong",
{ className: "text-gray-900 font-bold" },
"Whisky Mistress"
),
" in Buckhead ATL! Expect vibrant music, unique tequila concoctions, and an unparalleled atmosphere."
),
React.createElement(
"p",
{ className: "text-gray-900 font-extrabold text-xl" },
"Join us for special events on selected nights during Tequila Week!"
),
React.createElement(
"button",
{
className:
"mt-6 ticket-button px-10 py-4 text-xl rounded-full inline-block uppercase tracking-wide bg-white hover:bg-gray-200 text-gray-900"
},
"Check Whisky Mistress Schedule"
)
)
)
)
),
React.createElement(
"div",
{ className: "text-center mt-16" },
React.createElement(
"a",
{
href: "#tickets",
className:
"ticket-button px-12 py-5 text-xl font-extrabold rounded-full inline-block uppercase tracking-widest transform hover:scale-105 transition duration-300"
},
"View Full Schedule & Get Your Tickets Now!"
)
)
)
),
// Tickets Section
React.createElement(
"section",
{
id: "tickets",
ref: ticketsRef,
className: "py-20 md:py-32 section-background-primary text-center"
},
React.createElement(
"div",
{ className: "container mx-auto px-4 max-w-5xl" },
React.createElement(
"h2",
{ className: "text-5xl md:text-6xl font-extrabold mb-10 text-white" },
"Secure Your Exclusive Spot"
),
React.createElement(
"p",
{ className: "text-xl md:text-2xl leading-relaxed mb-12 text-white" },
"Choose the perfect pass for your ultimate ATL Tequila Week experience. Early bird tickets are highly limited – grab yours before they're gone!"
),
React.createElement(
"div",
{ className: "grid grid-cols-1 md:grid-cols-3 gap-10 items-stretch" },
ticketOptions.map((option, index) =>
React.createElement(TicketOption, { key: index, data: option })
)
)
)
),
// Sponsors Section
React.createElement(
"section",
{
id: "sponsors",
ref: sponsorsRef,
className: "py-20 md:py-32 section-background-secondary text-center"
},
React.createElement(
"div",
{ className: "container mx-auto px-4 max-w-5xl" },
React.createElement(
"h2",
{ className: "text-5xl md:text-6xl font-extrabold mb-16 text-white" },
"Partners and Sponsors"
),
React.createElement(
"div",
{
className:
"flex flex-wrap justify-center items-center gap-4 lg:gap-8"
},
React.createElement("img", {
src: "https://placehold.co/180x90/FFFFFF/2D2D2D?text=Brand+A",
alt: "Sponsor Brand A",
className:
"h-24 w-auto rounded-lg object-contain opacity-90 hover:opacity-100 transition duration-300 transform hover:scale-110 shadow-lg filter grayscale hover:grayscale-0"
}),
React.createElement("img", {
src: "https://placehold.co/180x90/FFFFFF/2D2D2D?text=Brand+B",
alt: "Sponsor Brand B",
className:
"h-24 w-auto rounded-lg object-contain opacity-90 hover:opacity-100 transition duration-300 transform hover:scale-110 shadow-lg filter grayscale hover:grayscale-0"
}),
React.createElement("img", {
src: "https://placehold.co/180x90/FFFFFF/2D2D2D?text=Brand+C",
alt: "Sponsor Brand C",
className:
"h-24 w-auto rounded-lg object-contain opacity-90 hover:opacity-100 transition duration-300 transform hover:scale-110 shadow-lg filter grayscale hover:grayscale-0"
}),
React.createElement("img", {
src: "https://placehold.co/180x90/FFFFFF/2D2D2D?text=Brand+D",
alt: "Sponsor Brand D",
className:
"h-24 w-auto rounded-lg object-contain opacity-90 hover:opacity-100 transition duration-300 transform hover:scale-110 shadow-lg filter grayscale hover:grayscale-0"
})
)
)
),
// Contact Section
React.createElement(
"section",
{
id: "contact",
ref: contactRef,
className: "py-20 md:py-32 section-background-primary"
},
React.createElement(
"div",
{ className: "container mx-auto px-4 max-w-4xl text-center" },
React.createElement(
"h2",
{ className: "text-5xl md:text-6xl font-extrabold mb-10 text-white" },
"Connect With Us"
),
React.createElement(
"p",
{ className: "text-xl md:text-2xl leading-relaxed mb-12 text-white" },
"Have questions or need more information? Our team is ready to assist you!"
),
React.createElement(
"div",
{
className:
"section-background-secondary p-10 rounded-2xl shadow-2xl border border-white"
},
React.createElement(
"form",
{ action: "#", method: "POST", className: "space-y-8" },
React.createElement(
"div",
null,
React.createElement(
"label",
{
htmlFor: "name",
className:
"block text-left text-gray-900 text-lg font-bold mb-3"
},
"Your Name"
),
React.createElement("input", {
type: "text",
id: "name",
name: "name",
className:
"w-full px-5 py-4 rounded-lg placeholder-gray-500 text-lg",
placeholder: "Full Name",
required: true
})
),
React.createElement(
"div",
null,
React.createElement(
"label",
{
htmlFor: "email",
className:
"block text-left text-gray-900 text-lg font-bold mb-3"
},
"Your Email"
),
React.createElement("input", {
type: "email",
id: "email",
name: "email",
className:
"w-full px-5 py-4 rounded-lg placeholder-gray-500 text-lg",
placeholder: "your.email@example.com",
required: true
})
),
React.createElement(
"div",
null,
React.createElement(
"label",
{
htmlFor: "message",
className:
"block text-left text-gray-900 text-lg font-bold mb-3"
},
"Your Message"
),
React.createElement("textarea", {
id: "message",
name: "message",
rows: 7,
className:
"w-full px-5 py-4 rounded-lg placeholder-gray-500 text-lg",
placeholder: "How can we help you?",
required: true
})
),
React.createElement(
"button",
{
type: "submit",
className:
"ticket-button px-10 py-4 text-xl font-extrabold rounded-full w-full"
},
"Send Your Inquiry"
)
)
)
)
),
// Footer
React.createElement(
"footer",
{ className: "footer-gradient py-12 text-center text-white" },
React.createElement(
"div",
{ className: "container mx-auto px-4" },
React.createElement(
"p",
{ className: "mb-4 text-lg" },
"© 2025 ATL Tequila Week. All rights reserved."
),
React.createElement(
"p",
{ className: "mb-6 text-xl text-white font-semibold" },
"Brought to you by Unusual Suspects"
),
React.createElement(
"div",
{ className: "flex justify-center space-x-8 text-2xl" },
// Replaced FontAwesomeIcon with generic SVG icons for broader compatibility
React.createElement(
"a",
{
href: "#",
className:
"text-white hover:text-gray-300 transition duration-300 transform hover:scale-125"
},
React.createElement(
"svg",
{
fill: "currentColor",
viewBox: "0 0 24 24",
className: "w-8 h-8",
"aria-hidden": "true"
},
React.createElement("path", {
d:
"M14 12h-2v8h2v-8zM12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.873V14h-2V12h2V9.5C12 7.56 13.14 6 15.65 6c1.17 0 2.27.08 2.56.12v2.2h-1.3c-1.15 0-1.37.54-1.37 1.34V12h2.5l-.4 2h-2.1v6h4V12c0-4.991-4.477-9-9-9z"
})
)
),
React.createElement(
"a",
{
href: "#",
className:
"text-white hover:text-gray-300 transition duration-300 transform hover:scale-125"
},
React.createElement(
"svg",
{
fill: "currentColor",
viewBox: "0 0 24 24",
className: "w-8 h-8",
"aria-hidden": "true"
},
React.createElement("path", {
d:
"M7.5 6.5C7.5 5.12 8.62 4 10 4h4c1.38 0 2.5 1.12 2.5 2.5v7c0 1.38-1.12 2.5-2.5 2.5h-4c-1.38 0-2.5-1.12-2.5-2.5v-7zM12 11a1 1 0 100 2 1 1 0 000-2zM12 8a4 4 0 100 8 4 4 0 000-8zM19 7h-2v2h2V7z"
})
)
),
React.createElement(
"a",
{
href: "#",
className:
"text-white hover:text-gray-300 transition duration-300 transform hover:scale-125"
},
React.createElement(
"svg",
{
fill: "currentColor",
viewBox: "0 0 24 24",
className: "w-8 h-8",
"aria-hidden": "true"
},
React.createElement("path", {
d:
"M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.39-.83.49-1.75.85-2.73 1.05C18.29 4.24 17.17 4 16 4c-3.13 0-5.67 2.54-5.67 5.67 0 .44.05.87.14 1.28-4.71-.24-8.89-2.49-11.68-5.92-.49.85-.77 1.83-.77 2.89 0 1.96.99 3.69 2.5 4.71-.92-.03-1.79-.28-2.55-.7v.07c0 2.75 1.96 5.04 4.56 5.56-.48.13-.99.19-1.52.19-.37 0-.73-.04-1.08-.1.72 2.26 2.81 3.9 5.28 3.94-1.95 1.53-4.4 2.44-7.07 2.44-.46 0-.91-.03-1.35-.08C2.5 21.32 5.23 22 8 22c8.48 0 13.09-7.01 13.09-13.09 0-.2 0-.39-.01-.58.9-.65 1.68-1.46 2.3-2.38z"
})
)
)
)
)
)
);
};
// This is the line that actually renders the React app to the DOM
window.onload = function () {
const container = document.getElementById("root");
if (container && typeof ReactDOM !== "undefined") {
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App, null));
} else {
console.error(
"Could not find root element or ReactDOM is not defined. Ensure CDNs are loaded."
);
}
};
Raw
style.css
:root {
--color-main-orange: #fe8f00; /* Brightest orange from the flyers */
--color-accent-orange: #fd6a00; /* Reddish orange from the flyers */
--color-secondary-bg-orange: #ff9800; /* A slightly softer mid-orange */
--color-text-light: #ffffff;
--color-text-dark: #2d2d2d;
--color-button-gradient-start: #ffffff;
--color-button-gradient-end: #fdd835; /* Brighter yellow */
}
body {
font-family: "Inter", sans-serif;
background-color: var(--color-main-orange); /* Overall site background */
color: var(--color-text-dark); /* Default text color for body */
}
h1,
h2,
h3 {
font-family: "Playfair Display", serif;
color: var(--color-text-light); /* All headings are light by default */
}
.hero-section {
/* Use an accessible image URL for CodePen. If you uploaded it to CodePen assets, use that URL. */
background-image: url("https://cdn.evbuc.com/images/1058004933_73732160361_1_original.jpg"); /* New hero background from provided image */
background-size: cover;
background-position: center;
position: relative;
height: 100vh; /* Full viewport height */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-text-light); /* Hero text is light */
overflow: hidden; /* Ensures parallax effect works without scrollbars */
}
/* Parallax effect for the hero image */
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Use an accessible image URL for CodePen. */
background-image: url("https://cdn.evbuc.com/images/1058004933_73732160361_1_original.jpg"); /* Same for parallax */
background-size: cover;
background-position: center;
transform: translateZ(-1px) scale(2); /* Moves background slower */
filter: brightness(0.7); /* Adjust brightness */
z-index: -1;
}
/* Add a subtle overlay to the hero section for better text readability */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Darker overlay */
z-index: 0;
}
.content-container {
position: relative;
z-index: 1; /* Ensure content is above overlay */
padding: 2rem;
max-width: 90%;
}
.ticket-button {
background: linear-gradient(
135deg,
var(--color-button-gradient-start),
var(--color-button-gradient-end)
);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
background-color 0.3s ease;
box-shadow: 0 6px 20px rgba(255, 255, 255, 0.5); /* White shadow */
font-weight: 800; /* Extra bold */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
color: var(--color-text-dark); /* Dark text on light button */
}
.ticket-button:hover {
transform: translateY(-5px) scale(1.02); /* More exaggerated lift and slight scale */
box-shadow: 0 12px 30px rgba(255, 255, 255, 0.8); /* More intense shadow */
}
.section-background-primary {
background-color: var(--color-accent-orange); /* Reddish orange */
}
.section-background-secondary {
background-color: var(--color-secondary-bg-orange); /* Mid orange */
}
.footer-gradient {
background: linear-gradient(to right, #1a1510, var(--color-accent-orange));
}
/* Enhanced hover for cards */
.event-card {
border: 4px solid transparent; /* Default transparent border */
transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out,
border-color 0.5s ease;
}
.event-card:hover {
transform: translateY(-8px) scale(1.03); /* More pronounced lift and scale */
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); /* Deeper shadow */
border-color: var(
--color-text-light
); /* Highlight border with white on hover */
}
/* Key price highlighting */
.price-highlight {
font-size: 4.5rem; /* Even larger price font */
line-height: 1;
font-weight: 900; /* Black font weight */
color: var(--color-text-light); /* Light color for price */
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
/* Animations for section headers */
@keyframes fadeInSlideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-in {
animation: fadeInSlideUp 0.8s ease-out forwards;
opacity: 0; /* Hidden by default */
}
/* Input field specific styles */
input[type="text"],
input[type="email"],
textarea {
background-color: var(
--color-main-orange
) !important; /* Use main orange for input background */
border: 1px solid var(--color-accent-orange) !important;
color: var(--color-text-dark) !important; /* Dark input text */
}
input::placeholder,
textarea::placeholder {
color: rgba(
45,
45,
45,
0.7
) !important; /* Slightly transparent dark placeholder */
}
input:focus,
textarea:focus {
outline: none !important;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6) !important; /* White focus ring */
border-color: var(--color-text-light) !important;
}
/* Media queries for larger text on smaller screens if needed, though Tailwind handles most */
@media (max-width: 767px) {
.hero-section h2 {
font-size: 3rem; /* Adjust for mobile if 8xl is too big */
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment