pdp changed
parent
7a5bef0622
commit
f93041a93d
|
|
@ -0,0 +1,61 @@
|
|||
"use client ";
|
||||
|
||||
import Image from "next/image";
|
||||
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";
|
||||
|
||||
const GalleryBox = () => {
|
||||
const file = [{ image: test1 }, { image: test2 }, { image: test3 }];
|
||||
|
||||
return (
|
||||
<div className="w-full rounded-3xl">
|
||||
<div className="flex justify-center xs:pb-[10px] ">
|
||||
<div className=" w-[400px]">
|
||||
{file?.length > 0 ? (
|
||||
<Image
|
||||
src={file[0]?.image}
|
||||
width={600}
|
||||
height={600}
|
||||
className=" mx-auto !object-cover"
|
||||
alt={"llc"}
|
||||
priority
|
||||
loading="eager"
|
||||
/>
|
||||
) : (
|
||||
<div className="xs:!w-[85px] lg:!w-[85px] ">
|
||||
<Image
|
||||
src={logo}
|
||||
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
||||
alt="وسمه"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex p-3 overflow-x-auto " id="swich-scrollbar">
|
||||
{file?.map((e) => (
|
||||
<div
|
||||
className="p-3 ml-2 bg-white border shadow-sm rounded-3xl"
|
||||
key={e.id}
|
||||
>
|
||||
<div className="xs:w-[50px] lg:w-[50px]">
|
||||
<Image
|
||||
src={e.image}
|
||||
alt={e.fileName}
|
||||
width={50}
|
||||
height={50}
|
||||
priority
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GalleryBox;
|
||||
|
|
@ -18,61 +18,22 @@ const Navbar = ({ theme }) => {
|
|||
const NavBarData = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Electronics",
|
||||
children: [
|
||||
{
|
||||
id: 101,
|
||||
name: "Laptops",
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
name: "Smartphones",
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
name: "Cameras",
|
||||
},
|
||||
],
|
||||
name: "home",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Fashion",
|
||||
children: [
|
||||
{
|
||||
id: 201,
|
||||
name: "Men's Clothing",
|
||||
},
|
||||
{
|
||||
id: 202,
|
||||
name: "Women's Clothing",
|
||||
},
|
||||
{
|
||||
id: 203,
|
||||
name: "Accessories",
|
||||
},
|
||||
],
|
||||
name: "Active",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Home & Kitchen",
|
||||
children: [
|
||||
{
|
||||
id: 301,
|
||||
name: "Furniture",
|
||||
},
|
||||
{
|
||||
id: 302,
|
||||
name: "Decor",
|
||||
},
|
||||
{
|
||||
id: 303,
|
||||
name: "Kitchen Appliances",
|
||||
},
|
||||
],
|
||||
name: "Savin",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Sports",
|
||||
name: "about us",
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
|
|
@ -140,7 +101,7 @@ const Navbar = ({ theme }) => {
|
|||
src={logo}
|
||||
width={500}
|
||||
height={500}
|
||||
alt="حامیان عدالت"
|
||||
alt="llc"
|
||||
className="mx-auto "
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -225,41 +186,6 @@ const Navbar = ({ theme }) => {
|
|||
|
||||
<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 ">
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 290 294"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mr-2 mt-[2px] opacity-80"
|
||||
>
|
||||
<path
|
||||
d="M145.214 175.429C171.842 175.429 193.429 153.842 193.429 127.214C193.429 100.586 171.842 79 145.214 79C118.586 79 97 100.586 97 127.214C97 153.842 118.586 175.429 145.214 175.429Z"
|
||||
stroke="black"
|
||||
stroke-width="21.4286"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M230.429 282.681C222.316 266.941 210.027 253.739 194.907 244.522C179.787 235.305 162.422 230.429 144.714 230.429C127.007 230.429 109.641 235.305 94.5215 244.522C79.4019 253.739 67.1122 266.941 59 282.681"
|
||||
stroke="black"
|
||||
stroke-width="21.4286"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M251.214 226.416C266.421 206.582 275.774 182.888 278.216 158.015C280.658 133.142 276.092 108.082 265.034 85.6691C253.975 63.2561 236.866 44.3846 215.64 31.189C194.415 17.9933 169.921 11 144.929 11C119.936 11 95.4419 17.9933 74.2168 31.189C52.9916 44.3846 35.8823 63.2561 24.8238 85.6691C13.7653 108.082 9.19884 133.142 11.641 158.015C14.0831 182.888 23.4364 206.582 38.6429 226.416"
|
||||
stroke="black"
|
||||
stroke-width="21.4286"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<p className="mb-0">sign in / sing up</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>
|
||||
|
|
|
|||
|
|
@ -28,12 +28,12 @@ const Footer = () => {
|
|||
<div className="w-full mb-5">
|
||||
<Image src={logo} className="w-[90px] mx-auto" />
|
||||
</div>
|
||||
<p className="mb-0 text-sm text-gray-200 w-full text-center opacity-30 ">
|
||||
© 2025. All rights reserved. | Designed by ♡ <br />
|
||||
<p className="mb-0 text-sm text-gray-200 w-full text-center opacity-30 pb-20 ">
|
||||
© 2025. All rights reserved. <br />
|
||||
am - Om
|
||||
</p>
|
||||
|
||||
<div className="flex justify-center w-full my-5 ">
|
||||
{/* <div className="flex justify-center w-full my-5 ">
|
||||
<Link href={`/products`}>
|
||||
<p className="mb-0 text-gray-400 mx-4 text-sm">products</p>
|
||||
</Link>
|
||||
|
|
@ -43,7 +43,7 @@ const Footer = () => {
|
|||
<Link href={`/about-us`}>
|
||||
<p className="mb-0 text-gray-400 mx-4 text-sm">about us</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,12 @@ import React from "react";
|
|||
import test from "../../assets/images/product/1.png";
|
||||
import Navbar from "src/components/NavBar";
|
||||
import Image from "next/image";
|
||||
import GalleryBox from "src/components/GalleryBox";
|
||||
import Footer from "../Landing/components/Footer";
|
||||
|
||||
const Product = ({ data }) => {
|
||||
const testDataCk =
|
||||
'<h1 style="color:#ff6347;">Hydrating Cream - Ultimate Skincare Solution</h1><p style="color:#4682b4;">Discover the power of deep hydration with our <strong>premium Hydrating Cream</strong>. Designed to nourish and protect your skin, this cream is enriched with essential vitamins and natural extracts.</p><h2 style="color:#32cd32;">Why Choose Our Hydrating Cream?</h2><p style="color:#8a2be2;">Our formula ensures your skin remains <em>moisturized</em> and <em>rejuvenated</em> throughout the day. It absorbs quickly and leaves no greasy residue, making it perfect for all skin types.</p><ul><li style="color:#ff4500;"><strong>Deep Moisturization</strong> - Keeps your skin hydrated for 24 hours.</li><li style="color:#00ced1;"><strong>Natural Ingredients</strong> - Aloe vera, shea butter, and vitamin E.</li><li style="color:#daa520;"><strong>Non-Greasy Formula</strong> - Lightweight and easy to apply.</li><li style="color:#dc143c;"><strong>Suitable for All Skin Types</strong> - Works for dry, oily, and combination skin.</li></ul><h2 style="color:#ff69b4;">Key Benefits</h2><p style="color:#2e8b57;">✔ Restores skins natural glow<br>✔ Prevents dryness and flakiness<br>✔ Reduces fine lines and wrinkles<br>✔ Soothes irritation and redness</p><h2 style="color:#1e90ff;">How to Use?</h2><p style="color:#8b0000;">Apply a small amount of Hydrating Cream to your face and neck. Gently massage in circular motions until fully absorbed. Use morning and night for best results.</p><h2 style="color:#ff8c00;">Ingredients</h2><p style="color:#4b0082;">Water, Glycerin, Aloe Vera Extract, Shea Butter, Vitamin E, Hyaluronic Acid, Essential Oils, Antioxidants.</p><h2 style="color:#ff0000;">Customer Reviews</h2><p style="color:#006400;"><strong>⭐⭐⭐⭐⭐</strong> "Absolutely love this cream! My skin feels so soft and refreshed!" - Sarah K.</p><p style="color:#8b4513;"><strong>⭐⭐⭐⭐⭐</strong> "Best moisturizer I’ve ever used. Highly recommended!" - David R.</p><h2 style="color:#800080;">Frequently Asked Questions</h2><p style="color:#191970;"><strong>Q: Is this suitable for sensitive skin?</strong> <br>A: Yes! Our formula is dermatologically tested and safe for sensitive skin.</p><p style="color:#a52a2a;"><strong>Q: Can I use this under makeup?</strong> <br>A: Absolutely! It creates a perfect base for smooth makeup application.</p><h2 style="color:#ff1493;">Final Thoughts</h2><p style="color:#008b8b;">Hydrating Cream is your go-to solution for lasting hydration and healthy skin. Experience the difference with our expertly crafted formula. </p><p style="color:#cd5c5c;"><strong>Get yours today and say hello to beautifully hydrated skin!</strong></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>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>";
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -12,21 +15,7 @@ const Product = ({ data }) => {
|
|||
|
||||
<div className="flex flex-col md:flex-row lg:px-20 ">
|
||||
<div className="lg:col-span-3 ">
|
||||
<div className="w-full rounded-3xl">
|
||||
<div className="flex justify-center xs:pb-[10px] ">
|
||||
<div className="w-[500px]">
|
||||
<Image
|
||||
src={test}
|
||||
width={350}
|
||||
height={350}
|
||||
className=" mx-auto !object-cover"
|
||||
alt={data.persianName}
|
||||
priority
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<GalleryBox />
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-3 xs:px-5 lg:px-0 ">
|
||||
|
|
@ -56,11 +45,18 @@ const Product = ({ data }) => {
|
|||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="btn btn-primary px-20 text-base mt-10 ">
|
||||
{" "}
|
||||
See All Products
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xs:px-5 lg:px-20 pb-20">
|
||||
<div dangerouslySetInnerHTML={{ __html: testDataCk }} />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue