https://web-whisperer-96.lovable.app/assets/HowItWorks-CAvkfVOM.js

1import{h as m,r as n,j as e,L as x,P as d,S as p,Z as h,d as o,B as c,D as u}from"./index-B3_8eyoK.js";import{P as g}from"./palette-CoBDbV3-.js";import{F as f}from"./file-text-DIeno_ZK.js";import{P as y}from"./package-Dh73MmEs.js";/**
2 * @license lucide-react v0.462.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const b=m("RefreshCcw",[["path",{d:"M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"14sxne"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}],["path",{d:"M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16",key:"1hlbsb"}],["path",{d:"M16 16h5v5",key:"ccwih5"}]]),j=(s=.1)=>{const t=n.useRef(null),[r,a]=n.useState(!1);return n.useEffect(()=>{const i=new IntersectionObserver(([l])=>{l.isIntersecting&&(a(!0),i.unobserve(l.target))},{threshold:s});return t.current&&i.observe(t.current),()=>i.disconnect()},[s]),{ref:t,isVisible:r}},w="/assets/step-1-choose-design-DlIOn1GY.png",N="/assets/step-2-write-message-BQwmW3x0.png",v="/assets/step-3-handwritten-CMrjkJ4a.png",k="/assets/step-4-packaged-EwieRwAJ.png",P="/assets/step-5-delivered-CD6D8Y6S.png",S=[{step:"01",icon:g,title:"Choose Your Card Design",description:"Browse our curated collection of beautiful card designs for every occasion. From professional thank-you notes to heartfelt birthday cards, we have options that fit your style and message.",image:w},{step:"02",icon:f,title:"Write Your Message",description:"Type your personal message into our easy-to-use editor. You can customize the font style to match different handwriting personalities. Preview exactly how your card will look before sending.",image:N},{step:"03",icon:d,title:"We Write It By Hand",description:"Our advanced writing technology uses real pens with actual ink to write your message on premium card stock. Each letter is formed with natural pen pressure and flow — not printed.",image:v},{step:"04",icon:y,title:"Addressed & Packaged",description:"Your card is placed in a matching envelope, addressed in the same handwritten style, and prepared for mailing. Every detail maintains the authentic handwritten feel.",image:k},{step:"05",icon:u,title:"Delivered With Care",description:"Cards ship within 1-2 business days via USPS. Recipients receive a genuine handwritten card that stands out in their mailbox and makes a lasting impression.",image:P}],I=({item:s,index:t})=>{const{ref:r,isVisible:a}=j(.2);return e.jsxs("div",{ref:r,className:`relative transition-all duration-700 ease-out ${a?"opacity-100 translate-y-0":"opacity-0 translate-y-12"}`,style:{transitionDelay:`${t*100}ms`},children:[e.jsx("div",{className:`hidden md:flex absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 transition-transform duration-500 ${a?"scale-100":"scale-0"}`,style:{transitionDelay:`${t*100+300}ms`},children:e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"w-4 h-4 bg-primary rounded-full ring-4 ring-card"}),e.jsx("div",{className:"absolute inset-0 w-4 h-4 bg-primary rounded-full animate-ping opacity-30"}),e.jsx("div",{className:"absolute -inset-1 bg-primary/20 rounded-full blur-sm animate-pulse"})]})}),e.jsxs("div",{className:`flex flex-col md:flex-row gap-6 md:gap-10 items-center ${t%2===1?"md:flex-row-reverse":""}`,children:[e.jsx("div",{className:"flex-shrink-0 w-40 h-40 md:w-48 md:h-48 md:w-[calc(50%-2.5rem)]",children:e.jsx("img",{src:s.image,alt:s.title,loading:"lazy",className:"w-full h-full object-contain rounded-lg",style:{transform:"translateZ(0)"}})}),e.jsxs("div",{className:"flex-1 text-center md:text-left md:w-[calc(50%-2.5rem)]",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-2 justify-center md:justify-start",children:[e.jsx("div",{className:"w-10 h-10 bg-primary text-background rounded-full flex items-center justify-center",children:e.jsx("span",{className:"text-sm font-bold",children:s.step})}),e.jsx("h3",{className:"text-xl font-semibold",children:s.title})]}),e.jsx("p",{className:"text-muted-foreground",children:s.description})]})]})]})},W=()=>e.jsxs(x,{children:[e.jsx("section",{className:"py-12 md:py-16",children:e.jsx("div",{className:"container mx-auto px-4",children:e.jsxs("div",{className:"max-w-3xl mx-auto text-center",children:[e.jsxs("h1",{className:"text-4xl md:text-5xl font-display font-bold mb-4 tracking-[-0.08em]",children:["How ",e.jsx("span",{className:"text-primary",children:"Pen&Cards"})," Works"]}),e.jsx("p",{className:"text-lg text-muted-foreground",children:"From your message to their mailbox — see how we bring the personal touch of handwritten cards to scale."})]})})}),e.jsx("section",{className:"py-12 bg-card border-y border-border",children:e.jsx("div",{className:"container mx-auto px-4",children:e.jsx("div",{className:"max-w-4xl mx-auto",children:e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"hidden md:block absolute left-1/2 top-0 bottom-0 w-0.5 -translate-x-1/2 bg-gradient-to-b from-primary/20 via-primary to-primary/20"}),e.jsx("div",{className:"space-y-8",children:S.map((s,t)=>e.jsx(I,{item:s,index:t},s.step))})]})})})}),e.jsx("section",{className:"py-12",children:e.jsxs("div",{className:"container mx-auto px-4",children:[e.jsxs("div",{className:"text-center mb-8",children:[e.jsx("h2",{className:"text-3xl font-display font-bold mb-4 tracking-[-0.08em]",children:"Real Pen Technology"}),e.jsx("p",{className:"text-muted-foreground max-w-2xl mx-auto",children:"Our proprietary writing system uses actual ballpoint pens and ink to create authentic handwritten cards — not printed fonts designed to look handwritten."})]}),e.jsx("div",{className:"grid md:grid-cols-3 gap-8 max-w-4xl mx-auto",children:[{icon:d,title:"Real Ink",description:"Genuine ballpoint pen ink that you can feel on the paper."},{icon:b,title:"Natural Variation",description:"Subtle variations in pressure and stroke, just like human writing."},{icon:p,title:"Premium Paper",description:"High-quality card stock that holds ink beautifully."}].map(s=>e.jsxs("div",{className:"bg-card rounded-lg p-6 border border-border text-center",children:[e.jsx(s.icon,{className:"w-10 h-10 mx-auto mb-4 text-primary"}),e.jsx("h3",{className:"font-semibold mb-2",children:s.title}),e.jsx("p",{className:"text-sm text-muted-foreground",children:s.description})]},s.title))})]})}),e.jsx("section",{className:"py-12 bg-card border-y border-border",children:e.jsxs("div",{className:"container mx-auto px-4",children:[e.jsxs("div",{className:"text-center mb-8",children:[e.jsx("h2",{className:"text-3xl font-display font-bold mb-4 tracking-[-0.08em]",children:"Powerful Integrations"}),e.jsx("p",{className:"text-muted-foreground max-w-2xl mx-auto",children:"Connect Pen&Cards with the tools you already use to automate your handwritten card sending."})]}),e.jsx("div",{className:"flex flex-wrap justify-center gap-6",children:["Zapier","Salesforce","HubSpot","Shopify","Mailchimp","API Access"].map(s=>e.jsxs("div",{className:"bg-background rounded-lg px-6 py-4 border border-border flex items-center gap-2",children:[e.jsx(h,{className:"w-5 h-5 text-primary"}),e.jsx("span",{className:"font-medium",children:s})]},s))})]})}),e.jsx("section",{className:"py-12",children:e.jsx("div",{className:"container mx-auto px-4",children:e.jsxs("div",{className:"max-w-3xl mx-auto text-center",children:[e.jsx("h2",{className:"text-3xl font-display font-bold mb-4 tracking-[-0.08em]",children:"Ready to Get Started?"}),e.jsx("p",{className:"text-muted-foreground mb-8",children:"Send your first handwritten card today and see the difference for yourself."}),e.jsxs("div",{className:"flex flex-col sm:flex-row gap-4 justify-center",children:[e.jsx(o,{to:"/signup",children:e.jsx(c,{size:"lg",className:"text-lg px-8",children:"Start Sending Cards"})}),e.jsx(o,{to:"/pricing",children:e.jsx(c,{size:"lg",variant:"outline",className:"text-lg px-8",children:"View Pricing"})})]})]})})})]});

6export{W as default};