Feature/UI components

.gitignore

@@ -40,3 +40,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.vscode

package.json

@@ -13,6 +13,8 @@
     "@contentstack/live-preview-utils": "^4.2.1",
     "@contentstack/personalize-edge-sdk": "^1.0.16",
     "@contentstack/utils": "^1.4.4",
+    "@headlessui/react": "^2.2.9",
+    "@heroicons/react": "^2.2.0",
     "contentstack": "^3.26.2",
     "next": "15.5.4",
     "next-intl": "^4.3.9",

src/app/[locale]/[...slug]/layout.jsx

@@ -0,0 +1,47 @@
+
+import { cache } from "react";
+import { headers } from "next/headers";
+import ContentstackServer from "@/lib/cstack";
+import DataContextProvider from "@/context/data.context";
+
+const fetchData = cache(async (locale) => {
+  const headersList = await headers();
+  const variantParam = headersList.get('x-personalize-variants');
+  // example of how to fetch seo metadata from contentstack, replace "homepage" with the content type which contains the seo metadata
+  const data = await ContentstackServer.getElementByType("landing_pages", locale, {}, variantParam);
+  return data;
+});
+
+export const generateMetadata = async ({ params }) => {
+  const { locale } = await params;
+  const data = await fetchData(locale);
+  const entry = data?.[0];
+
+  return {
+    title: entry?.seo?.title,
+    description: entry?.seo?.description,
+    robots: {
+      index: entry?.seo?.no_index || false,
+      follow: entry?.seo?.no_follow || false,
+    },
+    openGraph: {
+      title: entry?.seo?.og_meta_tags?.title,
+      description: entry?.seo?.og_meta_tags?.description,
+      images: entry?.seo?.og_meta_tags?.image,
+    },
+  }
+};
+
+export default async function RootLayout({
+  children,
+  params,
+}) {
+  const { locale } = await params;
+  const data = await fetchData(locale);
+
+  return (
+    <DataContextProvider data={data}>
+      {children}
+    </DataContextProvider>
+  );
+}

src/app/[locale]/[...slug]/page.jsx

