# Hero1

A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/hero1).

- Page, with a live preview: https://shadcn.exchange/r/watermelon/hero1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/hero1-light-26d6b53151f432f6.png
- Registry item: https://registry.watermelon.sh/r/hero1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://registry.watermelon.sh/r/hero1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`, `motion`

## Files

### `src/components/blocks/sfHerodemo/Hero1.tsx`

```tsx
import React from "react";
import Header from "./ui/Header";
import Hero from "./ui/Hero";

export const Hero1: React.FC = () => {
  return (
    <div className="min-h-screen antialiased bg-[#111216] font-[Poppins]">
      <div className="  text-neutral-50 ">
        <Header />
        <main className="overflow-hidden">
          <Hero />
        </main>
      </div>
    </div>
  );
};

export default Hero1;
```

### `src/components/blocks/sfHerodemo/ui/Header.tsx`

```tsx
import React, { useState } from "react";
import { motion, AnimatePresence } from "motion/react";

const HamburgerIcon = () => (
  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
  </svg>
);

const CloseIcon = () => (
  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
  </svg>
);

const UserProfile = () => (
  <div className="flex items-center space-x-3">
    <div className="w-10 h-10 rounded-lg  flex bg-[#9A6F6F] items-center justify-center font-semibold">AC</div>
    <div>
      <p className="font-medium text-sm">Alex Costa</p>
      <p className="text-xs">alex20@mail.com</p>
    </div>
  </div>
);

const Header: React.FC = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const menuContainerVariants = {
    hidden: {
      y: "-100%",
      opacity: 0,
      transition: { type: "tween", duration: 0.3, ease: "easeIn" },
    },
    visible: {
      y: 0,
      opacity: 1,
      transition: { type: "tween", duration: 0.3, ease: "easeOut", staggerChildren: 0.1 },
    },
  } as const;

  const menuItemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  } as const;

  return (
    <>
      <motion.header
        initial={{ y: -20, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5 }}
        className="flex justify-between items-center py-4 px-7 md:px-21 relative z-65"
      >
        <div className="flex items-center gap-18 justify-start">
          <div id="logo" className="text-[34px] font-semibold tracking-wider">Adorable</div>
          <nav className="hidden md:flex items-center gap-10">
            <a href="#" className="font-regular text-lg">Community</a>
            <a href="#" className="font-regular text-lg">Pricing</a>
            <a href="#" className="font-regular text-lg">Enterprise</a>
            <a href="#" className="font-regular text-lg">Learn</a>
          </nav>
        </div>

        <div className="hidden md:block">
          <UserProfile />
        </div>

        <div className="md:hidden">
          <button onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <CloseIcon /> : <HamburgerIcon />}
          </button>
        </div>
      </motion.header>

      <AnimatePresence>
        {isMenuOpen && (
          <motion.div
            variants={menuContainerVariants}
            initial="hidden"
            animate="visible"
            exit="hidden"
            className="fixed top-0 left-0 z-60 h-auto w-full flex flex-col items-center space-y-6 py-8 border-b border-neutral-800 bg-[#111216]"
            style={{ backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)" }}
          >
            <div className="pt-16">
              <motion.a variants={menuItemVariants} href="#" className="block text-center text-xl font-regular py-2" onClick={() => setIsMenuOpen(false)}>Community</motion.a>
              <motion.a variants={menuItemVariants} href="#" className="block text-center text-xl font-regular py-2" onClick={() => setIsMenuOpen(false)}>Pricing</motion.a>
              <motion.a variants={menuItemVariants} href="#" className="block text-center text-xl font-regular py-2" onClick={() => setIsMenuOpen(false)}>Enterprise</motion.a>
              <motion.a variants={menuItemVariants} href="#" className="block text-center text-xl font-regular py-2" onClick={() => setIsMenuOpen(false)}>Learn</motion.a>
              <motion.a variants={menuItemVariants} href="#" className="block text-center text-xl font-regular py-2" onClick={() => setIsMenuOpen(false)}>Launched</motion.a>
              <motion.div variants={menuItemVariants} className="border-t-[0.2px] border-gray-400/20 w-full pt-6 mt-4 flex justify-center">
                <UserProfile />
              </motion.div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};

export default Header;
```

### `src/components/blocks/sfHerodemo/ui/Hero.tsx`

