Hero Sections

"use client"

import { SiTailwindcss } from "react-icons/si"
import { ArrowRight } from "lucide-react"
import { motion } from "framer-motion"

export default function HeroVanilla() {
  return (
    <div className="bg-gradient-to-b from-white to-gray-50 rounded-xl overflow-hidden">
      <div className="max-w-7xl mx-auto w-full flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-16 px-6 py-16 md:py-8">
        {/* Left column */}
        <motion.div
          className="w-full lg:w-[45%] flex flex-col items-start text-left space-y-10"
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
        >
          <div className="space-y-6">
            <motion.div
              className="inline-flex items-center px-4 py-2 rounded-full bg-gray-100 border border-gray-200 text-sm font-medium text-gray-800"
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2, duration: 0.4 }}
            >
              <SiTailwindcss className="mr-2 text-sky-500" />
              <span>Built with Tailwind CSS 4.0</span>
            </motion.div>

            <motion.h2
              className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.1] text-gray-900"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.3, duration: 0.5 }}
            >
              Collection of{" "}
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-sky-500 via-violet-500 to-fuchsia-500">
                Stunning{" "}
              </span>
              Components
            </motion.h2>

            <motion.p
              className="text-lg text-gray-600 max-w-lg leading-relaxed"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.4, duration: 0.5 }}
            >
              100+ UI components and reusable React and Next.js blocks with Tailwind CSS for faster, more efficient
              application development.
            </motion.p>
          </div>

          <div className="flex flex-col justify-start w-full space-y-8">
            <motion.div
              className="flex flex-wrap items-center gap-4"
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5, duration: 0.4 }}
            >
              <motion.button
                className="bg-gray-900 text-white py-3 px-6 rounded-lg font-medium shadow-sm hover:shadow-md transition-all flex items-center group"
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.98 }}
              >
                Browse Components
                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
              </motion.button>
              <motion.button
                className="bg-white border border-gray-300 py-3 px-6 rounded-lg font-medium hover:bg-gray-50 transition-all"
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.98 }}
              >
                Explore Templates
              </motion.button>
            </motion.div>

            {/* Tech Stack Section */}
            <motion.div
              className="w-full"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.6, duration: 0.5 }}
            >
              <h3 className="text-sm font-medium text-gray-500 mb-3">Built with modern technologies</h3>
              <div className="flex flex-wrap gap-3">
                {["React", "Next.js", "TypeScript", "Tailwind CSS"].map((tech, index) => (
                  <motion.div
                    key={tech}
                    className="px-3 py-1.5 bg-white border border-gray-200 rounded-md text-sm text-gray-700 shadow-sm"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.7 + index * 0.1, duration: 0.3 }}
                    whileHover={{ y: -2, boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)" }}
                  >
                    {tech}
                  </motion.div>
                ))}
              </div>
            </motion.div>
          </div>
        </motion.div>

        {/* Right column with component showcase */}
        <motion.div
          className="w-full lg:w-[55%] flex flex-col justify-between lg:pl-8 relative"
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }}
        >
          {/* Decorative elements */}
          <motion.div
            className="absolute -z-10 top-1/2 right-1/2 w-72 h-72 bg-sky-100 rounded-full blur-3xl opacity-30"
            animate={{
              scale: [1, 1.1, 1],
              opacity: [0.3, 0.4, 0.3],
            }}
            transition={{
              repeat: Number.POSITIVE_INFINITY,
              duration: 8,
              ease: "easeInOut",
            }}
          />
          <motion.div
            className="absolute -z-10 bottom-1/4 right-1/4 w-64 h-64 bg-purple-100 rounded-full blur-3xl opacity-30"
            animate={{
              scale: [1, 1.2, 1],
              opacity: [0.3, 0.5, 0.3],
            }}
            transition={{
              repeat: Number.POSITIVE_INFINITY,
              duration: 10,
              ease: "easeInOut",
              delay: 1,
            }}
          />

          {/* Card with subtle shadow and border */}
          <motion.div
            className="relative bg-white border border-gray-100 rounded-2xl shadow-xl shadow-gray-200/50 overflow-hidden p-6"
            initial={{ y: 20 }}
            animate={{ y: 0 }}
            transition={{ duration: 0.5, delay: 0.5 }}
            whileHover={{
              y: -5,
              boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
            }}
          >
            {/* Gradient Card Content */}
            <div className="bg-gradient-to-br from-gray-50 to-white border border-gray-200 rounded-xl p-6 shadow-lg">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center space-x-2">
                  <motion.div className="w-3 h-3 rounded-full bg-red-500" whileHover={{ scale: 1.2 }} />
                  <motion.div className="w-3 h-3 rounded-full bg-yellow-500" whileHover={{ scale: 1.2 }} />
                  <motion.div className="w-3 h-3 rounded-full bg-green-500" whileHover={{ scale: 1.2 }} />
                </div>
                <div className="text-xs text-gray-500">Component Preview</div>
              </div>

              <div className="space-y-4">
                <motion.div
                  className="h-10 bg-gray-100 rounded-md w-3/4"
                  initial={{ width: "0%" }}
                  animate={{ width: "75%" }}
                  transition={{ duration: 0.8, delay: 0.7 }}
                />
                <motion.div
                  className="h-24 bg-gray-100 rounded-md"
                  initial={{ height: "0px" }}
                  animate={{ height: "96px" }}
                  transition={{ duration: 0.8, delay: 0.9 }}
                />
                <div className="flex space-x-2">
                  <motion.div
                    className="h-10 bg-sky-100 rounded-md w-1/3"
                    initial={{ opacity: 0, width: "0%" }}
                    animate={{ opacity: 1, width: "33.333%" }}
                    transition={{ duration: 0.5, delay: 1.1 }}
                  />
                  <motion.div
                    className="h-10 bg-violet-100 rounded-md w-1/3"
                    initial={{ opacity: 0, width: "0%" }}
                    animate={{ opacity: 1, width: "33.333%" }}
                    transition={{ duration: 0.5, delay: 1.3 }}
                  />
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </div>
  )
}