Call To Action

import React from "react";

const CTA = () => {
  return (
    <div className="bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 py-24">
      <div className="mx-auto max-w-4xl px-6 text-center">
        <h2 className="text-4xl font-medium tracking-tight text-gray-900 dark:text-white sm:text-5xl">
          Join Us Today
        </h2>
        <p className="mt-6 text-xl leading-relaxed text-gray-600 dark:text-gray-300">
          Sign up now to get exclusive offers and updates.
        </p>
        <div className="mt-10">
          <button className="inline-flex items-center justify-center rounded-2xl bg-gradient-to-b from-purple-500 to-purple-600 px-8 py-4 text-base font-medium text-white shadow-lg shadow-purple-500/30 transition-all duration-200 hover:from-purple-600 hover:to-purple-700 hover:shadow-purple-600/40 focus:outline-none active:scale-95 dark:from-purple-600 dark:to-purple-700 dark:hover:from-purple-700 dark:hover:to-purple-800">
            Get Started
          </button>
        </div>
      </div>
    </div>
  );
};

export default CTA;

import React from "react";

const CTA = () => {
  return (
    <div className="bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 py-24">
      <div className="mx-auto max-w-4xl px-6">
        <div className="overflow-hidden rounded-3xl bg-white/70 dark:bg-gray-800/70 p-12 shadow-xl dark:shadow-gray-900/50 ring-1 ring-gray-900/5 dark:ring-white/10">
          <h2 className="text-3xl font-medium tracking-tight text-gray-900 dark:text-white">
            Get Started Today
          </h2>
          <p className="mt-6 text-xl leading-relaxed text-gray-600 dark:text-gray-300">
            Start your journey with us and enjoy exclusive benefits.
          </p>
          <div className="mt-8">
            <button className="inline-flex items-center justify-center rounded-2xl bg-gradient-to-b from-purple-500 to-purple-600 px-7 py-3.5 text-base font-medium text-white shadow-lg shadow-purple-500/30 transition-all duration-200 hover:from-purple-600 hover:to-purple-700 hover:shadow-purple-600/40 focus:outline-none active:scale-95 dark:from-purple-600 dark:to-purple-700 dark:hover:from-purple-700 dark:hover:to-purple-800">
              Sign Up
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CTA;

import React from "react";

const CTA = () => {
  return (
    <div className="bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 py-24">
      <div className="mx-auto max-w-4xl px-6">
        <div className="overflow-hidden rounded-3xl bg-white/70 dark:bg-gray-800/70 p-12 shadow-xl dark:shadow-gray-900/50 ring-1 ring-gray-900/5 dark:ring-white/10">
          <h2 className="text-3xl font-medium tracking-tight text-gray-900 dark:text-white">
            Subscribe to Our Newsletter
          </h2>
          <p className="mt-6 text-xl leading-relaxed text-gray-600 dark:text-gray-300">
            Get the latest news and updates delivered straight to your inbox.
          </p>
          <form className="mt-8 sm:flex sm:max-w-md">
            <input
              type="email"
              className="w-full rounded-xl border-gray-200 bg-gray-50/50 dark:bg-gray-700/50 px-4 py-3 text-base placeholder-gray-500 dark:placeholder-gray-400 shadow-sm transition-colors duration-200 focus:border-purple-500 focus:bg-white focus:ring-purple-500 dark:border-gray-600 dark:text-white dark:focus:border-purple-400 dark:focus:ring-purple-400 sm:max-w-xs"
              placeholder="Your email address"
              required
            />
            <button
              type="submit"
              className="mt-4 w-full rounded-xl bg-gradient-to-b from-purple-500 to-purple-600 px-6 py-3 text-base font-medium text-white shadow-lg shadow-purple-500/30 transition-all duration-200 hover:from-purple-600 hover:to-purple-700 hover:shadow-purple-600/40 focus:outline-none active:scale-95 sm:mt-0 sm:ml-4 sm:w-auto dark:from-purple-600 dark:to-purple-700 dark:hover:from-purple-700 dark:hover:to-purple-800"
            >
              Subscribe
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default CTA;