Backgrpund color changes from black to white

[Kyl67899]

I am working on a fullstack application and getting that the color changes. Not sure how. I can provide the code for the style. Is this the animation feature for the style?

[rozsazoltan]

Can you share the source code?

[Kyl67899]

[Kyl67899]

[Kyl67899]

here is the source code:

"use client"

import { Search, ChefHat, Users, Star } from "lucide-react"
import Image from "next/image"
import { Button } from "./ui/button"
import Link from "next/link"

export function HeroSection() {
return (

{/* Background Pattern */}

  <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-24">
    <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
      {/* Content */}
      <div className="text-center lg:text-left space-y-6 lg:space-y-8">
        <div className="space-y-4">
          <h1 className="text-3xl text-black sm:text-4xl lg:text-5xl xl:text-6xl font-bold tracking-tight">
            Discover Amazing{" "}
            <span className="text-transparent bg-clip-text bg-linear-to-r from-orange-500 to-red-600">
              Recipes
            </span>
          </h1>
          <p className="text-base text-black sm:text-lg lg:text-xl text-muted-foreground max-w-2xl mx-auto lg:mx-0">
            Join our community of food lovers. Share your favorite recipes, discover new flavors, and create
            memorable meals with friends and family.
          </p>
        </div>

        {/* CTA Buttons */}
        <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center lg:justify-start relative z-10">
          <Button size="lg" asChild>
            <Link href="/explore" className="flex items-center gap-2">
              <Search className="h-5 w-5" />
              Explore Recipes
            </Link>
          </Button>

          <Button variant="outline" size="lg" asChild>
            <Link href="/signup" className="flex items-center gap-2">
              <ChefHat className="h-5 w-5" />
              Start Cooking
            </Link>
          </Button>
        </div>


        {/* Stats */}
        <div className="grid grid-cols-3 gap-4 sm:gap-6 pt-6 lg:pt-8">
          <div className="text-center lg:text-left">
            <div className="text-xl text-transparent bg-clip-text bg-linear-to-r from-orange-500 to-red-600 sm:text-2xl lg:text-3xl font-bold">10K+</div>
            <div className="text-xs text-black sm:text-sm text-muted-foreground">Recipes</div>
          </div>
          <div className="text-center lg:text-left">
            <div className="text-xl text-transparent bg-clip-text bg-linear-to-r from-orange-500 to-red-600 sm:text-2xl lg:text-3xl font-bold">5K+</div>
            <div className="text-xs text-black sm:text-sm text-muted-foreground">Chefs</div>
          </div>
          <div className="text-center lg:text-left">
            <div className="text-xl text-transparent bg-clip-text bg-linear-to-r from-orange-500 to-red-600 sm:text-2xl lg:text-3xl font-bold">50K+</div>
            <div className="text-xs text-black sm:text-sm text-muted-foreground">Reviews</div>
          </div>
        </div>
      </div>

      {/* Hero Image */}
      <div className="relative order-first lg:order-last">
        <div className="relative aspect-square sm:aspect-4/3 lg:aspect-square max-w-md mx-auto lg:max-w-none">
          <Image
            src="/recipehub3.jpeg"
            alt="Delicious recipes"
            className="w-full h-full object-cover rounded-2xl shadow-2xl"
            width={600}
            height={600}
          />

          {/* Floating Cards */}
          <div className="absolute -top-4 -left-4 sm:-top-6 sm:-left-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-3 sm:p-4">
            <div className="flex items-center space-x-2">
              <Star className="h-4 w-4 sm:h-5 sm:w-5 text-yellow-500 fill-current" />
              <span className="text-sm sm:text-base font-semibold">4.9</span>
            </div>
            <div className="text-xs sm:text-sm text-muted-foreground">Rating</div>
          </div>

          <div className="absolute -bottom-4 -right-4 sm:-bottom-6 sm:-right-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-3 sm:p-4">
            <div className="flex items-center space-x-2">
              <Users className="h-4 w-4 sm:h-5 sm:w-5 text-green-500" />
              <span className="text-sm sm:text-base font-semibold">2.5K</span>
            </div>
            <div className="text-xs sm:text-sm text-muted-foreground">Cooks</div>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>

)
}

[rozsazoltan]

In the code, the color of the two floating cards is off because of dark:bg-gray-800. The background of the entire page cannot be reproduced with the provided example. You can check with DevTools what is giving the background a color very similar to bg-gray-800. I think there might be something in your CSS entrypoint that is styling the html or body.

• https://play.tailwindcss.com/jCJYNCffPM

[Kyl67899]

[Kyl67899]

package.json

"tailwind-merge": "^3.4.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.17",
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",
"eslint": "^9.39.1",
"eslint-config-next": "16.0.3",
"postcss": "^8.5.6",
"tailwindcss": "^4.1.17",
"typescript": "^5.9.3"
}