{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"letters-from-the-garden","type":"registry:ui","title":"Letters from the Garden","description":"An idyllic cottagecore editorial footer and newsletter component with interactive breeze physics, floating wildflowers, and countryside clothesline artwork.","author":"Zuhaib Rashid <zuhaibrashid01@gmail.com>","dependencies":["lucide-react"],"devDependencies":[],"registryDependencies":[],"files":[{"path":"components/flourish/letters-from-the-garden.tsx","target":"@components/flourish/letters-from-the-garden.tsx","content":"'use client'\n\nimport React, { useState } from 'react'\nimport { ArrowRight, Check } from 'lucide-react'\n\nexport interface NavigationLink {\n  label: string\n  href: string\n}\n\nexport interface LettersFromTheGardenProps {\n  brandName?: string\n  title?: string\n  description?: string\n  newsletterPlaceholder?: string\n  copyrightText?: string\n  artworkSrc?: string\n  onSubscribe?: (email: string) => Promise<void> | void\n  navigation?: NavigationLink[]\n  socials?: NavigationLink[]\n  legal?: NavigationLink[]\n  className?: string\n}\n\nexport function LettersFromTheGarden({\n  brandName = 'Kashmir',\n  title = 'Letters from the garden',\n  description = 'Occasional notes from the garden, seasonal stories, and quiet things worth sharing.',\n  newsletterPlaceholder = 'Your email address',\n  copyrightText = '© 2026 Kashmir',\n  artworkSrc = '/garden-scene@2x.png',\n  onSubscribe,\n  navigation = [\n    { label: 'About', href: '#about' },\n    { label: 'Retreat', href: '#retreat' },\n    { label: 'Journal', href: '#journal' },\n    { label: 'Visit', href: '#visit' },\n  ],\n  socials = [\n    { label: 'TikTok', href: 'https://tiktok.com' },\n    { label: 'Instagram', href: 'https://instagram.com' },\n    { label: 'Twitter', href: 'https://twitter.com' },\n    { label: 'Contact', href: '#contact' },\n  ],\n  legal = [\n    { label: 'Privacy', href: '#privacy' },\n    { label: 'Terms', href: '#terms' },\n    { label: 'Cookie', href: '#cookie' },\n  ],\n  className = '',\n}: LettersFromTheGardenProps) {\n  const [email, setEmail] = useState('')\n  const [subscribed, setSubscribed] = useState(false)\n  const [isSubmitting, setIsSubmitting] = useState(false)\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault()\n    if (!email || isSubmitting) return\n\n    setIsSubmitting(true)\n    if (onSubscribe) {\n      await onSubscribe(email)\n    } else {\n      await new Promise((resolve) => setTimeout(resolve, 500))\n    }\n    setIsSubmitting(false)\n    setSubscribed(true)\n  }\n\n  return (\n    <footer\n      className={`relative w-full bg-[#f6efe7] text-[#2a382e] pt-8 sm:pt-10 md:pt-12 pb-0 overflow-hidden select-none flex flex-col justify-between ${className}`}\n      role=\"contentinfo\"\n      aria-label=\"Footer and garden newsletter\"\n    >\n      {/* ── Ambient Petal Breeze Particles ──────────────── */}\n      <div className=\"pointer-events-none absolute inset-0 z-10 overflow-hidden opacity-45\">\n        <span\n          className=\"absolute top-1/4 left-3/4 w-2 h-2.5 rounded-full bg-[#d8b4e2]/60 blur-[0.4px]\"\n          style={{ animation: 'float-petal 14s linear infinite', animationDelay: '0s' }}\n        />\n        <span\n          className=\"absolute top-1/3 left-1/2 w-1.5 h-2 rounded-full bg-[#fef08a]/70 blur-[0.3px]\"\n          style={{ animation: 'float-petal 18s linear infinite', animationDelay: '5s' }}\n        />\n        <span\n          className=\"absolute top-1/2 left-4/5 w-2 h-2 rounded-full bg-[#bbf7d0]/50 blur-[0.4px]\"\n          style={{ animation: 'float-petal 16s linear infinite', animationDelay: '10s' }}\n        />\n      </div>\n\n      {/* ── Top Content Container ──────────────── */}\n      <div className=\"relative z-20 w-full max-w-[1360px] mx-auto px-6 sm:px-10 md:px-12 lg:px-16\">\n        <div className=\"flex flex-col lg:flex-row justify-between items-start gap-8 lg:gap-8\">\n          {/* Left Column: Title, Subtitle, Underline Input, Copyright */}\n          <div className=\"flex flex-col max-w-sm\">\n            <h2 className=\"font-editorial text-[26px] sm:text-[30px] md:text-[33px] font-normal text-[#2a382e] tracking-tight leading-snug\">\n              {title}\n            </h2>\n            <p className=\"mt-2 text-xs sm:text-[13px] text-[#79746c] leading-relaxed font-normal max-w-xs\">\n              {description}\n            </p>\n\n            {/* Email Subscription Form */}\n            <div className=\"mt-5 sm:mt-6\">\n              {subscribed ? (\n                <div className=\"flex items-center gap-2 py-1 text-xs sm:text-[13px] text-[#2b3d36] font-medium\">\n                  <Check className=\"w-4 h-4 text-[#2b3d36]\" />\n                  <span>Thank you. Letters from the garden will arrive soon.</span>\n                </div>\n              ) : (\n                <form onSubmit={handleSubmit} className=\"relative flex items-center border-b border-[#2a382e]/35 hover:border-[#2a382e]/70 focus-within:border-[#2b3d36] transition-colors pb-1 max-w-[300px] group\">\n                  <input\n                    type=\"email\"\n                    required\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                    placeholder={newsletterPlaceholder}\n                    className=\"w-full bg-transparent text-xs sm:text-[13px] text-[#2a382e] placeholder:text-[#9c968c] focus:outline-none pr-8 py-0.5\"\n                    aria-label=\"Email address for garden notes\"\n                  />\n                  <button\n                    type=\"submit\"\n                    disabled={isSubmitting}\n                    className=\"absolute right-0 text-[#2a382e]/80 hover:text-[#2b3d36] disabled:opacity-50 transition-transform duration-200 hover:translate-x-1 cursor-pointer p-0.5\"\n                    aria-label=\"Submit email\"\n                  >\n                    {isSubmitting ? (\n                      <span className=\"inline-block w-3 h-3 border border-[#2b3d36] border-t-transparent rounded-full animate-spin\" />\n                    ) : (\n                      <ArrowRight className=\"w-4 h-4\" />\n                    )}\n                  </button>\n                </form>\n              )}\n            </div>\n\n            {/* Copyright */}\n            <div className=\"mt-6 sm:mt-8 text-[11px] tracking-[0.14em] uppercase font-sans font-medium text-[#8c867c]\">\n              {copyrightText}\n            </div>\n          </div>\n\n          {/* Right Column: 3 Link Columns */}\n          <div className=\"grid grid-cols-3 gap-8 sm:gap-14 lg:gap-20\">\n            {/* Column 1: Navigation */}\n            <div>\n              <h3 className=\"text-[10px] sm:text-[11px] tracking-[0.2em] uppercase font-semibold text-[#8c867c] mb-3 sm:mb-4\">\n                Navigation\n              </h3>\n              <ul className=\"space-y-1.5 sm:space-y-2\">\n                {navigation.map((item) => (\n                  <li key={item.label}>\n                    <a\n                      href={item.href}\n                      className=\"text-xs sm:text-[13px] text-[#5f5b54] hover:text-[#2a382e] transition-colors duration-200 inline-block py-0.5 relative group\"\n                    >\n                      {item.label}\n                      <span className=\"absolute left-0 bottom-0 w-0 h-[1px] bg-[#2a382e] transition-all duration-200 group-hover:w-full\" />\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n\n            {/* Column 2: Socials */}\n            <div>\n              <h3 className=\"text-[10px] sm:text-[11px] tracking-[0.2em] uppercase font-semibold text-[#8c867c] mb-3 sm:mb-4\">\n                Socials\n              </h3>\n              <ul className=\"space-y-1.5 sm:space-y-2\">\n                {socials.map((item) => (\n                  <li key={item.label}>\n                    <a\n                      href={item.href}\n                      target={item.href.startsWith('http') ? '_blank' : undefined}\n                      rel={item.href.startsWith('http') ? 'noopener noreferrer' : undefined}\n                      className=\"text-xs sm:text-[13px] text-[#5f5b54] hover:text-[#2a382e] transition-colors duration-200 inline-block py-0.5 relative group\"\n                    >\n                      {item.label}\n                      <span className=\"absolute left-0 bottom-0 w-0 h-[1px] bg-[#2a382e] transition-all duration-200 group-hover:w-full\" />\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n\n            {/* Column 3: Legal */}\n            <div>\n              <h3 className=\"text-[10px] sm:text-[11px] tracking-[0.2em] uppercase font-semibold text-[#8c867c] mb-3 sm:mb-4\">\n                Legal\n              </h3>\n              <ul className=\"space-y-1.5 sm:space-y-2\">\n                {legal.map((item) => (\n                  <li key={item.label}>\n                    <a\n                      href={item.href}\n                      className=\"text-xs sm:text-[13px] text-[#5f5b54] hover:text-[#2a382e] transition-colors duration-200 inline-block py-0.5 relative group\"\n                    >\n                      {item.label}\n                      <span className=\"absolute left-0 bottom-0 w-0 h-[1px] bg-[#2a382e] transition-all duration-200 group-hover:w-full\" />\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        {/* ── Grand Center Brand Typography ──────────────── */}\n        <div className=\"relative mt-6 sm:mt-8 md:mt-12 text-center select-none z-20 overflow-hidden\">\n          <h1\n            className=\"font-editorial text-[clamp(2.75rem,13.8vw,11.5rem)] font-normal tracking-[0.22em] text-[#2b3d36] leading-none uppercase whitespace-nowrap transition-transform duration-700\"\n            style={{\n              paddingLeft: '0.22em', // Offsets tracking for true optical visual centering\n            }}\n          >\n            {brandName.split('').map((char, index) => (\n              <span\n                key={index}\n                className=\"inline-block transition-transform duration-300 ease-out hover:-translate-y-2 hover:text-[#1c2924] cursor-default\"\n              >\n                {char}\n              </span>\n            ))}\n          </h1>\n        </div>\n      </div>\n\n      {/* ── Bottom Clothesline & Garden Illustration with Breeze Animation ──────────────── */}\n      <div className=\"relative w-full -mt-4 sm:-mt-8 md:-mt-12 lg:-mt-18 z-10 overflow-hidden leading-none pointer-events-none select-none\">\n        <img\n          src={artworkSrc}\n          alt=\"Countryside garden washing line with hanging linen, lavender, and flower bench\"\n          className=\"w-full h-auto block select-none animate-breeze origin-bottom\"\n          draggable={false}\n        />\n      </div>\n    </footer>\n  )\n}\n\nexport default LettersFromTheGarden\n","type":"registry:ui"}]}