"use client"import { useState, useEffect } from "react"import { Zap, Target, TrendingUp } from "lucide-react"const AboutSection = () => {  const [isVisible, setIsVisible] = useState(false)  useEffect(() => {    const observer = new IntersectionObserver(      ([entry]) => {        if (entry.isIntersecting) {          setIsVisible(true)        }      },      { threshold: 0.3 },    )    const element = document.getElementById("about")    if (element) observer.observe(element)    return () => observer.disconnect()  }, [])  return (    <section id="about" className="py-20 bg-gradient-to-br from-gray-50 via-white to-blue-50 relative overflow-hidden">      {/* Background decorative elements */}      <div className="absolute top-10 left-10 w-32 h-32 bg-gradient-to-br from-emerald-200/30 to-blue-200/30 rounded-full blur-xl"></div>      <div className="absolute bottom-10 right-10 w-40 h-40 bg-gradient-to-br from-purple-200/30 to-pink-200/30 rounded-full blur-xl"></div>      <div className="container mx-auto px-4 relative z-10">        <div className="max-w-6xl mx-auto">          <div            className={`text-center mb-12 transition-all duration-1000 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}          >            <h2 className="text-5xl md:text-7xl font-bold text-gray-900 mb-8">              <span className="bg-gradient-to-r from-emerald-600 via-blue-600 to-purple-600 bg-clip-text text-transparent animate-pulse">                Meal&Move              </span>            </h2>          </div>          {/* Creative hexagonal container */}          <div className="relative">            <div className="absolute inset-0 bg-gradient-to-r from-emerald-400/20 to-blue-400/20 transform rotate-3 rounded-3xl"></div>            <div className="absolute inset-0 bg-gradient-to-l from-purple-400/20 to-pink-400/20 transform -rotate-2 rounded-3xl"></div>            <div              className={`relative bg-white/90 backdrop-blur-sm rounded-3xl p-8 md:p-12 shadow-2xl border border-white/50 transition-all duration-1000 delay-300 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}            >              <div className="grid md:grid-cols-3 gap-8 items-center">                <div className="text-center">                  <Zap className="w-16 h-16 text-emerald-600 mx-auto mb-4" />                  <h3 className="text-xl font-bold text-gray-900">Transform</h3>                </div>                <div className="md:col-span-1">                  <p className="text-lg md:text-xl leading-relaxed mb-6 text-center">                    <span className="font-bold bg-gradient-to-r from-emerald-600 to-purple-600 bg-clip-text text-transparent">                      Meal&Move is a dedicated platform for those who want to exercise, learn new things, and reach new                      levels of personal development.                    </span>                  </p>                  <p className="text-base md:text-lg text-gray-600 leading-relaxed text-center">                    This site is primarily an information platform that helps you understand the fundamental principles                    of fitness, nutrition, and personal development to achieve your goals.                  </p>                </div>                <div className="text-center">                  <Target className="w-16 h-16 text-blue-600 mx-auto mb-4 animate-pulse" />                  <h3 className="text-xl font-bold text-gray-900">Achieve</h3>                </div>              </div>              <div className="mt-8 flex justify-center">                <TrendingUp className="w-12 h-12 text-purple-600 animate-bounce" />              </div>            </div>          </div>        </div>      </div>    </section>  )}export default AboutSection "use client"import { useState, useEffect } from "react"import { Menu, X } from "lucide-react"const Header = () => {  const [isScrolled, setIsScrolled] = useState(false)  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)  useEffect(() => {    const handleScroll = () => {      setIsScrolled(window.scrollY > 50)    }    window.addEventListener("scroll", handleScroll)    return () => window.removeEventListener("scroll", handleScroll)  }, [])  const scrollToSection = (sectionId: string) => {    const element = document.getElementById(sectionId)    if (element) {      element.scrollIntoView({ behavior: "smooth" })      setIsMobileMenuOpen(false)    }  }  const navItems = [    { label: "About", id: "about" },    { label: "Nutrition", id: "nutrition" },    { label: "Home Workouts", id: "workouts" },    { label: "Support", id: "support" },  ]  return (    <header      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${        isScrolled ? "bg-white/95 backdrop-blur-md shadow-lg" : "bg-transparent"      }`}    >      <div className="container mx-auto px-4 py-4">        <div className="flex items-center justify-between">          {/* Custom Logo */}          <div className="cursor-pointer group" onClick={() => scrollToSection("hero")}>            <div className="relative">              <div className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-emerald-600 to-blue-600 bg-clip-text text-transparent transform -rotate-2 group-hover:rotate-0 transition-transform duration-300">                Meal              </div>              <div className="text-xl md:text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent transform rotate-1 -mt-1 ml-8 group-hover:rotate-0 transition-transform duration-300">                &Move              </div>            </div>          </div>          {/* Desktop Navigation */}          <nav className="hidden md:flex space-x-8">            {navItems.map((item) => (              <button                key={item.id}                onClick={() => scrollToSection(item.id)}                className={`px-4 py-2 rounded-lg transition-all duration-300 font-medium backdrop-blur-sm border ${                  isScrolled                    ? "text-gray-700 hover:text-emerald-600 hover:bg-emerald-50 border-gray-200 hover:border-emerald-300"                    : "text-white/90 hover:text-white hover:bg-white/20 border-white/10 hover:border-white/30"                }`}              >                {item.label}              </button>            ))}          </nav>          {/* Mobile Menu Button - Improved visibility */}          <button            className={`md:hidden p-2 rounded-lg transition-all duration-300 ${              isScrolled                ? "text-gray-700 hover:bg-gray-100"                : "text-white bg-black/30 backdrop-blur-sm border border-white/20 hover:bg-black/50 shadow-lg"            }`}            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}          >            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}          </button>        </div>        {/* Mobile Navigation */}        {isMobileMenuOpen && (          <nav className="md:hidden mt-4 rounded-lg bg-white shadow-lg backdrop-blur-md border border-gray-200 transition-all duration-300">            <div className="flex flex-col space-y-2 p-4">              {navItems.map((item) => (                <button                  key={item.id}                  onClick={() => scrollToSection(item.id)}                  className="text-left text-gray-800 hover:text-emerald-600 hover:bg-emerald-50 px-4 py-2 rounded-md transition-colors duration-200 font-medium"                >                  {item.label}                </button>              ))}            </div>          </nav>        )}      </div>    </header>  )}export default Header "use client"import { useState, useEffect } from "react"import { ChevronDown } from "lucide-react"const HeroSection = () => {  const [currentIndex, setCurrentIndex] = useState(0)  const [isVisible, setIsVisible] = useState(true)  const texts = ["Train smart.", "Eat clean.", "Stay consistent."]  useEffect(() => {    const interval = setInterval(() => {      setIsVisible(false)      setTimeout(() => {        setCurrentIndex((prev) => (prev + 1) % texts.length)        setIsVisible(true)      }, 500)    }, 3000)    return () => clearInterval(interval)  }, [texts.length])  const scrollToAbout = () => {    const element = document.getElementById("about")    if (element) {      element.scrollIntoView({ behavior: "smooth" })    }  }  return (    <section id="hero" className="min-h-screen flex items-center justify-center relative overflow-hidden">      {/* Background Image */}      <div        className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat"        style={{          backgroundImage: "url('/images/hero-bg.webp')",        }}      >        <div className="absolute inset-0 bg-black/60"></div>      </div>      <div className="container mx-auto px-4 text-center z-10 text-white">        <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">          Transform Your          <span className="block bg-gradient-to-r from-emerald-400 to-blue-400 bg-clip-text text-transparent">            Body & Mind          </span>        </h1>        <div className="text-xl md:text-2xl mb-8 h-8">          <span className={`font-medium transition-opacity duration-500 ${isVisible ? "opacity-100" : "opacity-0"}`}>            {texts[currentIndex]}          </span>        </div>        <button          onClick={scrollToAbout}          className="bg-gradient-to-r from-emerald-600 to-blue-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:shadow-lg transform hover:scale-105 transition-all duration-300"        >          Explore More        </button>        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">          <ChevronDown size={32} className="text-white/70" />        </div>      </div>    </section>  )}export default HeroSection "use client"import { useState } from "react"import { Scale, Zap, Heart, Wheat, Leaf, Apple, ChevronLeft, ChevronRight } from "lucide-react"const NutritionSection = () => {  const nutritionPrinciples = [    {      icon: Scale,      title: "Calories",      description: "The foundation of weight management - creating a caloric deficit is essential for weight loss",      color: "from-red-400 to-orange-600",    },    {      icon: Zap,      title: "Proteins",      description: "Essential for muscle maintenance, repair, and growth. Helps maintain metabolism during weight loss",      color: "from-blue-400 to-indigo-600",    },    {      icon: Heart,      title: "Vitamins & Minerals",      description: "Support vital body functions, immune system, bone health, and various metabolic processes",      color: "from-green-400 to-emerald-600",    },    {      icon: Wheat,      title: "Carbohydrates",      description: "Primary energy source for brain and muscles. Choose complex carbs for sustained energy",      color: "from-yellow-400 to-orange-600",    },    {      icon: Leaf,      title: "Fiber",      description: "Promotes digestive health, helps control blood sugar, and increases satiety for weight management",      color: "from-green-400 to-teal-600",    },    {      icon: Apple,      title: "Healthy Fats",      description: "Essential for hormone production, nutrient absorption, and brain health. Choose unsaturated fats",      color: "from-indigo-400 to-purple-600",    },  ]  const foodSources = {    proteins: [      { name: "Chicken Breast", icon: "🐔" },      { name: "Salmon", icon: "🐟" },      { name: "Eggs", icon: "🥚" },      { name: "Greek Yogurt", icon: "🥛" },      { name: "Quinoa", icon: "🌾" },      { name: "Lentils", icon: "🍲" },      { name: "Almonds", icon: "🥜" },      { name: "Tofu", icon: "🧈" },      { name: "Cottage Cheese", icon: "🧀" },    ],    vitamins: [      { name: "Spinach", icon: "🥬" },      { name: "Broccoli", icon: "🥦" },      { name: "Carrots", icon: "🥕" },      { name: "Oranges", icon: "🍊" },      { name: "Kiwi", icon: "🥝" },      { name: "Blueberries", icon: "🔵" },      { name: "Avocado", icon: "🥑" },      { name: "Bell Peppers", icon: "🌶️" },      { name: "Dairy (Calcium)", icon: "🥛" },      { name: "Bananas (Potassium)", icon: "🍌" },      { name: "Nuts (Magnesium)", icon: "🥜" },      { name: "Seafood (Zinc)", icon: "🦐" },    ],    carbs: [      { name: "Oats", icon: "🌾" },      { name: "Brown Rice", icon: "🍚" },      { name: "Sweet Potato", icon: "🍠" },      { name: "Bananas", icon: "🍌" },      { name: "Apples", icon: "🍎" },      { name: "Whole Bread", icon: "🍞" },      { name: "Pasta", icon: "🍝" },      { name: "Quinoa", icon: "🌾" },      { name: "Potatoes", icon: "🥔" },    ],    fiber: [      { name: "Chia Seeds", icon: "🌱" },      { name: "Beans", icon: "🟫" },      { name: "Artichokes", icon: "🌿" },      { name: "Pears", icon: "🍐" },      { name: "Brussels Sprouts", icon: "🥬" },      { name: "Raspberries", icon: "🔴" },      { name: "Whole Grains", icon: "🌾" },      { name: "Flaxseeds", icon: "🌱" },      { name: "Legumes", icon: "🟫" },    ],    fats: [      { name: "Olive Oil", icon: "🧴" },      { name: "Avocados", icon: "🥑" },      { name: "Salmon", icon: "🐟" },      { name: "Walnuts", icon: "🥜" },      { name: "Chia Seeds", icon: "🌱" },      { name: "Coconut", icon: "🥥" },      { name: "Dark Chocolate", icon: "🍫" },      { name: "Flaxseeds", icon: "🌱" },      { name: "Almonds", icon: "🥜" },    ],  }  // Carousel state for each food category  const [carouselStates, setCarouselStates] = useState({    proteins: 0,    vitamins: 0,    carbs: 0,    fiber: 0,    fats: 0,  })  const itemsPerPage = 3  const getVisibleItems = (items: any[], currentIndex: number) => {    return items.slice(currentIndex, currentIndex + itemsPerPage)  }  const handleNext = (category: keyof typeof carouselStates) => {    const maxIndex = Math.max(0, foodSources[category].length - itemsPerPage)    setCarouselStates((prev) => ({      ...prev,      [category]: Math.min(prev[category] + itemsPerPage, maxIndex),    }))  }  const handlePrev = (category: keyof typeof carouselStates) => {    setCarouselStates((prev) => ({      ...prev,      [category]: Math.max(0, prev[category] - itemsPerPage),    }))  }  const FoodCarousel = ({    title,    items,    category,    icon: Icon,    bgGradient,    iconColor,  }: {    title: string    items: any[]    category: keyof typeof carouselStates    icon: any    bgGradient: string    iconColor: string  }) => {    const currentIndex = carouselStates[category]    const visibleItems = getVisibleItems(items, currentIndex)    const canGoPrev = currentIndex > 0    const canGoNext = currentIndex + itemsPerPage < items.length    return (      <div className={`bg-gradient-to-r ${bgGradient} rounded-3xl p-8`}>        <h3 className="text-2xl font-bold text-center text-gray-900 mb-6 flex items-center justify-center">          <Icon className={`w-8 h-8 ${iconColor} mr-3`} />          {title}        </h3>        <div className="relative">          <div className="grid grid-cols-3 gap-4 mb-6">            {visibleItems.map((food, index) => (              <div                key={index}                className="bg-white rounded-xl p-3 md:p-4 text-center shadow-sm hover:shadow-md transition-shadow min-w-0"              >                <div className="text-xl md:text-2xl mb-2">{food.icon}</div>                <span className="text-gray-700 font-medium text-xs md:text-sm leading-tight break-words">                  {food.name}                </span>              </div>            ))}          </div>          {/* Navigation buttons */}          <div className="flex justify-center items-center space-x-4">            <button              onClick={() => handlePrev(category)}              disabled={!canGoPrev}              className={`p-2 rounded-full transition-all ${                canGoPrev                  ? "bg-white shadow-md hover:shadow-lg text-gray-700 hover:text-gray-900"                  : "bg-gray-200 text-gray-400 cursor-not-allowed"              }`}            >              <ChevronLeft size={20} />            </button>            <div className="flex space-x-2">              {Array.from({ length: Math.ceil(items.length / itemsPerPage) }).map((_, index) => (                <div                  key={index}                  className={`w-2 h-2 rounded-full transition-colors ${                    Math.floor(currentIndex / itemsPerPage) === index ? "bg-gray-700" : "bg-gray-300"                  }`}                />              ))}            </div>            <button              onClick={() => handleNext(category)}              disabled={!canGoNext}              className={`p-2 rounded-full transition-all ${                canGoNext                  ? "bg-white shadow-md hover:shadow-lg text-gray-700 hover:text-gray-900"                  : "bg-gray-200 text-gray-400 cursor-not-allowed"              }`}            >              <ChevronRight size={20} />            </button>          </div>        </div>      </div>    )  }  return (    <section id="nutrition" className="py-20 bg-white">      <div className="container mx-auto px-4">        {/* Centered title and description */}        <div className="text-center mb-16">          <div className="flex items-center justify-center mb-4">            <Apple className="w-12 h-12 text-emerald-600 mr-4" />            <h2 className="text-4xl md:text-5xl font-bold text-gray-900">              Smart{" "}              <span className="bg-gradient-to-r from-emerald-600 to-blue-600 bg-clip-text text-transparent">                Nutrition              </span>            </h2>          </div>          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12">            Understanding the key components of nutrition is essential for achieving your health and fitness goals          </p>        </div>        {/* Nutrition Principles - 3x2 Grid */}        <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-16">          {nutritionPrinciples.map((principle, index) => (            <div              key={index}              className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 group border border-gray-100 text-center"            >              <div                className={`w-16 h-16 rounded-full bg-gradient-to-r ${principle.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300 mx-auto`}              >                <principle.icon size={28} className="text-white" />              </div>              <h3 className="text-xl font-bold text-gray-900 mb-3">{principle.title}</h3>              <p className="text-gray-600 text-sm leading-relaxed">{principle.description}</p>            </div>          ))}        </div>        {/* Food Sources with Carousels */}        <div className="space-y-12">          <FoodCarousel            title="Protein Sources"            items={foodSources.proteins}            category="proteins"            icon={Zap}            bgGradient="from-blue-50 to-indigo-50"            iconColor="text-blue-600"          />          <FoodCarousel            title="Vitamin & Mineral Sources"            items={foodSources.vitamins}            category="vitamins"            icon={Heart}            bgGradient="from-green-50 to-emerald-50"            iconColor="text-green-600"          />          <FoodCarousel            title="Carbohydrate Sources"            items={foodSources.carbs}            category="carbs"            icon={Wheat}            bgGradient="from-orange-50 to-yellow-50"            iconColor="text-orange-600"          />          <FoodCarousel            title="Fiber Sources"            items={foodSources.fiber}            category="fiber"            icon={Leaf}            bgGradient="from-teal-50 to-green-50"            iconColor="text-teal-600"          />          <FoodCarousel            title="Healthy Fat Sources"            items={foodSources.fats}            category="fats"            icon={Apple}            bgGradient="from-indigo-50 to-purple-50"            iconColor="text-indigo-600"          />        </div>      </div>    </section>  )}export default NutritionSection"use client"import { useState } from "react"import { Copy, Check, Heart, Coins } from "lucide-react"const SupportSection = () => {  const [copiedAddress, setCopiedAddress] = useState<string | null>(null)  const addresses = [    {      network: "Solana Network",      address: "2YLTWWgKzjRnUQJM5jm7QpAVbYNDgtjyGKmqX1fNXYMA",      icon: "🟣",    },    {      network: "BEP20 Network (Solana)",      address: "0xb977dbc6289715b4dc6b7c93553f7fc74568bd8e",      icon: "🟡",    },  ]  const copyToClipboard = async (address: string) => {    try {      await navigator.clipboard.writeText(address)      setCopiedAddress(address)      setTimeout(() => setCopiedAddress(null), 2000)    } catch (err) {      console.error("Failed to copy: ", err)    }  }  return (    <section id="support" className="py-20 bg-gradient-to-br from-purple-50 to-blue-50">      <div className="container mx-auto px-4">        <div className="max-w-4xl mx-auto text-center">          <div className="mb-8">            <Heart className="w-16 h-16 text-purple-600 mx-auto mb-4" />            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">              Support{" "}              <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">                The Project              </span>            </h2>            <p className="text-xl text-gray-600 max-w-3xl mx-auto">              If you like the content and information on this site, you can support the work through cryptocurrency              donations.            </p>          </div>          <div className="bg-white rounded-2xl p-8 shadow-lg">            <div className="flex items-center justify-center mb-6">              <Coins className="w-8 h-8 text-yellow-600 mr-3" />              <h3 className="text-2xl font-bold text-gray-900">Solana Donations</h3>            </div>            <div className="mb-6 p-4 bg-gradient-to-r from-purple-100 to-blue-100 rounded-lg">              <p className="text-gray-700 text-sm font-medium">                These are my Solana wallet addresses for cryptocurrency donations:              </p>            </div>            <div className="grid md:grid-cols-2 gap-6">              {addresses.map((crypto, index) => (                <div key={index} className="bg-gray-50 rounded-xl p-6">                  <div className="flex items-center justify-center mb-4">                    <span className="text-2xl mr-3">{crypto.icon}</span>                    <h4 className="text-lg font-semibold text-gray-900">{crypto.network}</h4>                  </div>                  <div className="bg-white rounded-lg p-4 border-2 border-dashed border-gray-300 mb-4">                    <p className="text-sm text-gray-600 font-mono break-all">{crypto.address}</p>                  </div>                  <button                    onClick={() => copyToClipboard(crypto.address)}                    className="flex items-center justify-center gap-2 bg-gradient-to-r from-purple-600 to-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:shadow-lg transition-all duration-300 w-full"                  >                    {copiedAddress === crypto.address ? (                      <>                        <Check size={16} />                        Copied!                      </>                    ) : (                      <>                        <Copy size={16} />                        Copy Address                      </>                    )}                  </button>                </div>              ))}            </div>            <div className="mt-8 p-4 bg-gradient-to-r from-purple-100 to-blue-100 rounded-lg">              <p className="text-gray-700 text-sm">                <strong>Thank you for your support!</strong> Any donation, regardless of size, helps me continue                creating quality content and improving this site.              </p>            </div>          </div>        </div>      </div>    </section>  )}export default SupportSection import { Dumbbell, TrendingUp, Target, Users, Zap } from "lucide-react"const WorkoutsSection = () => {  const muscleGroups = [    {      title: "Chest + Triceps + Shoulders",      icon: "💪",      color: "from-red-500 to-orange-500",      exercises: [        {          name: "Push-ups",          progressions: ["Wall push-ups", "Knee push-ups", "Standard push-ups", "Elevated feet push-ups"],          benefits: "Builds chest, shoulders, triceps, and core strength",        },      ],    },    {      title: "Legs",      icon: "🦵",      color: "from-blue-500 to-indigo-500",      exercises: [        {          name: "Squats",          progressions: ["Chair-assisted squats", "Bodyweight squats", "Jump squats", "Single-leg squats"],          benefits: "Strengthens quads, glutes, and improves balance",        },      ],    },    {      title: "Biceps + Back",      icon: "🏋️",      color: "from-green-500 to-emerald-500",      exercises: [        {          name: "Pull-ups",          progressions: ["Negative pull-ups", "Assisted pull-ups", "Standard pull-ups", "Weighted pull-ups"],          benefits: "Develops back strength, biceps, and grip strength",        },      ],    },    {      title: "Abs + Core",      icon: "🔥",      color: "from-purple-500 to-pink-500",      exercises: [        {          name: "Crunches",          progressions: ["Basic crunches", "Bicycle crunches", "Russian twists", "Plank variations"],          benefits: "Strengthens core muscles and improves stability",        },      ],    },  ]  const dumbbellExercises = [    { name: "Bicep Curls", target: "Biceps", icon: "💪" },    { name: "Chest Press", target: "Chest", icon: "🏋️" },    { name: "Shoulder Press", target: "Shoulders", icon: "🤲" },    { name: "Bent-over Rows", target: "Back", icon: "🔄" },    { name: "Lunges with Dumbbells", target: "Legs", icon: "🦵" },    { name: "Deadlifts", target: "Full Body", icon: "⚡" },    { name: "Goblet Squats", target: "Legs", icon: "🏺" },    { name: "Tricep Extensions", target: "Triceps", icon: "💪" },    { name: "Lateral Raises", target: "Shoulders", icon: "🤲" },    { name: "Hammer Curls", target: "Biceps", icon: "🔨" },    { name: "Chest Flyes", target: "Chest", icon: "🦅" },    { name: "Romanian Deadlifts", target: "Hamstrings", icon: "⚡" },  ]  return (    <section id="workouts" className="py-20 bg-gradient-to-br from-gray-50 to-white">      <div className="container mx-auto px-4">        <div className="text-center mb-16">          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">            Home{" "}            <span className="bg-gradient-to-r from-emerald-600 to-blue-600 bg-clip-text text-transparent">              Workouts            </span>          </h2>        </div>        {/* Unified Mental Health Benefits Section */}        <div className="bg-white rounded-3xl p-8 mb-16 shadow-lg border border-gray-100 relative overflow-hidden">          {/* Subtle background decoration */}          <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-100/50 to-purple-100/50 rounded-full blur-3xl -translate-y-32 translate-x-32"></div>          <div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-br from-emerald-100/50 to-blue-100/50 rounded-full blur-3xl translate-y-24 -translate-x-24"></div>          <div className="relative z-10">            <div className="flex items-center justify-center mb-8">              <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-full p-4">                <Target className="w-12 h-12 text-white" />              </div>            </div>            <h3 className="text-3xl font-bold text-center text-gray-900 mb-8">              Physical & Mental{" "}              <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">                Transformation              </span>            </h3>            <div className="grid md:grid-cols-2 gap-12 items-center">              <div className="space-y-6">                <p className="text-lg text-gray-700 leading-relaxed">                  <strong className="text-gray-900">Workouts are incredibly important</strong> not just for physical                  development, but they help you easily overcome difficult psychological moments and improve your mental                  state.                </p>                <p className="text-gray-600 leading-relaxed">                  Exercise releases endorphins, reduces stress and anxiety, improves sleep quality, and boosts                  self-confidence. It's a natural remedy for depression and an excellent way to manage emotions.                </p>              </div>              <div className="grid grid-cols-2 gap-4">                {[                  { icon: TrendingUp, text: "Improved Mood", color: "from-green-500 to-emerald-500" },                  { icon: Users, text: "Better Sleep", color: "from-blue-500 to-indigo-500" },                  { icon: Zap, text: "Increased Confidence", color: "from-purple-500 to-pink-500" },                  { icon: Target, text: "Stress Relief", color: "from-orange-500 to-red-500" },                ].map((benefit, index) => (                  <div key={index} className="bg-gray-50 rounded-xl p-4 text-center hover:shadow-md transition-shadow">                    <div                      className={`w-12 h-12 rounded-full bg-gradient-to-r ${benefit.color} flex items-center justify-center mx-auto mb-3`}                    >                      <benefit.icon className="w-6 h-6 text-white" />                    </div>                    <span className="text-sm font-medium text-gray-700">{benefit.text}</span>                  </div>                ))}              </div>            </div>          </div>        </div>        {/* Enhanced Muscle Group Exercises */}        <div className="mb-16">          <h3 className="text-3xl font-bold text-center text-gray-900 mb-12">            Bodyweight Exercises by{" "}            <span className="bg-gradient-to-r from-emerald-600 to-blue-600 bg-clip-text text-transparent">              Muscle Group            </span>          </h3>          <div className="grid lg:grid-cols-2 gap-8">            {muscleGroups.map((group, index) => (              <div                key={index}                className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 relative overflow-hidden group"              >                {/* Background gradient accent */}                <div                  className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-br ${group.color} opacity-10 rounded-full blur-xl transform translate-x-16 -translate-y-16 group-hover:scale-150 transition-transform duration-500`}                ></div>                <div className="relative z-10">                  <div className="flex items-center mb-6">                    <div                      className={`w-16 h-16 rounded-full bg-gradient-to-r ${group.color} flex items-center justify-center mr-4 shadow-lg`}                    >                      <span className="text-2xl">{group.icon}</span>                    </div>                    <h4 className="text-2xl font-bold text-gray-900">{group.title}</h4>                  </div>                  <div className="space-y-6">                    {group.exercises.map((exercise, idx) => (                      <div                        key={idx}                        className={`border-l-4 border-gradient-to-b ${group.color.replace("from-", "border-").replace(" to-", "").split("-")[0]}-500 pl-6`}                      >                        <div className="flex items-center mb-3">                          <h5 className="text-xl font-semibold text-gray-900">{exercise.name}</h5>                        </div>                        <p className="text-gray-600 mb-4 leading-relaxed">{exercise.benefits}</p>                        <div>                          <strong className="text-gray-700 text-sm">Progressive Levels:</strong>                          <div className="grid grid-cols-1 gap-2 mt-3">                            {exercise.progressions.map((progression, progIdx) => (                              <div                                key={progIdx}                                className="bg-gray-50 rounded-lg p-3 text-sm text-gray-600 border-l-2 border-gray-300 hover:border-emerald-400 transition-colors"                              >                                <span className="font-medium text-emerald-600">Level {progIdx + 1}:</span> {progression}                              </div>                            ))}                          </div>                        </div>                      </div>                    ))}                  </div>                </div>              </div>            ))}          </div>        </div>        {/* Dumbbell Exercises */}        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-3xl p-8">          <div className="text-center mb-8">            <Dumbbell className="w-16 h-16 text-blue-600 mx-auto mb-4" />            <h3 className="text-3xl font-bold text-gray-900 mb-4">Dumbbell Investment</h3>            <p className="text-lg text-gray-600 max-w-3xl mx-auto mb-8">              With a pair of dumbbells, you can significantly diversify your workouts and work all muscle groups more              effectively.            </p>          </div>          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">            {dumbbellExercises.map((exercise, index) => (              <div                key={index}                className="bg-white rounded-xl p-4 text-center shadow-sm hover:shadow-md transition-all duration-300 hover:scale-105"              >                <div className="text-2xl mb-2">{exercise.icon}</div>                <h5 className="font-semibold text-gray-900 text-sm mb-1">{exercise.name}</h5>                <p className="text-xs text-gray-600">{exercise.target}</p>              </div>            ))}          </div>        </div>      </div>    </section>  )}export default WorkoutsSection tot codul asta care are si design il poti face tu doar in html? sa para foarte basic simplu si urat pt ca vreau sa fac un video in care fac tranzitie de la codul urat simplu doar in html fara css sau cu css aruncat pe 2 3 containere la codul de ti l am dat