@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/showroom/promotion-slider.tsx

@@ -0,0 +1,138 @@
+"use client";
+import Image from "next/image";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+import { SwiperArrowIconLeft } from "@/app/utils/svgs/swiperArrowIconLeft";
+import { SwiperArrowIconRight } from "@/app/utils/svgs/swiperArrowIconRight";
+
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+
+type Promotion = {
+  id: string;
+  image: string;
+  subHeading: string;
+  headingLines: string[];
+  description: string;
+  listItems: string[];
+};
+
+export const PromotionSlider = ({
+  promotions,
+}: {
+  promotions: Promotion[];
+}) => {
+  return (
+    <div className="relative">
+      <Swiper
+        modules={[Navigation, Pagination, Autoplay]}
+        navigation={{ prevEl: ".promotion-prev", nextEl: ".promotion-next" }}
+        pagination={{ clickable: true }}
+        autoplay={{ delay: 5000, disableOnInteraction: false }}
+        loop={promotions.length > 1}
+        spaceBetween={0}
+        slidesPerView={1}
+        className="promotion-swiper
+          [&_.swiper-pagination-bullet]:!bg-neutral-300
+          [&_.swiper-pagination-bullet-active]:!bg-[var(--color-primary)]
+          [&_.swiper-pagination]:!bottom-4"
+      >
+        {promotions &&
+          promotions.map(
+            ({
+              id,
+              image,
+              subHeading,
+              headingLines,
+              description,
+              listItems,
+            }) => (
+              <SwiperSlide key={id} className="!h-auto">
+                <div className="flex flex-col lg:flex-row items-center justify-start gap-8 lg:gap-16 h-full">
+                  {/* Featured Image */}
+                  {image !== " " && (
+                    <Image
+                      width={768}
+                      height={576}
+                      sizes="(max-width: 768px) 100vw, 50vw"
+                      src={image}
+                      alt={headingLines?.join(" ") || "Promotion image"}
+                      className="w-full lg:w-1/2 h-auto rounded-md bg-center bg-cover"
+                      loading="lazy"
+                      quality={75}
+                      role="img"
+                      aria-label={headingLines?.join(" ") || "Promotion image"}
+                    />
+                  )}
+
+                  {/* Copy */}
+                  <div className="w-full lg:w-1/2 flex flex-col gap-4 items-start justify-start">
+                    {subHeading?.trim() ? (
+                      <p className="font-secondary text-center w-full xl:text-left text-[18px] leading-[28px] tracking-[-0.045px] text-[var(--color-primary)]">
+                        {subHeading}
+                      </p>
+                    ) : null}
+
+                    <div className="font-primary text-neutral-800 tracking-[-0.12px] uppercase">
+                      {headingLines.map((line, idx) => (
+                        <h2
+                          key={idx}
+                          id={idx === 0 ? "promotion-heading" : undefined}
+                          className="text-[36px] leading-[36px] text-center w-full xl:text-left sm:text-[44px] sm:leading-[44px] lg:text-[48px] lg:leading-[48px]"
+                        >
+                          {line}
+                        </h2>
+                      ))}
+                    </div>
+
+                    {description?.trim() ? (
+                      <p className="font-secondary text-center w-full xl:text-left text-neutral-800 text-[16px] leading-[26px] sm:text-[18px] sm:leading-[28px] tracking-[-0.045px] max-w-3xl">
+                        {description}
+                      </p>
+                    ) : null}
+
+                    {listItems && listItems.length > 0 ? (
+                      <ol className="font-secondary text-neutral-800 text-[16px] leading-[26px] sm:text-[18px] sm:leading-[28px] tracking-[-0.045px] max-w-3xl list-decimal list-inside space-y-2 w-full text-center xl:text-left">
+                        {listItems.map((item, idx) => (
+                          <li key={idx} className="pl-2">
+                            {item}
+                          </li>
+                        ))}
+                      </ol>
+                    ) : null}
+                  </div>
+                </div>
+              </SwiperSlide>
+            )
+          )}
+      </Swiper>
+
+      {/* Prev Button */}
+      <button
+        style={{
+          backgroundColor: "var(--color-secondary-200)",
+          color: "var(--color-secondary-800)",
+        }}
+        className="p-2 rounded-full hidden md:block disabled:opacity-50 absolute left-4 top-1/2 -translate-y-1/2 cursor-pointer promotion-prev z-10 hover:opacity-80 transition-opacity"
+        aria-label="Previous slide"
+      >
+        <span className="size-6 block">{SwiperArrowIconLeft}</span>
+      </button>
+
+      {/* Next Button */}
+      <button
+        style={{
+          backgroundColor: "var(--color-secondary-200)",
+          color: "var(--color-secondary-800)",
+        }}
+        className="p-2 rounded-full hidden md:block absolute right-4 top-1/2 -translate-y-1/2 z-10 disabled:opacity-50 cursor-pointer promotion-next hover:opacity-80 transition-opacity"
+        aria-label="Next slide"
+      >
+        <span className="size-6 flex-shrink-0 block">
+          {SwiperArrowIconRight}
+        </span>
+      </button>
+    </div>
+  );
+};

