1
1
import Image from "next/image" ;
2
2
import HomeNavbar from "./components/reusable/HomeNavbar" ;
3
- import { LANDING_PAGE_BUTTON } from "./utils/constants" ;
3
+ import {
4
+ LANDING_PAGE_BUTTON ,
5
+ LANDING_PAGE_VIBRANT_COMMUNITIES_IMAGES ,
6
+ } from "./utils/constants" ;
4
7
import { v4 as uuidv4 } from "uuid" ;
5
8
import MembershipPlanCard1 from "./components/membership_plan_cards/MembershipPlanCard1" ;
6
9
import MembershipPlanCard2 from "./components/membership_plan_cards/MembershipPlanCard2" ;
@@ -14,7 +17,7 @@ import Footer from "./components/reusable/Footer";
14
17
export default function Home ( ) {
15
18
return (
16
19
< main className = "w-[95vw] mx-auto p-10" >
17
- < HomeNavbar />
20
+ < HomeNavbar />
18
21
< div className = "bg-[#CDE1F2] p-10" >
19
22
< div className = "flex lg:flex-row md:flex-col sm:items-center xs:flex-col justify-between row-1" >
20
23
< div className = "flex flex-col xs:items-center lg:items-start" >
@@ -42,23 +45,26 @@ export default function Home() {
42
45
< h4 className = "text-lg font-bold mt-10 mb-10" >
43
46
Discover Vibrant Communities
44
47
</ h4 >
45
- < div className = "flex flex-wrap gap-4 mt-4 images-for-landing-page xs:justify-center md:justify-start" >
46
- { Array ( 5 )
47
- . fill ( 0 )
48
- . map ( ( el , id ) => (
49
- < div key = { id } className = "flex flex-col mb-8" >
50
- < Image
51
- 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 "
52
- height = { 218 }
53
- width = { 218 }
54
- alt = "img"
55
- />
56
- < div className = "mt-4 font-semibold" > Lorem Ipsum</ div >
57
- < div className = "mt-2 text-sm font-medium" >
58
- Lorem Ipsum Dolor Sit
59
- </ div >
48
+ < div className = "grid space-around justify-between gap-4 grid-cols-5 mt-4" >
49
+ { /* <div className="flex flex-wrap gap-4 mt-4 xs:justify-center md:justify-start"> */ }
50
+ { LANDING_PAGE_VIBRANT_COMMUNITIES_IMAGES . map ( ( data ) => (
51
+ < div key = { uuidv4 ( ) } className = "flex flex-col mb-8" >
52
+ < Image
53
+ src = { data . src }
54
+ height = { 218 }
55
+ width = { 217 }
56
+ alt = "vivrant-communities"
57
+ className = "object-fill"
58
+ />
59
+ < div className = "mt-4 font-semibold" >
60
+ { data . community_interest }
60
61
</ div >
61
- ) ) }
62
+ < div className = "mt-2 text-sm font-medium" >
63
+ { data . interest_taglines }
64
+ </ div >
65
+ </ div >
66
+ ) ) }
67
+ { /* </div> */ }
62
68
</ div >
63
69
</ div >
64
70
< hr className = "text-white mt-10" />
0 commit comments