Sticky Radial — Slate

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 { Boxes, Facebook, Github, Instagram, Linkedin, Youtube } from "lucide-react";

const groups = [
  {
    label: "Product",
    links: ["UI Library", "Free Tools", "Templates", "Pricing", "Mobile kit", "API access"],
  },
  {
    label: "Resources",
    links: ["Documentation", "Blog", "Case studies", "Changelog", "Community", "Status"],
  },
  {
    label: "Company",
    links: ["About", "Careers", "Press", "Partners", "Contact", "Legal"],
  },
];

const socials = [
  { Icon: Github, href: "https://github.com/tetrakits" },
  { Icon: Linkedin, href: "https://linkedin.com/company/tetrakits" },
  { Icon: Youtube, href: "#" },
  { Icon: Instagram, href: "#" },
  { Icon: Facebook, href: "#" },
];

export function StickyStyleFooter() {
  return (
    <footer className="relative w-full bg-slate-950 border-t border-white/10">
      <div aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden">
        <div className="bg-[radial-gradient(circle,rgba(16,185,129,0.1)_0,transparent_70%)] absolute -top-40 left-0 h-80 w-80 -rotate-45 rounded-full opacity-60" />
        <div className="bg-[radial-gradient(circle,rgba(16,185,129,0.1)_0,transparent_70%)] absolute -top-20 right-0 h-64 w-64 rotate-12 rounded-full opacity-40" />
      </div>
      <div className="relative mx-auto flex max-w-6xl flex-col justify-between gap-10 px-6 py-14 md:px-12">
        <div className="flex flex-col gap-10 xl:flex-row">
          <motion.div initial={{ opacity: 0, y: 12 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="max-w-sm space-y-4">
            <Boxes className="h-8 w-8 text-emerald-400" />
            <p className="text-sm leading-relaxed text-zinc-400">Free React UI components & browser tools for builders. Trusted by 12,400+ developers shipping faster with copy-paste React UI.</p>
            <div className="flex gap-2 pt-2">
              {socials.map(({ Icon, href }, i) => (
                <motion.a key={i} href={href} whileHover={{ y: -2 }} className="flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 text-zinc-400 transition hover:border-white/20 hover:text-white">
                  <Icon className="h-4 w-4" />
                </motion.a>
              ))}
            </div>
          </motion.div>
          {groups.map((group, index) => (
            <motion.div key={group.label} initial={{ opacity: 0, y: 12 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: index * 0.08 }} className="min-w-[140px]">
              <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-300">{group.label}</h3>
              <ul className="mt-4 space-y-2 text-sm text-zinc-500">
                {group.links.map((link) => (
                  <li key={link}><a href="#" className="transition hover:text-white">{link}</a></li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>
        <div className="flex flex-col items-center justify-between gap-3 border-t border-white/10 pt-6 text-sm text-zinc-600 md:flex-row">
          <p>© 2026 TetraKits Inc. All rights reserved.</p>
          <p className="text-emerald-400">hello@tetrakits.com</p>
        </div>
      </div>
    </footer>
  );
}