Neo Minimal — Coral

Please implement this code in the current project and add it to (Your Desired Section, e.g. homepage hero, pricing page, dashboard). Change the primary accent color to (YOUR HEX CODE COLOR, e.g. #6366F1).

Requirements:
- Use React + Tailwind CSS (match the project's existing setup)
- Install dependencies if needed: npm install framer-motion lucide-react
- Keep the layout responsive on mobile and desktop
- Replace placeholder copy with content that fits the project

The UI code:

"use client";

import { motion } from "framer-motion";
import { ArrowRight, Github, Hexagon, Linkedin, Twitter } from "lucide-react";

const sections = [
  { title: "Product", links: ["UI Library", "Templates", "Pricing", "Features"] },
  { title: "Company", links: ["About", "Careers", "Legal", "Blog"] },
  { title: "Connect", links: ["Twitter", "GitHub", "Discord", "Newsletter"] },
];

export function NeoMinimalFooter() {
  return (
    <footer className="relative mx-auto max-w-7xl overflow-hidden bg-[#140c0c] border-t border-[#FF7A59]/20 rounded-t-2xl px-4 pb-8 pt-16 sm:px-6">
      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(circle_at_center,black,transparent_80%)]" />
      <div className="relative z-10 mx-auto max-w-6xl">
        <div className="mb-16 grid grid-cols-1 gap-12 md:grid-cols-12 md:gap-8">
          <div className="flex flex-col gap-6 md:col-span-5">
            <div className="flex items-center gap-2">
              <Hexagon className="text-[#FF7A59] fill-current/10 h-6 w-6 animate-pulse" />
              <h2 className="text-2xl font-bold tracking-tighter text-white">TetraKits</h2>
            </div>
            <p className="max-w-sm text-sm leading-relaxed text-zinc-400">Free React UI components & browser tools for builders. 67+ React blocks ready to copy into your Next.js app.</p>
            <div className="mt-2 flex max-w-sm items-center gap-2">
              <input
                type="email"
                placeholder="you@startup.com"
                className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder:text-zinc-600 focus:outline-none focus:border-white/25"
              />
              <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="rounded-lg bg-[#FF7A59] hover:bg-[#ff8f73] p-2.5 text-white">
                <ArrowRight className="h-4 w-4" />
              </motion.button>
            </div>
          </div>
          {sections.map((section) => (
            <div key={section.title} className="col-span-6 flex flex-col gap-4 md:col-span-2">
              <h4 className="font-mono text-xs font-semibold uppercase tracking-widest text-zinc-400">{section.title}</h4>
              <ul className="flex flex-col gap-3">
                {section.links.map((link) => (
                  <li key={link}>
                    <a href="#" className="group flex w-fit items-center gap-2 font-mono text-sm text-zinc-500 transition-colors hover:text-[#FF7A59]">
                      <span className="h-2 w-2 rounded-full bg-zinc-700 transition-all duration-200 group-hover:w-4 group-hover:bg-current" />
                      {link}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="flex flex-col items-center justify-between gap-6 border-t border-white/5 pt-8 md:flex-row">
          <p className="font-mono text-xs text-zinc-600">// BUILT_WITH_TETRAKITS · hello@tetrakits.com</p>
          <div className="flex items-center gap-6">
            <div className="flex gap-4 border-r border-white/10 pr-6">
              {[Twitter, Github, Linkedin].map((Icon, i) => (
                <motion.a key={i} href="#" whileHover={{ y: -2 }} className="text-zinc-600 transition hover:text-white">
                  <Icon className="h-4 w-4" />
                </motion.a>
              ))}
            </div>
            <div className="flex items-center gap-2 rounded-full border border-[#FF7A59]/20 text-[#FF7A59] bg-[#FF7A59]/5 px-3 py-1">
              <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
              <span className="text-[10px] font-medium uppercase tracking-wider opacity-80">All systems normal</span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}