```tsx
import React, { useState } from "react";
import { motion } from "motion/react";
import { Plus, Leaf, Lightbulb, ChevronDown, Mic, Send } from "lucide-react";

const Hero: React.FC = () => {
  const [normalOpen, setNormalOpen] = useState(false);
  const [deepThinkOpen, setDeepThinkOpen] = useState(false);

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.2, delayChildren: 0.3 },
    },
  } as const;

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  } as const;

  return (
    <motion.section
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      className="text-center relative z-50 px-4 sm:px-6 lg:px-8"
    >
      <div className="bg-gradient-to-br from-orange-600 to-indigo-600 bg-clip-text mt-16 sm:mt-24">
        <motion.h1
          variants={itemVariants}
          id="heading"
          className="text-4xl sm:text-4xl md:text-6xl font-bold inline-block text-transparent leading-snug"
          style={{ WebkitTextFillColor: "transparent" }}
        >
          Build something Adorable
        </motion.h1>
        <motion.p
          id="subheading"
          variants={itemVariants}
          className="mt-3 sm:mt-4 px-2 sm:px-0 tracking-wide text-base sm:text-lg md:text-2xl text-[#A1A7A4]"
        >
          Create apps and websites by chatting with AI
        </motion.p>
      </div>

      <div className="relative pt-24 sm:py-24 lg:py-28 overflow-visible">
        {/* CSS-only background glows */}
        <div className="pointer-events-none absolute left-10 sm:left-1/3 lg:left-[30%] 2xl:left-[35%] top-1/3 lg:top-[41%] 2xl:top-[48%] -translate-x-1/2 -translate-y-1/2 w-60 sm:w-72 md:w-80 lg:w-[500px] 2xl:w-[600px] z-0 rounded-full blur-3xl" style={{ background: "radial-gradient(closest-side, rgba(236,72,153,0.35), transparent)" }} />
        <div className="pointer-events-none absolute right-10 sm:right-1/3 lg:right-[31%] 2xl:right-[35%] top-30 lg:top-[61%] translate-x-1/2 -translate-y-1/2 w-56 sm:w-72 md:w-80 lg:w-[500px] 2xl:w-[550px] z-0 rounded-full blur-3xl" style={{ background: "radial-gradient(closest-side, rgba(99,102,241,0.35), transparent)" }} />

        <motion.div
          variants={itemVariants}
          className="relative max-w-full sm:max-w-2xl lg:max-w-3xl mx-auto border border-neutral-600 rounded-3xl p-4 sm:p-4 sm:py-2 z-10 bg-[#111216] backdrop-blur"
        >
          <div className="text-left text-lg px-2 sm:px-4">
            <input
              type="text"
              placeholder="Ask Anything..."
              className="w-full py-3 sm:py-4 border-none text-sm sm:text-lg outline-none bg-transparent text-white"
            />
          </div>

          <div className="flex flex-col sm:flex-row items-center justify-between mt-6 sm:mt-9 space-y-4 sm:space-y-0 sm:space-x-3 p-2">
            <div className="flex flex-wrap items-center gap-2 relative">
              <button className="w-9 h-9 sm:w-12 sm:h-12 cursor-pointer flex items-center justify-center rounded-full bg-[#1a1b1e] border border-neutral-700 text-neutral-300 hover:bg-neutral-800">
                <Plus size={20} />
              </button>

              <div className="relative">
                <button
                  onClick={() => setNormalOpen(!normalOpen)}
                  className="flex items-center cursor-pointer space-x-2 px-4 py-2.5 rounded-full bg-[#1a1b1e] border border-neutral-700 text-neutral-300 text-sm sm:text-base hover:bg-neutral-800"
                >
                  <Leaf size={16} />
                  <span>Normal</span>
                  <ChevronDown size={18} className={`ml-1 transition-transform ${normalOpen ? "rotate-180" : ""}`} />
                </button>
                {normalOpen && (
                  <div className="absolute right-0 mt-2 w-fit text-left rounded-lg bg-[#1a1b1e] border border-neutral-700 shadow-lg">
                    <ul className="text-neutral-300 text-sm">
                      <li className="px-4 py-2 hover:bg-neutral-800 cursor-pointer">Fast</li>
                      <li className="px-4 py-2 hover:bg-neutral-800 cursor-pointer">Normal</li>
                      <li className="px-4 py-2 hover:bg-neutral-800 cursor-pointer">Creative</li>
                    </ul>
                  </div>
                )}
              </div>

              <div className="relative">
                <button
                  onClick={() => setDeepThinkOpen(!deepThinkOpen)}
                  className="flex items-center cursor-pointer space-x-2 px-4 py-2 rounded-full bg-[#1a1b1e] border border-neutral-700 text-neutral-300 text-sm sm:text-lg hover:bg-neutral-800"
                >
                  <Lightbulb size={16} />
                  <span>DeepThink</span>
                  <ChevronDown size={18} className={`ml-1 transition-transform ${deepThinkOpen ? "rotate-180" : ""}`} />
                </button>
                {deepThinkOpen && (
                  <div className="absolute right-0 mt-2 text-left w-fit rounded-lg bg-[#1a1b1e] border border-neutral-700 shadow-lg">
                    <ul className="text-neutral-300 text-sm">
                      <li className="px-4 py-2 hover:bg-neutral-800 cursor-pointer">DeepThink</li>
                      <li className="px-4 py-2 hover:bg-neutral-800 cursor-pointer">Critical</li>
                      <li className="px-4 py-2 hover:bg-neutral-800 cursor-pointer">Precise</li>
                    </ul>
                  </div>
                )}
              </div>
            </div>

            <div className="flex items-center space-x-2">
              <button className="flex items-center cursor-pointer space-x-2 px-3 py-2.5 rounded-full bg-[#1a1b1e] border border-neutral-700 text-neutral-300 text-sm sm:text-base hover:bg-neutral-800">
                <Mic size={18} />
                <span className="hidden sm:block">Voice</span>
              </button>

              <motion.button
                whileHover={{
                  scale: 1.05,
                  boxShadow: "0px 0px 20px rgba(236, 72, 153, 0.6)",
                }}
                whileTap={{ scale: 0.95 }}
                transition={{ type: "spring", stiffness: 300, damping: 15 }}
                className="w-12 h-12 sm:w-14 cursor-pointer sm:h-14 flex items-center justify-center rounded-full bg-gradient-to-r from-pink-500 to-indigo-500 text-white shadow-lg"
              >
                <Send size={20} />
              </motion.button>
            </div>
          </div>
        </motion.div>
      </div>
    </motion.section>
  );
};

export default Hero;
```