package/src/app/components/showroom/promotion.tsx

@@ -0,0 +1,207 @@
+import { GET_PROMOTION_PAGE_TYPE } from "@/graphql/queries/getPageTypeId";
+import { GET_PROMOTIONS } from "@/graphql/queries/getPromotions";
+import createApolloServerClient from "@/graphql/server-client";
+import Heading from "../reuseableUI/heading";
+import Link from "next/link";
+import Image from "next/image";
+
+function parseEditorJsContent(raw?: string | null): {
+  description: string;
+  listItems: string[];
+} {
+  if (!raw) return { description: "", listItems: [] };
+
+  try {
+    const json = JSON.parse(raw);
+    type EditorBlock = {
+      id?: string;
+      type?: string;
+      data?: { text?: string; items?: string[] } | null;
+    };
+    const blocks: EditorBlock[] = Array.isArray(json?.blocks)
+      ? (json.blocks as EditorBlock[])
+      : [];
+    const firstParagraph = blocks.find((b) => b?.type === "paragraph");
+    const html: string = firstParagraph?.data?.text || "";
+    const description = html.replace(/<[^>]*>/g, "").trim();
+    const getList = blocks.find((b) => b?.type === "list");
+    const listItems =
+      getList?.data?.items?.map((item: string) => {
+        return item.replace(/<[^>]*>/g, "").trim();
+      }) || [];
+
+    return { description, listItems };
+  } catch {
+    return { description: "", listItems: [] };
+  }
+}
+
+const DiagonalArrow = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="text-black/40"
+  >
+    <path
+      d="M7 17L17 7M17 7H7M17 7V17"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+interface ResourceCardProps {
+  image: string;
+  title: string;
+  description: string;
+  buttonText: string;
+  href: string;
+}
+
+const ResourceCard = ({ image, title, description, buttonText, href }: ResourceCardProps) => (
+  <div className="bg-white border border-black/10 rounded-lg p-10 flex flex-col justify-between gap-6 relative group hover:shadow-md transition-all duration-300">
+    <div className="flex flex-col gap-6">
+      <div className="absolute top-8 right-8">
+        <DiagonalArrow />
+      </div>
+      
+      <div className="w-14 h-14 bg-gray-50 rounded-lg flex items-center justify-center border border-gray-200 overflow-hidden">
+        {image ? (
+          <Image 
+            src={image} 
+            alt={title} 
+            width={50} 
+            height={50} 
+            className="object-contain"
+          />
+        ) : (
+          <div className="w-8 h-8 bg-[var(--color-primary-600)]/10 rounded-full" />
+        )}
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <h3 className="text-xl font-bold text-black font-secondary uppercase">
+          {title}
+        </h3>
+        <p className="text-gray-600 text-sm leading-relaxed font-secondary line-clamp-3">
+          {description}
+        </p>
+      </div>
+    </div>
+
+    <div className="mb-2">
+      <Link
+        href={href}
+        className="inline-block bg-[var(--color-primary-600)] hover:bg-[var(--color-primary-700)] text-white font-black py-3 px-10 rounded-md transition-colors text-xs font-secondary uppercase tracking-widest"
+      >
+        {buttonText}
+      </Link>
+    </div>
+  </div>
+);
+
+export const Promotions = async ({ first = 3 }: { first?: number }) => {
+  let promotions: Array<{
+    id: string;
+    image: string;
+    title: string;
+    description: string;
+    subtitleRedirect: string;
+    buttonText: string;
+  }> = [];
+
+  try {
+    const client = createApolloServerClient();
+
+    const pageTypeResp = await client.query<{
+      pageTypes?: {
+        edges?: Array<{ node?: { id: string; slug: string } | null }>;
+      };
+    }>({
+      query: GET_PROMOTION_PAGE_TYPE,
+      errorPolicy: "all",
+    });
+
+    const pageTypeId = pageTypeResp.data.pageTypes?.edges?.[0]?.node?.id;
+    if (!pageTypeId) return null;
+
+    const promosResp = await client.query<{
+      pages?: {
+        edges?: Array<{
+          node?: {
+            id: string;
+            title?: string | null;
+            content?: string | null;
+            metadata?: Array<{ key?: string | null; value?: string | null }>;
+          } | null;
+        }>;
+      };
+    }>({
+      query: GET_PROMOTIONS,
+      variables: { pageTypeId, first },
+      errorPolicy: "all",
+      fetchPolicy: "network-only",
+    });
+
+    promotions = (promosResp.data.pages?.edges || [])
+      .map((e) => e.node)
+      .filter(Boolean)
+      .map((n) => {
+        const metaEntries = Object.fromEntries(
+          (n!.metadata || [])
+            .filter((m) => m?.key)
+            .map((m) => [m!.key as string, m!.value || ""]) as [string, string][]
+        );
+        const image = metaEntries["promo-image"] || "";
+        const subtitleRedirect = metaEntries["subtitle-redirect"] || "#";
+        const buttonText = metaEntries["promo-subtitle"] || "LEARN MORE";
+        const { description } = parseEditorJsContent(n!.content);
+
+        return {
+          id: n!.id,
+          image,
+          title: n!.title || "",
+          description,
+          subtitleRedirect,
+          buttonText,
+        };
+      });
+      promotions.reverse(); // TODO: it should be sorted in backend
+  } catch (error) {
+    console.error("[Promotions] Error fetching dynamic data:", error);
+    promotions = [];
+  }
+
+  if (!promotions.length) return null;
+
+  return (
+    <section className="py-12 px-4 md:px-6 md:py-16 lg:py-24 bg-white">
+      <div className="container mx-auto">
+        <div className="mb-12">
+          <Heading 
+            content="RESOURCES TO KEEP YOU ROLLING" 
+            className="italic font-black text-black"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {promotions.map((promo) => (
+            <ResourceCard 
+              key={promo.id}
+              image={promo.image}
+              title={promo.title}
+              description={promo.description}
+              buttonText={promo.buttonText}
+              href={promo.subtitleRedirect}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

package/src/app/components/showroom/promotionsSwiper.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { SwiperArrowIconLeft } from "@/app/utils/svgs/swiperArrowIconLeft";
+import { SwiperArrowIconRight } from "@/app/utils/svgs/swiperArrowIconRight";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { Suspense } from "react";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import CommonButton from "../reuseableUI/commonButton";
+import EmptyState from "../reuseableUI/emptyState";
+
+interface PromotionSlide {
+  id: string;
+  image: string;
+  alt: string;
+  Heading: string;
+  subHeading: string;
+  Offer: string;
+}
+
+const defaultSlides = [
+  {
+    id: "1",
+    image: "/no-image-avail-large.png",
+    alt: "Slide 3",
+    Heading: "Mustang GT Performance Exhaust System",
+    subHeading: "EXHAUST SYSTEMS & PERFORMANCE PARTS",
+    Offer: "$39.90",
+  },
+  {
+    id: "2",
+    image: "/no-image-avail-large.png",
+    alt: "Slide 3",
+    Heading: "Mustang GT Performance Exhaust System",
+    subHeading: "EXHAUST SYSTEMS & PERFORMANCE PARTS",
+    Offer: "$39.90",
+  },
+  {
+    id: "3",
+    image: "/no-image-avail-large.png",
+    alt: "Slide 3",
+    Heading: "Mustang GT Performance Exhaust System",
+    subHeading: "EXHAUST SYSTEMS & PERFORMANCE PARTS",
+    Offer: "$39.90",
+  },
+];
+
+interface PromotionsSwiperProps {
+  slides?: PromotionSlide[];
+}
+
+export const PromotionsSwiper = ({ slides }: PromotionsSwiperProps) => {
+  const slidesToUse = slides && slides.length > 0 ? slides : defaultSlides;
+  const router = useRouter();
+
+  if (!slidesToUse || slidesToUse.length === 0) {
+    return (
+      <div className="relative w-full h-[704px] flex items-center justify-center">
+        <div
+          style={{ backgroundColor: "var(--color-primary-600)" }}
+          className="absolute h-[704px] max-w-[80px] w-full z-[5]"
+        />
+        <EmptyState
+          text="No promotions available"
+          textParagraph="Check back later for exciting promotions and deals"
+          className="h-full z-10"
+        />
+      </div>
+    );
+  }
+  return (
+    <div className="relative w-full h-[414px] lg:h-[704px]">
+      <div className="w-full h-full absolute bg-black/60 backdrop-blur-md z-[2] top-0 left-0 text-center flex items-center justify-center font-primary ">
+        <div className="bg-[var(--color-secondary-400)] px-2 py-1 size-fit text-[var(--color-secondary-90)] text-3xl">
+          Coming Soon
+        </div>
+      </div>
+      <div
+        style={{ backgroundColor: "var(--color-primary-600)" }}
+        className="absolute  h-10 max-w-none md:h-full lg:h-[704px] md:max-w-[80px] w-full z-[5]"
+      />
+
+      <Swiper
+        modules={[Navigation, Pagination, Autoplay]}
+        navigation={{ prevEl: ".promotion-prev", nextEl: ".promotion-next" }}
+        pagination={{ clickable: true }}
+        autoplay={{ delay: 4000 }}
+        loop
+        slidesPerView={1}
+        mousewheel={{ enabled: true, forceToAxis: true, releaseOnEdges: true }}
+        keyboard={{ enabled: true, onlyInViewport: true }}
+        className="w-full h-full
+          [&_.swiper-pagination-bullet]:!bg-[var(--color-secondary-50)]
+          [&_.swiper-pagination-bullet-active]:!bg-[var(--color-secondary-500)]
+          [&_.swiper-pagination]:!bottom-8"
+      >
+        {slidesToUse.map((slide) => (
+          <SwiperSlide key={slide.id}>
+            <div className="relative w-full h-full">
+              <Suspense
+                fallback={
+                  <div className="w-full h-full bg-gray-200 animate-pulse" />
+                }
+              >
+                <Image
+                  src={slide.image}
+                  alt={slide.alt}
+                  fill
+                  className="object-cover"
+                  priority
+                />
+                <div className="absolute inset-0 bg-black/50" />
+              </Suspense>
+
+              <div className="absolute container flex items-center h-full w-full px-4 md:pl-[111px] lg:pl-28">
+                <div className="flex flex-col items-start w-full max-w-[645px] justify-center">
+                  <p
+                    style={{ color: "var(--color-secondary-300)" }}
+                    className="font-secondary text-xs md:text-sm lg:*:text-base leading-[24px] tracking-[-0.04px]"
+                  >
+                    {slide.subHeading}
+                  </p>
+
+                  <div className="w-full flex flex-col flex-wrap justify-start gap-6 lg:gap-10">
+                    <h2
+                      style={{ color: "var(--color-secondary-50)" }}
+                      className="font-primary text-2xl/none md:text-3xl/none lg:text-6xl/none tracking-[-0.15px] uppercase"
+                    >
+                      {slide.Heading}
+                    </h2>
+
+                    <p
+                      style={{ color: "var(--color-secondary-50)" }}
+                      className="font-secondary text-3xl md:text-5xl lg:text-7xl/none  font-light tracking-[-0.18px]"
+                    >
+                      {slide.Offer}
+                    </p>
+
+                    <CommonButton variant="primary" className="py-2 md:py-3 w-fit" content={"Shop Now"} onClick={() => router.push("/products/all")} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      {/* Prev */}
+      <button
+        style={{
+          backgroundColor: "var(--color-secondary-50)",
+          color: "var(--color-secondary-800)",
+        }}
+        className="p-2 rounded-full hidden md:block disabled:opacity-50 absolute left-4 top-1/2 cursor-pointer promotion-prev z-[5]"
+      >
+        <span className="size-6 block">{SwiperArrowIconLeft}</span>
+      </button>
+
+      {/* Next */}
+      <button
+        style={{
+          backgroundColor: "var(--color-secondary-50)",
+          color: "var(--color-secondary-800)",
+        }}
+        className="p-2 rounded-full hidden md:block absolute right-4 top-1/2 z-[5] disabled:opacity-50 cursor-pointer promotion-next"
+      >
+        <span className="size-6 flex-shrink-0 block">
+          {SwiperArrowIconRight}
+        </span>
+      </button>
+    </div>
+  );
+};

package/src/app/components/showroom/showroomHeroCarousel.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { GET_PAGE_METADATA_BY_SLUG } from "@/graphql/queries/getHeroMetadata";
+import { useQuery } from "@apollo/client";
+import Image from "next/image";
+import { useMemo } from "react";
+import "swiper/css";
+import "swiper/css/effect-fade";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import { Autoplay, EffectFade, Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { VehicleSearchDropdowns } from "./VehicleSearchDropdowns";
+
+interface HeroSlide {
+  id: number;
+  image: string;
+  alt: string;
+  title: string;
+  description: string;
+}
+
+interface ShowroomHeroCarouselProps {
+  slides?: HeroSlide[];
+}
+
+
+const HeroBackground = ({ src, alt }: { src?: string | null; alt: string }) => {
+  const imageSrc = src?.trim() || "/random-car-1.jpeg";
+
+  return (
+    <div className="absolute inset-0">
+      <Image
+        src={imageSrc}
+        alt={alt}
+        width={1920}
+        height={753}
+        priority
+        quality={75}
+        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 1920px"
+        className="w-full h-full object-cover object-center"
+      />
+    </div>
+  );
+};
+
+const SearchFormSection = () => {
+  return (
+    <section
+      className="flex h-max flex-col w-full bg-[var(--color-secondary-900)] text-white px-6 py-8 lg:px-10 lg:py-12 lg:min-h-0 lg:justify-center"
+      aria-label="Find parts by vehicle"
+    >
+      {/* Desktop: only show when this is the left column. Mobile: always show heading */}
+      <div className="w-full max-w-md lg:max-w-none mx-auto lg:mx-0 space-y-4">
+        <h2 className="text-2xl md:text-3xl lg:text-4xl font-primary font-bold italic uppercase tracking-tight text-white">
+          FIND THE RIGHT PARTS
+        </h2>
+
+        <VehicleSearchDropdowns />
+      </div>
+    </section>
+  );
+};
+
+export const ShowroomHeroCarousel = ({}: ShowroomHeroCarouselProps) => {
+  const { data, loading } = useQuery(GET_PAGE_METADATA_BY_SLUG, {
+    variables: { slug: "hero-section" },
+  });
+
+  const heroSlides = useMemo(() => {
+    const meta = (data?.page?.metadata ?? []) as {
+      key: string;
+      value: string | null;
+    }[];
+    const getVal = (key: string) => {
+      const value = meta.find((m) => m.key === key)?.value;
+      return value?.trim() || null;
+    };
+    return [
+      {
+        id: 1,
+        title: "",
+        description: "",
+        image: getVal("background-image-url"),
+        alt: "Hero slide 1",
+      },
+      {
+        id: 2,
+        title: "",
+        description: "",
+        image: getVal("background-image-url-1"),
+        alt: "Hero slide 2",
+      },
+    ];
+  }, [data]);
+
+  return (
+    <div className="relative w-full">
+      {/* Mobile: hero on top, then form. Desktop: two columns — form left, hero right */}
+      <div className="flex flex-col lg:flex-row lg:min-h-[480px]">
+        {/* Mobile: hero first */}
+        <div className="relative w-full aspect-[16/10] lg:aspect-auto lg:flex-1 lg:min-h-[480px] order-1 lg:order-2">
+          {loading ? (
+            <div className="w-full h-full min-h-[280px] lg:min-h-[480px] bg-[var(--color-secondary-700)] animate-pulse" />
+          ) : (
+            <Swiper
+              modules={[Navigation, Pagination, Autoplay, EffectFade]}
+              navigation={{ prevEl: ".featured-prev", nextEl: ".featured-next" }}
+              pagination={{ clickable: true }}
+              autoplay={{ delay: 5000, disableOnInteraction: false }}
+              effect="fade"
+              loop
+              className="h-full w-full"
+            >
+              {heroSlides.map((slide) => (
+                <SwiperSlide key={slide.id}>
+                  <div className="relative w-full h-full min-h-[280px] lg:min-h-[480px]">
+                    <HeroBackground src={slide.image} alt={slide.alt} />
+                    <div className="absolute inset-0 flex flex-col justify-center items-center text-center px-4 bg-black/20">
+                      <p className="text-white text-sm md:text-base uppercase font-secondary tracking-wide">
+                        {slide.title}
+                      </p>
+                      <p className="text-white text-2xl md:text-4xl lg:text-5xl font-primary font-bold uppercase tracking-tight mt-1 drop-shadow-md">
+                        {slide.description}
+                      </p>
+                    </div>
+                  </div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          )}
+        </div>
+
+        {/* Left column (desktop) / below hero (mobile) */}
+        <div className="order-2 lg:order-1 lg:w-[min(500px,40%)] lg:flex-shrink-0">
+          <SearchFormSection />
+        </div>
+      </div>
+    </div>
+  );
+};