-
-
+
+
+ {product.title}
+
+ {/*
${data.cost.toLocaleString()}
-
+
*/}
-
Detail
+
{product.category.title} - {product.brand.title}
diff --git a/src/components/Carousel/ProductCarousel.jsx b/src/components/Carousel/ProductCarousel.jsx
index 7d90cd3..b80dc11 100644
--- a/src/components/Carousel/ProductCarousel.jsx
+++ b/src/components/Carousel/ProductCarousel.jsx
@@ -1,57 +1,69 @@
"use client"
-import { useCallback } from "react"
+
import useEmblaCarousel from "embla-carousel-react"
import { ChevronLeft, ChevronRight } from "lucide-react"
+import { useCallback } from "react"
import CardNormal from "../Cards/CardNormal/page"
+import Autoplay from "embla-carousel-autoplay"
-export function ProductCarouselSection({products}) {
- const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false, align: "start" })
-
- const scrollPrev = useCallback(() => {
- if (emblaApi) emblaApi.scrollPrev()
- }, [emblaApi])
-
- const scrollNext = useCallback(() => {
- if (emblaApi) emblaApi.scrollNext()
- }, [emblaApi])
-
- return (
-
-
-
Our Featured Products
-
Discover our handpicked selection of top-quality items
-
-
-
-
- {products.map((product) => (
-
-
-
- ))}
-
-
-
-
-
-
+
+
+
+export default function ProductCarousel({ title, subtitle, products }) {
+
+ const [emblaRef, emblaApi] = useEmblaCarousel(
+ { loop: true, align: "start" },
+ [
+ Autoplay({ delay: 3000, stopOnInteraction: true }),
+ ]
)
- }
\ No newline at end of file
+
+ const scrollPrev = useCallback(() => {
+ if (emblaApi) emblaApi.scrollPrev()
+ }, [emblaApi])
+
+ const scrollNext = useCallback(() => {
+ if (emblaApi) emblaApi.scrollNext()
+ }, [emblaApi])
+
+ return (
+
+
+
{title}
+
{subtitle}
+
+
+
+
+ {products.map((product) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ )
+}
+
diff --git a/src/view/Landing/components/Products.jsx b/src/view/Landing/components/Products.jsx
index 00237f0..bf9a178 100644
--- a/src/view/Landing/components/Products.jsx
+++ b/src/view/Landing/components/Products.jsx
@@ -1,207 +1,11 @@
import Link from "next/link";
import React from "react";
import CardNormal from "src/components/Cards/CardNormal/page";
+import ProductCarousel from "src/components/Carousel/ProductCarousel";
-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",
- },
- ];
+const Products = ({ products }) => {
+ console.log(products)
return (
@@ -210,17 +14,26 @@ const Products = () => {
ADVANCED HORIZON SERVICES LLC Products{" "}
-
+
-
- {data?.map((e, index) => (
+
+
+
p.brand.title === "active")} subtitle={""} title={"Active Products"} />
+
+
+
+
p.brand.title === "savin")} subtitle={""} title={"Savin Products"} />
+
+
+ {/*
+ {products?.map((product, index) => (
-
+
))}
-
+
*/}
{/*
diff --git a/src/view/Landing/index.jsx b/src/view/Landing/index.jsx
index de88aca..b148877 100644
--- a/src/view/Landing/index.jsx
+++ b/src/view/Landing/index.jsx
@@ -3,17 +3,63 @@ import AboutUs from "./components/AboutUs";
import Footer from "./components/Footer";
import Products from "./components/Products";
import Sides from "./components/Sides";
+import graphql from "src/utils/graphql";
-const Landing = () => {
+const gql = `
+query Products_connection($locale: I18NLocaleCode, $page: Int, $pageSize: Int) {
+ products_connection(
+ pagination: { page: $page, pageSize: $pageSize }
+ locale: $locale,
+ sort: ["createdAt:asc"]
+ ) {
+ nodes {
+ title
+ documentId
+ images {
+ alternativeText
+ documentId
+ url
+ }
+ category {
+ documentId
+ title
+ slug
+ }
+ brand {
+ title
+ documentId
+ slug
+ }
+ slug
+ }
+ }
+}
+
+`
+
+const getProducts = async () => {
+ const products = await graphql(gql, {
+ page: 1,
+ pageSize: 20,
+ locale: "en"
+ })
+
+ return products.products_connection.nodes;
+
+}
+
+const Landing = async () => {
+ const products = await getProducts()
+ console.log(products)
return (
{" "}
{/*
*/}
-
+
{/*
*/}
-
+
{/*
*/}