Animated Wave Footer

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 { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
8 
9export default function AnimatedWaveFooter() {
10  return (
11    <footer className="relative bg-linear-to-b from-background to-primary/10 pt-20">
12      <div className="absolute inset-0 overflow-hidden">
13        <div className="absolute bottom-0 h-[500px] w-[1800px] animate-wave">
14          <svg
15            className="h-full w-full"
16            viewBox="0 0 1800 500"
17            xmlns="http://www.w3.org/2000/svg"
18          >
19            <path
20              d="M0 250C200 150 400 50 600 100C800 150 1000 350 1200 300C1400 250 1600 150 1800 250V500H0V250Z"
21              fill="currentColor"
22              className="text-primary/5"
23            />
24            <path
25              d="M0 250C200 200 400 100 600 150C800 200 1000 350 1200 300C1400 250 1600 200 1800 250V500H0V250Z"
26              fill="currentColor"
27              className="text-primary/10"
28            />
29          </svg>
30        </div>
31      </div>
32      <div className="container relative z-10 mx-auto px-4 md:px-6">
33        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
34          <div>
35            <h2 className="mb-4 text-2xl font-bold">Stay Connected</h2>
36            <form className="space-y-2">
37              <div className="space-y-1">
38                <Label htmlFor="email">Email</Label>
39                <Input
40                  id="email"
41                  placeholder="Enter your email"
42                  type="email"
43                  className="backdrop-blur-xs"
44                />
45              </div>
46              <Button type="submit" className="w-full">
47                Subscribe
48              </Button>
49            </form>
50          </div>
51          <div>
52            <h3 className="mb-4 text-lg font-semibold">Quick Links</h3>
53            <nav className="space-y-2 text-sm">
54              <a
55                href="#"
56                className="block transition-colors hover:text-primary"
57              >
58                Home
59              </a>
60              <a
61                href="#"
62                className="block transition-colors hover:text-primary"
63              >
64                About Us
65              </a>
66              <a
67                href="#"
68                className="block transition-colors hover:text-primary"
69// … truncated