Footer

import React from "react";

const Footer = () => {
  return (
    <footer className="bg-white dark:bg-neutral-900 py-8 text-neutral-500 dark:text-neutral-400 border-t border-neutral-200 dark:border-neutral-800">
      <div className="container mx-auto text-center">
        <p className="text-sm font-normal tracking-wide">
          &copy; 2024 Your Company. All rights reserved.
        </p>
      </div>
    </footer>
  );
};

export default Footer;

import React from "react";
import { Instagram, Twitter } from "lucide-react";

const Footer = () => {
  return (
    <footer className="bg-white dark:bg-neutral-900 py-16 text-neutral-500 dark:text-neutral-400 border-t border-neutral-200 dark:border-neutral-800">
      <div className="container mx-auto grid gap-16 px-6 sm:grid-cols-3">
        <section className="space-y-6">
          <h2 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
            Your Company
          </h2>
          <address className="not-italic text-sm leading-relaxed">
            123 Street, Cityville
            <br />
            <a
              href="mailto:info@example.com"
              className="transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
            >
              info@example.com
            </a>
          </address>
        </section>
        <section className="space-y-6">
          <h2 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
            Company
          </h2>
          <ul className="space-y-4">
            {["About Us", "Careers", "Press"].map((item) => (
              <li key={item}>
                <a
                  href="#"
                  className="text-sm transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
                >
                  {item}
                </a>
              </li>
            ))}
          </ul>
        </section>
        <section className="space-y-6">
          <h2 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
            Follow Us
          </h2>
          <div className="flex space-x-8">
            <a
              href="#"
              aria-label="Follow on Instagram"
              className="text-neutral-400 transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
            >
              <Instagram className="w-5 h-5" />
            </a>
            <a
              href="#"
              aria-label="Follow on Twitter"
              className="text-neutral-400 transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
            >
              <Twitter className="w-5 h-5" />
            </a>
          </div>
        </section>
      </div>
    </footer>
  );
};

export default Footer;

import React from "react";

const Footer = () => {
  return (
    <footer className="bg-white dark:bg-neutral-900 text-neutral-500 dark:text-neutral-400 border-t border-neutral-200 dark:border-neutral-800">
      <div className="container mx-auto px-6 py-24">
        <div className="flex flex-col items-center justify-between border-b border-neutral-200 dark:border-neutral-800 pb-16 md:flex-row">
          <div className="mb-12 md:mb-0 md:w-1/2">
            <h2 className="text-3xl font-medium tracking-tight text-neutral-900 dark:text-white">
              Subscribe to our Newsletter
            </h2>
            <p className="mt-4 text-base font-normal">
              Stay updated with the latest news and offers.
            </p>
          </div>
          <form
            className="w-full md:w-1/2"
            aria-label="Newsletter Subscription"
          >
            <div className="flex">
              <input
                type="email"
                id="newsletter-email"
                placeholder="Enter your email"
                className="w-full rounded-l-xl bg-neutral-50 p-4 text-neutral-900 dark:bg-neutral-800 focus:outline-none dark:text-white"
                required
              />
              <button
                type="submit"
                className="rounded-r-xl bg-neutral-900 px-8 py-4 text-sm font-medium text-white hover:bg-neutral-800 focus:outline-none dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100"
              >
                Subscribe
              </button>
            </div>
          </form>
        </div>
        <div className="mt-16 text-center text-sm font-normal">
          <p>&copy; 2024 Your Company. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;

import React from "react";
import { Facebook, Instagram, Linkedin, Sparkles, Twitter } from "lucide-react";

const Footer = () => {
  return (
    <footer className="bg-white dark:bg-neutral-900 py-24 text-center text-neutral-500 dark:text-neutral-400 border-t border-neutral-200 dark:border-neutral-800">
      <div className="container mx-auto px-6">
        <h2 className="text-4xl font-medium tracking-tight text-neutral-900 dark:text-white">
          Join our community
        </h2>
        <p className="mt-6 text-lg font-normal">
          Get updates on our latest products and promotions.
        </p>
        <button className="mt-12 rounded-full bg-neutral-900 px-12 py-4 text-sm font-medium text-white transition-all duration-300 hover:bg-neutral-800 focus:outline-none dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-100">
          Join Now
        </button>
        <div className="my-16 flex items-center justify-center">
          <div className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div>
          <span className="mx-8">
            <Sparkles className="h-6 w-6 text-neutral-900 dark:text-white" />
          </span>
          <div className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div>
        </div>
        <div className="grid gap-16 sm:grid-cols-3">
          <div className="space-y-4">
            <h3 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
              Your Company
            </h3>
            <p className="text-sm font-normal">123 Street, Cityville</p>
            <p className="text-sm font-normal">info@example.com</p>
          </div>
          <nav className="space-y-4">
            <h3 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
              Company
            </h3>
            <ul className="space-y-4">
              {["About Us", "Careers", "Press"].map((item) => (
                <li key={item}>
                  <a
                    href="#"
                    className="text-sm transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
                  >
                    {item}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
          <div className="space-y-6">
            <h3 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
              Follow Us
            </h3>
            <div className="flex justify-center space-x-8">
              {[Facebook, Twitter, Instagram, Linkedin].map((Icon, index) => (
                <a
                  key={index}
                  href="#"
                  className="text-neutral-400 transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
                  aria-label={`Follow on ${Icon.name}`}
                >
                  <Icon className="w-5 h-5" />
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;

import React from "react";
import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";

const Footer = () => {
  return (
    <footer className="bg-white dark:bg-neutral-900 py-24 text-neutral-500 dark:text-neutral-400 border-t border-neutral-200 dark:border-neutral-800">
      <div className="container mx-auto px-6">
        <div className="grid gap-16 sm:grid-cols-2 lg:grid-cols-4">
          <div className="space-y-8">
            <h2 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
              Your Brand
            </h2>
            <p className="text-sm font-normal leading-relaxed">
              We are a cutting-edge AI company dedicated to pushing the
              boundaries of what&apos;s possible with technology.
            </p>
            <div className="flex space-x-8">
              {[Facebook, Twitter, Instagram, Linkedin].map((Icon, index) => (
                <a
                  key={index}
                  href="#"
                  className="text-neutral-400 transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
                  aria-label={`Follow on ${Icon.name}`}
                >
                  <Icon className="w-5 h-5" />
                </a>
              ))}
            </div>
          </div>
          {[
            {
              title: "Products",
              items: ["AI Models", "APIs", "Platforms", "Solutions"],
            },
            {
              title: "Resources",
              items: ["Documentation", "Case Studies", "Blog", "Support"],
            },
            {
              title: "Company",
              items: ["About Us", "Careers", "Contact", "Press"],
            },
          ].map((section) => (
            <div key={section.title} className="space-y-8">
              <h2 className="text-base font-semibold tracking-tight text-neutral-900 dark:text-white">
                {section.title}
              </h2>
              <ul className="space-y-4">
                {section.items.map((item) => (
                  <li key={item}>
                    <a
                      href="#"
                      className="text-sm transition-colors duration-300 hover:text-neutral-900 dark:hover:text-white"
                    >
                      {item}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-24 border-t border-neutral-200 dark:border-neutral-800 pt-8 text-center">
          <p className="text-sm font-normal">
            &copy; 2024 Your Company. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;