69 lines
4.7 KiB
React
69 lines
4.7 KiB
React
|
import React from "react";
|
|||
|
|
import test from "../../assets/images/product/1.png";
|
|||
|
|
import Navbar from "src/components/NavBar";
|
|||
|
|
import Image from "next/image";
|
|||
|
|
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>';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Navbar theme={1} />
|
|||
|
|
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="lg:col-span-3 xs:px-5 lg:px-0 ">
|
|||
|
|
<div className="text-left mt-7">
|
|||
|
|
<h1 className="text-lg font-medium ">{data.englishName} </h1>
|
|||
|
|
<p className="mb-0 text-sm text-gray-400">{data.englishName} </p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex my-4">
|
|||
|
|
<div className="px-3 py-1 ml-2 rounded-full bg-primary-400">
|
|||
|
|
<p className="mb-0 text-sm text-white ">orginal </p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="px-3 py-1 ml-2 rounded-full bg-danger-100">
|
|||
|
|
<p className="mb-0 text-sm text-white ">off today </p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="px-3 py-1 ml-2 rounded-full bg-secondary-500">
|
|||
|
|
<p className="mb-0 text-sm text-white ">no stock</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div className="flex justify-between mt-3 text-left">
|
|||
|
|
<h2 className="mb-0 text-sm text-gray-400">
|
|||
|
|
{data?.description}
|
|||
|
|
</h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="xs:px-5 lg:px-20 pb-20">
|
|||
|
|
<div dangerouslySetInnerHTML={{ __html: testDataCk }} />
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Product;
|