Upload 2 files

src/App.js

@@ -1,738 +1,757 @@
-import React, { useState, useEffect, useRef } from "react";
-
-// Zodiac Icon Components using Tabler Icons SVGs
-const ZodiacIcon = ({ sign, size = 24, className = "" }) => {
-  const iconPaths = {
-    taurus: [
-      "M6 3a6 6 0 0 0 12 0",
-      "M12 15m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0",
-    ],
-    sagittarius: ["M4 20l16 -16", "M13 4h7v7", "M6.5 12.5l5 5"],
-    pisces: ["M5 3a21 21 0 0 1 0 18", "M19 3a21 21 0 0 0 0 18", "M5 12l14 0"],
-    libra: ["M5 20l14 0", "M5 17h5v-.3a7 7 0 1 1 4 0v.3h5"],
-    gemini: [
-      "M3 3a21 21 0 0 0 18 0",
-      "M3 21a21 21 0 0 1 18 0",
-      "M7 4.5l0 15",
-      "M17 4.5l0 15",
-    ],
-    leo: [
-      "M13 17a4 4 0 1 0 8 0",
-      "M6 16m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
-      "M11 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0",
-      "M7 7c0 3 2 5 2 9",
-      "M15 7c0 4 -2 6 -2 10",
-    ],
-    virgo: [
-      "M3 4a2 2 0 0 1 2 2v9",
-      "M5 6a2 2 0 0 1 4 0v9",
-      "M9 6a2 2 0 0 1 4 0v10a7 5 0 0 0 7 5",
-      "M12 21a7 5 0 0 0 7 -5v-2a3 3 0 0 0 -6 0",
-    ],
-    aquarius: [
-      "M3 10l3 -3l3 3l3 -3l3 3l3 -3l3 3",
-      "M3 17l3 -3l3 3l3 -3l3 3l3 -3l3 3",
-    ],
-    aries: ["M12 5a5 5 0 1 0 -4 8", "M16 13a5 5 0 1 0 -4 -8", "M12 21l0 -16"],
-    cancer: [
-      "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
-      "M18 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
-      "M3 12a10 6.5 0 0 1 14 -6.5",
-      "M21 12a10 6.5 0 0 1 -14 6.5",
-    ],
-    scorpio: [
-      "M3 4a2 2 0 0 1 2 2v9",
-      "M5 6a2 2 0 0 1 4 0v9",
-      "M9 6a2 2 0 0 1 4 0v10a3 3 0 0 0 3 3h5l-3 -3m0 6l3 -3",
-    ],
-    capricorn: [
-      "M4 4a3 3 0 0 1 3 3v9",
-      "M7 7a3 3 0 0 1 6 0v11a3 3 0 0 1 -3 3",
-      "M16 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
-    ],
-  };
-
-  const paths = iconPaths[sign] || [];
-
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      {paths.map((path, index) => (
-        <path key={index} d={path} />
-      ))}
-    </svg>
-  );
-};
-
-const HoroscopeApp = () => {
-  const [selectedSign, setSelectedSign] = useState("virgo");
-  const [selectedGender, setSelectedGender] = useState("female");
-  const [selectedPeriod, setSelectedPeriod] = useState("today");
-  const [selectedCategory, setSelectedCategory] = useState("overall");
-  const [isDarkMode, setIsDarkMode] = useState(false);
-  const zodiacScrollRef = useRef(null);
-
-  const zodiacSigns = [
-    {
-      id: "aries",
-      name: "Aries",
-      dates: "Mar 21 - Apr 19",
-      emoji: "🐏",
-      symbol: "♈",
-      imageFile: "ARIES.png",
-    },
-    {
-      id: "taurus",
-      name: "Taurus",
-      dates: "April 20 - May 20",
-      emoji: "🐂",
-      symbol: "♉",
-      imageFile: "TAURUS.png",
-    },
-    {
-      id: "gemini",
-      name: "Gemini",
-      dates: "May 21 - Jun 20",
-      emoji: "👯",
-      symbol: "♊",
-      imageFile: "GEMINI.png",
-    },
-    {
-      id: "cancer",
-      name: "Cancer",
-      dates: "Jun 21 - Jul 22",
-      emoji: "🦀",
-      symbol: "♋",
-      imageFile: "CANCER.png",
-    },
-    {
-      id: "leo",
-      name: "Leo",
-      dates: "Jul 23 - Aug 22",
-      emoji: "🦁",
-      symbol: "♌",
-      imageFile: "LEO.png",
-    },
-    {
-      id: "virgo",
-      name: "Virgo",
-      dates: "Aug 23 - Sep 22",
-      emoji: "👸",
-      symbol: "♍",
-      imageFile: "VIRGO.png",
-    },
-    {
-      id: "libra",
-      name: "Libra",
-      dates: "Sep 23 - Oct 22",
-      emoji: "⚖️",
-      symbol: "♎",
-      imageFile: "LIBRA.png",
-    },
-    {
-      id: "scorpio",
-      name: "Scorpio",
-      dates: "Oct 23 - Nov 21",
-      emoji: "🦂",
-      symbol: "♏",
-      imageFile: "SCORPIO.png",
-    },
-    {
-      id: "sagittarius",
-      name: "Sagittarius",
-      dates: "Nov 22 - Dec 21",
-      emoji: "🏹",
-      symbol: "♐",
-      imageFile: "SAGITTARIUS.png",
-    },
-    {
-      id: "capricorn",
-      name: "Capricorn",
-      dates: "Dec 22 - Jan 19",
-      emoji: "🐐",
-      symbol: "♑",
-      imageFile: "CAPRICORN.png",
-    },
-    {
-      id: "aquarius",
-      name: "Aquarius",
-      dates: "Jan 20 - Feb 18",
-      emoji: "🏺",
-      symbol: "♒",
-      imageFile: "AQUARIUS.png",
-    },
-    {
-      id: "pisces",
-      name: "Pisces",
-      dates: "Feb 19 - Mar 20",
-      emoji: "🐠",
-      symbol: "♓",
-      imageFile: "PISCES.png",
-    },
-  ];
-
-  const periods = [
-    { id: "today", name: "Today" },
-    { id: "week", name: "Week" },
-    { id: "month", name: "Month" },
-    { id: "year", name: "Year" },
-  ];
-
-  const categories = [
-    {
-      id: "overall",
-      name: "Overall",
-      icon: <i class="ri-dashboard-line"></i>,
-    },
-    {
-      id: "fortune",
-      name: "Fortune",
-      icon: <i class="ri-seedling-line"></i>,
-    },
-    {
-      id: "health",
-      name: "Health",
-      icon: <i className="ri-open-arm-line"></i>,
-    },
-    { id: "love", name: "Love", icon: <i className="ri-hearts-line"></i> },
-    {
-      id: "finance",
-      name: "Finance",
-      icon: <i className="ri-wallet-3-line"></i>,
-    },
-    {
-      id: "relationship",
-      name: "Relationship",
-      icon: <i className="ri-team-line"></i>,
-    },
-  ];
-
-  const horoscopeContent = {
-    overall: {
-      today:
-        "Today brings a harmonious blend of opportunities and challenges across all aspects of your life. Your natural instincts will guide you well.",
-      week: "This week promises balanced growth in multiple areas. Trust your intuition as you navigate new experiences.",
-      month:
-        "A month of significant personal development awaits. Embrace change and new perspectives with confidence.",
-      year: "This year marks a transformative period of growth, bringing profound insights and meaningful achievements.",
-    },
-    love: {
-      today:
-        "Love is in the air today! Your romantic side is highlighted, making it a perfect day for expressing your feelings.",
-      week: "This week brings romantic opportunities and deepening connections with your loved ones.",
-      month:
-        "A month of passionate encounters and meaningful relationships awaits you.",
-      year: "This year will be transformative for your love life, bringing lasting happiness.",
-    },
-    health: {
-      today:
-        "Your energy levels are high today. Focus on maintaining balance between work and rest.",
-      week: "Pay attention to your physical wellbeing this week. Small changes can make big differences.",
-      month:
-        "This month emphasizes the importance of mental and physical health harmony.",
-      year: "A year of wellness and vitality lies ahead. Make health your priority.",
-    },
-    relationship: {
-      today:
-        "Relationships flourish under today's cosmic energy. Communication is key to success.",
-      week: "Strengthen your bonds with family and friends through meaningful conversations.",
-      month:
-        "Social connections expand this month, bringing new friendships and opportunities.",
-      year: "Your social circle will grow significantly, enriching your life in unexpected ways.",
-    },
-    finance: {
-      today:
-        "Financial opportunities present themselves today. Stay alert for new possibilities.",
-      week: "This week favors careful financial planning and smart investments.",
-      month:
-        "Money matters require attention this month. Budget wisely for future security.",
-      year: "Financial growth and stability are highlighted throughout this year.",
-    },
-    fortune: {
-      today:
-        "Lucky energies surround you today. Trust your instincts and take calculated risks for unexpected rewards.",
-      week: "Fortune favors the bold this week. Positive surprises and serendipitous encounters await.",
-      month:
-        "A month of abundance and good fortune unfolds. Opportunities align perfectly with your goals.",
-      year: "This year brings remarkable luck and prosperity. Your efforts will be rewarded beyond expectations.",
-    },
-  };
-
-  const luckyData = {
-    colors: [
-      "Green",
-      "Blue",
-      "Purple",
-      "Gold",
-      "Silver",
-      "Red",
-      "Pink",
-      "Orange",
-      "Yellow",
-      "Turquoise",
-      "Violet",
-      "Indigo",
-    ],
-    numbers: [1, 3, 7, 9, 11, 13, 21, 23, 27, 33, 42, 77],
-    stones: [
-      "Emerald",
-      "Sapphire",
-      "Ruby",
-      "Diamond",
-      "Amethyst",
-      "Topaz",
-      "Opal",
-      "Pearl",
-      "Garnet",
-      "Aquamarine",
-      "Citrine",
-      "Turquoise",
-    ],
-    moods: [
-      "Optimistic",
-      "Energetic",
-      "Peaceful",
-      "Confident",
-      "Creative",
-      "Adventurous",
-      "Romantic",
-      "Focused",
-      "Joyful",
-      "Balanced",
-      "Inspired",
-      "Harmonious",
-    ],
-  };
-
-  // Function to get image path based on gender
-  const getImagePath = (sign) => {
-    if (!sign.imageFile) return null;
-    return `/img/${selectedGender}/${sign.imageFile}`;
-  };
-
-  const getCurrentSign = () => {
-    return zodiacSigns.find((sign) => sign.id === selectedSign);
-  };
-
-  const getHoroscopeText = () => {
-    if (selectedPeriod !== "today") {
-      return "Upgrade to Premium to unlock weekly, monthly, and yearly horoscope insights. Get deeper cosmic guidance and detailed predictions for your future.";
-    }
-    return horoscopeContent[selectedCategory][selectedPeriod];
-  };
-
-  const getLuckyElement = (type) => {
-    const data = luckyData[type];
-    return data[Math.floor(Math.random() * data.length)];
-  };
-
-  const getPeriodTitle = () => {
-    const titles = {
-      today: "Horoscope for Today",
-      week: "Horoscope for This Week",
-      month: "Horoscope for This Month",
-      year: "Horoscope for This Year",
-    };
-    return titles[selectedPeriod];
-  };
-
-  const toggleTheme = () => {
-    setIsDarkMode(!isDarkMode);
-  };
-
-  // Scroll to selected zodiac sign on mount and selection change
-  useEffect(() => {
-    if (zodiacScrollRef.current) {
-      const selectedElement = zodiacScrollRef.current.querySelector(
-        `[data-sign="${selectedSign}"]`
-      );
-      if (selectedElement) {
-        selectedElement.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest",
-          inline: "center",
-        });
-      }
-    }
-  }, [selectedSign]);
-
-  // Handle zodiac sign selection with auto-center
-  const handleSignSelect = (signId) => {
-    setSelectedSign(signId);
-  };
-
-  return (
-    <div
-      className={`min-h-screen transition-all duration-500 ${
-        isDarkMode ? "text-white" : "text-gray-800"
-      }`}
-      style={{
-        background: isDarkMode
-          ? "linear-gradient(135deg, #7E437B 0%, #0B194A 50%, #221C96 100%)"
-          : "linear-gradient(135deg, #A19BFF 0%, #FCC6EA 50%, #BADCFF 100%)",
-      }}
-    >
-      <div className="max-w-6xl mx-auto p-5">
-        {/* Header Controls */}
-        <div className="flex justify-between items-center mb-6 md:mb-8">
-          {/* Theme Toggle - Icon only for all screen sizes */}
-          <button
-            onClick={toggleTheme}
-            className={`flex items-center justify-center w-12 h-12 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 ${
-              isDarkMode
-                ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
-                : "bg-white bg-opacity-90 text-gray-700 hover:bg-opacity-100"
-            }`}
-          >
-            <i
-              className={`text-xl ${
-                isDarkMode ? "ri-sun-line" : "ri-moon-line"
-              }`}
-            ></i>
-          </button>
-
-          {/* App Icon - Visible on mobile - Fixed centering */}
-          <div className="sm:hidden flex-1 flex justify-center">
-            <div className="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full shadow-lg">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="icon icon-tabler icons-tabler-outline icon-tabler-crystal-ball"
-              >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <path d="M6.73 17.018a8 8 0 1 1 10.54 0" />
-                <path d="M5 19a2 2 0 0 0 2 2h10a2 2 0 1 0 0 -4h-10a2 2 0 0 0 -2 2z" />
-                <path d="M11 7a3 3 0 0 0 -3 3" />
-              </svg>
-            </div>
-          </div>
-
-          {/* Gender Selection - Toggle style on mobile, tabs on desktop */}
-          <button
-            onClick={() =>
-              setSelectedGender(selectedGender === "male" ? "female" : "male")
-            }
-            className={`flex items-center justify-center w-12 h-12 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 sm:hidden ${
-              isDarkMode
-                ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
-                : "bg-white bg-opacity-90 text-gray-700 hover:bg-opacity-100"
-            }`}
-          >
-            <i
-              className={
-                selectedGender === "male"
-                  ? "ri-women-line text-xl"
-                  : "ri-men-line text-xl"
-              }
-            ></i>
-          </button>
-
-          {/* Gender Selection - Desktop tabs */}
-          <div
-            className={`hidden sm:flex rounded-full p-1 shadow-lg ${
-              isDarkMode ? "bg-white bg-opacity-10" : "bg-white bg-opacity-90"
-            }`}
-          >
-            <button
-              onClick={() => setSelectedGender("female")}
-              className={`px-3 md:px-6 py-2 rounded-full font-medium transition-all ${
-                selectedGender === "female"
-                  ? "bg-pink-400 text-white shadow-md"
-                  : isDarkMode
-                  ? "text-white hover:text-pink-300"
-                  : "text-gray-600 hover:text-pink-400"
-              }`}
-            >
-              <span>Female</span>
-            </button>
-            <button
-              onClick={() => setSelectedGender("male")}
-              className={`px-3 md:px-6 py-2 rounded-full font-medium transition-all ${
-                selectedGender === "male"
-                  ? "bg-blue-400 text-white shadow-md"
-                  : isDarkMode
-                  ? "text-white hover:text-blue-300"
-                  : "text-gray-600 hover:text-blue-400"
-              }`}
-            >
-              <span>Male</span>
-            </button>
-          </div>
-        </div>
-
-        {/* App Title - Hidden on mobile */}
-        <div className="text-center mb-6 md:mb-10 hidden sm:block">
-          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full mb-4 shadow-lg">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="icon icon-tabler icons-tabler-outline icon-tabler-crystal-ball"
-            >
-              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-              <path d="M6.73 17.018a8 8 0 1 1 10.54 0" />
-              <path d="M5 19a2 2 0 0 0 2 2h10a2 2 0 1 0 0 -4h-10a2 2 0 0 0 -2 2z" />
-              <path d="M11 7a3 3 0 0 0 -3 3" />
-            </svg>
-          </div>
-          <h1 className="text-4xl font-bold mb-2">Horoscope App</h1>
-        </div>
-
-        {/* Zodiac Signs Grid - Single Row */}
-        <div
-          className="w-full overflow-x-auto mb-6 md:mb-10"
-          ref={zodiacScrollRef}
-        >
-          <div className="flex justify-start md:justify-center gap-2 md:gap-3 pb-4 px-4 min-w-max py-2">
-            {zodiacSigns.map((sign) => (
-              <div
-                key={sign.id}
-                data-sign={sign.id}
-                onClick={() => handleSignSelect(sign.id)}
-                className="flex flex-col items-center cursor-pointer transition-all duration-300 hover:scale-105 flex-shrink-0 py-1"
-              >
-                <div
-                  className={`rounded-full p-0.5 transition-all duration-300 ${
-                    selectedSign === sign.id
-                      ? "w-24 h-24 md:w-28 md:h-28 shadow-lg"
-                      : "w-20 h-20 md:w-24 md:h-24"
-                  }`}
-                  style={{
-                    background:
-                      selectedSign === sign.id
-                        ? "linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)"
-                        : "linear-gradient(135deg, #07090A 0%, #979999 100%)",
-                  }}
-                >
-                  {/* Background layer for separation */}
-                  <div
-                    className={`w-full h-full rounded-full p-0.5 ${
-                      isDarkMode ? "bg-gray-900" : "bg-gray-50"
-                    }`}
-                  >
-                    <div
-                      className={`w-full h-full rounded-full flex items-center justify-center text-xl overflow-hidden ${
-                        isDarkMode ? "bg-gray-800" : "bg-gray-100"
-                      }`}
-                    >
-                      {getImagePath(sign) ? (
-                        <img
-                          src={getImagePath(sign)}
-                          alt={sign.name}
-                          className="w-full h-full object-cover rounded-full"
-                          onError={(e) => {
-                            e.target.style.display = "none";
-                            e.target.nextSibling.style.display = "block";
-                          }}
-                        />
-                      ) : (
-                        <ZodiacIcon
-                          sign={sign.id}
-                          size={selectedSign === sign.id ? 30 : 28}
-                          className="text-gray-600"
-                        />
-                      )}
-                      <span
-                        style={{
-                          display: getImagePath(sign) ? "none" : "none",
-                        }}
-                      >
-                        {sign.emoji}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <p
-                  className={`text-xs font-medium mt-3 text-center flex items-center justify-center gap-1 transition-all duration-300 ${
-                    selectedSign === sign.id ? "font-bold" : ""
-                  }`}
-                >
-                  <ZodiacIcon
-                    sign={sign.id}
-                    size={selectedSign === sign.id ? 17 : 16}
-                    className="text-current"
-                  />
-                  {sign.name}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Period Selection */}
-        <div className="flex justify-center mb-6 md:mb-8">
-          <div
-            className={`flex rounded-full p-1 shadow-lg ${
-              isDarkMode ? "bg-white bg-opacity-10" : "bg-white bg-opacity-90"
-            }`}
-          >
-            {periods.map((period) => (
-              <button
-                key={period.id}
-                onClick={() => setSelectedPeriod(period.id)}
-                className={`px-4 md:px-6 py-2 md:py-3 rounded-full font-medium transition-all text-sm md:text-base flex items-center gap-1 ${
-                  selectedPeriod === period.id
-                    ? "bg-blue-400 text-white shadow-md"
-                    : isDarkMode
-                    ? "text-white hover:text-blue-300"
-                    : "text-gray-600 hover:text-blue-400"
-                }`}
-              >
-                {period.name}
-                {period.id !== "today" && (
-                  <i className="ri-lock-line text-xs opacity-70"></i>
-                )}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Category Selection */}
-        <div className="flex justify-center flex-wrap gap-2 md:gap-3 mb-6 md:mb-10">
-          {categories.map((category) => (
-            <button
-              key={category.id}
-              onClick={() => setSelectedCategory(category.id)}
-              className={`flex items-center gap-2 px-3 md:px-4 py-2 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 text-sm md:text-base ${
-                selectedCategory === category.id
-                  ? "bg-purple-400 text-white shadow-lg"
-                  : isDarkMode
-                  ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
-                  : "bg-white bg-opacity-90 text-gray-600 hover:bg-opacity-100"
-              }`}
-            >
-              {category.icon}
-              {category.name}
-            </button>
-          ))}
-        </div>
-
-        {/* Horoscope Content */}
-        <div
-          className={`rounded-3xl p-8 mb-4 shadow-2xl backdrop-blur-lg transition-all ${
-            isDarkMode
-              ? "bg-white bg-opacity-10 border border-white border-opacity-20"
-              : "bg-white bg-opacity-95"
-          }`}
-        >
-          <div className="flex items-center gap-6 mb-8">
-            <div
-              className="w-20 h-20 rounded-full p-0.5 shadow-lg"
-              style={{
-                background: "linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)",
-              }}
-            >
-              {/* Background layer for separation */}
-              <div
-                className={`w-full h-full rounded-full p-0.5 ${
-                  isDarkMode ? "bg-gray-900" : "bg-gray-50"
-                }`}
-              >
-                <div
-                  className={`w-full h-full rounded-full flex items-center justify-center text-2xl overflow-hidden ${
-                    isDarkMode ? "bg-gray-800" : "bg-gray-100"
-                  }`}
-                >
-                  {getImagePath(getCurrentSign()) ? (
-                    <img
-                      src={getImagePath(getCurrentSign())}
-                      alt={getCurrentSign()?.name}
-                      className="w-full h-full object-cover rounded-full"
-                      onError={(e) => {
-                        e.target.style.display = "none";
-                        e.target.nextSibling.style.display = "block";
-                      }}
-                    />
-                  ) : (
-                    <ZodiacIcon
-                      sign={getCurrentSign()?.id}
-                      size={32}
-                      className="text-gray-600"
-                    />
-                  )}
-                  <span
-                    style={{
-                      display: getImagePath(getCurrentSign()) ? "none" : "none",
-                    }}
-                  >
-                    {getCurrentSign()?.emoji}
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div className="flex-1">
-              <h2 className="text-3xl font-bold text-blue-400 flex items-center gap-2 mb-2">
-                {getPeriodTitle()}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="icon icon-tabler icons-tabler-outline icon-tabler-trending-up"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                  <path d="M3 17l6 -6l4 4l8 -8" />
-                  <path d="M14 7l7 0l0 7" />
-                </svg>
-              </h2>
-              <div className="flex items-center gap-2">
-                <ZodiacIcon
-                  sign={getCurrentSign()?.id}
-                  size={20}
-                  className="text-current"
-                />
-                <span className="font-semibold">
-                  {getCurrentSign()?.name} ({getCurrentSign()?.dates})
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <p className="text-lg leading-relaxed mb-8">{getHoroscopeText()}</p>
-        </div>
-
-        {/* Footer */}
-        <div className="text-center text-sm opacity-70 mt-4 space-y-2">
-          <p className="flex items-center justify-center gap-2">
-            <i className="ri-sparkling-line"></i>
-            Discover your daily horoscope and unlock the secrets of the stars
-            <i className="ri-sparkling-line"></i>
-          </p>
-          <p className="text-xs opacity-60">
-            © 2025 AstroLens Horoscope - All rights reserved.
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default HoroscopeApp;
+import React, { useState, useEffect, useRef } from "react";
+import {
+  fetchHoroscopeData,
+  fallbackHoroscopeContent,
+} from "./services/horoscopeService";
+
+// Zodiac Icon Components using Tabler Icons SVGs
+const ZodiacIcon = ({ sign, size = 24, className = "" }) => {
+  const iconPaths = {
+    taurus: [
+      "M6 3a6 6 0 0 0 12 0",
+      "M12 15m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0",
+    ],
+    sagittarius: ["M4 20l16 -16", "M13 4h7v7", "M6.5 12.5l5 5"],
+    pisces: ["M5 3a21 21 0 0 1 0 18", "M19 3a21 21 0 0 0 0 18", "M5 12l14 0"],
+    libra: ["M5 20l14 0", "M5 17h5v-.3a7 7 0 1 1 4 0v.3h5"],
+    gemini: [
+      "M3 3a21 21 0 0 0 18 0",
+      "M3 21a21 21 0 0 1 18 0",
+      "M7 4.5l0 15",
+      "M17 4.5l0 15",
+    ],
+    leo: [
+      "M13 17a4 4 0 1 0 8 0",
+      "M6 16m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+      "M11 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0",
+      "M7 7c0 3 2 5 2 9",
+      "M15 7c0 4 -2 6 -2 10",
+    ],
+    virgo: [
+      "M3 4a2 2 0 0 1 2 2v9",
+      "M5 6a2 2 0 0 1 4 0v9",
+      "M9 6a2 2 0 0 1 4 0v10a7 5 0 0 0 7 5",
+      "M12 21a7 5 0 0 0 7 -5v-2a3 3 0 0 0 -6 0",
+    ],
+    aquarius: [
+      "M3 10l3 -3l3 3l3 -3l3 3l3 -3l3 3",
+      "M3 17l3 -3l3 3l3 -3l3 3l3 -3l3 3",
+    ],
+    aries: ["M12 5a5 5 0 1 0 -4 8", "M16 13a5 5 0 1 0 -4 -8", "M12 21l0 -16"],
+    cancer: [
+      "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+      "M18 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+      "M3 12a10 6.5 0 0 1 14 -6.5",
+      "M21 12a10 6.5 0 0 1 -14 6.5",
+    ],
+    scorpio: [
+      "M3 4a2 2 0 0 1 2 2v9",
+      "M5 6a2 2 0 0 1 4 0v9",
+      "M9 6a2 2 0 0 1 4 0v10a3 3 0 0 0 3 3h5l-3 -3m0 6l3 -3",
+    ],
+    capricorn: [
+      "M4 4a3 3 0 0 1 3 3v9",
+      "M7 7a3 3 0 0 1 6 0v11a3 3 0 0 1 -3 3",
+      "M16 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+    ],
+  };
+
+  const paths = iconPaths[sign] || [];
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      {paths.map((path, index) => (
+        <path key={index} d={path} />
+      ))}
+    </svg>
+  );
+};
+
+const HoroscopeApp = () => {
+  const [selectedSign, setSelectedSign] = useState("virgo");
+  const [selectedGender, setSelectedGender] = useState("female");
+  const [selectedPeriod, setSelectedPeriod] = useState("today");
+  const [selectedCategory, setSelectedCategory] = useState("overall");
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const [horoscopeData, setHoroscopeData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const zodiacScrollRef = useRef(null);
+
+  const loadHoroscopeData = async (category, period) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const data = await fetchHoroscopeData(category, period);
+
+      if (data && data.data) {
+        setHoroscopeData(data);
+      } else {
+        setHoroscopeData(null);
+        setError("No data available from GitHub, using fallback content");
+      }
+    } catch (err) {
+      setError("Failed to load horoscope data");
+      setHoroscopeData(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const zodiacSigns = [
+    {
+      id: "aries",
+      name: "Aries",
+      dates: "Mar 21 - Apr 19",
+      emoji: "🐏",
+      symbol: "♈",
+      imageFile: "ARIES.png",
+    },
+    {
+      id: "taurus",
+      name: "Taurus",
+      dates: "April 20 - May 20",
+      emoji: "🐂",
+      symbol: "♉",
+      imageFile: "TAURUS.png",
+    },
+    {
+      id: "gemini",
+      name: "Gemini",
+      dates: "May 21 - Jun 20",
+      emoji: "👯",
+      symbol: "♊",
+      imageFile: "GEMINI.png",
+    },
+    {
+      id: "cancer",
+      name: "Cancer",
+      dates: "Jun 21 - Jul 22",
+      emoji: "🦀",
+      symbol: "♋",
+      imageFile: "CANCER.png",
+    },
+    {
+      id: "leo",
+      name: "Leo",
+      dates: "Jul 23 - Aug 22",
+      emoji: "🦁",
+      symbol: "♌",
+      imageFile: "LEO.png",
+    },
+    {
+      id: "virgo",
+      name: "Virgo",
+      dates: "Aug 23 - Sep 22",
+      emoji: "👸",
+      symbol: "♍",
+      imageFile: "VIRGO.png",
+    },
+    {
+      id: "libra",
+      name: "Libra",
+      dates: "Sep 23 - Oct 22",
+      emoji: "⚖️",
+      symbol: "♎",
+      imageFile: "LIBRA.png",
+    },
+    {
+      id: "scorpio",
+      name: "Scorpio",
+      dates: "Oct 23 - Nov 21",
+      emoji: "🦂",
+      symbol: "♏",
+      imageFile: "SCORPIO.png",
+    },
+    {
+      id: "sagittarius",
+      name: "Sagittarius",
+      dates: "Nov 22 - Dec 21",
+      emoji: "🏹",
+      symbol: "♐",
+      imageFile: "SAGITTARIUS.png",
+    },
+    {
+      id: "capricorn",
+      name: "Capricorn",
+      dates: "Dec 22 - Jan 19",
+      emoji: "🐐",
+      symbol: "♑",
+      imageFile: "CAPRICORN.png",
+    },
+    {
+      id: "aquarius",
+      name: "Aquarius",
+      dates: "Jan 20 - Feb 18",
+      emoji: "🏺",
+      symbol: "♒",
+      imageFile: "AQUARIUS.png",
+    },
+    {
+      id: "pisces",
+      name: "Pisces",
+      dates: "Feb 19 - Mar 20",
+      emoji: "🐠",
+      symbol: "♓",
+      imageFile: "PISCES.png",
+    },
+  ];
+
+  const periods = [
+    { id: "today", name: "Today" },
+    { id: "week", name: "Week" },
+    { id: "month", name: "Month" },
+    { id: "year", name: "Year" },
+  ];
+
+  const categories = [
+    {
+      id: "overall",
+      name: "Overall",
+      icon: <i className="ri-dashboard-line"></i>,
+    },
+    {
+      id: "fortune",
+      name: "Fortune",
+      icon: <i className="ri-seedling-line"></i>,
+    },
+    {
+      id: "health",
+      name: "Health",
+      icon: <i className="ri-open-arm-line"></i>,
+    },
+    { id: "love", name: "Love", icon: <i className="ri-hearts-line"></i> },
+    {
+      id: "finance",
+      name: "Finance",
+      icon: <i className="ri-wallet-3-line"></i>,
+    },
+    {
+      id: "relationship",
+      name: "Relationship",
+      icon: <i className="ri-team-line"></i>,
+    },
+  ];
+
+  // const horoscopeContent = {
+  //   overall: {
+  //     today:
+  //       "Today brings a harmonious blend of opportunities and challenges across all aspects of your life. Your natural instincts will guide you well.",
+  //     week: "This week promises balanced growth in multiple areas. Trust your intuition as you navigate new experiences.",
+  //     month:
+  //       "A month of significant personal development awaits. Embrace change and new perspectives with confidence.",
+  //     year: "This year marks a transformative period of growth, bringing profound insights and meaningful achievements.",
+  //   },
+  //   love: {
+  //     today:
+  //       "Love is in the air today! Your romantic side is highlighted, making it a perfect day for expressing your feelings.",
+  //     week: "This week brings romantic opportunities and deepening connections with your loved ones.",
+  //     month:
+  //       "A month of passionate encounters and meaningful relationships awaits you.",
+  //     year: "This year will be transformative for your love life, bringing lasting happiness.",
+  //   },
+  //   health: {
+  //     today:
+  //       "Your energy levels are high today. Focus on maintaining balance between work and rest.",
+  //     week: "Pay attention to your physical wellbeing this week. Small changes can make big differences.",
+  //     month:
+  //       "This month emphasizes the importance of mental and physical health harmony.",
+  //     year: "A year of wellness and vitality lies ahead. Make health your priority.",
+  //   },
+  //   relationship: {
+  //     today:
+  //       "Relationships flourish under today's cosmic energy. Communication is key to success.",
+  //     week: "Strengthen your bonds with family and friends through meaningful conversations.",
+  //     month:
+  //       "Social connections expand this month, bringing new friendships and opportunities.",
+  //     year: "Your social circle will grow significantly, enriching your life in unexpected ways.",
+  //   },
+  //   finance: {
+  //     today:
+  //       "Financial opportunities present themselves today. Stay alert for new possibilities.",
+  //     week: "This week favors careful financial planning and smart investments.",
+  //     month:
+  //       "Money matters require attention this month. Budget wisely for future security.",
+  //     year: "Financial growth and stability are highlighted throughout this year.",
+  //   },
+  //   fortune: {
+  //     today:
+  //       "Lucky energies surround you today. Trust your instincts and take calculated risks for unexpected rewards.",
+  //     week: "Fortune favors the bold this week. Positive surprises and serendipitous encounters await.",
+  //     month:
+  //       "A month of abundance and good fortune unfolds. Opportunities align perfectly with your goals.",
+  //     year: "This year brings remarkable luck and prosperity. Your efforts will be rewarded beyond expectations.",
+  //   },
+  // };
+
+  // Function to get image path based on gender
+  const getImagePath = (sign) => {
+    if (!sign.imageFile) return null;
+    return `/img/${selectedGender}/${sign.imageFile}`;
+  };
+
+  const getCurrentSign = () => {
+    return zodiacSigns.find((sign) => sign.id === selectedSign);
+  };
+
+  const getHoroscopeText = () => {
+    // Hiển thị loading state
+    if (isLoading) {
+      return "Loading your horoscope...";
+    }
+
+    if (!horoscopeData || error) {
+      if (selectedPeriod !== "today") {
+        return "Upgrade to Premium to unlock weekly, monthly, and yearly horoscope insights. Get deeper cosmic guidance and detailed predictions for your future.";
+      }
+      return fallbackHoroscopeContent[selectedCategory][selectedPeriod];
+    }
+
+    const currentSign = getCurrentSign();
+    if (currentSign && horoscopeData.data[currentSign.id]) {
+      const signData = horoscopeData.data[currentSign.id];
+      return (
+        signData[selectedGender] ||
+        signData.male ||
+        signData.female ||
+        "No horoscope available for today."
+      );
+    }
+
+    return "No horoscope available for this sign.";
+  };
+
+  const getPeriodTitle = () => {
+    const titles = {
+      today: "Horoscope for Today",
+      week: "Horoscope for This Week",
+      month: "Horoscope for This Month",
+      year: "Horoscope for This Year",
+    };
+    return titles[selectedPeriod];
+  };
+
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
+  // Scroll to selected zodiac sign on mount and selection change
+  useEffect(() => {
+    if (zodiacScrollRef.current) {
+      const selectedElement = zodiacScrollRef.current.querySelector(
+        `[data-sign="${selectedSign}"]`
+      );
+      if (selectedElement) {
+        selectedElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "center",
+        });
+      }
+    }
+  }, [selectedSign]);
+
+  // Load horoscope data when category or period changes
+  useEffect(() => {
+    loadHoroscopeData(selectedCategory, selectedPeriod);
+  }, [selectedCategory, selectedPeriod]);
+
+  // Handle zodiac sign selection with auto-center
+  const handleSignSelect = (signId) => {
+    setSelectedSign(signId);
+  };
+
+  return (
+    <div
+      className={`min-h-screen transition-all duration-500 ${
+        isDarkMode ? "text-white" : "text-gray-800"
+      }`}
+      style={{
+        background: isDarkMode
+          ? "linear-gradient(135deg, #7E437B 0%, #0B194A 50%, #221C96 100%)"
+          : "linear-gradient(135deg, #A19BFF 0%, #FCC6EA 50%, #BADCFF 100%)",
+      }}
+    >
+      <div className="max-w-6xl mx-auto p-5">
+        {/* Header Controls */}
+        <div className="flex justify-between items-center mb-6 md:mb-8">
+          {/* Theme Toggle - Icon only for all screen sizes */}
+          <button
+            onClick={toggleTheme}
+            className={`flex items-center justify-center w-12 h-12 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 ${
+              isDarkMode
+                ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
+                : "bg-white bg-opacity-90 text-gray-700 hover:bg-opacity-100"
+            }`}
+          >
+            <i
+              className={`text-xl ${
+                isDarkMode ? "ri-sun-line" : "ri-moon-line"
+              }`}
+            ></i>
+          </button>
+
+          {/* App Icon - Visible on mobile - Fixed centering */}
+          <div className="sm:hidden flex-1 flex justify-center">
+            <div className="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full shadow-lg">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="icon icon-tabler icons-tabler-outline icon-tabler-crystal-ball"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M6.73 17.018a8 8 0 1 1 10.54 0" />
+                <path d="M5 19a2 2 0 0 0 2 2h10a2 2 0 1 0 0 -4h-10a2 2 0 0 0 -2 2z" />
+                <path d="M11 7a3 3 0 0 0 -3 3" />
+              </svg>
+            </div>
+          </div>
+
+          {/* Gender Selection - Toggle style on mobile, tabs on desktop */}
+          <button
+            onClick={() =>
+              setSelectedGender(selectedGender === "male" ? "female" : "male")
+            }
+            className={`flex items-center justify-center w-12 h-12 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 sm:hidden ${
+              isDarkMode
+                ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
+                : "bg-white bg-opacity-90 text-gray-700 hover:bg-opacity-100"
+            }`}
+          >
+            <i
+              className={
+                selectedGender === "male"
+                  ? "ri-women-line text-xl"
+                  : "ri-men-line text-xl"
+              }
+            ></i>
+          </button>
+
+          {/* Gender Selection - Desktop tabs */}
+          <div
+            className={`hidden sm:flex rounded-full p-1 shadow-lg ${
+              isDarkMode ? "bg-white bg-opacity-10" : "bg-white bg-opacity-90"
+            }`}
+          >
+            <button
+              onClick={() => setSelectedGender("female")}
+              className={`px-3 md:px-6 py-2 rounded-full font-medium transition-all ${
+                selectedGender === "female"
+                  ? "bg-pink-400 text-white shadow-md"
+                  : isDarkMode
+                  ? "text-white hover:text-pink-300"
+                  : "text-gray-600 hover:text-pink-400"
+              }`}
+            >
+              <span>Female</span>
+            </button>
+            <button
+              onClick={() => setSelectedGender("male")}
+              className={`px-3 md:px-6 py-2 rounded-full font-medium transition-all ${
+                selectedGender === "male"
+                  ? "bg-blue-400 text-white shadow-md"
+                  : isDarkMode
+                  ? "text-white hover:text-blue-300"
+                  : "text-gray-600 hover:text-blue-400"
+              }`}
+            >
+              <span>Male</span>
+            </button>
+          </div>
+        </div>
+
+        {/* App Title - Hidden on mobile */}
+        <div className="text-center mb-6 md:mb-10 hidden sm:block">
+          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full mb-4 shadow-lg">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="icon icon-tabler icons-tabler-outline icon-tabler-crystal-ball"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M6.73 17.018a8 8 0 1 1 10.54 0" />
+              <path d="M5 19a2 2 0 0 0 2 2h10a2 2 0 1 0 0 -4h-10a2 2 0 0 0 -2 2z" />
+              <path d="M11 7a3 3 0 0 0 -3 3" />
+            </svg>
+          </div>
+          <h1 className="text-4xl font-bold mb-2">Horoscope App</h1>
+        </div>
+
+        {/* Zodiac Signs Grid - Single Row */}
+        <div
+          className="w-full overflow-x-auto mb-6 md:mb-10"
+          ref={zodiacScrollRef}
+        >
+          <div className="flex justify-start md:justify-center gap-2 md:gap-3 pb-4 px-4 min-w-max py-2">
+            {zodiacSigns.map((sign) => (
+              <div
+                key={sign.id}
+                data-sign={sign.id}
+                onClick={() => handleSignSelect(sign.id)}
+                className="flex flex-col items-center cursor-pointer transition-all duration-300 hover:scale-105 flex-shrink-0 py-1"
+              >
+                <div
+                  className={`rounded-full p-0.5 transition-all duration-300 ${
+                    selectedSign === sign.id
+                      ? "w-24 h-24 md:w-28 md:h-28 shadow-lg"
+                      : "w-20 h-20 md:w-24 md:h-24"
+                  }`}
+                  style={{
+                    background:
+                      selectedSign === sign.id
+                        ? "linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)"
+                        : "linear-gradient(135deg, #07090A 0%, #979999 100%)",
+                  }}
+                >
+                  {/* Background layer for separation */}
+                  <div
+                    className={`w-full h-full rounded-full p-0.5 ${
+                      isDarkMode ? "bg-gray-900" : "bg-gray-50"
+                    }`}
+                  >
+                    <div
+                      className={`w-full h-full rounded-full flex items-center justify-center text-xl overflow-hidden ${
+                        isDarkMode ? "bg-gray-800" : "bg-gray-100"
+                      }`}
+                    >
+                      {getImagePath(sign) ? (
+                        <img
+                          src={getImagePath(sign)}
+                          alt={sign.name}
+                          className="w-full h-full object-cover rounded-full"
+                          onError={(e) => {
+                            e.target.style.display = "none";
+                            e.target.nextSibling.style.display = "block";
+                          }}
+                        />
+                      ) : (
+                        <ZodiacIcon
+                          sign={sign.id}
+                          size={selectedSign === sign.id ? 30 : 28}
+                          className="text-gray-600"
+                        />
+                      )}
+                      <span
+                        style={{
+                          display: getImagePath(sign) ? "none" : "none",
+                        }}
+                      >
+                        {sign.emoji}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <p
+                  className={`text-xs font-medium mt-3 text-center flex items-center justify-center gap-1 transition-all duration-300 ${
+                    selectedSign === sign.id ? "font-bold" : ""
+                  }`}
+                >
+                  <ZodiacIcon
+                    sign={sign.id}
+                    size={selectedSign === sign.id ? 17 : 16}
+                    className="text-current"
+                  />
+                  {sign.name}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Period Selection */}
+        <div className="flex justify-center mb-6 md:mb-8">
+          <div
+            className={`flex rounded-full p-1 shadow-lg ${
+              isDarkMode ? "bg-white bg-opacity-10" : "bg-white bg-opacity-90"
+            }`}
+          >
+            {periods.map((period) => (
+              <button
+                key={period.id}
+                onClick={() => setSelectedPeriod(period.id)}
+                className={`px-4 md:px-6 py-2 md:py-3 rounded-full font-medium transition-all text-sm md:text-base flex items-center gap-1 ${
+                  selectedPeriod === period.id
+                    ? "bg-blue-400 text-white shadow-md"
+                    : isDarkMode
+                    ? "text-white hover:text-blue-300"
+                    : "text-gray-600 hover:text-blue-400"
+                }`}
+              >
+                {period.name}
+                {period.id !== "today" && (
+                  <i className="ri-lock-line text-xs opacity-70"></i>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Category Selection */}
+        <div className="flex justify-center flex-wrap gap-2 md:gap-3 mb-6 md:mb-10">
+          {categories.map((category) => (
+            <button
+              key={category.id}
+              onClick={() => setSelectedCategory(category.id)}
+              className={`flex items-center gap-2 px-3 md:px-4 py-2 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 text-sm md:text-base ${
+                selectedCategory === category.id
+                  ? "bg-purple-400 text-white shadow-lg"
+                  : isDarkMode
+                  ? "bg-white bg-opacity-10 text-white hover:bg-opacity-20"
+                  : "bg-white bg-opacity-90 text-gray-600 hover:bg-opacity-100"
+              }`}
+            >
+              {category.icon}
+              {category.name}
+            </button>
+          ))}
+        </div>
+
+        {/* Horoscope Content */}
+        <div
+          className={`rounded-3xl p-8 mb-4 shadow-2xl backdrop-blur-lg transition-all ${
+            isDarkMode
+              ? "bg-white bg-opacity-10 border border-white border-opacity-20"
+              : "bg-white bg-opacity-95"
+          }`}
+        >
+          <div className="flex items-center gap-6 mb-8">
+            <div
+              className="w-20 h-20 rounded-full p-0.5 shadow-lg"
+              style={{
+                background: "linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)",
+              }}
+            >
+              {/* Background layer for separation */}
+              <div
+                className={`w-full h-full rounded-full p-0.5 ${
+                  isDarkMode ? "bg-gray-900" : "bg-gray-50"
+                }`}
+              >
+                <div
+                  className={`w-full h-full rounded-full flex items-center justify-center text-2xl overflow-hidden ${
+                    isDarkMode ? "bg-gray-800" : "bg-gray-100"
+                  }`}
+                >
+                  {getImagePath(getCurrentSign()) ? (
+                    <img
+                      src={getImagePath(getCurrentSign())}
+                      alt={getCurrentSign()?.name}
+                      className="w-full h-full object-cover rounded-full"
+                      onError={(e) => {
+                        e.target.style.display = "none";
+                        e.target.nextSibling.style.display = "block";
+                      }}
+                    />
+                  ) : (
+                    <ZodiacIcon
+                      sign={getCurrentSign()?.id}
+                      size={32}
+                      className="text-gray-600"
+                    />
+                  )}
+                  <span
+                    style={{
+                      display: getImagePath(getCurrentSign()) ? "none" : "none",
+                    }}
+                  >
+                    {getCurrentSign()?.emoji}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="flex-1">
+              <h2 className="text-3xl font-bold text-blue-400 flex items-center gap-2 mb-2">
+                {getPeriodTitle()}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="icon icon-tabler icons-tabler-outline icon-tabler-trending-up"
+                >
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                  <path d="M3 17l6 -6l4 4l8 -8" />
+                  <path d="M14 7l7 0l0 7" />
+                </svg>
+              </h2>
+              <div className="flex items-center gap-2">
+                <ZodiacIcon
+                  sign={getCurrentSign()?.id}
+                  size={20}
+                  className="text-current"
+                />
+                <span className="font-semibold">
+                  {getCurrentSign()?.name} ({getCurrentSign()?.dates})
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="text-lg leading-relaxed mb-8">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-4">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400"></div>
+                <span className="ml-2">Loading your horoscope...</span>
+              </div>
+            ) : (
+              <p>{getHoroscopeText()}</p>
+            )}
+
+            {error && (
+              <div className="text-sm opacity-70 mt-2">
+                <i className="ri-information-line mr-1"></i>
+                Using cached content
+              </div>
+            )}
+          </div>{" "}
+        </div>
+
+        {/* Footer */}
+        <div className="text-center text-sm opacity-70 mt-4 space-y-2">
+          <p className="flex items-center justify-center gap-2">
+            <i className="ri-sparkling-line"></i>
+            Discover your daily horoscope and unlock the secrets of the stars
+            <i className="ri-sparkling-line"></i>
+          </p>
+          <p className="text-xs opacity-60">
+            © 2025 AstroLens Horoscope - All rights reserved.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HoroscopeApp;

src/services/horoscopeService.js

@@ -0,0 +1,138 @@
+const GITHUB_BASE_URL =
+  "https://raw.githubusercontent.com/ntphuc149/AstroLens-Horoscope-Data-Storage/main";
+
+const getCurrentDate = () => {
+  const today = new Date();
+  return today.toISOString().split("T")[0];
+};
+
+// Function để decode base64 UTF-8 đúng cách
+const decodeBase64UTF8 = (base64String) => {
+  try {
+    // Decode base64 thành binary string
+    const binaryString = atob(base64String);
+
+    // Convert binary string thành Uint8Array
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+
+    // Decode UTF-8 đúng cách
+    const decoder = new TextDecoder("utf-8");
+    return decoder.decode(bytes);
+  } catch (error) {
+    console.error("Error decoding base64 UTF-8:", error);
+    return null;
+  }
+};
+
+// Fetch data horoscope từ GitHub với authentication
+export const fetchHoroscopeData = async (category, period) => {
+  try {
+    const currentDate = getCurrentDate();
+    const fileName = `${category}_${period}.json`;
+    const url = `https://api.github.com/repos/ntphuc149/AstroLens-Horoscope-Data-Storage/contents/data/${currentDate}/${fileName}`;
+
+    // Chuẩn bị headers với token
+    const headers = {
+      Accept: "application/vnd.github.v3+json",
+    };
+
+    // Thêm Authorization header nếu có token
+    if (process.env.REACT_APP_GITHUB_TOKEN) {
+      headers["Authorization"] = `token ${process.env.REACT_APP_GITHUB_TOKEN}`;
+    }
+
+    console.log("Fetching from URL:", url);
+    console.log(
+      "Using token:",
+      process.env.REACT_APP_GITHUB_TOKEN ? "Yes" : "No"
+    );
+
+    const response = await fetch(url, { headers });
+
+    console.log("Response status:", response.status);
+
+    if (!response.ok) {
+      throw new Error(
+        `GitHub API error: ${response.status} - ${response.statusText}`
+      );
+    }
+
+    const githubResponse = await response.json();
+
+    // GitHub API trả về content dạng base64, cần decode UTF-8 đúng cách
+    if (githubResponse.content) {
+      // Loại bỏ line breaks trong base64 content
+      const cleanBase64 = githubResponse.content.replace(/\n/g, "");
+
+      // Decode base64 với UTF-8 support
+      const decodedContent = decodeBase64UTF8(cleanBase64);
+
+      if (!decodedContent) {
+        throw new Error("Failed to decode base64 content");
+      }
+
+      const data = JSON.parse(decodedContent);
+      console.log("Successfully loaded data:", data);
+      return data;
+    } else {
+      throw new Error("No content in GitHub response");
+    }
+  } catch (error) {
+    console.error("Error fetching horoscope data:", error);
+    return null;
+  }
+};
+
+export const fallbackHoroscopeContent = {
+  overall: {
+    today:
+      "Today brings a harmonious blend of opportunities and challenges across all aspects of your life. Your natural instincts will guide you well.",
+    week: "This week promises balanced growth in multiple areas. Trust your intuition as you navigate new experiences.",
+    month:
+      "A month of significant personal development awaits. Embrace change and new perspectives with confidence.",
+    year: "This year marks a transformative period of growth, bringing profound insights and meaningful achievements.",
+  },
+  love: {
+    today:
+      "Love is in the air today! Your romantic side is highlighted, making it a perfect day for expressing your feelings.",
+    week: "This week brings romantic opportunities and deepening connections with your loved ones.",
+    month:
+      "A month of passionate encounters and meaningful relationships awaits you.",
+    year: "This year will be transformative for your love life, bringing lasting happiness.",
+  },
+  health: {
+    today:
+      "Your energy levels are high today. Focus on maintaining balance between work and rest.",
+    week: "Pay attention to your physical wellbeing this week. Small changes can make big differences.",
+    month:
+      "This month emphasizes the importance of mental and physical health harmony.",
+    year: "A year of wellness and vitality lies ahead. Make health your priority.",
+  },
+  relationship: {
+    today:
+      "Relationships flourish under today's cosmic energy. Communication is key to success.",
+    week: "Strengthen your bonds with family and friends through meaningful conversations.",
+    month:
+      "Social connections expand this month, bringing new friendships and opportunities.",
+    year: "Your social circle will grow significantly, enriching your life in unexpected ways.",
+  },
+  finance: {
+    today:
+      "Financial opportunities present themselves today. Stay alert for new possibilities.",
+    week: "This week favors careful financial planning and smart investments.",
+    month:
+      "Money matters require attention this month. Budget wisely for future security.",
+    year: "Financial growth and stability are highlighted throughout this year.",
+  },
+  fortune: {
+    today:
+      "Lucky energies surround you today. Trust your instincts and take calculated risks for unexpected rewards.",
+    week: "Fortune favors the bold this week. Positive surprises and serendipitous encounters await.",
+    month:
+      "A month of abundance and good fortune unfolds. Opportunities align perfectly with your goals.",
+    year: "This year brings remarkable luck and prosperity. Your efforts will be rewarded beyond expectations.",
+  },
+};