refactor the design in PostCradsPage
This commit is contained in:
aryabenade
@@ -4,7 +4,7 @@ import { Button } from './ui/button';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import { motion, useMotionValue, useSpring, useTransform, useInView } from 'motion/react';
|
||||
import { HandwrittenText, useHandwrittenText } from './HandwrittenText';
|
||||
import postcardImage from 'figma:asset/d3a880cf8b7f1bec6da9b3f2ce4a76e822e483cf.png';
|
||||
import front from '../assets/front.jpg'
|
||||
|
||||
interface EditableCardProps {
|
||||
isEditing: boolean;
|
||||
@@ -190,485 +190,485 @@ export function CustomPostcards() {
|
||||
};
|
||||
|
||||
// Ultra-realistic vintage postcard with responsive scaling and animations
|
||||
const PostcardFrame = () => {
|
||||
return (
|
||||
<motion.div
|
||||
className="relative shadow-2xl transform rotate-[0.5deg] w-full h-full"
|
||||
initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
|
||||
animate={{ opacity: 1, scale: 1, rotate: 0.5 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
style={{
|
||||
background: `
|
||||
radial-gradient(circle at 20% 80%, rgba(210, 180, 140, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(160, 130, 100, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(190, 160, 120, 0.08) 0%, transparent 50%),
|
||||
linear-gradient(135deg, #f8f4e6 0%, #f0e7d3 25%, #ede2d0 50%, #e8dcc8 75%, #e3d5c2 100%)
|
||||
`,
|
||||
borderRadius: '10px',
|
||||
boxShadow: `
|
||||
inset 0px 1px 30px rgba(139, 115, 85, 0.2),
|
||||
inset 0px -1px 20px rgba(160, 130, 100, 0.15),
|
||||
0px 12px 40px rgba(0, 0, 0, 0.15),
|
||||
0px 4px 12px rgba(0, 0, 0, 0.1)
|
||||
`,
|
||||
border: '1px solid rgba(139, 115, 85, 0.2)'
|
||||
}}
|
||||
>
|
||||
{/* Realistic paper texture with variations */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-40 rounded-[10px] pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af9a' fill-opacity='0.08'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
|
||||
radial-gradient(circle at 25% 75%, rgba(180, 150, 120, 0.1) 0%, transparent 40%),
|
||||
radial-gradient(circle at 75% 25%, rgba(160, 130, 100, 0.08) 0%, transparent 35%)
|
||||
`
|
||||
}}
|
||||
/>
|
||||
// const PostcardFrame = () => {
|
||||
// return (
|
||||
// <motion.div
|
||||
// className="relative shadow-2xl transform rotate-[0.5deg] w-full h-full"
|
||||
// initial={{ opacity: 0, scale: 0.9, rotate: 0 }}
|
||||
// animate={{ opacity: 1, scale: 1, rotate: 0.5 }}
|
||||
// transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
// style={{
|
||||
// background: `
|
||||
// radial-gradient(circle at 20% 80%, rgba(210, 180, 140, 0.15) 0%, transparent 50%),
|
||||
// radial-gradient(circle at 80% 20%, rgba(160, 130, 100, 0.1) 0%, transparent 50%),
|
||||
// radial-gradient(circle at 40% 40%, rgba(190, 160, 120, 0.08) 0%, transparent 50%),
|
||||
// linear-gradient(135deg, #f8f4e6 0%, #f0e7d3 25%, #ede2d0 50%, #e8dcc8 75%, #e3d5c2 100%)
|
||||
// `,
|
||||
// borderRadius: '10px',
|
||||
// boxShadow: `
|
||||
// inset 0px 1px 30px rgba(139, 115, 85, 0.2),
|
||||
// inset 0px -1px 20px rgba(160, 130, 100, 0.15),
|
||||
// 0px 12px 40px rgba(0, 0, 0, 0.15),
|
||||
// 0px 4px 12px rgba(0, 0, 0, 0.1)
|
||||
// `,
|
||||
// border: '1px solid rgba(139, 115, 85, 0.2)'
|
||||
// }}
|
||||
// >
|
||||
// {/* Realistic paper texture with variations */}
|
||||
// <div
|
||||
// className="absolute inset-0 opacity-40 rounded-[10px] pointer-events-none"
|
||||
// style={{
|
||||
// backgroundImage: `
|
||||
// url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af9a' fill-opacity='0.08'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
|
||||
// radial-gradient(circle at 25% 75%, rgba(180, 150, 120, 0.1) 0%, transparent 40%),
|
||||
// radial-gradient(circle at 75% 25%, rgba(160, 130, 100, 0.08) 0%, transparent 35%)
|
||||
// `
|
||||
// }}
|
||||
// />
|
||||
|
||||
{/* Age spots and stains */}
|
||||
<div className="absolute inset-0 rounded-[10px] pointer-events-none opacity-30">
|
||||
<div
|
||||
className="absolute w-8 h-6 rounded-full"
|
||||
style={{
|
||||
background: 'radial-gradient(ellipse, rgba(160, 120, 80, 0.15) 0%, transparent 70%)',
|
||||
top: '15%',
|
||||
right: '20%',
|
||||
transform: 'rotate(-15deg)'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute w-6 h-8 rounded-full"
|
||||
style={{
|
||||
background: 'radial-gradient(ellipse, rgba(140, 110, 70, 0.12) 0%, transparent 60%)',
|
||||
bottom: '25%',
|
||||
left: '15%',
|
||||
transform: 'rotate(25deg)'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute w-4 h-4 rounded-full"
|
||||
style={{
|
||||
background: 'radial-gradient(circle, rgba(180, 140, 100, 0.2) 0%, transparent 50%)',
|
||||
top: '60%',
|
||||
right: '10%'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
// {/* Age spots and stains */}
|
||||
// <div className="absolute inset-0 rounded-[10px] pointer-events-none opacity-30">
|
||||
// <div
|
||||
// className="absolute w-8 h-6 rounded-full"
|
||||
// style={{
|
||||
// background: 'radial-gradient(ellipse, rgba(160, 120, 80, 0.15) 0%, transparent 70%)',
|
||||
// top: '15%',
|
||||
// right: '20%',
|
||||
// transform: 'rotate(-15deg)'
|
||||
// }}
|
||||
// />
|
||||
// <div
|
||||
// className="absolute w-6 h-8 rounded-full"
|
||||
// style={{
|
||||
// background: 'radial-gradient(ellipse, rgba(140, 110, 70, 0.12) 0%, transparent 60%)',
|
||||
// bottom: '25%',
|
||||
// left: '15%',
|
||||
// transform: 'rotate(25deg)'
|
||||
// }}
|
||||
// />
|
||||
// <div
|
||||
// className="absolute w-4 h-4 rounded-full"
|
||||
// style={{
|
||||
// background: 'radial-gradient(circle, rgba(180, 140, 100, 0.2) 0%, transparent 50%)',
|
||||
// top: '60%',
|
||||
// right: '10%'
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
|
||||
{/* Corner wear and creases */}
|
||||
<div
|
||||
className="absolute top-0 right-0 w-12 h-12 opacity-25"
|
||||
style={{
|
||||
background: 'radial-gradient(circle at top right, rgba(139, 115, 85, 0.3) 20%, rgba(160, 130, 100, 0.2) 40%, transparent 70%)',
|
||||
borderTopRightRadius: '10px'
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute bottom-0 left-0 w-16 h-16 opacity-20"
|
||||
style={{
|
||||
background: 'radial-gradient(circle at bottom left, rgba(120, 95, 70, 0.25) 25%, rgba(140, 115, 85, 0.15) 50%, transparent 75%)',
|
||||
borderBottomLeftRadius: '10px'
|
||||
}}
|
||||
/>
|
||||
// {/* Corner wear and creases */}
|
||||
// <div
|
||||
// className="absolute top-0 right-0 w-12 h-12 opacity-25"
|
||||
// style={{
|
||||
// background: 'radial-gradient(circle at top right, rgba(139, 115, 85, 0.3) 20%, rgba(160, 130, 100, 0.2) 40%, transparent 70%)',
|
||||
// borderTopRightRadius: '10px'
|
||||
// }}
|
||||
// />
|
||||
// <div
|
||||
// className="absolute bottom-0 left-0 w-16 h-16 opacity-20"
|
||||
// style={{
|
||||
// background: 'radial-gradient(circle at bottom left, rgba(120, 95, 70, 0.25) 25%, rgba(140, 115, 85, 0.15) 50%, transparent 75%)',
|
||||
// borderBottomLeftRadius: '10px'
|
||||
// }}
|
||||
// />
|
||||
|
||||
{/* Subtle crease lines */}
|
||||
<div
|
||||
className="absolute w-full h-px bg-gradient-to-r from-transparent via-amber-800/10 to-transparent opacity-40"
|
||||
style={{
|
||||
top: '35%',
|
||||
transform: 'rotate(-0.5deg)'
|
||||
}}
|
||||
/>
|
||||
// {/* Subtle crease lines */}
|
||||
// <div
|
||||
// className="absolute w-full h-px bg-gradient-to-r from-transparent via-amber-800/10 to-transparent opacity-40"
|
||||
// style={{
|
||||
// top: '35%',
|
||||
// transform: 'rotate(-0.5deg)'
|
||||
// }}
|
||||
// />
|
||||
|
||||
{/* Animated Vintage Vector Logo - Top Right - Mobile Optimized */}
|
||||
<motion.div
|
||||
className="absolute opacity-60 pointer-events-none"
|
||||
style={{
|
||||
top: '4.3%',
|
||||
right: '3.5%',
|
||||
width: '7.5%',
|
||||
height: '11.5%',
|
||||
filter: 'sepia(30%) saturate(120%) hue-rotate(15deg) brightness(85%) contrast(110%)'
|
||||
}}
|
||||
animate={{
|
||||
rotate: [5, 7, 3, 5],
|
||||
scale: [1, 1.02, 0.98, 1]
|
||||
}}
|
||||
transition={{
|
||||
duration: 8,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
>
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1702825328124-dab63d85490e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx2aW50YWdlJTIwbG9nbyUyMHZlY3RvciUyMHBvc3RhbCUyMHN0YW1wfGVufDF8fHx8MTc1ODk5MjExN3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
|
||||
alt="Vintage logo"
|
||||
className="w-full h-full object-contain"
|
||||
style={{
|
||||
mixBlendMode: 'multiply',
|
||||
opacity: 0.8
|
||||
}}
|
||||
/>
|
||||
{/* Subtle aging overlay for the vector */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-full"
|
||||
style={{
|
||||
background: `
|
||||
radial-gradient(circle at 30% 30%, rgba(160, 130, 90, 0.2) 0%, transparent 60%),
|
||||
radial-gradient(circle at 70% 70%, rgba(140, 110, 70, 0.15) 0%, transparent 50%)
|
||||
`,
|
||||
mixBlendMode: 'multiply'
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
// {/* Animated Vintage Vector Logo - Top Right - Mobile Optimized */}
|
||||
// <motion.div
|
||||
// className="absolute opacity-60 pointer-events-none"
|
||||
// style={{
|
||||
// top: '4.3%',
|
||||
// right: '3.5%',
|
||||
// width: '7.5%',
|
||||
// height: '11.5%',
|
||||
// filter: 'sepia(30%) saturate(120%) hue-rotate(15deg) brightness(85%) contrast(110%)'
|
||||
// }}
|
||||
// animate={{
|
||||
// rotate: [5, 7, 3, 5],
|
||||
// scale: [1, 1.02, 0.98, 1]
|
||||
// }}
|
||||
// transition={{
|
||||
// duration: 8,
|
||||
// repeat: Infinity,
|
||||
// ease: "easeInOut"
|
||||
// }}
|
||||
// >
|
||||
// <ImageWithFallback
|
||||
// src="https://images.unsplash.com/photo-1702825328124-dab63d85490e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx2aW50YWdlJTIwbG9nbyUyMHZlY3RvciUyMHBvc3RhbCUyMHN0YW1wfGVufDF8fHx8MTc1ODk5MjExN3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
|
||||
// alt="Vintage logo"
|
||||
// className="w-full h-full object-contain"
|
||||
// style={{
|
||||
// mixBlendMode: 'multiply',
|
||||
// opacity: 0.8
|
||||
// }}
|
||||
// />
|
||||
// {/* Subtle aging overlay for the vector */}
|
||||
// <div
|
||||
// className="absolute inset-0 rounded-full"
|
||||
// style={{
|
||||
// background: `
|
||||
// radial-gradient(circle at 30% 30%, rgba(160, 130, 90, 0.2) 0%, transparent 60%),
|
||||
// radial-gradient(circle at 70% 70%, rgba(140, 110, 70, 0.15) 0%, transparent 50%)
|
||||
// `,
|
||||
// mixBlendMode: 'multiply'
|
||||
// }}
|
||||
// />
|
||||
// </motion.div>
|
||||
|
||||
{/* For Correspondence Text */}
|
||||
<div
|
||||
className="absolute pointer-events-none"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '33.3%',
|
||||
height: '72.3%',
|
||||
left: '4.9%',
|
||||
top: '7.4%',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'flex-start',
|
||||
paddingTop: '8%'
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="font-poppins font-light"
|
||||
style={{
|
||||
fontSize: 'clamp(10px, 2.2vw, 16px)',
|
||||
color: 'rgba(101, 84, 63, 0.4)',
|
||||
letterSpacing: '0.5px',
|
||||
lineHeight: '1.4',
|
||||
textShadow: '0px 0.5px 1px rgba(0, 0, 0, 0.05)'
|
||||
}}
|
||||
>
|
||||
For correspondence
|
||||
</p>
|
||||
</div>
|
||||
// {/* For Correspondence Text */}
|
||||
// <div
|
||||
// className="absolute pointer-events-none"
|
||||
// style={{
|
||||
// position: 'absolute',
|
||||
// width: '33.3%',
|
||||
// height: '72.3%',
|
||||
// left: '4.9%',
|
||||
// top: '7.4%',
|
||||
// display: 'flex',
|
||||
// alignItems: 'flex-start',
|
||||
// justifyContent: 'flex-start',
|
||||
// paddingTop: '8%'
|
||||
// }}
|
||||
// >
|
||||
// <p
|
||||
// className="font-poppins font-light"
|
||||
// style={{
|
||||
// fontSize: 'clamp(10px, 2.2vw, 16px)',
|
||||
// color: 'rgba(101, 84, 63, 0.4)',
|
||||
// letterSpacing: '0.5px',
|
||||
// lineHeight: '1.4',
|
||||
// textShadow: '0px 0.5px 1px rgba(0, 0, 0, 0.05)'
|
||||
// }}
|
||||
// >
|
||||
// For correspondence
|
||||
// </p>
|
||||
// </div>
|
||||
|
||||
{/* Realistic vertical divider with ink bleeding - Responsive */}
|
||||
<div
|
||||
className="absolute"
|
||||
style={{
|
||||
top: '10.6%',
|
||||
bottom: '10.6%',
|
||||
left: '43.1%',
|
||||
width: '2px',
|
||||
background: `
|
||||
linear-gradient(to bottom,
|
||||
transparent 0%,
|
||||
rgba(101, 84, 63, 0.4) 10%,
|
||||
rgba(101, 84, 63, 0.6) 30%,
|
||||
rgba(101, 84, 63, 0.8) 50%,
|
||||
rgba(101, 84, 63, 0.6) 70%,
|
||||
rgba(101, 84, 63, 0.4) 90%,
|
||||
transparent 100%
|
||||
)
|
||||
`,
|
||||
filter: 'blur(0.3px)'
|
||||
}}
|
||||
/>
|
||||
// {/* Realistic vertical divider with ink bleeding - Responsive */}
|
||||
// <div
|
||||
// className="absolute"
|
||||
// style={{
|
||||
// top: '10.6%',
|
||||
// bottom: '10.6%',
|
||||
// left: '43.1%',
|
||||
// width: '2px',
|
||||
// background: `
|
||||
// linear-gradient(to bottom,
|
||||
// transparent 0%,
|
||||
// rgba(101, 84, 63, 0.4) 10%,
|
||||
// rgba(101, 84, 63, 0.6) 30%,
|
||||
// rgba(101, 84, 63, 0.8) 50%,
|
||||
// rgba(101, 84, 63, 0.6) 70%,
|
||||
// rgba(101, 84, 63, 0.4) 90%,
|
||||
// transparent 100%
|
||||
// )
|
||||
// `,
|
||||
// filter: 'blur(0.3px)'
|
||||
// }}
|
||||
// />
|
||||
|
||||
{/* Ink bleed effect around divider - Responsive */}
|
||||
<div
|
||||
className="absolute opacity-20"
|
||||
style={{
|
||||
top: '10.6%',
|
||||
bottom: '10.6%',
|
||||
left: '42.8%',
|
||||
width: '6px',
|
||||
background: `
|
||||
linear-gradient(to bottom,
|
||||
transparent 0%,
|
||||
rgba(101, 84, 63, 0.1) 20%,
|
||||
rgba(101, 84, 63, 0.15) 50%,
|
||||
rgba(101, 84, 63, 0.1) 80%,
|
||||
transparent 100%
|
||||
)
|
||||
`,
|
||||
filter: 'blur(1px)'
|
||||
}}
|
||||
/>
|
||||
// {/* Ink bleed effect around divider - Responsive */}
|
||||
// <div
|
||||
// className="absolute opacity-20"
|
||||
// style={{
|
||||
// top: '10.6%',
|
||||
// bottom: '10.6%',
|
||||
// left: '42.8%',
|
||||
// width: '6px',
|
||||
// background: `
|
||||
// linear-gradient(to bottom,
|
||||
// transparent 0%,
|
||||
// rgba(101, 84, 63, 0.1) 20%,
|
||||
// rgba(101, 84, 63, 0.15) 50%,
|
||||
// rgba(101, 84, 63, 0.1) 80%,
|
||||
// transparent 100%
|
||||
// )
|
||||
// `,
|
||||
// filter: 'blur(1px)'
|
||||
// }}
|
||||
// />
|
||||
|
||||
{/* Right side content area - Responsive */}
|
||||
<div
|
||||
className="absolute pointer-events-none"
|
||||
style={{
|
||||
top: '10.6%',
|
||||
left: '47.2%',
|
||||
width: '47.2%',
|
||||
height: '78.7%'
|
||||
}}
|
||||
>
|
||||
{/* Editable Address Label Card - Responsive */}
|
||||
<EditableCard
|
||||
isEditing={editingCard === 'label'}
|
||||
onEdit={() => setEditingCard(editingCard === 'label' ? null : 'label')}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '4.1%',
|
||||
left: '0%',
|
||||
pointerEvents: 'auto',
|
||||
transform: 'rotate(-0.3deg)'
|
||||
}}
|
||||
editIcon={<Type className="w-3 h-3 text-gray-600" />}
|
||||
>
|
||||
<div
|
||||
className="px-2 py-1 rounded text-xs md:text-sm"
|
||||
style={{
|
||||
fontWeight: '600',
|
||||
letterSpacing: '2px',
|
||||
textTransform: 'uppercase',
|
||||
color: 'rgba(101, 84, 63, 0.8)',
|
||||
textShadow: '0px 1px 2px rgba(0, 0, 0, 0.1)'
|
||||
}}
|
||||
>
|
||||
{postcardData.addressLabel}
|
||||
</div>
|
||||
</EditableCard>
|
||||
// {/* Right side content area - Responsive */}
|
||||
// <div
|
||||
// className="absolute pointer-events-none"
|
||||
// style={{
|
||||
// top: '10.6%',
|
||||
// left: '47.2%',
|
||||
// width: '47.2%',
|
||||
// height: '78.7%'
|
||||
// }}
|
||||
// >
|
||||
// {/* Editable Address Label Card - Responsive */}
|
||||
// <EditableCard
|
||||
// isEditing={editingCard === 'label'}
|
||||
// onEdit={() => setEditingCard(editingCard === 'label' ? null : 'label')}
|
||||
// style={{
|
||||
// position: 'absolute',
|
||||
// top: '4.1%',
|
||||
// left: '0%',
|
||||
// pointerEvents: 'auto',
|
||||
// transform: 'rotate(-0.3deg)'
|
||||
// }}
|
||||
// editIcon={<Type className="w-3 h-3 text-gray-600" />}
|
||||
// >
|
||||
// <div
|
||||
// className="px-2 py-1 rounded text-xs md:text-sm"
|
||||
// style={{
|
||||
// fontWeight: '600',
|
||||
// letterSpacing: '2px',
|
||||
// textTransform: 'uppercase',
|
||||
// color: 'rgba(101, 84, 63, 0.8)',
|
||||
// textShadow: '0px 1px 2px rgba(0, 0, 0, 0.1)'
|
||||
// }}
|
||||
// >
|
||||
// {postcardData.addressLabel}
|
||||
// </div>
|
||||
// </EditableCard>
|
||||
|
||||
{/* Realistic horizontal ruled lines with ink bleeding - Responsive */}
|
||||
<div
|
||||
className="absolute pointer-events-none"
|
||||
style={{
|
||||
top: '14.9%',
|
||||
left: '0%',
|
||||
width: '94.1%',
|
||||
height: '59.5%'
|
||||
}}
|
||||
>
|
||||
{[...Array(9)].map((_, i) => (
|
||||
<div key={i} className="relative" style={{ marginBottom: '6.5%' }}>
|
||||
{/* Main line */}
|
||||
<div
|
||||
style={{
|
||||
height: '1px',
|
||||
width: i % 2 === 0 ? '100%' : '92%',
|
||||
background: `linear-gradient(to right,
|
||||
rgba(101, 84, 63, 0.3) 0%,
|
||||
rgba(101, 84, 63, 0.5) 20%,
|
||||
rgba(101, 84, 63, 0.6) 50%,
|
||||
rgba(101, 84, 63, 0.4) 80%,
|
||||
rgba(101, 84, 63, 0.2) 95%,
|
||||
transparent 100%
|
||||
)`,
|
||||
transform: `rotate(${(Math.random() - 0.5) * 0.5}deg)`
|
||||
}}
|
||||
/>
|
||||
{/* Ink bleed effect */}
|
||||
<div
|
||||
className="absolute top-0 left-0 opacity-30"
|
||||
style={{
|
||||
height: '3px',
|
||||
width: i % 2 === 0 ? '98%' : '90%',
|
||||
background: `linear-gradient(to right,
|
||||
rgba(101, 84, 63, 0.1) 0%,
|
||||
rgba(101, 84, 63, 0.2) 30%,
|
||||
rgba(101, 84, 63, 0.15) 70%,
|
||||
transparent 100%
|
||||
)`,
|
||||
filter: 'blur(1px)',
|
||||
transform: 'translateY(-1px)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
// {/* Realistic horizontal ruled lines with ink bleeding - Responsive */}
|
||||
// <div
|
||||
// className="absolute pointer-events-none"
|
||||
// style={{
|
||||
// top: '14.9%',
|
||||
// left: '0%',
|
||||
// width: '94.1%',
|
||||
// height: '59.5%'
|
||||
// }}
|
||||
// >
|
||||
// {[...Array(9)].map((_, i) => (
|
||||
// <div key={i} className="relative" style={{ marginBottom: '6.5%' }}>
|
||||
// {/* Main line */}
|
||||
// <div
|
||||
// style={{
|
||||
// height: '1px',
|
||||
// width: i % 2 === 0 ? '100%' : '92%',
|
||||
// background: `linear-gradient(to right,
|
||||
// rgba(101, 84, 63, 0.3) 0%,
|
||||
// rgba(101, 84, 63, 0.5) 20%,
|
||||
// rgba(101, 84, 63, 0.6) 50%,
|
||||
// rgba(101, 84, 63, 0.4) 80%,
|
||||
// rgba(101, 84, 63, 0.2) 95%,
|
||||
// transparent 100%
|
||||
// )`,
|
||||
// transform: `rotate(${(Math.random() - 0.5) * 0.5}deg)`
|
||||
// }}
|
||||
// />
|
||||
// {/* Ink bleed effect */}
|
||||
// <div
|
||||
// className="absolute top-0 left-0 opacity-30"
|
||||
// style={{
|
||||
// height: '3px',
|
||||
// width: i % 2 === 0 ? '98%' : '90%',
|
||||
// background: `linear-gradient(to right,
|
||||
// rgba(101, 84, 63, 0.1) 0%,
|
||||
// rgba(101, 84, 63, 0.2) 30%,
|
||||
// rgba(101, 84, 63, 0.15) 70%,
|
||||
// transparent 100%
|
||||
// )`,
|
||||
// filter: 'blur(1px)',
|
||||
// transform: 'translateY(-1px)'
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
|
||||
{/* Editable Message Card with Handwritten Animation - Responsive */}
|
||||
<EditableCard
|
||||
isEditing={editingCard === 'message'}
|
||||
onEdit={() => setEditingCard(editingCard === 'message' ? null : 'message')}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '17.6%',
|
||||
left: '4.4%',
|
||||
width: '88.2%',
|
||||
pointerEvents: 'auto',
|
||||
transform: 'rotate(-0.7deg)'
|
||||
}}
|
||||
editIcon={<Edit3 className="w-3 h-3 text-gray-600" />}
|
||||
>
|
||||
<div className="px-2 py-2 rounded leading-relaxed">
|
||||
{editingCard === 'message' ? (
|
||||
// Show static text when editing
|
||||
<div
|
||||
style={{
|
||||
fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
|
||||
fontSize: 'clamp(14px, 3.6vw, 26px)',
|
||||
lineHeight: '1.7',
|
||||
color: 'rgba(85, 70, 50, 0.9)',
|
||||
textShadow: `
|
||||
1px 1px 2px rgba(0, 0, 0, 0.08),
|
||||
0px 0px 3px rgba(101, 84, 63, 0.1)
|
||||
`,
|
||||
whiteSpace: 'pre-line',
|
||||
filter: 'contrast(110%) brightness(98%)'
|
||||
}}
|
||||
>
|
||||
{postcardData.message}
|
||||
</div>
|
||||
) : (
|
||||
// Show animated handwritten text when not editing
|
||||
<HandwrittenText
|
||||
text={postcardData.message}
|
||||
speed={6}
|
||||
startDelay={0}
|
||||
autoStart={false}
|
||||
onComplete={handwrittenControl.onComplete}
|
||||
style={{
|
||||
fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
|
||||
fontSize: 'clamp(14px, 3.6vw, 26px)',
|
||||
lineHeight: '1.7',
|
||||
color: 'rgba(85, 70, 50, 0.9)',
|
||||
textShadow: `
|
||||
1px 1px 2px rgba(0, 0, 0, 0.08),
|
||||
0px 0px 3px rgba(101, 84, 63, 0.1)
|
||||
`,
|
||||
filter: 'contrast(110%) brightness(98%)'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</EditableCard>
|
||||
// {/* Editable Message Card with Handwritten Animation - Responsive */}
|
||||
// <EditableCard
|
||||
// isEditing={editingCard === 'message'}
|
||||
// onEdit={() => setEditingCard(editingCard === 'message' ? null : 'message')}
|
||||
// style={{
|
||||
// position: 'absolute',
|
||||
// top: '17.6%',
|
||||
// left: '4.4%',
|
||||
// width: '88.2%',
|
||||
// pointerEvents: 'auto',
|
||||
// transform: 'rotate(-0.7deg)'
|
||||
// }}
|
||||
// editIcon={<Edit3 className="w-3 h-3 text-gray-600" />}
|
||||
// >
|
||||
// <div className="px-2 py-2 rounded leading-relaxed">
|
||||
// {editingCard === 'message' ? (
|
||||
// // Show static text when editing
|
||||
// <div
|
||||
// style={{
|
||||
// fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
|
||||
// fontSize: 'clamp(14px, 3.6vw, 26px)',
|
||||
// lineHeight: '1.7',
|
||||
// color: 'rgba(85, 70, 50, 0.9)',
|
||||
// textShadow: `
|
||||
// 1px 1px 2px rgba(0, 0, 0, 0.08),
|
||||
// 0px 0px 3px rgba(101, 84, 63, 0.1)
|
||||
// `,
|
||||
// whiteSpace: 'pre-line',
|
||||
// filter: 'contrast(110%) brightness(98%)'
|
||||
// }}
|
||||
// >
|
||||
// {postcardData.message}
|
||||
// </div>
|
||||
// ) : (
|
||||
// // Show animated handwritten text when not editing
|
||||
// <HandwrittenText
|
||||
// text={postcardData.message}
|
||||
// speed={6}
|
||||
// startDelay={0}
|
||||
// autoStart={false}
|
||||
// onComplete={handwrittenControl.onComplete}
|
||||
// style={{
|
||||
// fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
|
||||
// fontSize: 'clamp(14px, 3.6vw, 26px)',
|
||||
// lineHeight: '1.7',
|
||||
// color: 'rgba(85, 70, 50, 0.9)',
|
||||
// textShadow: `
|
||||
// 1px 1px 2px rgba(0, 0, 0, 0.08),
|
||||
// 0px 0px 3px rgba(101, 84, 63, 0.1)
|
||||
// `,
|
||||
// filter: 'contrast(110%) brightness(98%)'
|
||||
// }}
|
||||
// />
|
||||
// )}
|
||||
// </div>
|
||||
// </EditableCard>
|
||||
|
||||
{/* Editable Date Card - Responsive */}
|
||||
<EditableCard
|
||||
isEditing={editingCard === 'date'}
|
||||
onEdit={() => setEditingCard(editingCard === 'date' ? null : 'date')}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '16.2%',
|
||||
right: '7.4%',
|
||||
pointerEvents: 'auto',
|
||||
transform: 'rotate(-1.5deg)'
|
||||
}}
|
||||
editIcon={<Calendar className="w-3 h-3 text-gray-600" />}
|
||||
>
|
||||
<div
|
||||
className="px-2 py-1 rounded text-xs"
|
||||
style={{
|
||||
fontWeight: '500',
|
||||
letterSpacing: '1px',
|
||||
color: 'rgba(101, 84, 63, 0.7)',
|
||||
textShadow: '0px 1px 1px rgba(0, 0, 0, 0.05)',
|
||||
fontFamily: "'Poppins', sans-serif"
|
||||
}}
|
||||
>
|
||||
{postcardData.date}
|
||||
</div>
|
||||
</EditableCard>
|
||||
</div>
|
||||
// {/* Editable Date Card - Responsive */}
|
||||
// <EditableCard
|
||||
// isEditing={editingCard === 'date'}
|
||||
// onEdit={() => setEditingCard(editingCard === 'date' ? null : 'date')}
|
||||
// style={{
|
||||
// position: 'absolute',
|
||||
// bottom: '16.2%',
|
||||
// right: '7.4%',
|
||||
// pointerEvents: 'auto',
|
||||
// transform: 'rotate(-1.5deg)'
|
||||
// }}
|
||||
// editIcon={<Calendar className="w-3 h-3 text-gray-600" />}
|
||||
// >
|
||||
// <div
|
||||
// className="px-2 py-1 rounded text-xs"
|
||||
// style={{
|
||||
// fontWeight: '500',
|
||||
// letterSpacing: '1px',
|
||||
// color: 'rgba(101, 84, 63, 0.7)',
|
||||
// textShadow: '0px 1px 1px rgba(0, 0, 0, 0.05)',
|
||||
// fontFamily: "'Poppins', sans-serif"
|
||||
// }}
|
||||
// >
|
||||
// {postcardData.date}
|
||||
// </div>
|
||||
// </EditableCard>
|
||||
// </div>
|
||||
|
||||
{/* Ultra-realistic stamp - Responsive */}
|
||||
<EditableCard
|
||||
isEditing={editingCard === 'stamp'}
|
||||
onEdit={() => setEditingCard(editingCard === 'stamp' ? null : 'stamp')}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '12.5%',
|
||||
height: '19.1%',
|
||||
right: '3.5%',
|
||||
bottom: '5.3%',
|
||||
transform: 'rotate(-12deg)'
|
||||
}}
|
||||
editIcon={<Edit3 className="w-3 h-3 text-gray-600" />}
|
||||
>
|
||||
<div
|
||||
className="w-full h-full border-2 border-dashed rounded-full flex items-center justify-center relative"
|
||||
style={{
|
||||
borderColor: 'rgba(139, 115, 85, 0.8)',
|
||||
background: `
|
||||
radial-gradient(circle at 30% 30%, rgba(220, 190, 150, 0.95) 0%, rgba(200, 170, 130, 0.9) 40%, rgba(180, 150, 110, 0.85) 100%),
|
||||
linear-gradient(135deg, rgba(240, 220, 180, 0.3) 0%, transparent 50%)
|
||||
`,
|
||||
boxShadow: `
|
||||
inset 0px 2px 8px rgba(0, 0, 0, 0.25),
|
||||
inset 0px -1px 4px rgba(255, 255, 255, 0.2),
|
||||
0px 4px 12px rgba(0, 0, 0, 0.15)
|
||||
`
|
||||
}}
|
||||
>
|
||||
{/* Stamp aging and wear */}
|
||||
<div
|
||||
className="absolute inset-0 rounded-full pointer-events-none"
|
||||
style={{
|
||||
background: `
|
||||
radial-gradient(circle at 70% 20%, rgba(160, 130, 90, 0.3) 0%, transparent 40%),
|
||||
radial-gradient(circle at 20% 80%, rgba(140, 110, 70, 0.2) 0%, transparent 35%)
|
||||
`,
|
||||
mixBlendMode: 'multiply'
|
||||
}}
|
||||
/>
|
||||
// {/* Ultra-realistic stamp - Responsive */}
|
||||
// <EditableCard
|
||||
// isEditing={editingCard === 'stamp'}
|
||||
// onEdit={() => setEditingCard(editingCard === 'stamp' ? null : 'stamp')}
|
||||
// style={{
|
||||
// position: 'absolute',
|
||||
// width: '12.5%',
|
||||
// height: '19.1%',
|
||||
// right: '3.5%',
|
||||
// bottom: '5.3%',
|
||||
// transform: 'rotate(-12deg)'
|
||||
// }}
|
||||
// editIcon={<Edit3 className="w-3 h-3 text-gray-600" />}
|
||||
// >
|
||||
// <div
|
||||
// className="w-full h-full border-2 border-dashed rounded-full flex items-center justify-center relative"
|
||||
// style={{
|
||||
// borderColor: 'rgba(139, 115, 85, 0.8)',
|
||||
// background: `
|
||||
// radial-gradient(circle at 30% 30%, rgba(220, 190, 150, 0.95) 0%, rgba(200, 170, 130, 0.9) 40%, rgba(180, 150, 110, 0.85) 100%),
|
||||
// linear-gradient(135deg, rgba(240, 220, 180, 0.3) 0%, transparent 50%)
|
||||
// `,
|
||||
// boxShadow: `
|
||||
// inset 0px 2px 8px rgba(0, 0, 0, 0.25),
|
||||
// inset 0px -1px 4px rgba(255, 255, 255, 0.2),
|
||||
// 0px 4px 12px rgba(0, 0, 0, 0.15)
|
||||
// `
|
||||
// }}
|
||||
// >
|
||||
// {/* Stamp aging and wear */}
|
||||
// <div
|
||||
// className="absolute inset-0 rounded-full pointer-events-none"
|
||||
// style={{
|
||||
// background: `
|
||||
// radial-gradient(circle at 70% 20%, rgba(160, 130, 90, 0.3) 0%, transparent 40%),
|
||||
// radial-gradient(circle at 20% 80%, rgba(140, 110, 70, 0.2) 0%, transparent 35%)
|
||||
// `,
|
||||
// mixBlendMode: 'multiply'
|
||||
// }}
|
||||
// />
|
||||
|
||||
{/* Stamp inner details */}
|
||||
<div className="absolute inset-3 border border-amber-800/50 rounded-full" />
|
||||
<div className="absolute inset-5 border border-amber-800/30 rounded-full" />
|
||||
// {/* Stamp inner details */}
|
||||
// <div className="absolute inset-3 border border-amber-800/50 rounded-full" />
|
||||
// <div className="absolute inset-5 border border-amber-800/30 rounded-full" />
|
||||
|
||||
{/* Stamp text */}
|
||||
<div className="text-center leading-tight z-10" style={{ color: 'rgba(101, 84, 63, 0.9)' }}>
|
||||
<div style={{ fontSize: 'clamp(6px, 1.25vw, 9px)', fontWeight: '700', letterSpacing: '1px' }}>
|
||||
TRAVEL
|
||||
</div>
|
||||
<div style={{ fontSize: 'clamp(5px, 0.97vw, 7px)', fontWeight: '600', marginTop: '2px', letterSpacing: '0.5px' }}>
|
||||
MEMORIES
|
||||
</div>
|
||||
<div style={{ fontSize: 'clamp(5px, 0.97vw, 7px)', fontWeight: '500', marginTop: '1px' }}>
|
||||
2024
|
||||
</div>
|
||||
</div>
|
||||
// {/* Stamp text */}
|
||||
// <div className="text-center leading-tight z-10" style={{ color: 'rgba(101, 84, 63, 0.9)' }}>
|
||||
// <div style={{ fontSize: 'clamp(6px, 1.25vw, 9px)', fontWeight: '700', letterSpacing: '1px' }}>
|
||||
// TRAVEL
|
||||
// </div>
|
||||
// <div style={{ fontSize: 'clamp(5px, 0.97vw, 7px)', fontWeight: '600', marginTop: '2px', letterSpacing: '0.5px' }}>
|
||||
// MEMORIES
|
||||
// </div>
|
||||
// <div style={{ fontSize: 'clamp(5px, 0.97vw, 7px)', fontWeight: '500', marginTop: '1px' }}>
|
||||
// 2024
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
{/* Stamp perforations with realistic variations */}
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full"
|
||||
style={{
|
||||
width: '2px',
|
||||
height: '2px',
|
||||
backgroundColor: 'rgba(101, 84, 63, 0.4)',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: `translate(-50%, -50%) rotate(${i * 18}deg) translateY(-42px)`,
|
||||
opacity: Math.random() > 0.1 ? 1 : 0.3 // Random missing perforations
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
// {/* Stamp perforations with realistic variations */}
|
||||
// {[...Array(20)].map((_, i) => (
|
||||
// <div
|
||||
// key={i}
|
||||
// className="absolute rounded-full"
|
||||
// style={{
|
||||
// width: '2px',
|
||||
// height: '2px',
|
||||
// backgroundColor: 'rgba(101, 84, 63, 0.4)',
|
||||
// top: '50%',
|
||||
// left: '50%',
|
||||
// transform: `translate(-50%, -50%) rotate(${i * 18}deg) translateY(-42px)`,
|
||||
// opacity: Math.random() > 0.1 ? 1 : 0.3 // Random missing perforations
|
||||
// }}
|
||||
// />
|
||||
// ))}
|
||||
|
||||
{/* Stamp smudge mark */}
|
||||
<div
|
||||
className="absolute w-3 h-2 opacity-25"
|
||||
style={{
|
||||
background: 'radial-gradient(ellipse, rgba(101, 84, 63, 0.4) 0%, transparent 70%)',
|
||||
bottom: '15%',
|
||||
right: '20%',
|
||||
transform: 'rotate(20deg)',
|
||||
filter: 'blur(0.5px)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</EditableCard>
|
||||
// {/* Stamp smudge mark */}
|
||||
// <div
|
||||
// className="absolute w-3 h-2 opacity-25"
|
||||
// style={{
|
||||
// background: 'radial-gradient(ellipse, rgba(101, 84, 63, 0.4) 0%, transparent 70%)',
|
||||
// bottom: '15%',
|
||||
// right: '20%',
|
||||
// transform: 'rotate(20deg)',
|
||||
// filter: 'blur(0.5px)'
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
// </EditableCard>
|
||||
|
||||
{/* Additional realistic aging effects */}
|
||||
<div
|
||||
className="absolute w-3 h-1 opacity-15"
|
||||
style={{
|
||||
background: 'linear-gradient(45deg, rgba(120, 100, 70, 0.3), transparent)',
|
||||
top: '20%',
|
||||
left: '60%',
|
||||
transform: 'rotate(45deg)',
|
||||
filter: 'blur(0.5px)'
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
// {/* Additional realistic aging effects */}
|
||||
// <div
|
||||
// className="absolute w-3 h-1 opacity-15"
|
||||
// style={{
|
||||
// background: 'linear-gradient(45deg, rgba(120, 100, 70, 0.3), transparent)',
|
||||
// top: '20%',
|
||||
// left: '60%',
|
||||
// transform: 'rotate(45deg)',
|
||||
// filter: 'blur(0.5px)'
|
||||
// }}
|
||||
// />
|
||||
// </motion.div>
|
||||
// );
|
||||
// };
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} className="py-12 md:py-16 lg:py-20 bg-white relative overflow-hidden">
|
||||
@@ -700,7 +700,7 @@ export function CustomPostcards() {
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl text-gray-900 mb-6">
|
||||
<span className="font-light">The Only Card That Sends Your</span>
|
||||
<span className="block">
|
||||
<span className="font-bold text-warm-coral italic">
|
||||
<span className="font-bold text-warm-coral italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pr-2">
|
||||
Holiday
|
||||
</span>{' '}
|
||||
<span className="font-normal">Home.</span>
|
||||
@@ -783,7 +783,8 @@ export function CustomPostcards() {
|
||||
WebkitBackfaceVisibility: "hidden"
|
||||
}}
|
||||
>
|
||||
<PostcardFrame />
|
||||
{/* <PostcardFrame /> */}
|
||||
<img src={front} alt="Postcard Image" />
|
||||
|
||||
{/* Subtle glow effect */}
|
||||
<motion.div
|
||||
|
||||
@@ -82,7 +82,7 @@ export function HowItWorks() {
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-4">
|
||||
<span className="font-light">How Your</span>{' '}
|
||||
{!location.pathname.includes("landing") &&
|
||||
<span className="font-normal">Melbourne</span>
|
||||
<span className="font-normal">Melbourne </span>
|
||||
}
|
||||
<span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic pr-2">City Card</span>{' '}
|
||||
<span className="font-light">Works.</span>
|
||||
|
||||
@@ -13,6 +13,8 @@ import { CustomPostcards } from './CustomPostcards';
|
||||
import { HowItWorks } from './HowItWorks';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import { Layout } from '../Layout';
|
||||
import front from '../assets/front.jpg'
|
||||
|
||||
|
||||
interface User {
|
||||
email: string;
|
||||
@@ -73,165 +75,155 @@ export function PostCardsPage({
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Navbar */}
|
||||
<Layout
|
||||
activeCity="Landingpage"
|
||||
onSignInClick={onSignInClick}
|
||||
onSignOutClick={onSignOutClick}
|
||||
user={user}
|
||||
>
|
||||
<Layout
|
||||
activeCity="Landingpage"
|
||||
onSignInClick={onSignInClick}
|
||||
onSignOutClick={onSignOutClick}
|
||||
user={user}
|
||||
>
|
||||
|
||||
{/* Sub Navbar */}
|
||||
{/* <SubNavbar
|
||||
activeTab="postcards"
|
||||
onCityCardsClick={onCityCardsClick}
|
||||
onMagicItineraryClick={onMagicItineraryClick}
|
||||
onPostCardsClick={onPostCardsClick}
|
||||
onOffersClick={onOffersClick}
|
||||
onEsimsClick={onEsimsClick}
|
||||
onHotelDiscountsClick={onHotelDiscountsClick}
|
||||
/> */}
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-52 pb-20 overflow-hidden">
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background"></div>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-52 pb-20 overflow-hidden">
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background"></div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<motion.div
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
|
||||
<span className="font-light">Create Beautiful</span>{' '}
|
||||
<span className="font-bold inline-block italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pr-2">
|
||||
Custom Postcards
|
||||
</span>
|
||||
</h1>
|
||||
<p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
Transform your travel memories into stunning, personalized postcards with authentic handwritten messages.
|
||||
Share your journey in a way that feels truly personal and meaningful.
|
||||
</p>
|
||||
<Button
|
||||
<div className="flex mx-auto items-center px-4 relative z-10">
|
||||
<motion.div
|
||||
className="max-w-2xl mx-auto text-left"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
|
||||
<span className="font-light">Create Beautiful</span>{' '}
|
||||
<span className="font-bold inline-block italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pr-2">
|
||||
Custom Postcards
|
||||
</span>
|
||||
</h1>
|
||||
<p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
Transform your travel memories into stunning, personalized postcards with authentic handwritten messages.
|
||||
Share your journey in a way that feels truly personal and meaningful.
|
||||
</p>
|
||||
{/* <Button
|
||||
onClick={onCheckoutClick}
|
||||
className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold text-lg"
|
||||
>
|
||||
Start Creating Postcards
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
|
||||
<div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
|
||||
</section>
|
||||
|
||||
{/* Reuse CustomPostcards Component */}
|
||||
<CustomPostcards />
|
||||
|
||||
{/* How It Works Section */}
|
||||
<HowItWorks />
|
||||
|
||||
{/* Features Section */}
|
||||
|
||||
|
||||
{/* Gallery Section */}
|
||||
<section className="py-16 bg-gradient-to-br from-amber-50 to-orange-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h2 className="font-merchant text-3xl mb-4">Postcard Gallery</h2>
|
||||
<p className="text-gray-600 font-poppins max-w-2xl mx-auto">
|
||||
Get inspired by beautiful postcards created by our community of travelers
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
|
||||
title: 'Tropical Paradise',
|
||||
message: 'Greetings from paradise! The beaches here are absolutely breathtaking...',
|
||||
location: 'Maldives'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=400&h=600&fit=crop',
|
||||
title: 'City Adventures',
|
||||
message: 'Having the most amazing time exploring this incredible city...',
|
||||
location: 'Paris, France'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
|
||||
title: 'Mountain Views',
|
||||
message: 'The views from up here are simply unbelievable. Wish you were here...',
|
||||
location: 'Swiss Alps'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
|
||||
title: 'Cultural Journey',
|
||||
message: 'Immersing myself in the rich culture and history of this amazing place...',
|
||||
location: 'Kyoto, Japan'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
|
||||
title: 'Safari Adventure',
|
||||
message: 'Just saw the most incredible wildlife! This experience is unforgettable...',
|
||||
location: 'Kenya, Africa'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
|
||||
title: 'Island Escape',
|
||||
message: 'Living the island life and loving every moment of this peaceful retreat...',
|
||||
location: 'Santorini, Greece'
|
||||
}
|
||||
].map((postcard, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
|
||||
>
|
||||
<Card className="hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
|
||||
<CardContent className="p-0">
|
||||
<div className="relative">
|
||||
<ImageWithFallback
|
||||
src={postcard.image}
|
||||
alt={postcard.title}
|
||||
className="w-full h-48 object-cover rounded-t-lg"
|
||||
/>
|
||||
<Badge className="absolute top-3 left-3 bg-white/90 text-gray-700">
|
||||
{postcard.location}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3 className="font-merchant text-lg mb-2">{postcard.title}</h3>
|
||||
<p className="text-gray-600 font-poppins text-sm italic">"{postcard.message}"</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</Button> */}
|
||||
</motion.div>
|
||||
< img src={front} alt='Postcard image' />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Ready to Explore Melbourne Section */}
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
|
||||
<div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
|
||||
</section>
|
||||
|
||||
{/* How It Works Section */}
|
||||
<HowItWorks />
|
||||
|
||||
{/* Reuse CustomPostcards Component */}
|
||||
<CustomPostcards />
|
||||
|
||||
{/* Features Section */}
|
||||
|
||||
|
||||
{/* Gallery Section */}
|
||||
<section className="py-16 bg-gradient-to-br from-amber-50 to-orange-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h2 className="font-merchant text-3xl mb-4">Postcard Gallery</h2>
|
||||
<p className="text-gray-600 font-poppins max-w-2xl mx-auto">
|
||||
Get inspired by beautiful postcards created by our community of travelers
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
|
||||
title: 'Tropical Paradise',
|
||||
message: 'Greetings from paradise! The beaches here are absolutely breathtaking...',
|
||||
location: 'Maldives'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=400&h=600&fit=crop',
|
||||
title: 'City Adventures',
|
||||
message: 'Having the most amazing time exploring this incredible city...',
|
||||
location: 'Paris, France'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
|
||||
title: 'Mountain Views',
|
||||
message: 'The views from up here are simply unbelievable. Wish you were here...',
|
||||
location: 'Swiss Alps'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
|
||||
title: 'Cultural Journey',
|
||||
message: 'Immersing myself in the rich culture and history of this amazing place...',
|
||||
location: 'Kyoto, Japan'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
|
||||
title: 'Safari Adventure',
|
||||
message: 'Just saw the most incredible wildlife! This experience is unforgettable...',
|
||||
location: 'Kenya, Africa'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
|
||||
title: 'Island Escape',
|
||||
message: 'Living the island life and loving every moment of this peaceful retreat...',
|
||||
location: 'Santorini, Greece'
|
||||
}
|
||||
].map((postcard, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
|
||||
>
|
||||
<Card className="hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
|
||||
<CardContent className="p-0">
|
||||
<div className="relative">
|
||||
<ImageWithFallback
|
||||
src={postcard.image}
|
||||
alt={postcard.title}
|
||||
className="w-full h-48 object-cover rounded-t-lg"
|
||||
/>
|
||||
<Badge className="absolute top-3 left-3 bg-white/90 text-gray-700">
|
||||
{postcard.location}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3 className="font-merchant text-lg mb-2">{postcard.title}</h3>
|
||||
<p className="text-gray-600 font-poppins text-sm italic">"{postcard.message}"</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Ready to Explore Melbourne Section */}
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Mobile App Section */}
|
||||
<MobileAppSection />
|
||||
{/* Customer Reviews */}
|
||||
<EnhancedTestimonials />
|
||||
|
||||
{/* Mobile App Section */}
|
||||
<MobileAppSection />
|
||||
|
||||
{/* Customer Reviews */}
|
||||
<EnhancedTestimonials />
|
||||
|
||||
|
||||
</Layout>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user