footer

1import React from 'react';
2 
3const Footer: React.FC = () => {
4  return (
5    <footer className="relative bg-black text-white w-full min-h-[600px] flex flex-col overflow-hidden pt-20 px-6 md:px-12 lg:px-24">
6 
7      <article id="lighting-wrap">
8        <article id="lightings">
9          <section id="light-one" className="lighting-section">
10            <section id="light-two" className="lighting-section">
11              <section id="light-three" className="lighting-section">
12                <section id="light-four" className="lighting-section">
13                  <section id="light-five" className="lighting-section" />
14                </section>
15              </section>
16            </section>
17          </section>
18        </article>
19      </article>
20 
21      <div className="flex flex-col lg:flex-row justify-between w-full h-full pb-20 z-10 relative">
22 
23        <div className="flex flex-col mb-32 lg:mb-28 max-w-xl">
24 
25          <div className="mb-8">
26            <span className="inline-block px-4 py-1.5 rounded-full bg-zinc-900 text-zinc-400 text-[10px] font-medium tracking-[0.2em] uppercase">
27              Obsidian UI
28            </span>
29          </div>
30 
31          <h2 className="text-3xl md:text-5xl lg:text-6xl font-serif-elegant leading-tight">
32            Build landing pages<br />
33            that feel alive<br />
34            and effortless
35          </h2>
36 
37          <p className="mt-6 text-zinc-400 text-sm leading-relaxed max-w-md">
38            ObsidianUI helps you build stunning landing pages using beautifully
39            animated, copy-paste ready components — crafted to be subtle,
40            tasteful, and production-ready.
41          </p>
42        </div>
43 
44        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-12 lg:gap-24">
45 
46          <div className="flex flex-col space-y-6">
47            <h3 className="text-zinc-500 text-[11px] font-medium tracking-[0.2em] uppercase">
48              Product
49            </h3>
50            <ul className="flex flex-col space-y-3">
51              <li><FooterLink href="#">Components</FooterLink></li>
52              <li><FooterLink href="#">Animations</FooterLink></li>
53              <li><FooterLink href="#">Templates</FooterLink></li>
54              <li><FooterLink href="#">Showcase</FooterLink></li>
55            </ul>
56          </div>
57 
58          <div className="flex flex-col space-y-6">
59            <h3 className="text-zinc-500 text-[11px] font-medium tracking-[0.2em] uppercase">
60              Resources
61// … truncated