Update PageHome3 component

* Add a glassmorphism effect * Add a SectionHero3 component * Add a SectionGridCategoryBox component * Add a SectionGridAuthorBox component with a boxCard prop * Add a SectionGridFeaturePlaces component * Add a SectionSubscribe2 component
1 year ago · 7120d6d436
1 changed files with 104 additions and 0 deletions
--- a/src/app/(home)/home-3/page.tsx
+++ b/src/app/(home)/home-3/page.tsx
@ -0,0 +1,104 @@
+import React from "react";
+import SectionSubscribe2 from "@/components/SectionSubscribe2";
+import BackgroundSection from "@/components/BackgroundSection";
+import BgGlassmorphism from "@/components/BgGlassmorphism";
+import { TaxonomyType } from "@/data/types";
+import SectionGridAuthorBox from "@/components/SectionGridAuthorBox";
+import SectionGridCategoryBox from "@/components/SectionGridCategoryBox";
+import SectionHero3 from "@/app/(server-components)/SectionHero3";
+import CardCategory6 from "@/components/CardCategory6";
+import SectionGridFeaturePlaces from "@/components/SectionGridFeaturePlaces";
+
+const DEMO_CATS_2: TaxonomyType[] = [
+  {
+    id: "1",
+    href: "/listing-stay",
+    name: "Enjoy the great cold",
+    taxonomy: "category",
+    count: 188288,
+    thumbnail:
+      "https://images.pexels.com/photos/5764100/pexels-photo-5764100.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260",
+  },
+  {
+    id: "222",
+    href: "/listing-stay",
+    name: "Sleep in a floating way",
+    taxonomy: "category",
+    count: 188288,
+    thumbnail:
+      "https://images.pexels.com/photos/2869499/pexels-photo-2869499.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+  },
+  {
+    id: "3",
+    href: "/listing-stay",
+    name: "In the billionaire's house",
+    taxonomy: "category",
+    count: 188288,
+    thumbnail:
+      "https://images.pexels.com/photos/7031413/pexels-photo-7031413.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+  },
+  {
+    id: "4",
+    href: "/listing-stay",
+    name: "Cool in the deep forest",
+    taxonomy: "category",
+    count: 188288,
+    thumbnail:
+      "https://images.pexels.com/photos/247532/pexels-photo-247532.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+  },
+  {
+    id: "5",
+    href: "/listing-stay",
+    name: "In the billionaire's house",
+    taxonomy: "category",
+    count: 188288,
+    thumbnail:
+      "https://images.pexels.com/photos/7031413/pexels-photo-7031413.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+  },
+];
+
+function PageHome3() {
+  return (
+    <main className="nc-PageHome3 relative overflow-hidden">
+      {/* GLASSMOPHIN */}
+      <BgGlassmorphism />
+
+      {/* SECTION HERO */}
+      <div className="container px-1 sm:px-4 mb-24 ">
+        <SectionHero3 className="" />
+      </div>
+
+      <div className="container relative space-y-24 mb-24 ">
+        {/* SECTION 1 */}
+        <div className="grid grid-cols-12 gap-6">
+          <div className="col-span-12 sm:col-span-6 lg:col-span-4 flex">
+            <CardCategory6 taxonomy={DEMO_CATS_2[0]} />
+          </div>
+          <div className="col-span-12 sm:col-span-6 lg:col-span-4 grid grid-rows-2 gap-6">
+            <CardCategory6 taxonomy={DEMO_CATS_2[3]} />
+            <CardCategory6 taxonomy={DEMO_CATS_2[1]} />
+          </div>
+          <div className="col-span-12 sm:col-span-6 lg:col-span-4 flex">
+            <CardCategory6 taxonomy={DEMO_CATS_2[4]} />
+          </div>
+        </div>
+
+        {/* SECTION */}
+        <SectionGridCategoryBox />
+
+        {/* SECTION */}
+        <div className="relative py-16">
+          <BackgroundSection />
+          <SectionGridAuthorBox boxCard="box2" />
+        </div>
+
+        <SectionGridFeaturePlaces />
+
+        {/* SECTION */}
+        <SectionSubscribe2 />
+      </div>
+    </main>
+  );
+}
+
+export default PageHome3;