Footer

import { Footer } from "@/components/footer"

export function Header05() {
  return (
    <div className="flex mt-auto h-screen w-full flex-col">
      <Footer />
    </div>
  )
}

"use client"

import Link from "next/link"
import { Heart, Mail } from "lucide-react"
import {
  Apple,
  Instagram,
  LinkedIn,
  Threads,
  Facebook,
  WhatsApp, 
  X,
  YouTube,
} from "@designali/logos"

import { Theme } from "@/registry/designali/blocks/footer/footer-02/theme"

const navigation = {
  categories: [
    {
      id: "women",
      name: "Women",

      sections: [
        {
          id: "about",
          name: "About",
          items: [
            { name: "About", href: "/about" },
            { name: "Works", href: "/agency/works" },
            { name: "Pricing", href: "/pricing" },
          ],
        },
        {
          id: "features",
          name: "Features",
          items: [
            { name: "Products", href: "/products" },
            { name: "Agency", href: "/agency" },
            { name: "Dashboard", href: "/dashboard" },
          ],
        },
        {
          id: "products",
          name: "Products",
          items: [
            { name: "DIcons", href: "/products/dicons" },
            { name: "DShapes", href: "/products/dshapes" },
            { name: "Graaadients", href: "/products/graaadients" },
          ],
        },
        {
          id: "designs",
          name: "Designs",
          items: [
            { name: "Design", href: "/designs" },
            { name: "Components", href: "/components" },
            { name: "Blogs", href: "/blogs" },
          ],
        },
        {
          id: "other",
          name: "Others",
          items: [
            { name: "Graphic", href: "/graphic" },
            { name: "3D Icons", href: "/products/3dicons" },
            { name: "Colors", href: "/products/colors/generate" },
          ],
        },
        {
          id: "company",
          name: "Company",
          items: [
            { name: "Contact", href: "/contact" },
            { name: "Terms", href: "/terms" },
            { name: "Privacy", href: "/privacy" },
          ],
        },
      ],
    },
  ],
}

const Underline = `hover:-translate-y-1 border border-dotted rounded-xl p-2.5 transition-transform `

