some change

package.json

@@ -10,9 +10,12 @@
   },
   "dependencies": {
     "framer-motion": "^12.4.2",
+    "lucide-react": "^0.475.0",
     "next": "15.1.6",
     "react": "^19.0.0",
+    "react-countup": "^6.5.3",
     "react-dom": "^19.0.0",
+    "react-intersection-observer": "^9.15.1",
     "swiper": "^11.2.2"
   },
   "devDependencies": {

src/components/Cards/CardNormal/page.jsx

@@ -11,25 +11,15 @@ import Link from "next/link";
 
 const CardNormal = ({ data, priority }) => {
   return (
-    <>
+    <div className="group">
       {" "}
       <>
         <Link href={`/products/${data.id}`} >
           <div
-            className={` tr03 py-2  overflow-hidden xs:h-[270px] lg:h-[270px] border border-gray-200   ${
+            className={` tr03 py-2  overflow-hidden xs:h-[270px] lg:h-[270px] border border-gray-200   ${1 == 1 ? "bg-white  rounded-xl rounded-tl-[40px]" : " opacity-70"
-              1 == 1 ? "bg-white  rounded-xl rounded-tl-[40px]" : " opacity-70"
               }`}
           >
-            {data.hasDiscount && (
+           
-              <div className="absolute m-3 ">
-                <div className="w-fit rounded-lg bg-red-600 overflow-hidden p-1 ">
-                  <p className="mb-0 text-[10px] text-white  pt-[3px] ">
-                    {data.discountPercent}
-                    <small className="text-[10px] ml-1">%</small>
-                  </p>
-                </div>
-              </div>
-            )}
 
             <div className="w-full h-fit flex justify-center  ">
               {!!data.mainImage ? (
@@ -75,18 +65,18 @@ const CardNormal = ({ data, priority }) => {
       </>
       <div className="relative">
         <div className="absolute w-full  bottom-0 ">
-          <div className="bg-gray-100 rounded-t-3xl flex ltr  mt-2 border border-gray-100  p-2 ">
+          <div className="bg-gray-100 rounded-t-3xl flex ltr  mt-2 border border-gray-100  p-2 items-center">
             <div className="flex w-full">
-              <p className="mb-0 text-base font-bold">call</p>
+              <p className="mb-0 text-base ">${data.cost.toLocaleString()}</p>
             </div>
 
             <div className="w-full  text-right rounded-full pr-2">
-              <p className="mb-0 text-base">see detail</p>
+              <p className="mb-0 text-base rounded-lg underline">Detail</p>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    </>
   );
 };
 

src/components/GalleryBox/index.jsx

@@ -5,21 +5,47 @@ import test1 from "../../assets/images/product/1.png";
 import test2 from "../../assets/images/product/2.png";
 import test3 from "../../assets/images/product/3.png";
 import logo from "../../assets/images/logo.png";
+import { useState } from "react";
 
 const GalleryBox = () => {
   const file = [{ image: test1 }, { image: test2 }, { image: test3 }];
 
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
+
+  const handleNext = () => {
+    setCurrentImageIndex((prevIndex) =>
+      prevIndex === file.length - 1 ? 0 : prevIndex + 1
+    );
+  };
+
+  const handlePrev = () => {
+    setCurrentImageIndex((prevIndex) =>
+      prevIndex === 0 ? file.length - 1 : prevIndex - 1
+    );
+  };
+
+  const handleImageClick = (index) => {
+    setCurrentImageIndex(index);
+    setIsLightboxOpen(true);
+  };
+
+  const closeLightbox = () => {
+    setIsLightboxOpen(false);
+  };
+
   return (
     <div className="w-full rounded-3xl">
       <div className="flex justify-center xs:pb-[10px]">
-        <div className=" w-[400px]">
+        <div className="w-full max-w-[90vw]">
           {file?.length > 0 ? (
             <Image
               src={file[0]?.image}
-              width={600}
+              width={1000}
-              height={600}
+              height={1000}
-              className=" mx-auto !object-cover"
+              className="mx-auto object-cover cursor-pointer"
               alt={"llc"}
+              onClick={() => handleImageClick(0)}
               priority
               loading="eager"
             />
@@ -28,7 +54,7 @@ const GalleryBox = () => {
               <Image
                 src={logo}
                 className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
-                alt="وسمه"
+
               />
             </div>
           )}
@@ -36,17 +62,18 @@ const GalleryBox = () => {
       </div>
 
       <div className="flex p-3 overflow-x-auto" id="swich-scrollbar">
-        {file?.map((e) => (
+        {file.slice(1)?.map((e, index) => (
           <div
-            className="p-3 ml-2 bg-white border shadow-sm rounded-3xl"
+            className="p-3 ml-2 bg-white border shadow-sm rounded-3xl cursor-pointer"
             key={e.id}
+            onClick={() => handleImageClick(index)}
           >
             <div className="xs:w-[50px] lg:w-[50px]">
               <Image
                 src={e.image}
                 alt={e.fileName}
-                width={50}
+                width={250}
-                height={50}
+                height={250}
                 priority
                 loading="eager"
               />
@@ -54,6 +81,45 @@ const GalleryBox = () => {
           </div>
         ))}
       </div>
+
+      {isLightboxOpen && (
+        <>
+          <div className="fixed inset-0  bg-black bg-opacity-75 z-50">
+            <div className="bg-white bg-opacity-70 p-12 flex items-center justify-center w-3/4 relative h-3/4 inset-0 left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 rounded-xl">
+              
+              <Image
+                src={file[currentImageIndex]?.image}
+                fill
+                className="mx-auto object-contain"
+                alt={"llc"}
+                priority
+                loading="eager"
+              />
+              <button
+                className="absolute left-5 p-2 bg-gray-100 rounded-full font-bold hover:bg-gray-200"
+                onClick={handlePrev}
+              >
+                Prev
+              </button>
+              <button
+                className="absolute right-5 p-2 bg-gray-100 rounded-full font-bold hover:bg-gray-200"
+                onClick={handleNext}
+              >
+                Next
+              </button>
+              <button
+                className="absolute top-5 right-5 p-2 bg-gray-100 rounded-full hover:bg-gray-200"
+                onClick={closeLightbox}
+              >
+                Close
+              </button>
+
+            </div>
+          </div>
+
+        </>
+
+      )}
     </div>
   );
 };

src/components/NavBar/index.jsx

@@ -18,22 +18,26 @@ const Navbar = ({ theme }) => {
   const NavBarData = [
     {
       id: 1,
-      name: "home",
+      name: "Home",
       children: [],
+      href: "/"
     },
     {
       id: 2,
-      name: "Active",
+      name: "Categories",
-      children: [],
+      href: "/categories",
+      children: [{ name: "Category1", href: "/categories/category1" }, { name: "Category2", href: "/categories/category2" }, { name: "Category3", href: "/categories/category3" }],
     },
     {
       id: 3,
-      name: "Savin",
+      name: "Brands",
-      children: [],
+      href: "/brands",
+      children: [{ name: "brand1", href: "/categories/brand1" }, { name: "brand2", href: "/categories/brand2" }, { name: "brand3", href: "/categories/brand3" }],
     },
     {
       id: 4,
-      name: "about us",
+      name: "About Us",
+      href: "about-us",
       children: [],
     },
   ];
@@ -66,7 +70,7 @@ const Navbar = ({ theme }) => {
   useEffect(() => {
     const handleScroll = () => {
       const scrollTop = window.scrollY;
-      setIsScrolled(scrollTop > 200);
+      setIsScrolled(scrollTop > 0);
     };
 
     window.addEventListener("scroll", handleScroll);
@@ -76,44 +80,60 @@ const Navbar = ({ theme }) => {
     };
   }, []);
 
+
+
+
+
   return (
     <>
       {/* <div className="bg-sky-900 p-3 flex">
         <p className="mb-0 text-white"> salam</p>
       </div> */}
       <div
-        className={` max-[1023px]:hidden  lg:block tr03  ${
+        className={` max-[1023px]:hidden  lg:block tr03  ${isScrolled
-          isScrolled
           ? "fixed w-full !z-[1000] top-0 tr"
           : "pt-10 xs:px-10 lg:px-5 xl:px-20 "
           }`}
       >
         <nav
-          className={`  rtl flex justify-between w-full  pr-10  ${
+          className={`  rtl flex justify-between w-full  pl-10  ${isScrolled ? " bg-gray-100 " : " rounded-2xl"
-            isScrolled ? " bg-gray-100 " : " rounded-2xl"
             }
           ${theme == 1 ? "bg-gray-100 " : " "}`}
         >
-          <div className="w-9/12 flex ">
+          <div className="w-full rtl p-4 mr-2">
-            <div className="w-[50px] h-[50px]  rounded-xl rounded-tl-[25px] bg-white mt-3">
+            <div className="flex">
-              <div className="w-[40px] mx-auto mt-3  ">
+              <div className="mr-2 w-fit px-3 p-2  text-sm bg-white flex  rounded-xl ">
+                <p className="mb-0">Export </p>
+              </div>
+              <div className="mr-2 w-fit px-3 p-2  text-sm bg-white flex  rounded-xl ">
+                <p className="mb-0">Industrial </p>
+              </div>
+
+              <div className="mr-2 w-fit px-3 p-2  text-sm bg-white flex  rounded-xl ">
+                <p className="mb-0">en</p>
+              </div>
+
+
+            </div>
+          </div>
+          <div className="w-full flex ltr ">
+
+            <div className="size-[50px] relative bg-white rounded-lg p-2 flex flex-col items-center rounded-tl-2xl justify-center my-auto">
               <Image
                 src={logo}
-                  width={500}
+                fill
-                  height={500}
                 alt="llc "
-                  className="mx-auto "
+                className="mx-auto object-contain"
               />
-              </div>
+
             </div>
 
             {NavBarData.map((e, index) => (
               <>
                 <div
                   key={index}
-                  className={` mx-2 px-2 w-fit text-sm  p-7 ${
+                  className={` mx-2 px-2 w-fit text-sm  p-7 ${1
-                    1
+                    ? "bg-visa2-200  rounded-full !text-white text-shadow pb-1 relative"
-                      ? "bg-visa2-200  rounded-full !text-white text-shadow pb-1"
                     : ""
                     } `}
                   onMouseEnter={() => {
@@ -127,9 +147,8 @@ const Navbar = ({ theme }) => {
                 // onClick={() => context.setOpenNavBarServices(false)}
                 >
                   <Link
-                    href={`/categories/${e.id}/${e.name.split(" ").join("-")}`}
+                    href={`${e.href}`}
-                    className={` ${isScrolled ? "text-black" : "text-white"}  ${
+                    className={` ${isScrolled ? "text-black" : "text-white"}  ${theme == 1 ? "text-sm !text-black" : " "
-                      theme == 1 ? "text-sm !text-black" : " "
                       }`}
                   >
                     {e.name}
@@ -137,60 +156,26 @@ const Navbar = ({ theme }) => {
                   </Link>
 
                   {e.children.length > 0 && e.id == activeStepNavbar && (
-                    <div
+                    <ul className="absolute left-0 mt-2 w-48 bg-white text-black rounded-lg shadow-lg z-50 overflow-hidden">
-                      className="relative flex justify-center"
+                      {
-                      // onMouseLeave={() => {
+                        e.children.map((c, index) => (
-                      //   setHoverItemNavbar(-1);
-                      // }}
-                    >
-                      <div class="absolute  text-sm z-40  w-[204px]  top-[17px] bg-gray-200 rounded-[26px] p-3 ">
-                        <svg
-                          class="absolute w-20 h-7 -top-[7px] inset-x-0 mx-auto"
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 740 155.61"
-                        >
-                          <path
-                            fill={`${isScrolled ? "#f3f4f6" : "#14532D "}`}
-                            d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
-                          ></path>
-                        </svg>
-                        <span class="absolute w-[14px] h-[14px] rounded-full  block bg-gray-200 -top-[6px] inset-x-0 mx-auto"></span>
 
-                        <div>
+                          <li key={index} className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
-                          <ul>
+                            <Link href={c.href}>
-                            {e.children.map((s, index) => (
+                              {c.name}
-                              <li key={index}>
-                                <Link
-                                  href={`/categories/${s.id}/${s.name
-                                    .split(" ")
-                                    .join("-")}`}
-                                >
-                                  <div className="flex py-2 hover:bg-sky-50 p-2 rounded-2xl cursor-pointer ">
-                                    <div className="w-3 h-3 rounded-full bg-green-900 ml-1 mt-1"></div>
-                                    <p className="mb-0 text-black text-sm ">
-                                      {s.name}
-                                    </p>
-                                  </div>
                             </Link>
                           </li>
-                            ))}
+                        ))
+                      }
+
                     </ul>
-                        </div>
-                      </div>
-                    </div>
                   )}
                 </div>
               </>
             ))}
           </div>
 
-          <div className="w-3/12 ltr p-4 ">
+
-            <div className="flex">
-              <div className="mr-2 w-fit px-3 p-2  text-sm bg-white flex  rounded-xl ">
-                <p className="mb-0">en</p>
-              </div>
-            </div>
-          </div>
         </nav>
       </div>
 
@@ -202,13 +187,11 @@ const Navbar = ({ theme }) => {
       {/* responsive part */}
 
       <div
-        className={`sm:block lg:hidden ${
+        className={`sm:block lg:hidden ${isScrolled & !closeNavbar ? "sticky top-0 z-[100] w-full" : " pt-2"
-          isScrolled & !closeNavbar ? "fixed top-0 z-[100] w-full" : " pt-2"
           }`}
       >
         <div
-          className={`bg-gray-100 flex justify-between rtl p-3   ${
+          className={`bg-gray-100 flex justify-between rtl p-3   ${isScrolled
-            isScrolled
             ? " rounded-bl-xl rounded-br-[40px]"
             : "mx-2 rounded-xl rounded-br-[40px]"
             }`}
@@ -255,13 +238,11 @@ const Navbar = ({ theme }) => {
 
       <div className="sm:block lg:hidden ">
         <div
-          className={`fixed w-[250px] top-0 left-0  tr03  !z-[200] ${
+          className={`fixed w-[250px] top-0 left-0  tr03  !z-[200] ${closeNavbar ? "" : "-translate-x-full"
-            closeNavbar ? "" : "-translate-x-full"
             } `}
         >
           <div
-            className={`absolute  mt-2  tr03 z-5  ${
+            className={`absolute  mt-2  tr03 z-5  ${closeNavbar ? "ml-[255px] " : "ml-[-30px]"
-              closeNavbar ? "ml-[255px] " : "ml-[-30px]"
               }`}
           >
             <div

src/styles/globals.css

@@ -78,3 +78,9 @@
   background-size: cover;
   background-repeat: no-repeat;
 }
+
+.content{
+  @apply leading-8 text-lg
+}
+
+

src/view/Landing/components/AboutUs.jsx

@@ -4,14 +4,14 @@ import logo from "../../../assets/images/logo.png";
 
 const AboutUs = () => {
   return (
-    <div className="xs:mt-10 lg:mt-[120px]">
+    <div className=" min-h-[calc(100vh-108px)] flex flex-col items-center justify-center">
-      <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
+      <div className="xs:px-3 md:px-10 md:container md:mx-auto ">
         <div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-5 rtl ">
           <div className="mx-auto">
             <Image src={logo} className="xs:w-[200px] lg:w-auto" />
           </div>
           <div className="text-left relative mb-10 col-span-2">
-            <h2 className="text-[30px] font-bold relative z-10 xs:text-center lg:text-left">
+            <h2 className="text-4xl font-bold relative z-10 xs:text-center lg:text-left">
               ADVANCED HORIZON SERVICES LLC Products{" "}
             </h2>
             <p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
@@ -35,9 +35,13 @@ const AboutUs = () => {
               odit, eligendi eius dolorem!
             </p>
 
-            <button className="btn btn-primary text-sm p-3 px-10">
+            <button className="btn btn-primary text-base py-3 px-10 ">
               {" "}
-              Learn more about us
+              Export
+            </button>
+            <button className="btn btn-primary text-base p-3 px-10">
+              {" "}
+              Industrial
             </button>
           </div>
         </div>

src/view/Landing/components/CounterDetail.jsx

@@ -1,39 +1,64 @@
-import React from "react";
+"use client"
-
+import { useState } from "react";
+import CountUp from "react-countup";
+import { useInView } from "react-intersection-observer";
 const CounterDetail = () => {
+  const [startCounting, setStartCounting] = useState(false);
+  const { ref, inView } = useInView({
+    triggerOnce: true, // Trigger counting only once
+    threshold: 0.5, // Adjust the threshold as needed (0 to 1)
+  });
+
+  // Start counting when it enters the viewport
+  if (inView && !startCounting) {
+    setStartCounting(true);
+  }
   return (
-    <div className="mt-[120px]">
+
-      <div className="w-full bg-couner-data-landing">
+    <div className="w-full bg-couner-data-landing py-32 mb-44">
       <div className="grid  xs:grid-cols-1 lg:grid-cols-3">
         <div className="xs:my-10 lg:my-20">
           <p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
           <h3 className="mb-0 text-4xl text-gray-300 font-bold">
-              Test For Fake Data
+            Shipping
           </h3>
-            <p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">500</p>
+          <p className="mb-0 text-6xl font-bold text-gray-500 mt-5 "> +<CountUp
+            start={startCounting ? 0 : undefined}
+            end={4300}
+            duration={2.75}
+          /></p>
         </div>
 
         <div className="xs:my-10 lg:my-20">
           <p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
           <h3 className="mb-0 text-4xl text-gray-300 font-bold">
-              Test In Landing Page
+            Happy Clients
           </h3>
 
           <p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
-              5,523,222
+            +<CountUp
+              start={startCounting ? 0 : undefined}
+              end={469}
+              duration={2.75}
+            />
           </p>
         </div>
 
         <div className="xs:my-10 lg:my-20">
           <p className="mb-0 text-[12px] text-gray-300">Lorem ipsum dolor </p>
           <h3 className="mb-0 text-4xl text-gray-300 font-bold">
-              Test For Fake
+            Destinations
           </h3>
-            <p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">+225 </p>
+          <p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
-          </div>
+            <CountUp
+              start={startCounting ? 0 : undefined}
+              end={32}
+              duration={2.75}
+            /> </p>
         </div>
       </div>
     </div>
+
   );
 };
 

src/view/Landing/components/Why.jsx

@@ -0,0 +1,40 @@
+import { Zap } from "lucide-react"
+import { Shield } from "lucide-react"
+import { Rocket } from "lucide-react"
+
+export default function WhyHorizon() {
+    return (
+        <section className="w-full max-w-screen-xl mx-auto pb-40 pt-28 flex flex-col items-center justify-center">
+            <div className="container px-4 md:px-6">
+                <h2 className="text-5xl font-bold text-center mb-16 text-primary-700  w-fit mx-auto">"Why Horizon"</h2>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <FeatureCard
+                        icon={<Rocket className="h-16 w-16 text-primary" />}
+                        title="Fast"
+                        subtitle="Build and deploy quickly with our streamlined tools and processes."
+                    />
+                    <FeatureCard
+                        icon={<Shield className="h-16 w-16 text-primary" />}
+                        title="Secure"
+                        subtitle="Rest easy with our robust security measures and data protection."
+                    />
+                    <FeatureCard
+                        icon={<Zap className="h-16 w-16 text-primary" />}
+                        title="Valuable"
+                        subtitle="Experience lightning-fast speeds and optimal efficiency."
+                    />
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function FeatureCard({ icon, title, subtitle }) {
+    return (
+        <div className="flex flex-col items-center text-center ">
+            <div className="mb-4">{icon}</div>
+            <h3 className="text-xl font-semibold mb-2">{title}</h3>
+            <p className="text-lg">{subtitle}</p>
+        </div>
+    )
+}

src/view/Landing/index.jsx

@@ -5,16 +5,18 @@ import CounterDetail from "./components/CounterDetail";
 import Products from "./components/Products";
 import Footer from "./components/Footer";
 import Navbar from "src/components/NavBar";
+import WhyHorizon from "./components/Why";
 
 const Landing = () => {
   return (
     <div className=" text-center text-6xl">
       {" "}
       <Navbar theme={1} />
-      <HeroSection />
+      {/* <HeroSection /> */}
       <AboutUs />
       <CounterDetail />
       <Products />
+      <WhyHorizon/>
       <Footer />
     </div>
   );

src/view/Products/index.jsx

@@ -7,7 +7,7 @@ import Footer from "../Landing/components/Footer";
 
 const Product = ({ data }) => {
   const testDataCk =
-    "<h1>Hydrating Cream</h1><p><strong>A deeply moisturizing cream</strong> that keeps your skin hydrated all day long. Formulated with natural ingredients, this cream penetrates deep into the skin, providing long-lasting moisture and nourishment.</p><h2>Product Features</h2><ul><li><strong>Deep Hydration:</strong> Keeps skin hydrated for 24 hours</li><li><strong>Lightweight Formula:</strong> Absorbs quickly without greasy residue</li><li><strong>Rich in Vitamins:</strong> Contains Vitamin E and Aloe Vera</li><li><strong>Dermatologically Tested:</strong> Safe for all skin types</li><li><strong>Paraben-Free:</strong> No harmful chemicals</li></ul><h2>Product Specifications</h2><table border='1' cellpadding='10' cellspacing='0' style='width:100%;border-collapse:collapse;'><tr><th>Attribute</th><th>Details</th></tr><tr><td>Product Name</td><td>Hydrating Cream</td></tr><tr><td>Brand</td><td>Premium Skincare</td></tr><tr><td>Volume</td><td>50ml</td></tr><tr><td>Skin Type</td><td>All Skin Types</td></tr><tr><td>Key Ingredients</td><td>Aloe Vera, Vitamin E, Hyaluronic Acid</td></tr><tr><td>Fragrance</td><td>Fragrance-Free</td></tr><tr><td>Texture</td><td>Lightweight & Creamy</td></tr><tr><td>Usage</td><td>Apply twice daily on clean skin</td></tr><tr><td>Packaging</td><td>Eco-friendly Glass Jar</td></tr><tr><td>Shelf Life</td><td>24 Months</td></tr><tr><td>Made In</td><td>USA</td></tr></table><h2>Why Choose Hydrating Cream?</h2><p>Our Hydrating Cream is enriched with the best natural ingredients to provide long-lasting hydration. <strong>Perfect for dry, sensitive, and combination skin.</strong></p><blockquote><p>“This is the best moisturizer I’ve ever used! My skin feels soft and hydrated all day.” - <em>Customer Review</em></p></blockquote><h2>Directions for Use</h2><p>Apply a small amount to clean skin and massage gently until fully absorbed. Use in the morning and evening for best results.</p><h2>Customer Reviews</h2><p><strong>★★★★★ - Amazing!</strong> I love how light yet moisturizing this cream is.</p><p><strong>★★★★★ - Highly Recommended</strong> My skin has never felt better!</p><p><strong>★★★★☆ - Great Product</strong> Works well but I wish it came in a larger size.</p><h2>FAQs</h2><ul><li><strong>Is this suitable for sensitive skin?</strong> Yes! It is dermatologically tested and safe for all skin types.</li><li><strong>Can I use this under makeup?</strong> Absolutely! It absorbs quickly and works well as a base.</li><li><strong>Does this have SPF?</strong> No, but it can be layered with sunscreen.</li></ul><h2>Order Now</h2><p>Get your Hydrating Cream today and experience the difference! Available exclusively on our official store.</p>";
+    "<h1>Hydrating Cream</h1><p><strong>A deeply moisturizing cream</strong> that keeps your skin hydrated all day long. Formulated with natural ingredients, this cream penetrates deep into the skin, providing long-lasting moisture and nourishment.</p><h2>Product Features</h2><ul>  <li><strong>Deep Hydration:</strong> Keeps skin hydrated for 24 hours</li>  <li><strong>Lightweight Formula:</strong> Absorbs quickly without greasy residue</li>  <li><strong>Rich in Vitamins:</strong> Contains Vitamin E and Aloe Vera</li>  <li><strong>Dermatologically Tested:</strong> Safe for all skin types</li>  <li><strong>Paraben-Free:</strong> No harmful chemicals</li></ul><h2>Why Choose Hydrating Cream?</h2><p>Our Hydrating Cream is enriched with the best natural ingredients to provide long-lasting hydration. <strong>Perfect for dry, sensitive, and combination skin.</strong></p><blockquote>  <p>“This is the best moisturizer I’ve ever used! My skin feels soft and hydrated all day.” - <em>Customer Review</em></p></blockquote><h2>Directions for Use</h2><p>Apply a small amount to clean skin and massage gently until fully absorbed. Use in the morning and evening for best results.</p><h2>Customer Reviews</h2><p><strong>★★★★★ - Amazing!</strong> I love how light yet moisturizing this cream is.</p><p><strong>★★★★★ - Highly Recommended</strong> My skin has never felt better!</p><p><strong>★★★★☆ - Great Product</strong> Works well but I wish it came in a larger size.</p><h2>FAQs</h2><ul>  <li><strong>Is this suitable for sensitive skin?</strong> Yes! It is dermatologically tested and safe for all skin types.</li>  <li><strong>Can I use this under makeup?</strong> Absolutely! It absorbs quickly and works well as a base.</li>  <li><strong>Does this have SPF?</strong> No, but it can be layered with sunscreen.</li></ul><h2>Order Now</h2><p>Get your Hydrating Cream today and experience the difference! Available exclusively on our official store.</p>";
 
   return (
     <>
@@ -25,7 +25,7 @@ const Product = ({ data }) => {
           </div>
 
           <div className="flex my-4">
-            <div className="px-3 py-1 ml-2 rounded-full bg-primary-400">
+            <div className="px-3 py-1 ml-0 rounded-full bg-primary-400">
               <p className="mb-0 text-sm text-white ">orginal </p>
             </div>
 
@@ -45,15 +45,58 @@ const Product = ({ data }) => {
               </h2>
             </div>
           </div>
+          <p className="font-bold text-2xl py-8">
 
-          <button className="btn btn-primary px-20 text-base mt-10 ">
+           ${data.cost.toLocaleString()}
+          </p>
+          <button className="btn btn-primary px-20 text-base  ">
             {" "}
-            See All Products
+            Contact and consultation
           </button>
         </div>
       </div>
+      <div className="xs:px-5 lg:px-20 py-16">
+        <table className="w-full text-left border-collapse lg:px-20">
+          <thead>
+            <tr className="bg-gray-200">
+              <th className="p-2 border-b">Property</th>
+              <th className="p-2 border-b">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="p-2 border-b">Brand</td>
+              <td className="p-2 border-b">Nature's Essence</td>
+            </tr>
+            <tr>
+              <td className="p-2 border-b">Volume</td>
+              <td className="p-2 border-b">250ml</td>
+            </tr>
+            <tr>
+              <td className="p-2 border-b">Ingredients</td>
+              <td className="p-2 border-b">
+                <ul className="list-disc pl-4">
+                  <li>Aloe Vera</li>
+                  <li>Chamomile</li>
+                  <li>Tea Tree Oil</li>
+                  <li>Rosemary Extract</li>
+                </ul>
+              </td>
+            </tr>
+           
+            <tr>
+              <td className="p-2 border-b">Category</td>
+              <td className="p-2 border-b">Hair Care</td>
+            </tr>
+            <tr>
+              <td className="p-2 border-b">For Hair Type</td>
+              <td className="p-2 border-b">All Hair Types</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
       <div className="xs:px-5 lg:px-20 pb-20 ">
-        <div dangerouslySetInnerHTML={{ __html: testDataCk }} />
+        <div className="content" dangerouslySetInnerHTML={{ __html: testDataCk }} />
       </div>
 
       <Footer />

tailwind.config.mjs

@@ -13,6 +13,7 @@ export default {
           100: "#FFFBE6",
         },
         primary: {
+          DEFAULT:"#e18c8c",
           50: "#fff5f5",
           100: "#fce8e8",
           200: "#f6caca",