Footer 1

import { ArrowRight } from "lucide-react";

import { cn } from "@/lib/utils.ts";

import { Button } from "@/components/ui/button";

const navLinks = [
    { name: "Product", href: "#" },
    { name: "Features", href: "#" },
    { name: "Solutions", href: "#" },
    { name: "Pricing", href: "#" },
    { name: "Resources", href: "#" },
    { name: "Company", href: "#" },
    { name: "Contact", href: "#" },
];

const socialLinks = [
    {
        name: "Twitter",
        icon: "https://cdn.paceui.com/brand-logos/x.svg",
        isDarkInvert: true,
        href: "#",
    },
    {
        name: "GitHub",
        icon: "https://cdn.paceui.com/brand-logos/github.svg",
        isDarkInvert: true,
        href: "#",
    },
    {
        name: "LinkedIn",
        icon: "https://cdn.paceui.com/brand-logos/linkedin.svg",
        href: "#",
    },
];

export function Footer1() {
    return (
        <div>
            <div className="bg-muted/60 flex h-36 items-center justify-center border-b border-dashed">
                <p className="text-foreground/25 font-medium">Content Here</p>
            </div>
            <footer className="w-full py-12 md:py-16">
                <div className="mx-auto flex max-w-7xl flex-col items-center justify-center gap-8 px-4 text-center sm:px-6 lg:px-8">
                    <a href="#" className="flex items-center gap-2.5">
                        <div className="bg-primary text-primary-foreground flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-medium">
                            P
                        </div>
                        <span className="text-lg font-medium tracking-tight">PaceUI</span>
                    </a>

                    <h2 className="max-w-xl text-2xl font-medium tracking-tight sm:text-3xl">
                        Craft pixel-perfect user interfaces in record time.
                    </h2>

                    <Button size="lg" className="rounded-full">
                        Get Started Free <ArrowRight className="ms-2 size-4" />
                    </Button>

                    <nav className="text-muted-foreground flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm font-medium">
                        {navLinks.map((link) => (
                            <a key={link.name} href={link.href} className="hover:text-foreground transition-colors">
                                {link.name}
                            </a>
                        ))}
                    </nav>

                    <div className="text-muted-foreground flex items-center gap-2">
                        {socialLinks.map((social) => {
                            return (
                                <Button
                                    key={social.name}
                                    variant="ghost"
                                    size="icon"
                                    aria-label={social.name}
                                    className="hover:text-foreground rounded-full"
                                    render={
                                        <a href={social.href} aria-label={social.name}>
                                            <img
                                                src={social.icon}
                                                className={cn("size-4", { "dark:invert": social.isDarkInvert })}
                                                alt={social.name}
                                            />
                                        </a>
                                    }></Button>
                            );
                        })}
                    </div>

                    <p className="text-muted-foreground w-full border-t pt-6 text-xs font-normal">
                        &copy; {new Date().getFullYear()} PaceUI Inc. All rights reserved.
                    </p>
                </div>
            </footer>
        </div>
    );
}