export function Footer() {
  return (
    <footer className="mx-auto mt-20 flex h-full w-full flex-col items-center justify-center">
      <div className="relative mx-auto grid max-w-7xl items-center justify-center gap-6 p-10 pb-0 md:flex">
        <Link href="/">
          <p className="flex items-center justify-center rounded-full">
            <Apple className="w-8" />
          </p>
        </Link>
        <p className="text-center text-xs leading-4 text-muted-foreground md:text-left">
          Welcome to Designali, where creativity meets strategy to bring your
          vision to life. I am passionate about transforming ideas into
          compelling visual experiences. I specialize in crafting unique brand
          identities, immersive digital experiences, and engaging content that
          resonates with your audience. My mission is to empower businesses and
          brands to stand out in a crowded market. I believe in the power of
          design to tell stories, evoke emotions, and drive meaningful
          connections. I believe in quality, not quantity. Designali is actually
          an agency of one. This means you&apos;ll work directly with me,
          founder of Designali.
        </p>
      </div>

      <div className="mx-auto w-full max-w-7xl px-6 py-10">
        <div className="border-b border-dotted"> </div>
        <div className="py-10">
          {navigation.categories.map((category) => (
            <div
              key={category.name}
              className="grid grid-cols-3 flex-row justify-between gap-6 leading-6 md:flex"
            >
              {category.sections.map((section) => (
                <div key={section.name}>
                  <ul
                    role="list"
                    aria-labelledby={`${category.id}-${section.id}-heading-mobile`}
                    className="flex flex-col space-y-2"
                  >
                    {section.items.map((item) => (
                      <li key={item.name} className="flow-root">
                        <Link
                          href={item.href}
                          className="text-sm hover:text-foreground text-muted-foreground md:text-xs "
                        >
                          {item.name}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          ))}
        </div>
        <div className="border-b border-dotted"> </div>
      </div>

      <div className="flex flex-wrap justify-center gap-y-6">
        <div className="flex flex-wrap items-center justify-center gap-6 gap-y-4 px-6">
          <Link
            aria-label="Logo"
            href="mailto:contact@designali.in"
            rel="noreferrer"
            target="_blank"
            className={Underline}
          >
            <Mail strokeWidth={1.5} className="h-5 w-5" />
          </Link>
          <Link
            aria-label="Logo"
            href="https://x.com/designali_in"
            rel="noreferrer"
            target="_blank"
            className={Underline}
          >
            <X className="h-5 w-5" />
          </Link>
          <Link
            aria-label="Logo"
            href="https://www.instagram.com/designali.in/"
            rel="noreferrer"
            target="_blank"
            className={Underline}
          >
            <Instagram className="h-5 w-5" />
          </Link>
          <Link
            aria-label="Logo"
            href="https://www.threads.net/designali.in"
            rel="noreferrer"
            target="_blank"
            className={Underline}
          >
            <Threads className="h-5 w-5" />
          </Link>
          <Link
            aria-label="Logo"
            href="https://chat.whatsapp.com/LWsNPcz5BlWDVOha41vzuh"
            rel="noreferrer"
            target="_blank"
            className={Underline}
          >
            <WhatsApp className="h-5 w-5" />
          </Link> 
          <Link
            aria-label="Logo"
            href="https://www.facebook.com/designali.agency"
            rel="noreferrer"
            target="_blank"
            className={Underline}
          >
            <Facebook className="h-5 w-5" />
          </Link>
          <Link
            aria-label="Logo"
            href="https://www.linkedin.com/company/designali"
            rel="noreferrer"
            target="_blank"
            className={Underline}
          >
            <LinkedIn className="h-5 w-5" />
          </Link>
          <Link
            aria-label="Logo"
            href="https://www.youtube.com/@designali-in"
            rel="noreferrer"
            target="_blank"
            className={Underline}
          >
            <YouTube className="h-5 w-5" />
          </Link>
        </div>
        <Theme />
      </div>

      <div className="mx-auto mt-10 mb-10 flex flex-col justify-between text-center text-xs md:max-w-7xl">
        <div className="flex flex-row items-center justify-center gap-1 text-slate-600 dark:text-slate-400">
          <span> © </span>
          <span>{new Date().getFullYear()}</span>
          <span>Made with</span>
          <Heart className="mx-1 h-4 w-4 animate-pulse text-red-600" />
          <span> by </span>
          <span className="hover:text-ali dark:hover:text-ali cursor-pointer text-black dark:text-white">
            <Link
              aria-label="Logo"
              className="font-bold"
              href="https://www.instagram.com/aliimam.in/"
              target="_blank"
            >
              Ali Imam {""}
            </Link>
          </span>
          -
          <span className="hover:text-ali cursor-pointer text-slate-600 dark:text-slate-400 dark:hover:text-red-600">
            <Link aria-label="Logo" className="" href="/">
              Designali
            </Link>
          </span>
        </div>
      </div>
    </footer>
  )
}

"use client"

import Link from "next/link"

const links = [
  {
    title: "Features",
    href: "#",
  },
  {
    title: "Solution",
    href: "#",
  },
  {
    title: "Brands",
    href: "#",
  },
  {
    title: "Pricing",
    href: "#",
  },
  {
    title: "Design",
    href: "#",
  },
  {
    title: "AI",
    href: "#",
  },
]

export function Footer() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <footer className="w-full border-y py-12">
        <div className="mx-auto max-w-5xl px-6">
          <div className="flex flex-wrap justify-between gap-6">
            <span className="order-last block text-center text-sm text-muted-foreground md:order-first">
              © {2026} Ali Imam, All rights reserved
            </span>
            <div className="order-first flex flex-wrap justify-center gap-6 text-sm md:order-last">
              {links.map((link, index) => (
                <Link
                  key={index}
                  href={link.href}
                  className="block text-muted-foreground duration-150 hover:text-primary"
                >
                  <span>{link.title}</span>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}

"use client"

import Link from "next/link"
import { Nike } from "@designali/logos"
import { Send } from "lucide-react"

import { ThemeSwitch } from "@/registry/designali/blocks/footer/footer-04/theme"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const navLinks = [
  { label: "About", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Blogs", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Contact", href: "#" },
]

export function Footer() {
  return (
    <footer className="flex min-h-svh w-full items-center justify-center">
      <div className="p-10">
        <div className="-my-6 grid gap-12 rounded-md border bg-background p-10 md:-my-4 md:grid-cols-2 lg:grid-cols-4">
          <div className="relative">
            <Nike />
            <h2 className="mt-6 mb-2 text-2xl font-semibold tracking-tight">
              Stay Connected
            </h2>
            <p className="mb-4 text-muted-foreground">
              Join our newsletter for the latest updates and exclusive offers.
            </p>
            <form className="relative">
              <Input
                type="email"
                placeholder="Enter your email"
                className="pr-12 backdrop-blur-sm"
              />
              <Button
                type="submit"
                size="icon-sm"
                className="absolute top-0.5 right-0.5"
              >
                <Send className="h-4 w-4" />
                <span className="sr-only">Subscribe</span>
              </Button>
            </form>
            <div className="absolute top-0 -right-4 h-24 w-24 rounded-full bg-primary/10 blur-2xl" />
          </div>
          <div>
            <h3 className="mb-4 text-lg font-semibold">Quick Links</h3>
            <nav className="space-y-2">
              {navLinks.map(({ label, href }) => (
                <Link
                  key={label}
                  href={href}
                  className="block text-muted-foreground transition-colors hover:text-foreground"
                >
                  {label}
                </Link>
              ))}
            </nav>
          </div>
          <div className="">
            <div className="">
              <h3 className="mb-4 text-lg font-semibold">Contact Us</h3>
              <div className="grid space-y-2 text-muted-foreground transition-colors hover:text-foreground">
                <a
                  href="https://www.google.com/maps/place/Dalim/@23.6407561,86.1020664,19z/data=!3m1!4b1!4m6!3m5!1s0x39f42309f0f5d0b5:0xb7e835eb8fe26ca3!8m2!3d23.6407549!4d86.1027101!16s%2Fg%2F11xftydckp"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:underline"
                >
                  Bokaro, India
                </a>
                <a href="tel:+11234567890" className="hover:underline">
                  Phone
                </a>
                <a href="mailto:contact@dalim.in" className="hover:underline">
                  Email
                </a>
              </div>
            </div>

            <div className="mt-1 -ml-3">
              <Select>
                <SelectTrigger className="text-md w-40 border-0 shadow-none">
                  <SelectValue placeholder="Legal" />
                </SelectTrigger>
                <SelectContent side="top">
                  <SelectGroup>
                    <SelectItem value="contact">Contact</SelectItem>
                    <SelectItem value="terms">Terms</SelectItem>
                    <SelectItem value="privacy">Privacy</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
            </div>
          </div>
          <div className="relative">
            <h3 className="mb-4 text-lg font-semibold">Follow Us</h3>
            <div className="mb-6 flex gap-6">
              <Link
                href={"https://www.linkedin.com/aliimam"}
                target="_blank"
                className="text-muted-foreground transition-colors hover:text-foreground"
              >
                LinkedIn
              </Link>
              <Link
                href={"https://x.com/aliimam_in"}
                target="_blank"
                className="text-muted-foreground transition-colors hover:text-foreground"
              >
                 X
              </Link>
              <Link
                href={"https://www.instagram.com/aliimam.in/"}
                target="_blank"
                className="text-muted-foreground transition-colors hover:text-foreground"
              >
                Instagram
              </Link>
            </div>
            <ThemeSwitch />
          </div>
        </div>
        <div className="mt-3 flex flex-col items-center justify-between gap-3 py-4 text-center md:flex-row">
          <p className="text-sm text-muted-foreground">
            © 2026 AI. All rights reserved.
          </p>
          <nav className="flex gap-4 text-sm">
            <Link href="#" className="text-foreground/60 hover:text-foreground">
              Privacy Policy
            </Link>
            <Link href="#" className="text-foreground/60 hover:text-foreground">
              Terms of Service
            </Link>
          </nav>
        </div>
      </div>
    </footer>
  )
}

import Link from "next/link"
import {
  Adobe,
  Facebook,
  Instagram,
  LinkedIn,
  Threads,
  X,
} from "@designali/logos"

const links = [
  {
    group: "Studio",
    items: [
      { title: "Our Work", href: "#" },
      { title: "Case Studies", href: "#" },
      { title: "Services", href: "#" },
      { title: "Pricing", href: "#" },
      { title: "Process", href: "#" },
      { title: "Why Choose Us", href: "#" },
    ],
  },
  {
    group: "Services",
    items: [
      { title: "Brand Identity", href: "#" },
      { title: "UI/UX Design", href: "#" },
      { title: "Web Design", href: "#" },
      { title: "Logo Design", href: "#" },
      { title: "Social Media Design", href: "#" },
      { title: "Motion Graphics", href: "#" },
      { title: "Design Systems", href: "#" },
    ],
  },
  {
    group: "Resources",
    items: [
      { title: "Design Blog", href: "#" },
      { title: "Free Assets", href: "#" },
      { title: "Templates", href: "#" },
      { title: "Guides", href: "#" },
      { title: "Tutorials", href: "#" },
      { title: "Help Center", href: "#" },
    ],
  },
  {
    group: "Legal",
    items: [
      { title: "Terms of Service", href: "#" },
      { title: "Privacy Policy", href: "#" },
      { title: "Licensing", href: "#" },
      { title: "Cookie Policy", href: "#" },
    ],
  },
]

export function FooterSection() {
  return (
    <footer className="flex h-screen flex-col items-center justify-center border-b dark:bg-transparent">
      <div className="mx-auto max-w-5xl px-6">
        <div className="grid gap-12 md:grid-cols-5">
          <div className="md:col-span-2">
            <Link href="#" aria-label="go home" className="block size-fit">
              <Adobe />
            </Link>
          </div>

          <div className="grid grid-cols-2 gap-6 sm:grid-cols-4 md:col-span-3">
            {links.map((link, index) => (
              <div key={index} className="space-y-4 text-sm">
                <span className="block font-medium">{link.group}</span>
                {link.items.map((item, index) => (
                  <Link
                    key={index}
                    href={item.href}
                    className="block text-muted-foreground duration-150 hover:text-primary"
                  >
                    <span>{item.title}</span>
                  </Link>
                ))}
              </div>
            ))}
          </div>
        </div>
        <div className="mt-12 flex flex-wrap items-end justify-between gap-6 border-t py-6">
          <span className="order-last block text-center text-sm text-muted-foreground md:order-first">
            © {2026} Ali Imam, All rights reserved
          </span>
          <div className="order-first flex flex-wrap items-center justify-center gap-8 text-sm md:order-last">
            <Link
              href="#"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="X/Twitter"
              className="block text-muted-foreground hover:text-primary"
            >
              <X className="h-5" />
            </Link>
            <Link
              href="#"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="LinkedIn"
              className="block text-muted-foreground hover:text-primary"
            >
              <LinkedIn className="h-5" />
            </Link>
            <Link
              href="#"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Facebook"
              className="block text-muted-foreground hover:text-primary"
            >
              <Facebook className="h-5" />
            </Link>
            <Link
              href="#"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Threads"
              className="block text-muted-foreground hover:text-primary"
            >
              <Threads className="h-5" />
            </Link>
            <Link
              href="#"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Instagram"
              className="block text-muted-foreground hover:text-primary"
            >
              <Instagram className="h-5" />
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}

import { Figma, Github, LinkedIn, X } from "@designali/logos"

export function Footer() {
  return (
    <div className="flex h-screen w-full flex-col items-center justify-center">
      <div className="container flex h-auto flex-col items-stretch justify-between self-stretch md:flex-row">
        <div className="flex h-auto flex-col items-start justify-start gap-8 p-4 md:p-8">
          <div className="flex items-center justify-start gap-3 self-stretch">
            <div className="text-center text-xl leading-4 font-semibold">
              <Figma />
            </div>
          </div>
          <div className="text-sm font-medium">
            <h1 className="text-lg font-medium">Design without limits</h1>
            <p className="max-w-md text-muted-foreground">
              I create digital experiences that connect and inspire. I build
              apps, websites, brands, and products end-to-end.
            </p>
          </div>

          <div className="flex items-start justify-start gap-6">
            <LinkedIn className="w-6" />
            <X className="w-6" />
            <Github className="w-6" />
          </div>
        </div>

        <div className="flex flex-col flex-wrap items-start justify-start gap-6 self-stretch p-4 sm:flex-row sm:justify-between md:gap-8 md:p-8">
          <div className="flex min-w-40 flex-1 flex-col items-start justify-start gap-3">
            <div className="self-stretch text-sm leading-5 font-medium">
              Product
            </div>
            <div className="flex flex-col items-start justify-end gap-2">
              <div className="cursor-pointer text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Features
              </div>
              <div className="cursor-pointer text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Pricing
              </div>
              <div className="cursor-pointer text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Integrations
              </div>
              <div className="cursor-pointer text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Real-time Previews
              </div>
              <div className="cursor-pointer text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Multi-Agent Coding
              </div>
            </div>
          </div>

          <div className="flex min-w-40 flex-1 flex-col items-start justify-start gap-3">
            <div className="text-sm leading-5 font-medium">Company</div>
            <div className="flex flex-col items-start justify-center gap-2">
              <div className="cursor-pointer text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                About us
              </div>
              <div className="cursor-pointer text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Our team
              </div>
              <div className="cursor-pointer text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Careers
              </div>
              <div className="cursor-pointer text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Brand
              </div>
              <div className="cursor-pointer text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Contact
              </div>
            </div>
          </div>

          <div className="flex min-w-40 flex-1 flex-col items-start justify-start gap-3">
            <div className="text-sm leading-5 font-medium">Resources</div>
            <div className="flex flex-col items-center justify-center gap-2">
              <div className="cursor-pointer self-stretch text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Terms of use
              </div>
              <div className="cursor-pointer self-stretch text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                API Reference
              </div>
              <div className="cursor-pointer self-stretch text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Documentation
              </div>
              <div className="cursor-pointer self-stretch text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Community
              </div>
              <div className="cursor-pointer self-stretch text-sm leading-5 font-normal text-muted-foreground transition-colors hover:text-primary">
                Support
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="relative h-12 self-stretch overflow-hidden border-t border-b">
        <div className="absolute inset-0 h-full w-full overflow-hidden">
          <div className="relative h-full w-full">
            {Array.from({ length: 300 }).map((_, i) => (
              <div
                key={i}
                className="absolute h-4 w-full origin-top-left -rotate-45 outline-[0.5px] outline-offset-[-0.25px] outline-primary/40"
                style={{
                  top: `${i * 16 - 120}px`,
                  left: "-100%",
                  width: "300%",
                }}
              ></div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}