{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-us-page-shadcnui",
  "type": "registry:page",
  "title": "About Us Page",
  "description": "Glassmorphism about page showcasing mission, values, and leadership with motion accents.",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/page/about/about-us-page.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport type { Variants } from \"framer-motion\";\nimport { motion } from \"framer-motion\";\nimport {\n  Award,\n  Globe,\n  HeartHandshake,\n  ShieldCheck,\n  Sparkles,\n  Target,\n  Users,\n} from \"lucide-react\";\n\nconst pageVariants: Variants = {\n  hidden: { opacity: 0, y: 24 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: {\n      duration: 0.6,\n      ease: \"easeOut\",\n      when: \"beforeChildren\",\n      staggerChildren: 0.12,\n    },\n  },\n};\n\nconst cardVariants: Variants = {\n  hidden: { opacity: 0, y: 16 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: {\n      duration: 0.5,\n      ease: \"easeOut\",\n    },\n  },\n};\n\nconst stats = [\n  { label: \"Years Building UI Interfaces\", value: \"12+\" },\n  { label: \"Global Teams Empowered\", value: \"320+\" },\n  { label: \"Customer Satisfaction\", value: \"97%\" },\n  { label: \"Accessibility Score\", value: \"AA+\" },\n];\n\nconst values = [\n  {\n    title: \"Human-Centered\",\n    description:\n      \"We obsess over inclusive experiences that anticipate needs and remove friction.\",\n    icon: HeartHandshake,\n  },\n  {\n    title: \"Craft Excellence\",\n    description:\n      \"From micro-interactions to complex flows, every detail is intentional and polished.\",\n    icon: Sparkles,\n  },\n  {\n    title: \"Secure Foundations\",\n    description:\n      \"Privacy-first architecture with resilient infrastructure and transparent practices.\",\n    icon: ShieldCheck,\n  },\n  {\n    title: \"Global Perspective\",\n    description:\n      \"Distributed teams spanning 10 time zones collaborating in sync around shared rituals.\",\n    icon: Globe,\n  },\n];\n\nconst leadership = [\n  {\n    name: \"Jordan Wells\",\n    role: \"Founder & Principal Designer\",\n    quote:\n      \"Design should feel inevitable, Every interaction should communicate clarity and warmth.\",\n  },\n  {\n    name: \"Amina Patel\",\n    role: \"Head of Product Engineering\",\n    quote:\n      \"We engineer for longevity. Our systems are modular, accessible, and built to evolve.\",\n  },\n  {\n    name: \"Leo Martins\",\n    role: \"Director of Customer Experience\",\n    quote:\n      \"Listening deeply to customers is how we stay ahead and deliver meaningful change.\",\n  },\n];\n\nconst milestones = [\n  {\n    year: \"2013\",\n    title: \"Founding\",\n    description:\n      \"Launched as a distributed studio focused on inclusive product experiences for early-stage teams.\",\n  },\n  {\n    year: \"2016\",\n    title: \"Design Systems Practice\",\n    description:\n      \"Introduced our systems framework, enabling global clients to scale consistent interfaces faster.\",\n  },\n  {\n    year: \"2019\",\n    title: \"Motion Intelligence\",\n    description:\n      \"Expanded engineering capabilities with motion-first workflows and accessibility audits baked in.\",\n  },\n  {\n    year: \"2022\",\n    title: \"Global Partnerships\",\n    description:\n      \"Partnered with enterprise platforms to evolve mission-critical experiences across 42 countries.\",\n  },\n  {\n    year: \"2024\",\n    title: \"AI-Assisted Craft\",\n    description:\n      \"Launched AI-assisted tooling that keeps designers in control while accelerating iteration cycles.\",\n  },\n];\n\nexport function AboutUsPage() {\n  return (\n    <main\n      className=\"relative min-h-screen overflow-hidden bg-background text-foreground\"\n      role=\"main\"\n      aria-label=\"About us\"\n    >\n      <motion.div\n        className=\"relative mx-auto flex max-w-6xl flex-col gap-16 px-6 py-16 md:gap-24 lg:px-0 lg:py-16\"\n        variants={pageVariants}\n        initial=\"hidden\"\n        animate=\"visible\"\n      >\n        <motion.section\n          className=\"grid gap-10 rounded-3xl border border-border/40 bg-background/60 p-10 backdrop-blur\"\n          variants={cardVariants}\n          role=\"article\"\n          aria-labelledby=\"about-hero-heading\"\n        >\n          <div className=\"flex flex-col gap-6 md:flex-row md:items-center md:justify-between\">\n            <div className=\"space-y-6\">\n              <Badge className=\"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\">\n                <Users className=\"h-4 w-4 text-primary\" aria-hidden=\"true\" />\n                Our Story\n              </Badge>\n              <div className=\"space-y-4\">\n                <motion.h1\n                  id=\"about-hero-heading\"\n                  className=\"text-3xl font-semibold tracking-tight text-foreground md:text-4xl\"\n                  aria-label=\"Crafting human experiences through motion and design\"\n                >\n                  Crafting human experiences through motion and design\n                </motion.h1>\n                <p className=\"max-w-2xl text-lg text-foreground/70\">\n                  We are a multidisciplinary collective of designers, engineers,\n                  and strategists building accessible, emotionally resonant\n                  interfaces for teams who value craft and measurable impact.\n                </p>\n              </div>\n            </div>\n            <div className=\"flex flex-col items-start gap-3 md:items-end\">\n              <div className=\"rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur\">\n                <div className=\"flex items-center gap-4\">\n                  <Target\n                    className=\"h-10 w-10 text-primary\"\n                    aria-hidden=\"true\"\n                  />\n                  <div className=\"space-y-1\">\n                    <p className=\"text-sm uppercase tracking-[0.2em] text-foreground/60\">\n                      Purpose\n                    </p>\n                    <p className=\"text-sm text-foreground/70\">\n                      Give digital products a tangible sense of care.\n                    </p>\n                  </div>\n                </div>\n              </div>\n              <Button\n                variant=\"default\"\n                className=\"gap-2 rounded-lg bg-primary px-6 py-3 text-sm uppercase tracking-[0.2em] text-primary-foreground hover:bg-primary/90\"\n                aria-label=\"Explore our capabilities\"\n              >\n                Explore our capabilities\n              </Button>\n            </div>\n          </div>\n          <motion.ul\n            role=\"list\"\n            className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\"\n          >\n            {stats.map((stat) => (\n              <motion.li\n                key={stat.label}\n                className=\"group/item relative overflow-hidden rounded-2xl border border-border/30 bg-background/50 p-6 transition-all hover:border-border/60 hover:bg-background/70\"\n                variants={cardVariants}\n                whileHover={{ y: -6 }}\n                role=\"listitem\"\n                aria-label={`${stat.value} ${stat.label}`}\n              >\n                <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover/item:opacity-100\" />\n                <div className=\"relative space-y-2\">\n                  <p className=\"text-xs uppercase tracking-[0.2em] text-foreground/60\">\n                    {stat.label}\n                  </p>\n                  <p className=\"text-2xl font-semibold tracking-tight text-foreground\">\n                    {stat.value}\n                  </p>\n                </div>\n              </motion.li>\n            ))}\n          </motion.ul>\n        </motion.section>\n\n        <motion.section\n          className=\"space-y-8\"\n          variants={cardVariants}\n          role=\"article\"\n          aria-labelledby=\"values-heading\"\n        >\n          <div className=\"space-y-3\">\n            <Badge className=\"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\">\n              <Sparkles className=\"h-4 w-4 text-primary\" aria-hidden=\"true\" />\n              Our DNA\n            </Badge>\n            <div className=\"space-y-2\">\n              <h2\n                id=\"values-heading\"\n                className=\"text-2xl font-semibold tracking-tight text-foreground\"\n              >\n                Principles that guide every engagement\n              </h2>\n              <p className=\"max-w-2xl text-foreground/70\">\n                We scale with intention, placing relationships, trust, and\n                measurable outcomes at the center of every partnership.\n              </p>\n            </div>\n          </div>\n          <motion.ul\n            role=\"list\"\n            className=\"grid gap-6 md:grid-cols-2\"\n            initial=\"hidden\"\n            animate=\"visible\"\n            variants={{\n              hidden: {},\n              visible: {\n                transition: { staggerChildren: 0.08 },\n              },\n            }}\n          >\n            {values.map((value) => (\n              <motion.li\n                key={value.title}\n                variants={cardVariants}\n                className=\"group/item relative flex flex-col gap-4 overflow-hidden rounded-2xl bg-background/60 p-6 shadow-lg shadow-black/5 backdrop-blur transition-all hover:-translate-y-1 hover:shadow-xl\"\n                whileHover={{ y: -4 }}\n                role=\"listitem\"\n              >\n                <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.06] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover/item:opacity-100\" />\n                <div className=\"relative flex items-center gap-3\">\n                  <div className=\"flex h-12 w-12 items-center justify-center rounded-full border border-border/30 bg-background/60\">\n                    <value.icon\n                      className=\"h-6 w-6 text-primary\"\n                      aria-hidden=\"true\"\n                    />\n                  </div>\n                  <h3 className=\"text-base font-medium text-foreground\">\n                    {value.title}\n                  </h3>\n                </div>\n                <p className=\"relative text-sm text-foreground/70\">\n                  {value.description}\n                </p>\n              </motion.li>\n            ))}\n          </motion.ul>\n        </motion.section>\n\n        <motion.section\n          className=\"space-y-8\"\n          variants={cardVariants}\n          role=\"article\"\n          aria-labelledby=\"team-heading\"\n        >\n          <div className=\"space-y-3\">\n            <Badge className=\"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\">\n              <Award className=\"h-4 w-4 text-primary\" aria-hidden=\"true\" />\n              Leadership\n            </Badge>\n            <div className=\"space-y-2\">\n              <h2\n                id=\"team-heading\"\n                className=\"text-2xl font-semibold tracking-tight text-foreground\"\n              >\n                A collective focused on meaningful outcomes\n              </h2>\n              <p className=\"max-w-2xl text-foreground/70\">\n                Our leadership team brings together decades of experience in\n                product design, systems architecture, and customer advocacy to\n                deliver durable, human-centered solutions.\n              </p>\n            </div>\n          </div>\n\n          <motion.ul\n            role=\"list\"\n            className=\"grid gap-6 md:grid-cols-3\"\n            initial=\"hidden\"\n            animate=\"visible\"\n            variants={{\n              hidden: {},\n              visible: {\n                transition: { staggerChildren: 0.08 },\n              },\n            }}\n          >\n            {leadership.map((leader) => (\n              <motion.li\n                key={leader.name}\n                variants={cardVariants}\n                className=\"group/item relative flex flex-col gap-4 overflow-hidden rounded-2xl bg-background/60 p-6 shadow-lg shadow-black/5 backdrop-blur transition-all hover:-translate-y-1 hover:shadow-xl\"\n                whileHover={{ y: -4 }}\n                role=\"listitem\"\n              >\n                <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.05] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover/item:opacity-100\" />\n                <div className=\"relative flex flex-col gap-2\">\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"flex h-12 w-16 items-center justify-center rounded-full border border-border/30 bg-background/60 text-sm font-semibold uppercase tracking-[0.2em] text-foreground/70\">\n                      {leader.name\n                        .split(\" \")\n                        .map((part) => part[0])\n                        .join(\"\")}\n                    </div>\n                    <div>\n                      <p className=\"text-sm font-medium text-foreground\">\n                        {leader.name}\n                      </p>\n                      <p className=\"text-xs uppercase tracking-[0.2em] text-foreground/60\">\n                        {leader.role}\n                      </p>\n                    </div>\n                  </div>\n                  <p className=\"text-sm text-foreground/70\">{leader.quote}</p>\n                </div>\n              </motion.li>\n            ))}\n          </motion.ul>\n\n          <div className=\"flex flex-col gap-4 rounded-3xl bg-background/40 p-8 backdrop-blur md:flex-row md:items-center md:justify-between\">\n            <div className=\"space-y-1\">\n              <p className=\"text-sm uppercase tracking-[0.25em] text-foreground/60\">\n                Our Commitment\n              </p>\n              <p className=\"text-base text-foreground/70\">\n                We partner with organizations who believe that accessible,\n                emotionally intelligent products create loyal communities.\n              </p>\n            </div>\n            <Button\n              variant=\"outline\"\n              className=\"gap-2 rounded-full border-border/40 bg-background/60 px-6 py-3 text-xs uppercase tracking-[0.2em] text-foreground/70 transition-all hover:border-border/60 hover:text-foreground\"\n              aria-label=\"Meet the team\"\n            >\n              Meet the team\n            </Button>\n          </div>\n        </motion.section>\n\n        <motion.section\n          className=\"space-y-8\"\n          variants={cardVariants}\n          role=\"article\"\n          aria-labelledby=\"journey-heading\"\n        >\n          <div className=\"space-y-3\">\n            <Badge className=\"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\">\n              <Target className=\"h-4 w-4 text-primary\" aria-hidden=\"true\" />\n              Our Journey\n            </Badge>\n            <div className=\"space-y-2\">\n              <h2\n                id=\"journey-heading\"\n                className=\"text-2xl font-semibold tracking-tight text-foreground\"\n              >\n                Milestones that shaped our studio\n              </h2>\n              <p className=\"max-w-2xl text-foreground/70\">\n                A decade of designing for resilience, joy, and measurable\n                business outcomes.\n              </p>\n            </div>\n          </div>\n\n          <motion.ul\n            role=\"list\"\n            className=\"grid gap-6 md:grid-cols-3\"\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true, amount: 0.3 }}\n            variants={{\n              hidden: {},\n              visible: {\n                transition: { staggerChildren: 0.08 },\n              },\n            }}\n          >\n            {milestones.map((milestone, index) => (\n              <motion.li\n                key={milestone.year}\n                variants={{\n                  hidden: { opacity: 0, y: 24 },\n                  visible: {\n                    opacity: 1,\n                    y: 0,\n                    transition: {\n                      duration: 0.5,\n                      ease: \"easeOut\",\n                      delay: index * 0.04,\n                    },\n                  },\n                }}\n                className=\"group/item relative flex flex-col gap-3 overflow-hidden rounded-2xl bg-background/60 p-6 shadow-lg shadow-black/5 backdrop-blur transition-all hover:-translate-y-1 hover:shadow-xl\"\n                role=\"listitem\"\n              >\n                <div className=\"absolute inset-0 bg-gradient-to-br from-primary/[0.05] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover/item:opacity-100\" />\n                <div className=\"relative space-y-2\">\n                  <p className=\"text-xs uppercase tracking-[0.25em] text-foreground/50\">\n                    {milestone.year}\n                  </p>\n                  <h3 className=\"text-base font-medium text-foreground\">\n                    {milestone.title}\n                  </h3>\n                  <p className=\"text-sm text-foreground/70\">\n                    {milestone.description}\n                  </p>\n                </div>\n              </motion.li>\n            ))}\n          </motion.ul>\n        </motion.section>\n      </motion.div>\n    </main>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/about-us-page-shadcnui.tsx"
    }
  ]
}