Hero Section

"use client";

import { useState } from "react";

export default function HeroSection() {
  const [email, setEmail] = useState("");
  const [isSubscribed, setIsSubscribed] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (email.trim()) {
      setIsSubscribed(true);
      setEmail("");
      setTimeout(() => setIsSubscribed(false), 3000);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16">
        <div className="text-center">
          {\/* Badge *\/}
          <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-700 px-4 py-2 rounded-full text-sm font-medium mb-8">
            <span className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"><\/span>
            New: Version 2.0 is now available
          <\/div>

          {\/* Main Heading *\/}
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
            Build Amazing
            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              {" "}
              Digital Products{" "}
            <\/span>
            Faster Than Ever
          <\/h1>

          {\/* Subtitle *\/}
          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed">
            Create stunning websites and applications with our modern component
            library. Save time, ship faster, and delight your users with
            beautiful interfaces.
          <\/p>

          {\/* CTA Buttons *\/}
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors shadow-lg hover:shadow-xl">
              Get Started Free
            <\/button>
            <button className="border-2 border-gray-300 hover:border-gray-400 text-gray-700 px-8 py-4 rounded-lg font-semibold text-lg transition-colors">
              View Documentation
            <\/button>
          <\/div>

          {\/* Email Subscription *\/}
          <div className="max-w-md mx-auto mb-16">
            <form onSubmit={handleSubmit} className="flex gap-2">
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Enter your email"
                className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
                required
              \/>
              <button
                type="submit"
                className="bg-gray-900 hover:bg-gray-800 text-white px-6 py-3 rounded-lg font-medium transition-colors"
              >
                Subscribe
              <\/button>
            <\/form>
            {isSubscribed && (
              <p className="text-green-600 text-sm mt-2 font-medium">
                \u2713 Successfully subscribed!
              <\/p>
            )}
            <p className="text-gray-500 text-sm mt-2">
              Get notified about updates and new features
            <\/p>
          <\/div>

          {\/* Features Grid *\/}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            <div className="text-center">
              <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg
                  className="w-8 h-8 text-blue-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M13 10V3L4 14h7v7l9-11h-7z"
                  \/>
                <\/svg>
              <\/div>
              <h3 className="text-xl font-semibold text-gray-900 mb-2">
                Lightning Fast
              <\/h3>
              <p className="text-gray-600">
                Optimized components that load instantly and perform beautifully
                on any device.
              <\/p>
            <\/div>

            <div className="text-center">
              <div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg
                  className="w-8 h-8 text-green-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
                  \/>
                <\/svg>
              <\/div>
              <h3 className="text-xl font-semibold text-gray-900 mb-2">
                Mobile First
              <\/h3>
              <p className="text-gray-600">
                Responsive design that looks perfect on mobile, tablet, and
                desktop devices.
              <\/p>
            <\/div>

            <div className="text-center">
              <div className="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg
                  className="w-8 h-8 text-purple-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                  \/>
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                  \/>
                <\/svg>
              <\/div>
              <h3 className="text-xl font-semibold text-gray-900 mb-2">
                Customizable
              <\/h3>
              <p className="text-gray-600">
                Easy to customize and extend. Make it yours with flexible
                theming options.
              <\/p>
            <\/div>
          <\/div>

          {\/* Social Proof *\/}
          <div className="border-t border-gray-200 pt-12">
            <p className="text-gray-500 text-sm mb-8">
              Trusted by developers at
            <\/p>
            <div className="flex flex-wrap justify-center items-center gap-8 opacity-60">
              <div className="bg-gray-200 px-6 py-3 rounded-lg">
                <span className="font-semibold text-gray-600">Company A<\/span>
              <\/div>
              <div className="bg-gray-200 px-6 py-3 rounded-lg">
                <span className="font-semibold text-gray-600">Company B<\/span>
              <\/div>
              <div className="bg-gray-200 px-6 py-3 rounded-lg">
                <span className="font-semibold text-gray-600">Company C<\/span>
              <\/div>
              <div className="bg-gray-200 px-6 py-3 rounded-lg">
                <span className="font-semibold text-gray-600">Company D<\/span>
              <\/div>
            <\/div>
          <\/div>

          {\/* Stats *\/}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16">
            <div className="text-center">
              <div className="text-3xl font-bold text-gray-900 mb-2">50K+<\/div>
              <div className="text-gray-600">Downloads<\/div>
            <\/div>
            <div className="text-center">
              <div className="text-3xl font-bold text-gray-900 mb-2">1.2K+<\/div>
              <div className="text-gray-600">GitHub Stars<\/div>
            <\/div>
            <div className="text-center">
              <div className="text-3xl font-bold text-gray-900 mb-2">500+<\/div>
              <div className="text-gray-600">Companies<\/div>
            <\/div>
            <div className="text-center">
              <div className="text-3xl font-bold text-gray-900 mb-2">99.9%<\/div>
              <div className="text-gray-600">Uptime<\/div>
            <\/div>
          <\/div>
        <\/div>
      <\/div>
    <\/div>
  );
}