viwe file
parent
d7263b671d
commit
afc0358a4e
409
src/app/page.jsx
409
src/app/page.jsx
|
|
@ -1,412 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import CardNormal from "src/components/Cards/CardNormal/page";
|
||||
import Navbar from "../components/NavBar";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import ban1 from "../assets/images/ban1.jpg";
|
||||
import ban2 from "../assets/images/ban2.png";
|
||||
import logo from "../assets/images/logo.png";
|
||||
import "swiper/css";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import Landing from "src/view/Landing";
|
||||
|
||||
export default function Home() {
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
persianName: "Hydrating Cream",
|
||||
englishName: "Hydrating Cream",
|
||||
description:
|
||||
"A deeply moisturizing cream that keeps your skin hydrated all day long.",
|
||||
cost: 250000,
|
||||
costWithDiscount: 200000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 20,
|
||||
stock: 5,
|
||||
mainImage: "4",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
persianName: "Hair Strengthening Shampoo",
|
||||
englishName: "Hair Strengthening Shampoo",
|
||||
description:
|
||||
"A nourishing shampoo that strengthens hair roots and prevents hair fall.",
|
||||
cost: 180000,
|
||||
costWithDiscount: 150000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 17,
|
||||
stock: 2,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
persianName: "Vitamin C Serum",
|
||||
englishName: "Vitamin C Serum",
|
||||
description:
|
||||
"An antioxidant-rich serum that brightens skin and reduces signs of aging.",
|
||||
cost: 300000,
|
||||
costWithDiscount: 270000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 10,
|
||||
stock: 3,
|
||||
mainImage: "1",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
persianName: "Charcoal Face Mask",
|
||||
englishName: "Charcoal Face Mask",
|
||||
description:
|
||||
"A detoxifying mask that removes impurities and unclogs pores for a fresh look.",
|
||||
cost: 220000,
|
||||
costWithDiscount: 220000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 8,
|
||||
mainImage: "4",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
persianName: "Body Lotion",
|
||||
englishName: "Body Lotion",
|
||||
description:
|
||||
"A lightweight body lotion that nourishes and hydrates dry skin.",
|
||||
cost: 210000,
|
||||
costWithDiscount: 185000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 12,
|
||||
stock: 6,
|
||||
mainImage: "2",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
persianName: "Aloe Vera Gel",
|
||||
englishName: "Aloe Vera Gel",
|
||||
description:
|
||||
"A soothing gel enriched with aloe vera to calm irritated skin.",
|
||||
cost: 160000,
|
||||
costWithDiscount: 160000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 10,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
persianName: "Sunscreen SPF 50",
|
||||
englishName: "Sunscreen SPF 50",
|
||||
description:
|
||||
"A broad-spectrum sunscreen that protects against UV rays and prevents sunburn.",
|
||||
cost: 280000,
|
||||
costWithDiscount: 230000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 18,
|
||||
stock: 4,
|
||||
mainImage: "1",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
persianName: "Face Cleanser",
|
||||
englishName: "Face Cleanser",
|
||||
description:
|
||||
"A gentle face cleanser that removes dirt and oil without stripping moisture.",
|
||||
cost: 190000,
|
||||
costWithDiscount: 170000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 10,
|
||||
stock: 7,
|
||||
mainImage: "2",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
persianName: "Moisturizing Cream",
|
||||
englishName: "Moisturizing Cream",
|
||||
description:
|
||||
"A rich cream that provides deep hydration for soft and smooth skin.",
|
||||
cost: 260000,
|
||||
costWithDiscount: 260000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 9,
|
||||
mainImage: "4",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
persianName: "Eye Serum",
|
||||
englishName: "Eye Serum",
|
||||
description:
|
||||
"A lightweight eye serum that reduces puffiness and dark circles.",
|
||||
cost: 350000,
|
||||
costWithDiscount: 310000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 12,
|
||||
stock: 5,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
persianName: "Lip Balm",
|
||||
englishName: "Lip Balm",
|
||||
description:
|
||||
"A moisturizing lip balm that prevents chapped lips and adds a subtle shine.",
|
||||
cost: 90000,
|
||||
costWithDiscount: 80000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 11,
|
||||
stock: 12,
|
||||
mainImage: "1",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
persianName: "Hand Cream",
|
||||
englishName: "Hand Cream",
|
||||
description:
|
||||
"A fast-absorbing hand cream that keeps hands soft and hydrated.",
|
||||
cost: 170000,
|
||||
costWithDiscount: 150000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 12,
|
||||
stock: 6,
|
||||
mainImage: "2",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
persianName: "Night Repair Serum",
|
||||
englishName: "Night Repair Serum",
|
||||
description:
|
||||
"A serum that works overnight to repair and rejuvenate your skin.",
|
||||
cost: 390000,
|
||||
costWithDiscount: 350000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 10,
|
||||
stock: 4,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
persianName: "Shaving Cream",
|
||||
englishName: "Shaving Cream",
|
||||
description:
|
||||
"A rich shaving cream that provides a smooth and irritation-free shave.",
|
||||
cost: 200000,
|
||||
costWithDiscount: 200000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 9,
|
||||
mainImage: "4",
|
||||
},
|
||||
|
||||
{
|
||||
id: 15,
|
||||
persianName: "Shaving ",
|
||||
englishName: "Shaving ",
|
||||
description:
|
||||
"A fast-absorbing hand cream that keeps hands soft and hydrated.",
|
||||
cost: 200000,
|
||||
costWithDiscount: 200000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 9,
|
||||
mainImage: "1",
|
||||
},
|
||||
];
|
||||
|
||||
const slides = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/slide1.jpg",
|
||||
alt: "Slide 1",
|
||||
title: "Discover the Best Products",
|
||||
description:
|
||||
"Find high-quality beauty and skincare items at unbeatable prices.",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/slide2.jpg",
|
||||
alt: "Slide 2",
|
||||
title: "Exclusive Discounts",
|
||||
description: "Enjoy special deals and save big on your favorite brands.",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/slide3.jpg",
|
||||
alt: "Slide 3",
|
||||
title: "Fast & Secure Delivery",
|
||||
description:
|
||||
"Get your products delivered quickly and safely to your doorstep.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className=" text-center text-6xl">
|
||||
{" "}
|
||||
<Navbar theme={1} />
|
||||
{/* <div className="mt-20">
|
||||
<div className="grid grid-cols-3"></div>
|
||||
</div> */}
|
||||
<div className="xs:px-3 lg:px-20 mt-10">
|
||||
<Swiper className="mySwiper ">
|
||||
<SwiperSlide>
|
||||
<div className="rounded-2xl overflow-hidden ">
|
||||
<Image
|
||||
src={ban1}
|
||||
className="object-cover xs:h-[200px] lg:h-auto "
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
{" "}
|
||||
<div className="rounded-2xl overflow-hidden">
|
||||
<Image
|
||||
src={ban2}
|
||||
className="object-cover xs:h-[200px] lg:h-auto "
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
<div className="xs:mt-10 lg:mt-[120px]">
|
||||
<div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
|
||||
<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">
|
||||
ADVANCED HORIZON SERVICES LLC Products{" "}
|
||||
</h2>
|
||||
<p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
|
||||
Lorem ipsum dolor sit amet
|
||||
</p>
|
||||
|
||||
<p className="mb-0 text-base mt-5">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
|
||||
Voluptates quas, exercitationem expedita libero hic
|
||||
necessitatibus et sed aliquam consequatur repellendus dolore,
|
||||
molestiae earum culpa fuga nobis odit, eligendi eius dolorem!
|
||||
<br />
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
|
||||
Voluptates quas, exercitationem expedita libero hic
|
||||
necessitatibus et sed aliquam consequatur repellendus dolore,
|
||||
molestiae earum culpa fuga nobis odit, eligendi eius dolorem!
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
|
||||
Voluptates quas, exercitationem expedita libero hic
|
||||
necessitatibus et sed aliquam consequatur repellendus dolore,
|
||||
molestiae earum culpa fuga nobis odit, eligendi eius dolorem!
|
||||
</p>
|
||||
|
||||
<button className="btn btn-primary text-sm p-3 px-10">
|
||||
{" "}
|
||||
Learn more about us
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-[120px]">
|
||||
<div className="w-full bg-couner-data-landing">
|
||||
<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
|
||||
</h3>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">500</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
|
||||
</h3>
|
||||
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
|
||||
5,523,222
|
||||
</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
|
||||
</h3>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
|
||||
+225{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-[120px]">
|
||||
<div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
|
||||
<div className="text-left relative mb-10">
|
||||
<h2 className="text-[30px] 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">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Corporis,{" "}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-5">
|
||||
{data?.map((e, index) => (
|
||||
<div key={index} className="relative">
|
||||
<CardNormal data={e} priority />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-secondary-700 ">
|
||||
<div className="lg:w-7/12 xs:w-full mx-auto py-20">
|
||||
<div className="flex justify-center">
|
||||
<div className={`text-center w-ful`}>
|
||||
<>
|
||||
{" "}
|
||||
<p className="mb-0 text-white text-center xs:mt-0 lg:mt-10 font-bold lg:text-[70px] xs:text-[25px] lg:leading-[60px] lg:w-fit xs:w-full">
|
||||
<small className="text-primary-300">"</small>
|
||||
ADVANCED HORIZON
|
||||
</p>
|
||||
<p className="mb-0 text-white text-center font-bold lg:text-[70px] xs:text-[25px] lg:leading-[60px] lg:w-fit xs:w-full">
|
||||
SERVICES LLC
|
||||
<small className=" text-primary-300">"</small>
|
||||
</p>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<div>
|
||||
<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 />
|
||||
am - Om
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<Link href={`/#news`}>
|
||||
<p className="mb-0 text-gray-400 mx-4 text-sm">news</p>
|
||||
</Link>
|
||||
<Link href={`/about-us`}>
|
||||
<p className="mb-0 text-gray-400 mx-4 text-sm">about us</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-secondary-900 "></div>
|
||||
</div>
|
||||
);
|
||||
return <Landing />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import logo from "../../../assets/images/logo.png";
|
||||
|
||||
const AboutUs = () => {
|
||||
return (
|
||||
<div className="xs:mt-10 lg:mt-[120px]">
|
||||
<div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
|
||||
<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">
|
||||
ADVANCED HORIZON SERVICES LLC Products{" "}
|
||||
</h2>
|
||||
<p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
|
||||
Lorem ipsum dolor sit amet
|
||||
</p>
|
||||
|
||||
<p className="mb-0 text-base mt-5">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
|
||||
Voluptates quas, exercitationem expedita libero hic necessitatibus
|
||||
et sed aliquam consequatur repellendus dolore, molestiae earum
|
||||
culpa fuga nobis odit, eligendi eius dolorem!
|
||||
<br />
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
|
||||
Voluptates quas, exercitationem expedita libero hic necessitatibus
|
||||
et sed aliquam consequatur repellendus dolore, molestiae earum
|
||||
culpa fuga nobis odit, eligendi eius dolorem! Lorem ipsum dolor
|
||||
sit amet consectetur, adipisicing elit. Voluptates quas,
|
||||
exercitationem expedita libero hic necessitatibus et sed aliquam
|
||||
consequatur repellendus dolore, molestiae earum culpa fuga nobis
|
||||
odit, eligendi eius dolorem!
|
||||
</p>
|
||||
|
||||
<button className="btn btn-primary text-sm p-3 px-10">
|
||||
{" "}
|
||||
Learn more about us
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutUs;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React from "react";
|
||||
|
||||
const CounterDetail = () => {
|
||||
return (
|
||||
<div className="mt-[120px]">
|
||||
<div className="w-full bg-couner-data-landing">
|
||||
<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
|
||||
</h3>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">500</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
|
||||
</h3>
|
||||
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">
|
||||
5,523,222
|
||||
</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
|
||||
</h3>
|
||||
<p className="mb-0 text-6xl font-bold text-gray-500 mt-5 ">+225 </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CounterDetail;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
import logo from "../../../assets/images/logo.png";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="bg-secondary-700 ">
|
||||
<div className="lg:w-7/12 xs:w-full mx-auto py-20">
|
||||
<div className="flex justify-center">
|
||||
<div className={`text-center w-ful`}>
|
||||
<>
|
||||
{" "}
|
||||
<p className="mb-0 text-white text-center xs:mt-0 lg:mt-10 font-bold lg:text-[70px] xs:text-[25px] lg:leading-[60px] lg:w-fit xs:w-full">
|
||||
<small className="text-primary-300">"</small>
|
||||
ADVANCED HORIZON
|
||||
</p>
|
||||
<p className="mb-0 text-white text-center font-bold lg:text-[70px] xs:text-[25px] lg:leading-[60px] lg:w-fit xs:w-full">
|
||||
SERVICES LLC
|
||||
<small className=" text-primary-300">"</small>
|
||||
</p>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<div>
|
||||
<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 />
|
||||
am - Om
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<Link href={`/#news`}>
|
||||
<p className="mb-0 text-gray-400 mx-4 text-sm">news</p>
|
||||
</Link>
|
||||
<Link href={`/about-us`}>
|
||||
<p className="mb-0 text-gray-400 mx-4 text-sm">about us</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import React from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import ban1 from "../../../assets/images/ban1.jpg";
|
||||
import ban2 from "../../../assets/images/ban2.png";
|
||||
import Image from "next/image";
|
||||
import "swiper/css";
|
||||
|
||||
const HeroSection = () => {
|
||||
return (
|
||||
<div className="xs:px-3 lg:px-20 mt-10">
|
||||
<Swiper className="mySwiper ">
|
||||
<SwiperSlide>
|
||||
<div className="rounded-2xl overflow-hidden ">
|
||||
<Image
|
||||
src={ban1}
|
||||
className="object-cover xs:h-[200px] lg:h-auto "
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
{" "}
|
||||
<div className="rounded-2xl overflow-hidden">
|
||||
<Image
|
||||
src={ban2}
|
||||
className="object-cover xs:h-[200px] lg:h-auto "
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
import React from "react";
|
||||
import CardNormal from "src/components/Cards/CardNormal/page";
|
||||
|
||||
const Products = () => {
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
persianName: "Hydrating Cream",
|
||||
englishName: "Hydrating Cream",
|
||||
description:
|
||||
"A deeply moisturizing cream that keeps your skin hydrated all day long.",
|
||||
cost: 250000,
|
||||
costWithDiscount: 200000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 20,
|
||||
stock: 5,
|
||||
mainImage: "4",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
persianName: "Hair Strengthening Shampoo",
|
||||
englishName: "Hair Strengthening Shampoo",
|
||||
description:
|
||||
"A nourishing shampoo that strengthens hair roots and prevents hair fall.",
|
||||
cost: 180000,
|
||||
costWithDiscount: 150000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 17,
|
||||
stock: 2,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
persianName: "Vitamin C Serum",
|
||||
englishName: "Vitamin C Serum",
|
||||
description:
|
||||
"An antioxidant-rich serum that brightens skin and reduces signs of aging.",
|
||||
cost: 300000,
|
||||
costWithDiscount: 270000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 10,
|
||||
stock: 3,
|
||||
mainImage: "1",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
persianName: "Charcoal Face Mask",
|
||||
englishName: "Charcoal Face Mask",
|
||||
description:
|
||||
"A detoxifying mask that removes impurities and unclogs pores for a fresh look.",
|
||||
cost: 220000,
|
||||
costWithDiscount: 220000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 8,
|
||||
mainImage: "4",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
persianName: "Body Lotion",
|
||||
englishName: "Body Lotion",
|
||||
description:
|
||||
"A lightweight body lotion that nourishes and hydrates dry skin.",
|
||||
cost: 210000,
|
||||
costWithDiscount: 185000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 12,
|
||||
stock: 6,
|
||||
mainImage: "2",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
persianName: "Aloe Vera Gel",
|
||||
englishName: "Aloe Vera Gel",
|
||||
description:
|
||||
"A soothing gel enriched with aloe vera to calm irritated skin.",
|
||||
cost: 160000,
|
||||
costWithDiscount: 160000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 10,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
persianName: "Sunscreen SPF 50",
|
||||
englishName: "Sunscreen SPF 50",
|
||||
description:
|
||||
"A broad-spectrum sunscreen that protects against UV rays and prevents sunburn.",
|
||||
cost: 280000,
|
||||
costWithDiscount: 230000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 18,
|
||||
stock: 4,
|
||||
mainImage: "1",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
persianName: "Face Cleanser",
|
||||
englishName: "Face Cleanser",
|
||||
description:
|
||||
"A gentle face cleanser that removes dirt and oil without stripping moisture.",
|
||||
cost: 190000,
|
||||
costWithDiscount: 170000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 10,
|
||||
stock: 7,
|
||||
mainImage: "2",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
persianName: "Moisturizing Cream",
|
||||
englishName: "Moisturizing Cream",
|
||||
description:
|
||||
"A rich cream that provides deep hydration for soft and smooth skin.",
|
||||
cost: 260000,
|
||||
costWithDiscount: 260000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 9,
|
||||
mainImage: "4",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
persianName: "Eye Serum",
|
||||
englishName: "Eye Serum",
|
||||
description:
|
||||
"A lightweight eye serum that reduces puffiness and dark circles.",
|
||||
cost: 350000,
|
||||
costWithDiscount: 310000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 12,
|
||||
stock: 5,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
persianName: "Lip Balm",
|
||||
englishName: "Lip Balm",
|
||||
description:
|
||||
"A moisturizing lip balm that prevents chapped lips and adds a subtle shine.",
|
||||
cost: 90000,
|
||||
costWithDiscount: 80000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 11,
|
||||
stock: 12,
|
||||
mainImage: "1",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
persianName: "Hand Cream",
|
||||
englishName: "Hand Cream",
|
||||
description:
|
||||
"A fast-absorbing hand cream that keeps hands soft and hydrated.",
|
||||
cost: 170000,
|
||||
costWithDiscount: 150000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 12,
|
||||
stock: 6,
|
||||
mainImage: "2",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
persianName: "Night Repair Serum",
|
||||
englishName: "Night Repair Serum",
|
||||
description:
|
||||
"A serum that works overnight to repair and rejuvenate your skin.",
|
||||
cost: 390000,
|
||||
costWithDiscount: 350000,
|
||||
hasDiscount: true,
|
||||
discountPercent: 10,
|
||||
stock: 4,
|
||||
mainImage: "3",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
persianName: "Shaving Cream",
|
||||
englishName: "Shaving Cream",
|
||||
description:
|
||||
"A rich shaving cream that provides a smooth and irritation-free shave.",
|
||||
cost: 200000,
|
||||
costWithDiscount: 200000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 9,
|
||||
mainImage: "4",
|
||||
},
|
||||
|
||||
{
|
||||
id: 15,
|
||||
persianName: "Shaving ",
|
||||
englishName: "Shaving ",
|
||||
description:
|
||||
"A fast-absorbing hand cream that keeps hands soft and hydrated.",
|
||||
cost: 200000,
|
||||
costWithDiscount: 200000,
|
||||
hasDiscount: false,
|
||||
discountPercent: 0,
|
||||
stock: 9,
|
||||
mainImage: "1",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="my-[120px]">
|
||||
<div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
|
||||
<div className="text-left relative mb-10">
|
||||
<h2 className="text-[30px] 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">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis,{" "}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-5">
|
||||
{data?.map((e, index) => (
|
||||
<div key={index} className="relative">
|
||||
<CardNormal data={e} priority />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Products;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
import HeroSection from "./components/HeroSection";
|
||||
import AboutUs from "./components/AboutUs";
|
||||
import CounterDetail from "./components/CounterDetail";
|
||||
import Products from "./components/Products";
|
||||
import Footer from "./components/Footer";
|
||||
import Navbar from "src/components/NavBar";
|
||||
|
||||
const Landing = () => {
|
||||
return (
|
||||
<div className=" text-center text-6xl">
|
||||
{" "}
|
||||
<Navbar theme={1} />
|
||||
<HeroSection />
|
||||
<AboutUs />
|
||||
<CounterDetail />
|
||||
<Products />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Landing;
|
||||
Loading…
Reference in New Issue