[V0_FILE]json:file="package.json" isMerged="true" { "name": "feature-cards-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "^18", "react-dom": "^18", "next": "15.0.0", "framer-motion": "^11.0.0", "lucide-react": "^0.400.0", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "tailwindcss": "^4.1.9", "postcss": "8.5.6" } } [V0_FILE]png:file="public/images/purpose-built.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/f%3Dauto%2Cdpr%3D2%2Cq%3D95%2Cfit%3Dscale-down%2Cmetadata%3Dnone-PNuj1KNlqqZBc8tVI8VzEIGHSWjnmZ.png" isMerged="true" [V0_FILE]png:file="public/images/move-fast.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/f%3Dauto%2Cdpr%3D2%2Cq%3D95%2Cfit%3Dscale-down%2Cmetadata%3Dnone%20%282%29-i38scJ97AAul05zPNBtdmVeGyyl0DD.png" isMerged="true" [V0_FILE]png:file="public/images/crafted-perfection.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/f%3Dauto%2Cdpr%3D2%2Cq%3D95%2Cfit%3Dscale-down%2Cmetadata%3Dnone%20%281%29-zrqwif7mhHAzgdMc8QEiEFJa2l5gFP.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { X, Plus } from "lucide-react" const features = [ { id: 1, title: "Purpose-built for product development", shortDescription: "Built specifically for modern product teams", fullContent: { paragraphs: [ "Linear was developed with a specific purpose: to empower product teams to do their best work. Every aspect is intentionally designed to help teams focus on what they do best: Planning, building, and shipping great products.", "Because of its fit-to-purpose design, Linear is incredibly easy to use, but grows more powerful as you scale. It's principled where it needs to be, but provides enough flexibility to adapt to your team's unique way of working.", "We believe that this approach creates a better way to build products. And more than 15,000 product teams around the globe – from early-stage startups to public companies – agree.", ], testimonial: "We'd tried many tools before Linear but none of them felt like they were made for the way we work. Linear was a breath of fresh air - speedy, snappy, and a pleasure to use.", company: "Vercel", }, illustration: (

Purpose-built for product development illustration

), }, { id: 2, title: "Designed to move fast", shortDescription: "Built for speed and efficiency", fullContent: { paragraphs: [ "Speed is at the core of Linear's design philosophy. Every interaction, every animation, every feature is optimized to help teams move faster without sacrificing quality or thoughtfulness.", "From sub-50ms response times to keyboard shortcuts for every action, Linear eliminates friction at every step. The interface is designed to get out of your way so you can focus on what matters most.", "Fast doesn't just mean quick loading times – it means faster decision making, faster iteration cycles, and ultimately faster time to market for your products.", ], testimonial: "Linear's speed transformed how our team works. What used to take multiple clicks and page loads now happens instantly. It's like the difference between walking and flying.", company: "Stripe", }, illustration: (

), }, { id: 3, title: "Crafted to perfection", shortDescription: "Every detail meticulously designed", fullContent: { paragraphs: [ "Perfection isn't about adding more features – it's about refining every detail until the experience feels effortless. Linear is crafted with an obsessive attention to detail that you can feel in every interaction.", "From the carefully tuned animations to the thoughtfully designed information hierarchy, every element serves a purpose. The interface adapts to your workflow, not the other way around.", "This commitment to craft creates software that doesn't just work well – it feels good to use. When tools are this well-designed, work becomes more enjoyable and teams naturally perform better.", ], testimonial: "The attention to detail in Linear is incredible. It's not just functional – it's beautiful. Using it daily feels like working with a piece of art that happens to be incredibly powerful.", company: "Notion", }, illustration: (

), }, ] export default function Home() { const [selectedFeature, setSelectedFeature] = useState(null) return (

{/* Header Section */}

{/* Feature Cards */}

{features.map((feature) => (

{" "} {/* increased margin from mx-3.5 to mx-6 for 50px width reduction */} {selectedFeature !== feature.id && ( setSelectedFeature(feature.id)} transition={{ type: "spring", stiffness: 120, damping: 20, duration: 1.2, }} > {feature.illustration}

{feature.title}

)}

))}

{selectedFeature && ( <> setSelectedFeature(null)} />

e.stopPropagation()} transition={{ type: "spring", stiffness: 120, damping: 20, duration: 1.2, }} > {/* Close button */} setSelectedFeature(null)} className="absolute top-6 right-6 w-8 h-8 rounded-full border border-[#404040] flex items-center justify-center hover:border-[#555555] transition-colors" > {features.find((f) => f.id === selectedFeature) && ( <> {`${features.find((f)

f.id === selectedFeature)?.title} illustration`} className="w-full h-full object-contain" />

{features.find((f) => f.id === selectedFeature)?.title}

{/* Additional content that appears only in modal */} {features .find((f) => f.id === selectedFeature) ?.fullContent.paragraphs.map((paragraph, index) => (

{paragraph}

))} {/* Testimonial */}

"{features.find((f) => f.id === selectedFeature)?.fullContent.testimonial}"

{features.find((f) => f.id === selectedFeature)?.fullContent.company}

)}

) }

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This