Glassmorphism Launch Timeline

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