Footers Demo

1"use client";
2 
3import * as React from "react";
4import { Button } from "@/components/ui/button";
5import { Input } from "@/components/ui/input";
6import { Label } from "@/components/ui/label";
7import { Switch } from "@/components/ui/switch";
8import { Textarea } from "@/components/ui/textarea";
9import {
10  Tooltip,
11  TooltipContent,
12  TooltipProvider,
13  TooltipTrigger,
14} from "@/components/ui/tooltip";
15import {
16  Facebook,
17  Instagram,
18  Linkedin,
19  Moon,
20  Send,
21  Sun,
22  Twitter,
23} from "lucide-react";
24import { useTheme } from "next-themes";
25 
26export default function Footerdemo() {
27  const { resolvedTheme, setTheme } = useTheme();
28  const [isChatOpen, setIsChatOpen] = React.useState(false);
29  const isDarkMode = resolvedTheme === "dark";
30 
31  return (
32    <footer className="relative border-t bg-background text-foreground transition-colors duration-300">
33      <div className="container mx-auto px-4 py-12 md:px-6 lg:px-8">
34        <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-4">
35          <div className="relative">
36            <h2 className="mb-4 text-3xl font-bold tracking-tight">
37              Stay Connected
38            </h2>
39            <p className="mb-6 text-muted-foreground">
40              Join our newsletter for the latest updates and exclusive offers.
41            </p>
42            <form className="relative">
43              <Input
44                type="email"
45                placeholder="Enter your email"
46                className="pr-12 backdrop-blur-xs"
47              />
48              <Button
49                type="submit"
50                size="icon"
51                className="absolute right-1 top-1 h-8 w-8 rounded-full bg-primary text-primary-foreground transition-transform hover:scale-105"
52              >
53                <Send className="h-4 w-4" />
54                <span className="sr-only">Subscribe</span>
55              </Button>
56            </form>
57            <div className="absolute -right-4 top-0 h-24 w-24 rounded-full bg-primary/10 blur-2xl" />
58          </div>
59          <div>
60            <h3 className="mb-4 text-lg font-semibold">Quick Links</h3>
61            <nav className="space-y-2 text-sm">
62              <a
63                href="#"
64                className="block transition-colors hover:text-primary"
65              >
66                Home
67              </a>
68              <a
69                href="#"
70                className="block transition-colors hover:text-primary"
71              >
72                About Us
73              </a>
74// … truncated