+
+
+ {/* Global Animation Context Provider */}
+
+
+ {renderPage()}
+
+
+
+ {/* Sticky QR Code Widget */}
+ {
+ // Remove from DOM after animation
+ const element = document.querySelector('[data-preload]');
+ element?.remove();
+ }}
+ data-preload
+ />
+
+ );
+}
+
+// Export animation variants for use in components
+export {
+ heroVariants,
+ sectionVariants,
+ cardVariants,
+ staggerContainer,
+ fastStaggerContainer,
+ headingVariants,
+ textVariants,
+ ctaVariants,
+ iconVariants,
+ buttonHoverVariants,
+ cardHoverVariants,
+ easeOutQuart,
+ easeOutExpo,
+ easeOutCubic
+};
+
+export default App;
\ No newline at end of file
diff --git a/src/Attributions.md b/src/Attributions.md
new file mode 100644
index 0000000..9b7cd4e
--- /dev/null
+++ b/src/Attributions.md
@@ -0,0 +1,3 @@
+This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md).
+
+This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license).
\ No newline at end of file
diff --git a/src/assets/03b75e940c0ed36f1fbd27725d52152720984f86.png b/src/assets/03b75e940c0ed36f1fbd27725d52152720984f86.png
new file mode 100644
index 0000000..03d7c81
Binary files /dev/null and b/src/assets/03b75e940c0ed36f1fbd27725d52152720984f86.png differ
diff --git a/src/assets/090c0a16f783254412cc67914fb0ed3cd9edfad3.png b/src/assets/090c0a16f783254412cc67914fb0ed3cd9edfad3.png
new file mode 100644
index 0000000..394c683
Binary files /dev/null and b/src/assets/090c0a16f783254412cc67914fb0ed3cd9edfad3.png differ
diff --git a/src/assets/183ba346669a0a079762ab3f9535b7d1469ed4d9.png b/src/assets/183ba346669a0a079762ab3f9535b7d1469ed4d9.png
new file mode 100644
index 0000000..65787f4
Binary files /dev/null and b/src/assets/183ba346669a0a079762ab3f9535b7d1469ed4d9.png differ
diff --git a/src/assets/1e3bcb27a765c642a88aed36ef1b72f08a715dc6.png b/src/assets/1e3bcb27a765c642a88aed36ef1b72f08a715dc6.png
new file mode 100644
index 0000000..ec45d3a
Binary files /dev/null and b/src/assets/1e3bcb27a765c642a88aed36ef1b72f08a715dc6.png differ
diff --git a/src/assets/394719dd82255b7b60801f8ae7c81a0e3514bd13.png b/src/assets/394719dd82255b7b60801f8ae7c81a0e3514bd13.png
new file mode 100644
index 0000000..ae8c8d5
Binary files /dev/null and b/src/assets/394719dd82255b7b60801f8ae7c81a0e3514bd13.png differ
diff --git a/src/assets/43f3bc1f9c8cc5b8f60f3f6be0bc1ad29eded0d7.png b/src/assets/43f3bc1f9c8cc5b8f60f3f6be0bc1ad29eded0d7.png
new file mode 100644
index 0000000..8271161
Binary files /dev/null and b/src/assets/43f3bc1f9c8cc5b8f60f3f6be0bc1ad29eded0d7.png differ
diff --git a/src/assets/48312b6a6d62d8c34cca1cf135001fea23d6e195.png b/src/assets/48312b6a6d62d8c34cca1cf135001fea23d6e195.png
new file mode 100644
index 0000000..5c25bd3
Binary files /dev/null and b/src/assets/48312b6a6d62d8c34cca1cf135001fea23d6e195.png differ
diff --git a/src/assets/4a96daf4aee4ef525cd3be5298de82d1697d6961.png b/src/assets/4a96daf4aee4ef525cd3be5298de82d1697d6961.png
new file mode 100644
index 0000000..9276925
Binary files /dev/null and b/src/assets/4a96daf4aee4ef525cd3be5298de82d1697d6961.png differ
diff --git a/src/assets/4d07c3035c8f965d162e4e0d20cb3910fd5fa6fe.png b/src/assets/4d07c3035c8f965d162e4e0d20cb3910fd5fa6fe.png
new file mode 100644
index 0000000..e7dde01
Binary files /dev/null and b/src/assets/4d07c3035c8f965d162e4e0d20cb3910fd5fa6fe.png differ
diff --git a/src/assets/52f02fe505fbc40e6338ebec9cbd919bca7657db.png b/src/assets/52f02fe505fbc40e6338ebec9cbd919bca7657db.png
new file mode 100644
index 0000000..1e6cd0a
Binary files /dev/null and b/src/assets/52f02fe505fbc40e6338ebec9cbd919bca7657db.png differ
diff --git a/src/assets/5566b83072321980379e10ac9007fb546b9d5437.png b/src/assets/5566b83072321980379e10ac9007fb546b9d5437.png
new file mode 100644
index 0000000..b048eab
Binary files /dev/null and b/src/assets/5566b83072321980379e10ac9007fb546b9d5437.png differ
diff --git a/src/assets/574712bba8c579e168f68da6e27f45e0a691dc54.png b/src/assets/574712bba8c579e168f68da6e27f45e0a691dc54.png
new file mode 100644
index 0000000..f6326d5
Binary files /dev/null and b/src/assets/574712bba8c579e168f68da6e27f45e0a691dc54.png differ
diff --git a/src/assets/5c46ee69599a58ad1a03823f5a76362b6aa14852.png b/src/assets/5c46ee69599a58ad1a03823f5a76362b6aa14852.png
new file mode 100644
index 0000000..57e8070
Binary files /dev/null and b/src/assets/5c46ee69599a58ad1a03823f5a76362b6aa14852.png differ
diff --git a/src/assets/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png b/src/assets/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png
new file mode 100644
index 0000000..ee2ff09
Binary files /dev/null and b/src/assets/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png differ
diff --git a/src/assets/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png b/src/assets/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png
new file mode 100644
index 0000000..5ccae11
Binary files /dev/null and b/src/assets/6c1d7aa4854f71023510e35ac1f4eb623441cb4a.png differ
diff --git a/src/assets/76883b8919dd779e35f1ab093b16410f6a465b3d.png b/src/assets/76883b8919dd779e35f1ab093b16410f6a465b3d.png
new file mode 100644
index 0000000..6ad93ce
Binary files /dev/null and b/src/assets/76883b8919dd779e35f1ab093b16410f6a465b3d.png differ
diff --git a/src/assets/79434fd2c5fcae2b17fa09533dfcdb8584ce39c1.png b/src/assets/79434fd2c5fcae2b17fa09533dfcdb8584ce39c1.png
new file mode 100644
index 0000000..79e3238
Binary files /dev/null and b/src/assets/79434fd2c5fcae2b17fa09533dfcdb8584ce39c1.png differ
diff --git a/src/assets/7b71a56a728fd21bca72228b78511c0072a1505f.png b/src/assets/7b71a56a728fd21bca72228b78511c0072a1505f.png
new file mode 100644
index 0000000..1568615
Binary files /dev/null and b/src/assets/7b71a56a728fd21bca72228b78511c0072a1505f.png differ
diff --git a/src/assets/85a189eb1e1976493720fa5345a5f387c5edcc1a.png b/src/assets/85a189eb1e1976493720fa5345a5f387c5edcc1a.png
new file mode 100644
index 0000000..b494819
Binary files /dev/null and b/src/assets/85a189eb1e1976493720fa5345a5f387c5edcc1a.png differ
diff --git a/src/assets/8b0be768b2331d5dcd1154cf3d9e4dc61e3d3afb.png b/src/assets/8b0be768b2331d5dcd1154cf3d9e4dc61e3d3afb.png
new file mode 100644
index 0000000..70cd072
Binary files /dev/null and b/src/assets/8b0be768b2331d5dcd1154cf3d9e4dc61e3d3afb.png differ
diff --git a/src/assets/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png b/src/assets/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png
new file mode 100644
index 0000000..15d3b7f
Binary files /dev/null and b/src/assets/916a2ac02159f19d4e05b6fbbad76f315c8dfb66.png differ
diff --git a/src/assets/b508859d8646554ff359c4dadcedccdfca7e7bfb.png b/src/assets/b508859d8646554ff359c4dadcedccdfca7e7bfb.png
new file mode 100644
index 0000000..f04e882
Binary files /dev/null and b/src/assets/b508859d8646554ff359c4dadcedccdfca7e7bfb.png differ
diff --git a/src/assets/cd153b02eb88c70a1ae2ef3b926d2e44cbcb8dd9.png b/src/assets/cd153b02eb88c70a1ae2ef3b926d2e44cbcb8dd9.png
new file mode 100644
index 0000000..5ff5b00
Binary files /dev/null and b/src/assets/cd153b02eb88c70a1ae2ef3b926d2e44cbcb8dd9.png differ
diff --git a/src/assets/d34005cfa14dc032f5b14c284f3ecd65df31444e.png b/src/assets/d34005cfa14dc032f5b14c284f3ecd65df31444e.png
new file mode 100644
index 0000000..1c295df
Binary files /dev/null and b/src/assets/d34005cfa14dc032f5b14c284f3ecd65df31444e.png differ
diff --git a/src/assets/da41b2748c2a938ba04e1663f300d2ad340eef5f.png b/src/assets/da41b2748c2a938ba04e1663f300d2ad340eef5f.png
new file mode 100644
index 0000000..2b4a454
Binary files /dev/null and b/src/assets/da41b2748c2a938ba04e1663f300d2ad340eef5f.png differ
diff --git a/src/assets/e1947d1a05cd5bbd448c1ae6e6e9f2abd5d4ca10.png b/src/assets/e1947d1a05cd5bbd448c1ae6e6e9f2abd5d4ca10.png
new file mode 100644
index 0000000..5f3ab0b
Binary files /dev/null and b/src/assets/e1947d1a05cd5bbd448c1ae6e6e9f2abd5d4ca10.png differ
diff --git a/src/assets/e6f059f48d3002a2b93fc24b73fa49b61b8cd3ab.png b/src/assets/e6f059f48d3002a2b93fc24b73fa49b61b8cd3ab.png
new file mode 100644
index 0000000..0d82317
Binary files /dev/null and b/src/assets/e6f059f48d3002a2b93fc24b73fa49b61b8cd3ab.png differ
diff --git a/src/assets/e96a0ba8c1e8ee053e3eb462a3b4552a8657e7b6.png b/src/assets/e96a0ba8c1e8ee053e3eb462a3b4552a8657e7b6.png
new file mode 100644
index 0000000..b741036
Binary files /dev/null and b/src/assets/e96a0ba8c1e8ee053e3eb462a3b4552a8657e7b6.png differ
diff --git a/src/assets/f744b0d7006fc6835cbbb274a3da305f5e2da694.png b/src/assets/f744b0d7006fc6835cbbb274a3da305f5e2da694.png
new file mode 100644
index 0000000..450f791
Binary files /dev/null and b/src/assets/f744b0d7006fc6835cbbb274a3da305f5e2da694.png differ
diff --git a/src/components/ArticlesSection.tsx b/src/components/ArticlesSection.tsx
new file mode 100644
index 0000000..f7cd16e
--- /dev/null
+++ b/src/components/ArticlesSection.tsx
@@ -0,0 +1,79 @@
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { Button } from './ui/button';
+
+interface ArticleCard {
+ id: string;
+ title: string;
+ image: string;
+}
+
+const articles: ArticleCard[] = [
+ {
+ id: '1',
+ title: 'Choosing a Travel Backpack: A Comprehensive Guide!',
+ image: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=500&h=400&fit=crop&q=80'
+ },
+ {
+ id: '2',
+ title: 'Bucket List Trip - 52 Places To Visit In Your Life...',
+ image: 'https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=500&h=400&fit=crop&q=80'
+ },
+ {
+ id: '3',
+ title: 'The FREE Way to Travel: No Money, No Problems!',
+ image: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=500&h=400&fit=crop&q=80'
+ }
+];
+
+export function ArticlesSection() {
+ return (
+
+
+ {!showQRCard && (
+ setShowQRCard(true)}
+ className="w-36 h-36 bg-black text-white shadow-2xl flex items-center justify-center border border-gray-800 rounded-[5px]"
+ aria-label="Show QR Code"
+ >
+
+ )}
+
+
+
+ {showQRCard && (
+
+ {/* Close Button */}
+
+
+ {/* QR Code - Much Larger */}
+
+ )}
+
+
+
+ {/* Preload animation optimization */}
+
+
+
+ {/* Static Border Glow */}
+
+ Scan for App
+
+
+
+ {/* Text Content - Larger */}
+
+ {/* QR Code Pattern */}
+
+
+ {qrPattern.map((filled, index) => (
+
+
+ {/* Center Logo - Much Larger */}
+
+
+
+ 
+
+
+
+
+ {/* Static Border */}
+
+ Scan QR for app
++ Scan to get the CityCards mobile app +
+
+ {/* Header */}
+
+
+
+
+ {/* Articles Grid */}
+ + Our latest articles about travel +
++ Know the latest articles about travel +
+
+ {articles.map((article) => (
+
+
+ {/* CTA Button */}
+
+
+ ))}
+
+
+ + {article.title} +
+
+
+
+
+
+ {/* FRONT FACE */}
+
+
+ {/* Background Image */}
+
+
+ {/* BACK FACE */}
+
+
+
+ {/* Front Content - Clean Title & Location */}
+
+ ★
+
+ {attraction.rating}
+
+
+
+
+ {attraction.name}
++ {attraction.city}, {attraction.country} +
+
+ {/* Back Content Container */}
+
+
+
+
+ {/* Included Value Section */}
+
+
+
+
+ {/* What's Included List */}
+
+
+ {attraction.includedValue}
+ + {attraction.originalPrice === "Free" + ? "Premium access included" + : "Save money with CityCard"} +
+
+
+
+ {/* Duration & Meta Info */}
+ What's Included:
+
+ {attraction.perks.slice(0, 3).map((perk, perkIndex) => (
+
+
+
+ ))}
+
+
+ {perk.label}
+
+
+
+ {/* Footer Features */}
+
+
+
+
+
+
+
+
+
+ {/* Decorative Elements */}
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+ {/* Category Tabs */}
+
+ {categories.map((category, index) => (
+ setActiveCategory(category)}
+ whileHover={{ scale: 1.05 }}
+ whileTap={{ scale: 0.95 }}
+ className={`px-6 py-4 h-14 rounded-full font-medium transition-all duration-300 ${
+ activeCategory === category
+ ? 'bg-warm-coral text-white shadow-xl shadow-warm-coral/25 ring-2 ring-warm-coral/20'
+ : 'bg-white/80 backdrop-blur-sm text-gray-700 hover:text-gray-900 hover:shadow-lg border border-gray-200/50 hover:border-warm-coral/20 hover:bg-white'
+ }`}
+ >
+ {category}
+
+ ))}
+
+
+ {/* Mobile Horizontal Carousel */}
+
+
+ Get Your City Card
+
+ {/* Shine animation */}
+
+
+
+
+
+
+ Must-See Destinations
+
+
+ + + Top + {' '} + Attractions +
++ Discover Australia's most iconic attractions and hidden gems across Sydney, Melbourne, Brisbane, Perth, and Adelaide - all included with your CityCard +
+
+
+
+ {/* Desktop Bento Grid */}
+
+ {/* Scroll Container */}
+
+
+ {filteredAttractions.map((attraction, index) => (
+
+
+ {/* Scroll Indicators */}
+
+ {Array.from({ length: Math.ceil(filteredAttractions.length / 2) }).map((_, index) => (
+
+ ))}
+
+
+ {/* Mobile Hint Text */}
+
+
+ + Swipe to explore more attractions +
+
+ {/* Top Row - 3 equal cards */}
+
+
+ {/* Call to Action */}
+
+ {filteredAttractions.slice(0, 3).map((attraction, index) => (
+
+
+ {/* Consistent Vertical Spacing */}
+
+
+ {/* Bottom Row - 2 larger cards */}
+
+ {filteredAttractions.slice(3, 5).map((attraction, index) => (
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+ {/* Main Content */}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/CitySubmenu.tsx b/src/components/CitySubmenu.tsx
new file mode 100644
index 0000000..2c81d89
--- /dev/null
+++ b/src/components/CitySubmenu.tsx
@@ -0,0 +1,267 @@
+import { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
+
+interface CitySubmenuProps {
+ onClose: () => void;
+ currentPage?: string;
+ onHomeClick?: () => void;
+ onMelbourneClick?: () => void;
+ onAttractionsClick?: () => void;
+ onPassesClick?: () => void;
+ onBlogsClick?: () => void;
+ onHowItWorksClick?: () => void;
+}
+
+interface SubmenuItem {
+ id: string;
+ label: string;
+ isCity?: boolean;
+ action?: () => void;
+}
+
+export function CitySubmenu({
+ onClose,
+ currentPage,
+ onHomeClick,
+ onMelbourneClick,
+ onAttractionsClick,
+ onPassesClick,
+ onBlogsClick,
+ onHowItWorksClick
+}: CitySubmenuProps) {
+ const [selectedItem, setSelectedItem] = useState
+
+
+
+
+
+
+
+
+
+
+
+ Most Popular
+
+
+
+
+
+ Paris, France
++ The City of Light awaits with world-famous landmarks, incredible art, and timeless romance +
+ +
+
+
+
+
+
+
+
+
+
+
+ {/* Left Column - Content */}
+
+
+
+
+ Attractions
+ Sample Itinerary
+ Interactive Map
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Right Column - Booking Card */}
+
+
+
+ Top Attractions Included
++ Discover Paris's most iconic landmarks and hidden gems with priority access and expert insights. +
+
+ {parisAttractions.map((attraction) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {attraction.category}
+
+
+
+ {attraction.name}
+
+
+
+
+
+ {attraction.reviews.toLocaleString()} reviews
+
+ {attraction.description}
+ +
+
+
+
+
+
+
+
+ {attraction.highlights.map((highlight, index) => (
+
+ {highlight}
+
+ ))}
+
+
+
+
+ 3-Day Paris Itinerary
++ Make the most of your time with our expert-crafted itinerary suggestion. +
+
+ {['Day 1: Classic Paris', 'Day 2: Art & Culture', 'Day 3: Hidden Gems'].map((day, index) => (
+
+
+
+
+
+
+
+
+ ))}
+
+ + Detailed itinerary content would be shown here with times, locations, and recommendations. +
+
+
+
+ Interactive Map
++ Explore all included attractions on our interactive map with real-time information. +
+
+
+ Interactive map would be embedded here
+
+
+
+ Choose Your Paris Pass
+
+
+
+ {/* Pass Selection */}
+
+
+
+
+ {Object.entries(passDetails).map(([key, pass]) => (
+
+
+ {/* Selected Pass Summary */}
+ setSelectedPass(key as any)}
+ className={`p-4 border rounded-lg cursor-pointer transition-all ${
+ selectedPass === key
+ ? 'border-primary bg-primary/5'
+ : 'border-border hover:border-primary/50'
+ }`}
+ >
+
+ ))}
+
+
+
+
+ {pass.name}
+ {pass.attractions}
+ {pass.duration}
+
+
+ {pass.price}
+ {pass.savings}
+
+
+
+ {/* Booking Button */}
+
+
+ {/* Trust Elements */}
+ Selected: {passDetails[selectedPass].name}
+
+ Valid for {passDetails[selectedPass].duration} • {passDetails[selectedPass].attractions}
+
+ {passDetails[selectedPass].price}
+
+
+
+
+ Free cancellation up to 24 hours
+
+
+
+ Instant mobile ticket delivery
+
+
+
+ 24/7 customer support
+
+
+ {submenuItems.map((item) => (
+ handleItemClick(item)}
+ className={`relative px-4 py-2.5 text-sm font-medium transition-all duration-300 whitespace-nowrap rounded-full ${
+ isItemActive(item)
+ ? 'bg-primary text-white shadow-md'
+ : 'text-gray-700 hover:text-white hover:bg-gray-800'
+ }`}
+ whileHover={{ scale: 1.02 }}
+ whileTap={{ scale: 0.98 }}
+ >
+ {item.label}
+
+ {/* Hover effect for non-active items */}
+ {!isItemActive(item) && (
+
+ ))}
+
+
+ {submenuItems.map((item) => (
+ handleItemClick(item)}
+ className={`relative px-3 py-2 text-sm font-medium transition-all duration-300 whitespace-nowrap rounded-xl flex-shrink-0 ${
+ isItemActive(item)
+ ? 'bg-primary text-white shadow-md'
+ : 'text-gray-700 hover:text-white hover:bg-gray-800'
+ }`}
+ whileHover={{ scale: 1.02 }}
+ whileTap={{ scale: 0.98 }}
+ >
+ {item.label}
+
+ {/* Hover effect for non-active items */}
+ {!isItemActive(item) && (
+
+ ))}
+
+
+ {submenuItems.map((item) => (
+ handleItemClick(item)}
+ className={`relative px-4 py-2.5 text-sm font-medium transition-all duration-300 whitespace-nowrap rounded-full ${
+ isItemActive(item)
+ ? 'bg-primary text-white shadow-md'
+ : 'text-gray-700 hover:text-white hover:bg-gray-800'
+ }`}
+ whileHover={{ scale: 1.02 }}
+ whileTap={{ scale: 0.98 }}
+ >
+ {item.label}
+
+ {/* Hover effect for non-active items */}
+ {!isItemActive(item) && (
+
+ ))}
+
+
+
+
+
+
+
+ {/* Corner wear and creases */}
+
+
+
+ {/* Subtle crease lines */}
+
+
+ {/* Animated Vintage Vector Logo - Top Right - Mobile Optimized */}
+
+
+
+ {/* Editable Address Label Card - Responsive */}
+ setEditingCard(editingCard === 'label' ? null : 'label')}
+ style={{
+ position: 'absolute',
+ top: '4.1%',
+ left: '0%',
+ pointerEvents: 'auto',
+ transform: 'rotate(-0.3deg)'
+ }}
+ editIcon={
+
+ {/* Realistic horizontal ruled lines with ink bleeding - Responsive */}
+ setEditingCard(editingCard === 'message' ? null : 'message')}
+ style={{
+ position: 'absolute',
+ top: '17.6%',
+ left: '4.4%',
+ width: '88.2%',
+ pointerEvents: 'auto',
+ transform: 'rotate(-0.7deg)'
+ }}
+ editIcon={
+
+ {/* Editable Date Card - Responsive */}
+ setEditingCard(editingCard === 'date' ? null : 'date')}
+ style={{
+ position: 'absolute',
+ bottom: '16.2%',
+ right: '7.4%',
+ pointerEvents: 'auto',
+ transform: 'rotate(-1.5deg)'
+ }}
+ editIcon={
+
+
+ {/* Ultra-realistic stamp - Responsive */}
+
+ {postcardData.addressLabel}
+
+
+ {[...Array(9)].map((_, i) => (
+
+
+ {/* Editable Message Card with Handwritten Animation - Responsive */}
+
+ {/* Main line */}
+
+ {/* Ink bleed effect */}
+
+
+ ))}
+
+ {editingCard === 'message' ? (
+ // Show static text when editing
+
+
+ {postcardData.message}
+
+ ) : (
+ // Show animated handwritten text when not editing
+
+ {postcardData.date}
+
+
+ {/* Stamp aging and wear */}
+
+
+ {/* Stamp inner details */}
+
+
+
+ {/* Stamp text */}
+
+ {/* Background decorations */}
+
+
+
+ {/* Stamp perforations with realistic variations */}
+ {[...Array(20)].map((_, i) => (
+
+ TRAVEL
+
+
+ MEMORIES
+
+
+ 2024
+
+ 0.1 ? 1 : 0.3 // Random missing perforations
+ }}
+ />
+ ))}
+
+ {/* Stamp smudge mark */}
+
+
+
+
+ {/* Additional realistic aging effects */}
+
+
+ );
+ };
+
+ return (
+
+ {/* Vintage Stamps */}
+
+
+
+
+ {/* Paper Textures */}
+
+
+
+ {/* Ink Splatters */}
+
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+ {/* Centered Postcard Preview - Enhanced with Animations */}
+
+
+
+ + The Only Card That Sends Your + + + Holiday + {' '} + Home. + +
+ ++ Transform your travel memories into beautiful, personalized postcards that capture the essence of your adventures. +
+
+
+ {/* Interactive 3D Container */}
+
+
+
+ {/* Animated Edit Instructions */}
+ {editingCard && (
+
+
+ Click on any element to edit it
+
+
+
+ )}
+
+
+
+ {/* Animated Editing Panel */}
+ {editingCard && (
+ Edit {editingCard}
+ {editingCard === 'photo' && ( +
+
+ setPostcardData(prev => ({ ...prev, photo: e.target.value }))}
+ className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+ placeholder="Enter image URL"
+ />
+
+ )}
+ {editingCard === 'message' && (
+
+
+