Add Community Section for 2026

app/components/sections/home/community.tsx

@@ -1,12 +1,12 @@
 export const CommunitySection = () => {
 	return (
-		<section className="bg-[#F1F1F1] relative">
-			<div className="container mx-auto text-white px-5 2xl:px-0">
+		<section className="relative">
+			<div className="container mx-auto text-white px-5 py-6 2xl:px-0">
 				<div className="flex flex-col items-center">
-					<div className="p-5 text-center text-bold text-blue-900 text-2xl">
+					<div className="p-5 text-center text-bold text-black text-2xl">
 						<div>
-							<h3 className="mb-5 font-display font-bold">
-								Our Community Partner
+							<h3 className="mb-12 text-center text-3xl font-semibold text-foreground sm:mb-16 sm:text-4xl">
+								Our Community
 							</h3>
 							<div className="grid gap-10">
 								<div className="grid grid-cols-2 md:flex items-center justify-center gap-5 md:gap-15">
@@ -16,7 +16,7 @@ export const CommunitySection = () => {
 										rel="noreferrer"
 									>
 										<img
-											src="/images/logo-surabayapy.png"
+											src="/images/logo/community/logo-surabayapy.png"
 											alt="Surabaya.py"
 											className="object-cover max-h-25 mx-auto"
 										/>
@@ -27,7 +27,7 @@ export const CommunitySection = () => {
 										rel="noreferrer"
 									>
 										<img
-											src="/images/logo-pyjogja.png"
+											src="/images/logo/community/logo-pyjogja.png"
 											alt="Navicat"
 											className="object-cover max-h-30 mx-auto"
 										/>
@@ -38,62 +38,51 @@ export const CommunitySection = () => {
 										rel="noreferrer"
 									>
 										<img
-											src="/images/logo-bandungpy.png"
+											src="/images/logo/community/logo-bandungpy.png"
 											alt="Bandung.py"
 											className="object-cover max-h-30 mx-auto"
 										/>
 									</a>
 									<a href="https://t.me/mkspy" target="_blank" rel="noreferrer">
 										<img
-											src="/images/logo-mkspy.png"
+											src="/images/logo/community/logo-mkspy.png"
 											alt="Bandung.py"
 											className="object-cover max-h-30 mx-auto"
 										/>
 									</a>
 								</div>
 								<div className="grid grid-cols-2 md:flex items-center justify-center gap-5 md:gap-15">
 									<a
-										href="https://www.instagram.com/pyladies.yk/"
+										href="https://www.instagram.com/pyladiesid/"
 										target="_blank"
 										rel="noreferrer"
 									>
 										<img
-											src="/images/logo-pyladiesyk.png"
-											alt="PyLadies Yogyakarta"
+											src="/images/logo/community/logo-pyladiesid.png"
+											alt="PyLadies Indonesia"
 											className="object-cover max-h-30 mx-auto"
 										/>
 									</a>
 									<a
-										href="https://www.hacktiv8.com/"
-										target="_blank"
-										rel="noreferrer"
-									>
-										<img
-											src="/images/logo-hacktiv8.png"
-											alt="HACKTIV8"
-											className="object-cover max-h-40 mx-auto"
-										/>
-									</a>
-									<a
-										href="https://www.facebook.com/groups/programmerhandal"
+										href="https://www.instagram.com/pyladies.yk/"
 										target="_blank"
 										rel="noreferrer"
 									>
 										<img
-											src="/images/logo-imphnen.webp"
-											alt="IMPHNEN"
+											src="/images/logo/community/logo-pyladiesyk.png"
+											alt="PyLadies Yogyakarta"
 											className="object-cover max-h-30 mx-auto"
 										/>
 									</a>
 									<a
-										href="https://www.instagram.com/indigo.telkom/"
+										href="https://www.instagram.com/pyladies.bdg/"
 										target="_blank"
 										rel="noreferrer"
 									>
 										<img
-											src="/images/logo-aiconnect.png"
-											alt="AI Connect"
-											className="object-cover max-h-15 mx-auto"
+											src="/images/logo/community/logo-pyladiesbdg.png"
+											alt="PyLadies Bandung"
+											className="object-cover max-h-30 mx-auto"
 										/>
 									</a>
 								</div>

app/components/sections/home/patron.tsx

@@ -48,11 +48,11 @@ export const PatronSection = ({ patrons }: PatronSectionProps) => {
 	if (patrons.length === 0) return null;
 
 	return (
-		<section className="px-5 py-16 sm:py-28" aria-labelledby="patron-heading">
-			<div className="container mx-auto px-5 py-12 sm:px-12 sm:py-16">
+		<section className="px-5 py-6 sm:py-6" aria-labelledby="patron-heading">
+			<div className="container mx-auto px-5 py-6 sm:px-12 sm:py-6">
 				<h2
 					id="patron-heading"
-					className="mb-12 text-center font-display text-3xl font-semibold text-foreground sm:mb-16 sm:text-4xl"
+					className="mb-12 text-center text-3xl font-semibold text-foreground sm:mb-16 sm:text-4xl"
 				>
 					Thanks to our Patron
 				</h2>
@@ -77,7 +77,7 @@ export const PatronSection = ({ patrons }: PatronSectionProps) => {
 										className="h-full w-full object-cover"
 									/>
 								</div>
-								<h3 className="text-center font-display text-xl font-semibold text-foreground">
+								<h3 className="text-center text-xl font-semibold text-foreground">
 									{name}
 								</h3>
 							</article>

app/routes/home.tsx

@@ -2,7 +2,7 @@ import { getPatronUsers } from "~/api/endpoint/.server/patron";
 import { patronUserResponseSchema } from "~/api/schema/patron";
 import { Footer } from "~/components/layouts/navigation/footer";
 import { Header } from "~/components/layouts/navigation/header";
-// import { CommunitySection } from "~/components/sections/home/community";
+import { CommunitySection } from "~/components/sections/home/community";
 import { HeroSection } from "~/components/sections/home/hero";
 import { PatronSection } from "~/components/sections/home/patron";
 // import { OurTeamSection } from "~/components/sections/home/our-team";
@@ -44,7 +44,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
 			<SpeakersSection />
 			<SponsorSection />
 			<PatronSection patrons={loaderData.patrons} />
-			{/* <CommunitySection /> */}
+			<CommunitySection />
 			{/* <OurTeamSection /> */}
 			<Footer />
 		</main>