Glassmorphism Launch Timeline

1"use client";
2 
3import { motion, type Variants } from "framer-motion";
4 
5import { Badge } from "@/components/ui/badge";
6import { Button } from "@/components/ui/button";
7import { CalendarDays, Compass, Flag, Rocket, Sparkles } from "lucide-react";
8 
9const steps = [
10  {
11    title: "Discovery & Strategy",
12    description:
13      "Align your team around a bold yet achievable product vision in just one workshop.",
14    icon: Compass,
15    time: "Week 1",
16  },
17  {
18    title: "Design Sprint",
19    description:
20      "Translate insights into polished flows with daily feedback loops and rapid iteration.",
21    icon: Sparkles,
22    time: "Week 2",
23  },
24  {
25    title: "Beta Launch",
26    description:
27      "Ship a confident release backed by telemetry and real user validation.",
28    icon: Rocket,
29    time: "Week 3",
30  },
31  {
32    title: "Scale & Learn",
33    description:
34      "Capture momentum with automation, growth playbooks, and purposeful analytics.",
35    icon: Flag,
36    time: "Week 4",
37  },
38];
39 
40const container: Variants = {
41  hidden: { opacity: 0, y: 16 },
42  show: {
43    opacity: 1,
44    y: 0,
45    transition: {
46      duration: 0.5,
47      ease: "easeOut",
48      staggerChildren: 0.12,
49    },
50  },
51};
52 
53const item: Variants = {
54  hidden: { opacity: 0, y: 28 },
55  show: {
56    opacity: 1,
57    y: 0,
58    transition: {
59      ease: "easeOut",
60      duration: 0.55,
61    },
62  },
63};
64 
65export function GlassmorphismLaunchTimelineBlock() {
66  return (
67    <section className="relative overflow-hidden px-6 py-24 lg:py-32">
68      <div className="mx-auto grid max-w-6xl gap-14 lg:grid-cols-[1.05fr_1fr]">
69        <motion.div
70          initial={{ opacity: 0, y: 32 }}
71          animate={{ opacity: 1, y: 0 }}
72          transition={{ duration: 0.6, ease: "easeOut" }}
73          className="relative overflow-hidden rounded-3xl border border-border/50 bg-background/45 p-10 backdrop-blur-2xl"
74        >
75          <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent" />
76          <div className="relative">
77            <Badge
78              variant="outline"
79              className="mb-6 inline-flex items-center gap-2 rounded-full border-border/50 bg-background/55 px-4 py-1.5 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur"
80            >
81              <CalendarDays className="h-3.5 w-3.5" />
82              launch timeline
83            </Badge>
84 
85            <div className="space-y-5">
86// … truncated