Footer Section One

1import Link from 'next/link'
2 
3import { Button } from '@/components/ui/button'
4import LogoMark from '@/site/ui-library/ui-library-logo'
5import { ArrowRight, Send } from 'lucide-react'
6 
7const products = [
8  { title: 'Overview', href: '#' },
9  { title: 'Features', href: '#' },
10  { title: 'Integrations', href: '#' },
11  { title: 'Use cases', href: '#' },
12  { title: 'Pricing', href: '#' },
13  { title: 'Demo', href: '#' },
14]
15 
16const company = [
17  { title: 'About us', href: '#' },
18  { title: 'Careers', href: '#' },
19  { title: 'Blog', href: '#' },
20  { title: 'Customers', href: '#' },
21  { title: 'Contact', href: '#' },
22  { title: 'Legal & Privacy', href: '#' },
23]
24 
25export default function FooterSectionOne() {
26  return (
27    <footer className="border-t border-border bg-background text-foreground">
28      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 md:py-12 lg:px-8 lg:py-16">
29        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-5 lg:gap-12">
30          <div className="flex flex-col gap-2 sm:col-span-2 lg:col-span-2">
31            <div className="flex items-center justify-start gap-1">
32              <LogoMark aria-hidden="true" className="size-6" />
33              <span className="text-lg font-semibold text-foreground">Nav UI</span>
34            </div>
35 
36            <p className="max-w-2xs pl-1 text-sm font-normal text-muted-foreground">
37              Modern UI components for fast and accessible web apps.
38            </p>
39 
40            <Button asChild variant="secondary" className="mt-2 w-fit">
41              <Link href="#">
42                Start Free Trial
43                <ArrowRight aria-hidden="true" data-icon="inline-end" className="size-4" />
44              </Link>
45            </Button>
46          </div>
47 
48          <div className="flex flex-col gap-3">
49            <h4 className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
50              Products
51            </h4>
52 
53            <ul className="list-none space-y-2">
54              {products.map((item) => (
55                <li key={item.title}>
56                  <Link
57                    href={item.href}
58                    className="text-sm text-muted-foreground transition-colors hover:text-foreground"
59                  >
60                    {item.title}
61                  </Link>
62                </li>
63              ))}
64            </ul>
65          </div>
66 
67          <div className="flex flex-col gap-3">
68// … truncated