Add images to landing page's vibrant communities section

p-shubh · May 17, 2024 · fe78604 · fe78604
1 parent 058fac4
commit fe78604
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 28 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,9 @@
 import Image from "next/image";
 import HomeNavbar from "./components/reusable/HomeNavbar";
-import { LANDING_PAGE_BUTTON } from "./utils/constants";
+import {
+  LANDING_PAGE_BUTTON,
+  LANDING_PAGE_VIBRANT_COMMUNITIES_IMAGES,
+} from "./utils/constants";
 import { v4 as uuidv4 } from "uuid";
 import MembershipPlanCard1 from "./components/membership_plan_cards/MembershipPlanCard1";
 import MembershipPlanCard2 from "./components/membership_plan_cards/MembershipPlanCard2";
@@ -14,7 +17,7 @@ import Footer from "./components/reusable/Footer";
 export default function Home() {
   return (
     <main className="w-[95vw] mx-auto p-10">
-      <HomeNavbar/>
+      <HomeNavbar />
       <div className="bg-[#CDE1F2] p-10">
         <div className="flex lg:flex-row md:flex-col sm:items-center xs:flex-col justify-between row-1">
           <div className="flex flex-col xs:items-center lg:items-start">
@@ -42,23 +45,26 @@ export default function Home() {
           <h4 className="text-lg font-bold mt-10 mb-10">
             Discover Vibrant Communities
           </h4>
-          <div className="flex flex-wrap gap-4 mt-4 images-for-landing-page xs:justify-center md:justify-start">
-            {Array(5)
-              .fill(0)
-              .map((el, id) => (
-                <div key={id} className="flex flex-col mb-8">
-                  <Image
-                    src="https://img.freepik.com/free-photo/businesswoman-working-with-modern-virtual-technologies-hands-touching-screen_1212-720.jpg?t=st=1715435128~exp=1715438728~hmac=ae3b6f2ce406abb053c3451fa5abbbefc7e0806ce62e0563a22a4368f1ddc6f0&w=1480"
-                    height={218}
-                    width={218}
-                    alt="img"
-                  />
-                  <div className="mt-4 font-semibold">Lorem Ipsum</div>
-                  <div className="mt-2 text-sm font-medium">
-                    Lorem Ipsum Dolor Sit
-                  </div>
+          <div className="grid space-around justify-between gap-4 grid-cols-5 mt-4">
+            {/* <div className="flex flex-wrap gap-4 mt-4 xs:justify-center md:justify-start"> */}
+            {LANDING_PAGE_VIBRANT_COMMUNITIES_IMAGES.map((data) => (
+              <div key={uuidv4()} className="flex flex-col mb-8">
+                <Image
+                  src={data.src}
+                  height={218}
+                  width={217}
+                  alt="vivrant-communities"
+                  className="object-fill"
+                />
+                <div className="mt-4 font-semibold">
+                  {data.community_interest}
                 </div>
-              ))}
+                <div className="mt-2 text-sm font-medium">
+                  {data.interest_taglines}
+                </div>
+              </div>
+            ))}
+            {/* </div> */}
           </div>
         </div>
         <hr className="text-white mt-10" />

diff --git a/app/utils/constants.tsx b/app/utils/constants.tsx
@@ -106,6 +106,34 @@ export const LANDING_PAGE_BUTTON = [
   },
 ];
 
+export const LANDING_PAGE_VIBRANT_COMMUNITIES_IMAGES = [
+  {
+    src: "https://img.freepik.com/free-vector/messages-concept-illustration_114360-583.jpg?t=st=1715950641~exp=1715954241~hmac=3c03fee57c247cde4f8f49fb78fd5fc1d918fd35da220aab9d4fcc3641c97fc0&w=740",
+    community_interest: "Meet New",
+    interest_taglines: "Connect with like-minded",
+  },
+  {
+    src: "https://img.freepik.com/free-vector/creative-bulb-ideas-concept-illustration_614304-35.jpg?t=st=1715950715~exp=1715954315~hmac=baaa1a5aa5f0c6046945e796a6df00f9e706c3b5c27b62a17effdf2907c795e6&w=740",
+    community_interest: "Creative Expression",
+    interest_taglines: "Artistic and entertaining",
+  },
+  {
+    src: "https://img.freepik.com/premium-vector/personal-memories-concept_23-2148403720.jpg?w=740",
+    community_interest: "Laugh & Connect",
+    interest_taglines: "Joyful moments with me",
+  },
+  {
+    src: "https://img.freepik.com/free-vector/flat-design-innovation-concept-with-lightbulb_23-2149158516.jpg?t=st=1715950854~exp=1715954454~hmac=42ca531a71366a2f2991fab8044aaee1994987681c294b8f545dcef201f98061&w=740",
+    community_interest: "Unleash Creativity",
+    interest_taglines: "Express yourself freely",
+  },
+  {
+    src: "https://img.freepik.com/premium-vector/success-secret-start-now_71609-551.jpg?w=740",
+    community_interest: "Now is your time!",
+    interest_taglines: "Engage with the community",
+  },
+];
+
 export const HOME_PAGE_NAVBAR_LINKS = [
   {
     label: "Meet new",

diff --git a/next.config.mjs b/next.config.mjs
@@ -1,10 +1,10 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental:{missingSuspenseWithCSRBailout: false},
-  images: {
-    domains: ["img.freepik.com"],
-  },
-  output: "standalone",
-};
-
-export default nextConfig;
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental:{missingSuspenseWithCSRBailout: false},
+  images: {
+    domains: ["img.freepik.com"],
+  },
+  output: "standalone",
+};
+
+export default nextConfig;