@@ -0,0 +1,96 @@
+"use client";
+import { useDataContext } from "@/context/data.context";
+import { ContentstackClient } from "@/lib/contentstack-client";
+import UnlockAdventureSection from "@/components/UnlockAdventureSection";
+import PreviewVehicle from "@/components/PreviewVehicle";
+import HeroBanner from "@/components/HeroBanner";
+import { useState, useEffect, use } from "react";
+import TextAndImage from "@/components/TextAndImage";
+import CardsCollection from "@/components/CardsCollection";
+import BuyingTools from "@/components/BuyingTools";
+import Navbar from "@/components/Navbar";
+
+export default function Home({ params }) {
+  const { locale } = use(params);
+  const initialData = useDataContext();
+  const pageUrl = use(params).slug?.length > 0 ? "/"+use(params).slug.join('/') : null;
+
+  const [entry, setEntry] = useState(null);
+
+  const getContent = async () => {
+    const data = await ContentstackClient.getElementByUrlWithRefs(
+      "landing_pages",
+      pageUrl, locale,
+      [
+        'hero_banner',
+        'hero_banner.cta.internal_link',
+        'modular_blocks.unlock_adventure_section.reference',
+        'modular_blocks.unlock_adventure_section.reference.vehicles.internal_url',
+        'modular_blocks.preview_vehicle.vehicle_preview_reference',
+        'modular_blocks.preview_vehicle.vehicle_preview_reference.vehicle_models',
+        'modular_blocks.preview_vehicle.vehicle_preview_reference.link.internal_link',
+        'modular_blocks.buying_tools.reference',
+        'modular_blocks.buying_tools.reference.icon_list.internal_url',
+      ],
+      // initialData
+    )
+
+    setEntry(data[0]);
+  };
+
+  useEffect(() => {
+    ContentstackClient.onEntryChange(() => {
+      getContent();
+    });
+  }, []);
+
+  return (
+    <div>
+       <div
+        data-pageref={entry?.uid}
+        data-contenttype="landing_pages"
+        data-locale={locale}
+      >
+      <Navbar />
+      <HeroBanner
+        content={entry?.hero_banner ?? []}
+      />
+         <div
+          className={
+            entry?.modular_blocks?.length === 0
+              ? "visual-builder__empty-block-parent"
+              : ""
+          }
+          {...entry?.$?.modular_blocks}
+        >
+          {entry?.modular_blocks.map((block, index) => (
+            <div key={index} {...entry?.$?.["modular_blocks__" + index]}>
+              {block.hasOwnProperty("unlock_adventure_section") && (
+                <UnlockAdventureSection key={index} content={block.unlock_adventure_section?.reference?.[0]} />
+              )}
+              {block.hasOwnProperty("preview_vehicle") && (
+                <PreviewVehicle key={index} content={block.preview_vehicle?.vehicle_preview_reference?.[0]} />
+              )}
+              {block.hasOwnProperty("text_and_image") && (
+                <TextAndImage
+                  key={index}
+                  content={block.text_and_image}
+                />
+              )}
+              {block.hasOwnProperty("card_collection") && (
+                <CardsCollection
+                  key={index}
+                  content={block.card_collection}
+                />
+              )}
+              {block.hasOwnProperty("buying_tools") && (
+                <BuyingTools key={index} content={block.buying_tools?.reference?.[0]} />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/app/[locale]/page.jsx

@@ -1,31 +1,88 @@
 "use client";
 import { useDataContext } from "@/context/data.context";
 import { ContentstackClient } from "@/lib/contentstack-client";
+import HeroBanner from "@/components/HeroBanner";
+import UnlockAdventureSection from "@/components/UnlockAdventureSection";
 import { useState, useEffect, use } from "react";
+import TextAndImage from "@/components/TextAndImage";
+import CardsCollection from "@/components/CardsCollection";
+import Navbar from "@/components/Navbar";
+import BuyingTools from "@/components/BuyingTools";
 
 export default function Home({ params }) {
   const { locale } = use(params);
   const initialData = useDataContext();
 
   const [entry, setEntry] = useState(null);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      // example of how to fetch data from contentstack, replace "homepage" with the content type you want to fetch
-      const data = await ContentstackClient.getElementByType("homepage", locale, initialData);
-      if(data) {
-        setEntry(data[0]);
-      } else {
-        setEntry(null);
-      }
-    }
+  const getContent = async () => {
+    const data = await ContentstackClient.getElementByTypeWithRefs(
+      "homepage",
+      locale,
+      [
+        'hero_carousel',
+        'hero_carousel.cta.internal_link',
+        'modular_blocks.unlock_adventure_section.reference',
+        'modular_blocks.unlock_adventure_section.reference.vehicles.internal_url',
+        'modular_blocks.buying_tools.reference',
+        'modular_blocks.buying_tools.reference.icon_list.internal_url',
+      ],
+      // initialData
+    );
+    // console.log(data);
+
+    setEntry(data[0]);
+  };
 
-    ContentstackClient.onEntryChange(fetchData);
-  }, [locale, initialData]);
+  useEffect(() => {
+    ContentstackClient.onEntryChange(() => {
+      getContent();
+    });
+  }, []);
 
   return (
     <div>
-      <h1 {...entry?.$?.title}>{entry?.title}</h1>
+       <div
+        data-pageref={entry?.uid}
+        data-contenttype="homepage"
+        data-locale={locale}
+      >
+        <Navbar />
+        <HeroBanner
+          content={entry?.hero_carousel ?? []}
+        />
+         <div
+          className={
+            entry?.modular_blocks?.length === 0
+              ? "visual-builder__empty-block-parent"
+              : ""
+          }
+          {...entry?.$?.modular_blocks}
+        >
+          {entry?.modular_blocks.map((block, index) => (
+            <div key={index} {...entry?.$?.["modular_blocks__" + index]}>
+              {block.hasOwnProperty("unlock_adventure_section") && (
+                <UnlockAdventureSection key={index} content={block.unlock_adventure_section?.reference?.[0]} />
+              )}
+              {block.hasOwnProperty("text_and_image") && (
+                <TextAndImage
+                  key={index}
+                  content={block.text_and_image}
+                />
+              )}
+              {block.hasOwnProperty("card_collection") && (
+                <CardsCollection
+                  key={index}
+                  content={block.card_collection}
+                />
+              )}
+               {block.hasOwnProperty("buying_tools") && (
+                <BuyingTools key={index} content={block.buying_tools?.reference?.[0]} />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

src/app/api/contentstack/getElementByReference/route.js

@@ -0,0 +1,13 @@
+import ContentstackServer from "@/lib/cstack";
+
+export async function POST(request) {
+    try {
+        const variantParam = request.headers.get('x-personalize-variants');
+        const { type, locale, referenceUids, live_preview } = await request.json();
+        const res = await ContentstackServer.getElementByReference(type, locale, referenceUids, live_preview, variantParam);
+        return Response.json(res || {});
+    } catch (error) {
+        console.error(error);
+        return Response.json({ error: "Failed to fetch data" }, { status: 500 });
+    }
+}