Footer

<footer className="border-t py-8 text-center text-muted-foreground"><p>© 2026 Logo Inc. All rights reserved.</p></footer>

"use client";

import React, { useState } from "react";

interface FooterSimpleProps {
  className?: string;
  children?: React.ReactNode;
}

export default function FooterSimple({
  className = "",
  children,
}: FooterSimpleProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <footer className="border-t py-8 text-center text-muted-foreground"><p>© 2026 Logo Inc. All rights reserved.</p></footer>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFooterSimple() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <footer className="border-t py-8 text-center text-muted-foreground"><p>© 2026 Logo Inc. All rights reserved.</p></footer>
    </motion.div>
  );
}

<footer className="border-t py-12"><div className="container mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-8"><div><h4 className="font-semibold mb-4">Product</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul></div><div><h4 className="font-semibold mb-4">Company</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul></div><div><h4 className="font-semibold mb-4">Resources</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">Blog</a></li><li><a href="#">Docs</a></li></ul></div><div><h4 className="font-semibold mb-4">Legal</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></div></div></footer>

"use client";

import React, { useState } from "react";

interface FooterColumnsProps {
  className?: string;
  children?: React.ReactNode;
}

export default function FooterColumns({
  className = "",
  children,
}: FooterColumnsProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <footer className="border-t py-12"><div className="container mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-8"><div><h4 className="font-semibold mb-4">Product</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul></div><div><h4 className="font-semibold mb-4">Company</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul></div><div><h4 className="font-semibold mb-4">Resources</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">Blog</a></li><li><a href="#">Docs</a></li></ul></div><div><h4 className="font-semibold mb-4">Legal</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></div></div></footer>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFooterColumns() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <footer className="border-t py-12"><div className="container mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-8"><div><h4 className="font-semibold mb-4">Product</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul></div><div><h4 className="font-semibold mb-4">Company</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul></div><div><h4 className="font-semibold mb-4">Resources</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">Blog</a></li><li><a href="#">Docs</a></li></ul></div><div><h4 className="font-semibold mb-4">Legal</h4><ul className="space-y-2 text-sm text-muted-foreground"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></div></div></footer>
    </motion.div>
  );
}

<footer className="border-t py-12"><div className="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6"><div className="max-w-sm"><h3 className="font-bold text-lg">Subscribe to our newsletter</h3><p className="text-sm text-muted-foreground mt-2">Get the latest news directly to your inbox.</p></div><div className="flex w-full max-w-sm gap-2"><input className="flex-1 h-10 px-3 border rounded-md" placeholder="Email" /><button className="bg-primary text-primary-foreground px-4 rounded-md">Subscribe</button></div></div></footer>

"use client";

import React, { useState } from "react";

interface FooterNewsletterProps {
  className?: string;
  children?: React.ReactNode;
}

export default function FooterNewsletter({
  className = "",
  children,
}: FooterNewsletterProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <footer className="border-t py-12"><div className="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6"><div className="max-w-sm"><h3 className="font-bold text-lg">Subscribe to our newsletter</h3><p className="text-sm text-muted-foreground mt-2">Get the latest news directly to your inbox.</p></div><div className="flex w-full max-w-sm gap-2"><input className="flex-1 h-10 px-3 border rounded-md" placeholder="Email" /><button className="bg-primary text-primary-foreground px-4 rounded-md">Subscribe</button></div></div></footer>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFooterNewsletter() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <footer className="border-t py-12"><div className="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6"><div className="max-w-sm"><h3 className="font-bold text-lg">Subscribe to our newsletter</h3><p className="text-sm text-muted-foreground mt-2">Get the latest news directly to your inbox.</p></div><div className="flex w-full max-w-sm gap-2"><input className="flex-1 h-10 px-3 border rounded-md" placeholder="Email" /><button className="bg-primary text-primary-foreground px-4 rounded-md">Subscribe</button></div></div></footer>
    </motion.div>
  );
}

<footer className="border-t py-8"><div className="container mx-auto px-4 flex justify-between items-center"><p className="text-sm text-muted-foreground">© 2026 Logo Inc.</p><div className="flex gap-4"><a href="#" className="text-muted-foreground hover:text-foreground">Twitter</a><a href="#" className="text-muted-foreground hover:text-foreground">GitHub</a></div></div></footer>

"use client";

import React, { useState } from "react";

interface FooterSocialProps {
  className?: string;
  children?: React.ReactNode;
}

export default function FooterSocial({
  className = "",
  children,
}: FooterSocialProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <footer className="border-t py-8"><div className="container mx-auto px-4 flex justify-between items-center"><p className="text-sm text-muted-foreground">© 2026 Logo Inc.</p><div className="flex gap-4"><a href="#" className="text-muted-foreground hover:text-foreground">Twitter</a><a href="#" className="text-muted-foreground hover:text-foreground">GitHub</a></div></div></footer>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFooterSocial() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <footer className="border-t py-8"><div className="container mx-auto px-4 flex justify-between items-center"><p className="text-sm text-muted-foreground">© 2026 Logo Inc.</p><div className="flex gap-4"><a href="#" className="text-muted-foreground hover:text-foreground">Twitter</a><a href="#" className="text-muted-foreground hover:text-foreground">GitHub</a></div></div></footer>
    </motion.div>
  );
}

<footer className="bg-slate-900 text-white py-16"><div className="container mx-auto px-4 text-center"><h2 className="text-3xl font-bold mb-6">Ready to get started?</h2><button className="bg-white text-slate-900 px-8 py-3 rounded-md font-bold">Sign up for free</button><p className="mt-8 text-slate-400 text-sm">© 2026 Logo Inc.</p></div></footer>

"use client";

import React, { useState } from "react";

interface FooterLargeProps {
  className?: string;
  children?: React.ReactNode;
}

export default function FooterLarge({
  className = "",
  children,
}: FooterLargeProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <footer className="bg-slate-900 text-white py-16"><div className="container mx-auto px-4 text-center"><h2 className="text-3xl font-bold mb-6">Ready to get started?</h2><button className="bg-white text-slate-900 px-8 py-3 rounded-md font-bold">Sign up for free</button><p className="mt-8 text-slate-400 text-sm">© 2026 Logo Inc.</p></div></footer>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFooterLarge() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <footer className="bg-slate-900 text-white py-16"><div className="container mx-auto px-4 text-center"><h2 className="text-3xl font-bold mb-6">Ready to get started?</h2><button className="bg-white text-slate-900 px-8 py-3 rounded-md font-bold">Sign up for free</button><p className="mt-8 text-slate-400 text-sm">© 2026 Logo Inc.</p></div></footer>
    </motion.div>
  );
}