<section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
  <div className="container px-4 md:px-6 mx-auto">
    <div className="flex flex-col items-center space-y-4 text-center">
      <div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
          Build faster with ToolMate UI
        </h1>
        <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
          Beautifully designed components built with Tailwind CSS. Copy and paste into your apps.
        </p>
      </div>
      <div className="space-x-4">
        <a href="#" className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90">Get Started</a>
        <a href="#" className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground">Documentation</a>
      </div>
    </div>
  </div>
</section>

"use client";

import React, { useState } from "react";

interface HeroBasicProps {
  className?: string;
  children?: React.ReactNode;
}

export default function HeroBasic({
  className = "",
  children,
}: HeroBasicProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
  <div className="container px-4 md:px-6 mx-auto">
    <div className="flex flex-col items-center space-y-4 text-center">
      <div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
          Build faster with ToolMate UI
        </h1>
        <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
          Beautifully designed components built with Tailwind CSS. Copy and paste into your apps.
        </p>
      </div>
      <div className="space-x-4">
        <a href="#" className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90">Get Started</a>
        <a href="#" className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground">Documentation</a>
      </div>
    </div>
  </div>
</section>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedHeroBasic() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
  <div className="container px-4 md:px-6 mx-auto">
    <div className="flex flex-col items-center space-y-4 text-center">
      <div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
          Build faster with ToolMate UI
        </h1>
        <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
          Beautifully designed components built with Tailwind CSS. Copy and paste into your apps.
        </p>
      </div>
      <div className="space-x-4">
        <a href="#" className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90">Get Started</a>
        <a href="#" className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground">Documentation</a>
      </div>
    </div>
  </div>
</section>
    </motion.div>
  );
}