From 3fbc7c74cc5113bc8038fdf38685470508135257 Mon Sep 17 00:00:00 2001
From: julianromli <faizintfd@gmail.com>
Date: Wed, 1 Apr 2026 15:09:23 +0700
Subject: [PATCH 1/4] fix: improve landing page shell accessibility

---
 app/home-page-client.tsx | 79 ++++++++++++++++++++++------------------
 components/ui/navbar.tsx |  4 ++
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/app/home-page-client.tsx b/app/home-page-client.tsx
index 01d0d5f..755dcae 100644
--- a/app/home-page-client.tsx
+++ b/app/home-page-client.tsx
@@ -61,6 +61,13 @@ export default function HomePageClient({
 
   return (
     <div className="bg-background min-h-screen">
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:p-4 focus:bg-background focus:text-foreground focus:rounded-br-md focus:shadow-md focus:font-medium"
+      >
+        Skip to main content
+      </a>
+
       <Script
         id="organization-schema"
         type="application/ld+json"
@@ -140,44 +147,46 @@ export default function HomePageClient({
         user={initialUser ?? undefined}
       />
 
-      <HeroSection
-        handleJoinWithUs={handleJoinWithUs}
-        handleViewShowcase={handleViewShowcase}
-      />
-
-      <ErrorBoundary sectionName="Project Showcase">
-        <ProjectShowcase
-          projects={projectFilters.projects}
-          loading={projectFilters.loading}
-          selectedFilter={projectFilters.selectedFilter}
-          setSelectedFilter={projectFilters.setSelectedFilter}
-          selectedTrending={projectFilters.selectedTrending}
-          setSelectedTrending={projectFilters.setSelectedTrending}
-          filterOptions={projectFilters.filterOptions}
+      <main id="main-content">
+        <HeroSection
+          handleJoinWithUs={handleJoinWithUs}
+          handleViewShowcase={handleViewShowcase}
         />
-      </ErrorBoundary>
-
-      <ErrorBoundary sectionName="Video Showcase">
-        <section className="py-12 sm:py-16 lg:py-20">
-          <div className="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
-            <YouTubeVideoShowcase vibeVideos={initialVibeVideos} />
-          </div>
-        </section>
-      </ErrorBoundary>
-
-      <CommunityFeaturesSection />
 
-      <AIToolsSection />
-
-      <ReviewsSection />
-
-      <FAQSection
-        openFAQ={openFAQ}
-        toggleFAQ={toggleFAQ}
-        isVisible={isVisible.faq}
-      />
+        <ErrorBoundary sectionName="Project Showcase">
+          <ProjectShowcase
+            projects={projectFilters.projects}
+            loading={projectFilters.loading}
+            selectedFilter={projectFilters.selectedFilter}
+            setSelectedFilter={projectFilters.setSelectedFilter}
+            selectedTrending={projectFilters.selectedTrending}
+            setSelectedTrending={projectFilters.setSelectedTrending}
+            filterOptions={projectFilters.filterOptions}
+          />
+        </ErrorBoundary>
+
+        <ErrorBoundary sectionName="Video Showcase">
+          <section className="py-12 sm:py-16 lg:py-20">
+            <div className="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
+              <YouTubeVideoShowcase vibeVideos={initialVibeVideos} />
+            </div>
+          </section>
+        </ErrorBoundary>
+
+        <CommunityFeaturesSection />
+
+        <AIToolsSection />
+
+        <ReviewsSection />
+
+        <FAQSection
+          openFAQ={openFAQ}
+          toggleFAQ={toggleFAQ}
+          isVisible={isVisible.faq}
+        />
 
-      <CTASection handleJoinWithUs={handleJoinWithUs} />
+        <CTASection handleJoinWithUs={handleJoinWithUs} />
+      </main>
 
       <Footer />
     </div>
diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
index 6c94b49..ca904f9 100644
--- a/components/ui/navbar.tsx
+++ b/components/ui/navbar.tsx
@@ -428,6 +428,9 @@ export function Navbar({
                 onClick={() => setOpen(!open)}
                 size="icon"
                 variant="ghost"
+                aria-expanded={open}
+                aria-controls="mobile-menu"
+                aria-label="Toggle menu"
               >
                 <MenuToggleIcon
                   className="size-6"
@@ -570,6 +573,7 @@ function MobileMenu({ open, children, className }: MobileMenuProps) {
     <AnimatePresence>
       {open && (
         <motion.div
+          id="mobile-menu"
           className={cn(
             'fixed inset-0 z-40 bg-background/95 backdrop-blur-xl supports-[backdrop-filter]:bg-background/80',
             className,

From 67ea072c801549b70bb62d0020dfb025a5ad48fb Mon Sep 17 00:00:00 2001
From: julianromli <faizintfd@gmail.com>
Date: Wed, 1 Apr 2026 15:25:34 +0700
Subject: [PATCH 2/4] fix: improve landing page control semantics

---
 components/sections/faq-section.tsx      | 27 ++++++++++++++++--------
 components/sections/project-showcase.tsx | 15 +++++++++++--
 components/ui/filter-controls.tsx        | 14 +++++++++++-
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/components/sections/faq-section.tsx b/components/sections/faq-section.tsx
index a862cdf..fa5444d 100644
--- a/components/sections/faq-section.tsx
+++ b/components/sections/faq-section.tsx
@@ -43,14 +43,20 @@ export function FAQSection({ openFAQ, toggleFAQ, isVisible }: FAQSectionProps) {
           {faqArray.map((faq, index) => (
             <Card
               key={faq.question}
-              className={`cursor-pointer transition-all duration-700 hover:shadow-md ${
+              className={`transition-all duration-700 hover:shadow-md ${
                 isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'
               }`}
               style={{ transitionDelay: `${index * 100}ms` }}
-              onClick={() => toggleFAQ(index)}
             >
-              <CardContent className="p-6">
-                <div className="flex items-center justify-between">
+              <CardContent className="p-0">
+                <button
+                  type="button"
+                  onClick={() => toggleFAQ(index)}
+                  className="flex w-full cursor-pointer items-center justify-between p-6"
+                  aria-expanded={openFAQ === index}
+                  aria-controls={`faq-answer-${index}`}
+                  id={`faq-question-${index}`}
+                >
                   <h3 className="text-left font-semibold">{faq.question}</h3>
                   <div className="ml-4 flex-shrink-0 transition-transform duration-300">
                     {openFAQ === index ? (
@@ -59,15 +65,18 @@ export function FAQSection({ openFAQ, toggleFAQ, isVisible }: FAQSectionProps) {
                       <Plus className="text-muted-foreground h-5 w-5" />
                     )}
                   </div>
-                </div>
+                </button>
 
-                <div
-                  className={`overflow-hidden transition-all duration-500 ease-in-out ${
-                    openFAQ === index ? 'mt-4 max-h-96 opacity-100' : 'max-h-0 opacity-0'
+                <section
+                  id={`faq-answer-${index}`}
+                  aria-labelledby={`faq-question-${index}`}
+                  aria-hidden={openFAQ !== index}
+                  className={`overflow-hidden px-6 transition-all duration-500 ease-in-out ${
+                    openFAQ === index ? 'max-h-96 pb-6 opacity-100' : 'max-h-0 opacity-0'
                   }`}
                 >
                   <p className="text-muted-foreground text-left leading-relaxed">{faq.answer}</p>
-                </div>
+                </section>
               </CardContent>
             </Card>
           ))}
diff --git a/components/sections/project-showcase.tsx b/components/sections/project-showcase.tsx
index de99789..e72a60d 100644
--- a/components/sections/project-showcase.tsx
+++ b/components/sections/project-showcase.tsx
@@ -10,7 +10,7 @@ import { motion, useInView } from 'motion/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useTranslations } from 'next-intl'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useId, useRef, useState } from 'react'
 import { AspectRatio } from '@/components/ui/aspect-ratio'
 import { Button } from '@/components/ui/button'
 import { FilterControls } from '@/components/ui/filter-controls'
@@ -50,24 +50,35 @@ function TrendingDropdown({
   buttonClassName,
   menuClassName,
 }: TrendingDropdownProps) {
+  const listboxId = useId()
+
   return (
     <>
       <Button
         variant="outline"
         onClick={() => setIsOpen(!isOpen)}
         className={buttonClassName}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={listboxId}
       >
         {selectedTrending}
         <ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </Button>
 
       {isOpen && (
-        <div className={menuClassName}>
+        <div
+          id={listboxId}
+          role="listbox"
+          className={menuClassName}
+        >
           <div className="p-2">
             {options.map((option) => (
               <button
                 key={option}
                 type="button"
+                role="option"
+                aria-selected={selectedTrending === option}
                 onClick={() => {
                   onChange(option)
                   setIsOpen(false)
diff --git a/components/ui/filter-controls.tsx b/components/ui/filter-controls.tsx
index 29ff575..16989af 100644
--- a/components/ui/filter-controls.tsx
+++ b/components/ui/filter-controls.tsx
@@ -6,6 +6,7 @@
 'use client'
 
 import { ChevronDown } from 'lucide-react'
+import { useId } from 'react'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 
@@ -26,24 +27,35 @@ export function FilterControls({
   setIsOpen,
   triggerClassName,
 }: FilterControlsProps) {
+  const listboxId = useId()
+
   return (
     <div className="relative">
       <Button
         variant="outline"
         onClick={() => setIsOpen(!isOpen)}
         className={cn('flex items-center gap-2', triggerClassName)}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={listboxId}
       >
         Filter
         <ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </Button>
 
       {isOpen && (
-        <div className="bg-background border-border absolute top-full left-0 z-10 mt-2 w-48 rounded-lg border shadow-lg">
+        <div
+          id={listboxId}
+          role="listbox"
+          className="bg-background border-border absolute top-full left-0 z-10 mt-2 w-48 rounded-lg border shadow-lg"
+        >
           <div className="p-2">
             {filterOptions.map((option) => (
               <button
                 key={option}
                 type="button"
+                role="option"
+                aria-selected={selectedFilter === option}
                 onClick={() => {
                   setSelectedFilter(option)
                   setIsOpen(false)

From 7674b6ed6f4eb761a0a6c0e2b5ea8ee3df312596 Mon Sep 17 00:00:00 2001
From: julianromli <faizintfd@gmail.com>
Date: Wed, 1 Apr 2026 16:15:01 +0700
Subject: [PATCH 3/4] fix: reduce landing page motion intensity

---
 components/sections/faq-section.tsx      |  6 +++---
 components/sections/hero-section.tsx     | 16 ++++++++++++----
 components/ui/infinite-slider.tsx        | 10 ++++++++--
 components/ui/navbar.tsx                 | 24 +++++++++++++++---------
 components/ui/testimonials-columns.tsx   | 15 +++++++++++----
 components/ui/youtube-video-showcase.tsx | 21 ++++++++++++++-------
 6 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/components/sections/faq-section.tsx b/components/sections/faq-section.tsx
index fa5444d..7cafb1e 100644
--- a/components/sections/faq-section.tsx
+++ b/components/sections/faq-section.tsx
@@ -43,7 +43,7 @@ export function FAQSection({ openFAQ, toggleFAQ, isVisible }: FAQSectionProps) {
           {faqArray.map((faq, index) => (
             <Card
               key={faq.question}
-              className={`transition-all duration-700 hover:shadow-md ${
+              className={`transition duration-700 hover:shadow-md motion-reduce:transition-none motion-reduce:translate-y-0 motion-reduce:opacity-100 ${
                 isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'
               }`}
               style={{ transitionDelay: `${index * 100}ms` }}
@@ -58,7 +58,7 @@ export function FAQSection({ openFAQ, toggleFAQ, isVisible }: FAQSectionProps) {
                   id={`faq-question-${index}`}
                 >
                   <h3 className="text-left font-semibold">{faq.question}</h3>
-                  <div className="ml-4 flex-shrink-0 transition-transform duration-300">
+                  <div className="ml-4 flex-shrink-0 transition-transform duration-300 motion-reduce:transition-none">
                     {openFAQ === index ? (
                       <Minus className="text-muted-foreground h-5 w-5" />
                     ) : (
@@ -71,7 +71,7 @@ export function FAQSection({ openFAQ, toggleFAQ, isVisible }: FAQSectionProps) {
                   id={`faq-answer-${index}`}
                   aria-labelledby={`faq-question-${index}`}
                   aria-hidden={openFAQ !== index}
-                  className={`overflow-hidden px-6 transition-all duration-500 ease-in-out ${
+                  className={`overflow-hidden px-6 transition-all duration-500 ease-in-out motion-reduce:transition-none ${
                     openFAQ === index ? 'max-h-96 pb-6 opacity-100' : 'max-h-0 opacity-0'
                   }`}
                 >
diff --git a/components/sections/hero-section.tsx b/components/sections/hero-section.tsx
index 7b7a061..77126ce 100644
--- a/components/sections/hero-section.tsx
+++ b/components/sections/hero-section.tsx
@@ -57,6 +57,14 @@ export function HeroSection({ handleJoinWithUs, handleViewShowcase }: HeroSectio
     setSubtitleVisible(false)
 
     const words = [...titleLine1, ...titleLine2]
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    if (prefersReducedMotion) {
+      setAnimatedWords(words.map((_, i) => i))
+      setSubtitleVisible(true)
+      return
+    }
+
     const timers: ReturnType<typeof setTimeout>[] = []
 
     words.forEach((_word, index) => {
@@ -91,7 +99,7 @@ export function HeroSection({ handleJoinWithUs, handleViewShowcase }: HeroSectio
               href="/blog"
               className="inline-block cursor-pointer transition-transform duration-200 hover:scale-105"
             >
-              <AnimatedGradientText className="transition-all duration-300 hover:shadow-[inset_0_-5px_10px_hsl(var(--foreground)/0.15)]">
+              <AnimatedGradientText className="transition duration-300 hover:shadow-[inset_0_-5px_10px_hsl(var(--foreground)/0.15)] motion-reduce:transition-none">
                 <span
                   className={cn(
                     'animate-gradient inline bg-gradient-to-r from-foreground via-foreground/70 to-foreground bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent dark:from-primary dark:via-primary/80 dark:to-primary',
@@ -108,7 +116,7 @@ export function HeroSection({ handleJoinWithUs, handleViewShowcase }: HeroSectio
                 <span
                   key={item.key}
                   className={cn(
-                    'mr-2 inline-block transition-all duration-700 ease-out sm:mr-3',
+                    'mr-2 inline-block transition duration-700 ease-out sm:mr-3 motion-reduce:transition-none',
                     animatedWords.includes(item.index)
                       ? 'blur-0 translate-y-0 opacity-100'
                       : 'translate-y-8 opacity-0 blur-sm',
@@ -122,7 +130,7 @@ export function HeroSection({ handleJoinWithUs, handleViewShowcase }: HeroSectio
                 <span
                   key={item.key}
                   className={cn(
-                    'mr-2 inline-block transition-all duration-700 ease-out sm:mr-3',
+                    'mr-2 inline-block transition duration-700 ease-out sm:mr-3 motion-reduce:transition-none',
                     animatedWords.includes(item.index + titleLine1.length)
                       ? 'blur-0 translate-y-0 opacity-100'
                       : 'translate-y-8 opacity-0 blur-sm',
@@ -135,7 +143,7 @@ export function HeroSection({ handleJoinWithUs, handleViewShowcase }: HeroSectio
 
             <p
               className={cn(
-                'text-muted-foreground mx-auto max-w-2xl text-center text-lg leading-relaxed transition-all duration-700 ease-out md:text-xl',
+                'text-muted-foreground mx-auto max-w-2xl text-center text-lg leading-relaxed transition duration-700 ease-out md:text-xl motion-reduce:transition-none motion-reduce:translate-y-0 motion-reduce:opacity-100 motion-reduce:blur-0',
                 subtitleVisible ? 'blur-0 translate-y-0 opacity-100' : 'translate-y-8 opacity-0 blur-sm',
               )}
             >
diff --git a/components/ui/infinite-slider.tsx b/components/ui/infinite-slider.tsx
index af1b05b..d113e68 100644
--- a/components/ui/infinite-slider.tsx
+++ b/components/ui/infinite-slider.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { animate, motion, useMotionValue } from 'motion/react'
+import { animate, motion, useMotionValue, useReducedMotion } from 'motion/react'
 import { useEffect, useState } from 'react'
 import useMeasure from 'react-use-measure'
 import { cn } from '@/lib/utils'
@@ -28,8 +28,14 @@ export function InfiniteSlider({
   const translation = useMotionValue(0)
   const [isTransitioning, setIsTransitioning] = useState(false)
   const [key, setKey] = useState(0)
+  const reducedMotion = useReducedMotion()
 
   useEffect(() => {
+    if (reducedMotion) {
+      translation.set(0)
+      return
+    }
+
     let controls
     const size = direction === 'horizontal' ? width : height
     const contentSize = size + gap
@@ -65,7 +71,7 @@ export function InfiniteSlider({
     }
 
     return controls?.stop
-  }, [key, translation, currentSpeed, width, height, gap, isTransitioning, direction, reverse])
+  }, [translation, currentSpeed, width, height, gap, isTransitioning, direction, reverse, reducedMotion])
 
   const hoverProps = speedOnHover
     ? {
diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
index ca904f9..f415a6c 100644
--- a/components/ui/navbar.tsx
+++ b/components/ui/navbar.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { ArrowLeft, FileText, LogOut, Upload, User } from 'lucide-react'
-import { AnimatePresence, motion } from 'motion/react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useTranslations } from 'next-intl'
@@ -127,6 +127,9 @@ export function Navbar({
   const scrolled = useScroll(10)
   const router = useRouter()
   const t = useTranslations()
+  const prefersReducedMotion = useReducedMotion()
+
+  const currentTransition = prefersReducedMotion ? { duration: 0 } : springTransition
 
   useEffect(() => {
     if (open) {
@@ -209,7 +212,7 @@ export function Navbar({
           marginTop: scrolled ? 16 : 0,
           borderRadius: scrolled ? 16 : 0,
         }}
-        transition={springTransition}
+        transition={currentTransition}
         style={{
           marginLeft: 'auto',
           marginRight: 'auto',
@@ -224,7 +227,7 @@ export function Navbar({
               scale: scrolled ? 0.92 : 1,
               x: scrolled ? -2 : 0,
             }}
-            transition={springTransition}
+            transition={currentTransition}
           >
             {showBackButton ? (
               <Link href="/">
@@ -255,7 +258,7 @@ export function Navbar({
                 y: scrolled ? 0 : 0,
                 opacity: 1,
               }}
-              transition={springTransition}
+              transition={currentTransition}
             >
               {navItems.map((item) => (
                 <DesktopNavItem
@@ -274,7 +277,7 @@ export function Navbar({
               scale: scrolled ? 0.95 : 1,
               x: scrolled ? 2 : 0,
             }}
-            transition={springTransition}
+            transition={currentTransition}
           >
             <LanguageSwitcher />
             <ThemeToggle />
@@ -564,10 +567,13 @@ type MobileMenuProps = {
 }
 
 function MobileMenu({ open, children, className }: MobileMenuProps) {
-  const menuTransition = {
-    duration: 0.5,
-    ease: [0.16, 1, 0.3, 1] as const,
-  }
+  const prefersReducedMotion = useReducedMotion()
+  const menuTransition = prefersReducedMotion
+    ? { duration: 0 }
+    : {
+        duration: 0.5,
+        ease: [0.16, 1, 0.3, 1] as const,
+      }
 
   const content = (
     <AnimatePresence>
diff --git a/components/ui/testimonials-columns.tsx b/components/ui/testimonials-columns.tsx
index 4edc95e..b616255 100644
--- a/components/ui/testimonials-columns.tsx
+++ b/components/ui/testimonials-columns.tsx
@@ -14,7 +14,13 @@ export const TestimonialsColumns = (props: {
     if (!element) return
 
     const duration = props.duration || 10
-    element.style.animation = `scroll-up ${duration}s linear infinite`
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    if (prefersReducedMotion) {
+      element.style.animation = 'none'
+    } else {
+      element.style.animation = `scroll-up ${duration}s linear infinite`
+    }
   }, [props.duration])
 
   return (
@@ -28,11 +34,12 @@ export const TestimonialsColumns = (props: {
       >
         {[
           ...new Array(2).fill(0).map((_, index) => (
-            <React.Fragment key={index}>
-              {props.testimonials.map(({ text, image, name, role }, i) => (
+            <React.Fragment key={index === 0 ? 'original' : 'duplicate'}>
+              {props.testimonials.map(({ text, image, name, role }) => (
                 <div
                   className="shadow-primary/5 bg-background w-full max-w-xs rounded-2xl border p-8 shadow-lg"
-                  key={i}
+                  key={name + role}
+                  aria-hidden={index === 1 ? 'true' : undefined}
                 >
                   <div className="text-muted-foreground mb-4 text-sm leading-relaxed">{text}</div>
                   <div className="flex items-center gap-3">
diff --git a/components/ui/youtube-video-showcase.tsx b/components/ui/youtube-video-showcase.tsx
index 0643687..f2b0dfe 100644
--- a/components/ui/youtube-video-showcase.tsx
+++ b/components/ui/youtube-video-showcase.tsx
@@ -74,7 +74,7 @@ function DesktopVideoInfoOverlay({
 
           <div className="video-info relative flex-1 text-white">
             <div
-              className="video-title line-clamp-2 text-sm font-bold transition-all duration-700 ease-in-out md:text-base"
+              className="video-title line-clamp-2 text-sm font-bold transition duration-700 ease-in-out md:text-base motion-reduce:transition-none motion-reduce:transform-none"
               style={{
                 opacity: isActive ? 1 : 0,
                 transform: isActive ? 'translateX(0)' : 'translateX(25px)',
@@ -84,7 +84,7 @@ function DesktopVideoInfoOverlay({
               {video.title}
             </div>
             <div
-              className="video-desc line-clamp-2 text-xs text-gray-200 transition-all duration-700 ease-in-out md:text-sm"
+              className="video-desc line-clamp-2 text-xs text-gray-200 transition duration-700 ease-in-out md:text-sm motion-reduce:transition-none motion-reduce:transform-none"
               style={{
                 opacity: isActive ? 1 : 0,
                 transform: isActive ? 'translateX(0)' : 'translateX(25px)',
@@ -94,7 +94,7 @@ function DesktopVideoInfoOverlay({
               {video.description}
             </div>
             <div
-              className="video-meta mt-1 flex items-center gap-2 text-xs text-gray-300 transition-all duration-700 ease-in-out"
+              className="video-meta mt-1 flex items-center gap-2 text-xs text-gray-300 transition duration-700 ease-in-out motion-reduce:transition-none motion-reduce:transform-none"
               style={{
                 opacity: isActive ? 1 : 0,
                 transform: isActive ? 'translateX(0)' : 'translateX(25px)',
@@ -116,7 +116,7 @@ function DesktopVideoInfoOverlay({
 
         {isActive && (
           <div
-            className="transition-all duration-700 ease-in-out"
+            className="transition duration-700 ease-in-out motion-reduce:transition-none motion-reduce:transform-none"
             style={{
               opacity: isActive ? 1 : 0,
               transform: isActive ? 'translateY(0)' : 'translateY(15px)',
@@ -153,7 +153,7 @@ function DesktopVideoOption({
 
   return (
     <article
-      className={`video-option relative min-w-[60px] cursor-pointer overflow-hidden rounded-xl bg-[hsl(var(--muted))] transition-all duration-700 ease-in-out will-change-[flex-grow,box-shadow,transform] ${
+      className={`video-option relative min-w-[60px] cursor-pointer overflow-hidden rounded-xl bg-[hsl(var(--muted))] transition-all duration-700 ease-in-out will-change-[flex-grow,box-shadow,transform] motion-reduce:transition-none motion-reduce:transform-none ${
         isActive ? 'active border-primary border-2 shadow-2xl' : 'border-border border-2 shadow-lg'
       } `}
       style={{
@@ -176,7 +176,7 @@ function DesktopVideoOption({
           src={video.thumbnail}
           alt={video.title}
           fill
-          className={`rounded-xl object-cover transition-all duration-700 ease-in-out ${isActive ? 'scale-100' : 'scale-105'}`}
+          className={`rounded-xl object-cover transition-transform duration-700 ease-in-out motion-reduce:transition-none motion-reduce:transform-none ${isActive ? 'scale-100' : 'scale-105'}`}
           sizes="(max-width: 1200px) 50vw, 33vw"
           priority={index === 0}
           quality={85}
@@ -187,7 +187,7 @@ function DesktopVideoOption({
       </div>
 
       <div
-        className="video-shadow pointer-events-none absolute right-0 left-0 transition-all duration-700 ease-in-out"
+        className="video-shadow pointer-events-none absolute right-0 left-0 transition-all duration-700 ease-in-out motion-reduce:transition-none"
         style={{
           bottom: isActive ? '0' : '-60px',
           height: '160px',
@@ -240,6 +240,13 @@ export function YouTubeVideoShowcase({ vibeVideos }: YouTubeVideoShowcaseProps)
   useEffect(() => {
     if (vibeVideos.length === 0) return
 
+    const isReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    if (isReducedMotion) {
+      setAnimatedVideos(vibeVideos.map((_, i) => i))
+      return
+    }
+
     const timers: NodeJS.Timeout[] = []
 
     vibeVideos.forEach((_, i) => {

From 2a203d583a58a0b53e9df834e8ae8d0e212a7f8d Mon Sep 17 00:00:00 2001
From: julianromli <faizintfd@gmail.com>
Date: Wed, 1 Apr 2026 17:25:28 +0700
Subject: [PATCH 4/4] fix: polish landing page locale and trust signals

---
 app/home-page-client.tsx                 |  31 +++---
 app/page.tsx                             |   6 +-
 components/sections/project-showcase.tsx |  36 ++++---
 components/sections/reviews-section.tsx  |  23 +----
 components/ui/filter-controls.tsx        |   8 +-
 components/ui/infinite-slider.tsx        |   4 +-
 components/ui/navbar.tsx                 |   2 +-
 components/ui/testimonials-columns.tsx   | 120 +++--------------------
 components/ui/youtube-video-showcase.tsx |  14 ++-
 hooks/useProjectFilters.ts               |  43 +++-----
 lib/constants/project-filters.ts         |   1 +
 messages/en.json                         |  18 +++-
 messages/id.json                         |  18 +++-
 types/homepage.ts                        |   4 +-
 14 files changed, 131 insertions(+), 197 deletions(-)
 create mode 100644 lib/constants/project-filters.ts

diff --git a/app/home-page-client.tsx b/app/home-page-client.tsx
index 755dcae..77a79bd 100644
--- a/app/home-page-client.tsx
+++ b/app/home-page-client.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import Script from 'next/script'
+import { useTranslations } from 'next-intl'
 import { useState } from 'react'
 import { AIToolsSection } from '@/components/sections/ai-tools-section'
 import { CommunityFeaturesSection } from '@/components/sections/community-features-section'
@@ -15,8 +16,7 @@ import { Navbar } from '@/components/ui/navbar'
 import { YouTubeVideoShowcase } from '@/components/ui/youtube-video-showcase'
 import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
 import { useProjectFilters } from '@/hooks/useProjectFilters'
-import { FAQ_DATA } from '@/lib/constants/faqs'
-import type { Project, User, VibeVideo } from '@/types/homepage'
+import type { FAQ, Project, User, VibeVideo } from '@/types/homepage'
 
 interface HomePageClientProps {
   initialIsLoggedIn: boolean
@@ -33,6 +33,11 @@ export default function HomePageClient({
   initialFilterOptions,
   initialVibeVideos,
 }: HomePageClientProps) {
+  const commonT = useTranslations('common')
+  const metadataT = useTranslations('metadata')
+  const faqT = useTranslations('faq')
+  const faqItems = Object.values(faqT.raw('items') as Record<string, FAQ>)
+  const organizationKeywords = metadataT.raw('organization.keywords') as string[]
   const projectFilters = useProjectFilters({
     authReady: true,
     initialProjects,
@@ -65,7 +70,7 @@ export default function HomePageClient({
         href="#main-content"
         className="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:p-4 focus:bg-background focus:text-foreground focus:rounded-br-md focus:shadow-md focus:font-medium"
       >
-        Skip to main content
+        {commonT('skipToMainContent')}
       </a>
 
       <Script
@@ -80,8 +85,7 @@ export default function HomePageClient({
             alternateName: ['Komunitas Vibe Coding Indonesia', 'VibeDev Indonesia'],
             url: 'https://vibedevid.com',
             logo: 'https://vibedevid.com/vibedev-logo.png',
-            description:
-              'Komunitas vibe coding Indonesia No. 1 untuk developer, AI enthusiasts, dan tech innovators. Tempat belajar coding pake AI, kolaborasi project open source, dan networking dengan vibe coder Indonesia terbaik.',
+            description: metadataT('description'),
             foundingDate: '2024',
             address: {
               '@type': 'PostalAddress',
@@ -90,7 +94,7 @@ export default function HomePageClient({
             },
             contactPoint: {
               '@type': 'ContactPoint',
-              contactType: 'Community Support',
+              contactType: metadataT('organization.contactType'),
               email: 'hello@vibedevid.com',
             },
             sameAs: [
@@ -102,19 +106,10 @@ export default function HomePageClient({
               '@type': 'Organization',
               name: 'Indonesian Developer Community',
             },
-            keywords: [
-              'vibe coding',
-              'komunitas vibe coding',
-              'komunitas vibe coding indonesia',
-              'vibe coder indonesia',
-              'coding pake AI',
-              'AI untuk coding',
-              'developer indonesia',
-              'open source indonesia',
-            ],
+            keywords: [...organizationKeywords],
             audience: {
               '@type': 'Audience',
-              audienceType: 'Developers, AI Enthusiasts, Tech Innovators',
+              audienceType: metadataT('organization.audienceType'),
               geographicArea: 'Indonesia',
             },
           }),
@@ -129,7 +124,7 @@ export default function HomePageClient({
           __html: JSON.stringify({
             '@context': 'https://schema.org',
             '@type': 'FAQPage',
-            mainEntity: FAQ_DATA.map((faq) => ({
+            mainEntity: faqItems.map((faq) => ({
               '@type': 'Question',
               name: faq.question,
               acceptedAnswer: {
diff --git a/app/page.tsx b/app/page.tsx
index f45c476..85d7098 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
 import { fetchProjectsWithSorting } from '@/lib/actions'
+import { ALL_PROJECT_FILTER_VALUE } from '@/lib/constants/project-filters'
 import { createAdminClient } from '@/lib/supabase/admin'
 import { createClient } from '@/lib/supabase/server'
 import { getVideoIconKey } from '@/lib/video-icon-key'
@@ -97,7 +98,10 @@ export default async function HomePage() {
     getVibeVideos(),
   ])
 
-  const initialFilterOptions = ['All', ...((categories ?? []).map((category) => category.display_name) as string[])]
+  const initialFilterOptions = [
+    ALL_PROJECT_FILTER_VALUE,
+    ...((categories ?? []).map((category) => category.display_name) as string[]),
+  ]
 
   let userData: User | null = null
   if (user) {
diff --git a/components/sections/project-showcase.tsx b/components/sections/project-showcase.tsx
index e72a60d..d4ee8d6 100644
--- a/components/sections/project-showcase.tsx
+++ b/components/sections/project-showcase.tsx
@@ -17,26 +17,31 @@ import { FilterControls } from '@/components/ui/filter-controls'
 import { HeartButtonDisplay } from '@/components/ui/heart-button-display'
 import { OptimizedAvatar } from '@/components/ui/optimized-avatar'
 import { UserDisplayName } from '@/components/ui/user-display-name'
-import type { Project } from '@/types/homepage'
+import type { Project, SortBy } from '@/types/homepage'
 
 interface ProjectShowcaseProps {
   projects: Project[]
   loading: boolean
   selectedFilter: string
   setSelectedFilter: (filter: string) => void
-  selectedTrending: string
-  setSelectedTrending: (trending: string) => void
+  selectedTrending: SortBy
+  setSelectedTrending: (trending: SortBy) => void
   filterOptions: string[]
 }
 
+interface TrendingOption {
+  label: string
+  value: SortBy
+}
+
 const skeletonKeys = ['skeleton-1', 'skeleton-2', 'skeleton-3', 'skeleton-4', 'skeleton-5', 'skeleton-6']
 
 interface TrendingDropdownProps {
-  selectedTrending: string
-  options: string[]
+  selectedTrending: SortBy
+  options: TrendingOption[]
   isOpen: boolean
   setIsOpen: (open: boolean) => void
-  onChange: (value: string) => void
+  onChange: (value: SortBy) => void
   buttonClassName?: string
   menuClassName?: string
 }
@@ -62,7 +67,7 @@ function TrendingDropdown({
         aria-expanded={isOpen}
         aria-controls={listboxId}
       >
-        {selectedTrending}
+        {options.find((option) => option.value === selectedTrending)?.label ?? options[0]?.label}
         <ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </Button>
 
@@ -75,19 +80,19 @@ function TrendingDropdown({
           <div className="p-2">
             {options.map((option) => (
               <button
-                key={option}
+                key={option.value}
                 type="button"
                 role="option"
-                aria-selected={selectedTrending === option}
+                aria-selected={selectedTrending === option.value}
                 onClick={() => {
-                  onChange(option)
+                  onChange(option.value)
                   setIsOpen(false)
                 }}
                 className={`hover:bg-muted w-full rounded-md px-3 py-2 text-left text-sm transition-colors ${
-                  selectedTrending === option ? 'bg-muted text-foreground' : 'text-muted-foreground'
+                  selectedTrending === option.value ? 'bg-muted text-foreground' : 'text-muted-foreground'
                 }`}
               >
-                {option}
+                {option.label}
               </button>
             ))}
           </div>
@@ -108,8 +113,11 @@ export function ProjectShowcase({
 }: ProjectShowcaseProps) {
   const t = useTranslations('projectShowcase')
 
-  // Translated trending options
-  const trendingOptions = [t('trendingOptions.trending'), t('trendingOptions.top'), t('trendingOptions.newest')]
+  const trendingOptions: TrendingOption[] = [
+    { value: 'trending', label: t('trendingOptions.trending') },
+    { value: 'top', label: t('trendingOptions.top') },
+    { value: 'newest', label: t('trendingOptions.newest') },
+  ]
   const [isFiltersOpen, setIsFiltersOpen] = useState(false)
   const [isTrendingOpen, setIsTrendingOpen] = useState(false)
   const [visibleProjects, setVisibleProjects] = useState(6)
diff --git a/components/sections/reviews-section.tsx b/components/sections/reviews-section.tsx
index 39f3cc2..48b59a4 100644
--- a/components/sections/reviews-section.tsx
+++ b/components/sections/reviews-section.tsx
@@ -20,19 +20,9 @@ export function ReviewsSection() {
   const t = useTranslations('reviews')
   const testimonialsRaw = t.raw('testimonials') as Record<string, { text: string; name: string; role: string }>
 
-  // Convert translations to Testimonial array with images
-  const images = [
-    'https://github.com/shadcn.png',
-    '/professional-woman-dark-hair.png',
-    '/blonde-woman-glasses.png',
-    '/asian-man-short-hair.png',
-    'https://github.com/shadcn.png',
-    'https://github.com/shadcn.png',
-  ]
-
-  const testimonials: Testimonial[] = Object.values(testimonialsRaw).map((item, index) => ({
+  // Convert translations to Testimonial array
+  const testimonials: Testimonial[] = Object.values(testimonialsRaw).map((item) => ({
     text: item.text,
-    image: images[index],
     name: item.name,
     role: item.role,
   }))
@@ -54,9 +44,9 @@ export function ReviewsSection() {
             fallback={
               <div className="flex justify-center gap-6">
                 <div className="flex flex-col space-y-4">
-                  {Array.from({ length: 3 }).map((_, idx) => (
+                  {['s1', 's2', 's3'].map((id) => (
                     <div
-                      key={idx}
+                      key={id}
                       className="bg-muted/20 w-80 animate-pulse rounded-lg p-4"
                     >
                       <div className="bg-muted/30 mb-3 h-20 rounded"></div>
@@ -82,11 +72,6 @@ export function ReviewsSection() {
               className="hidden md:block"
               duration={19}
             />
-            <TestimonialsColumns
-              testimonials={testimonials.slice(6, 9)}
-              className="hidden lg:block"
-              duration={17}
-            />
           </Suspense>
         </div>
       </div>
diff --git a/components/ui/filter-controls.tsx b/components/ui/filter-controls.tsx
index 16989af..1422fb3 100644
--- a/components/ui/filter-controls.tsx
+++ b/components/ui/filter-controls.tsx
@@ -6,8 +6,10 @@
 'use client'
 
 import { ChevronDown } from 'lucide-react'
+import { useTranslations } from 'next-intl'
 import { useId } from 'react'
 import { Button } from '@/components/ui/button'
+import { ALL_PROJECT_FILTER_VALUE } from '@/lib/constants/project-filters'
 import { cn } from '@/lib/utils'
 
 interface FilterControlsProps {
@@ -28,6 +30,8 @@ export function FilterControls({
   triggerClassName,
 }: FilterControlsProps) {
   const listboxId = useId()
+  const t = useTranslations('projectList')
+  const getOptionLabel = (option: string) => (option === ALL_PROJECT_FILTER_VALUE ? t('all') : option)
 
   return (
     <div className="relative">
@@ -39,7 +43,7 @@ export function FilterControls({
         aria-expanded={isOpen}
         aria-controls={listboxId}
       >
-        Filter
+        {t('filter')}
         <ChevronDown className={`h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </Button>
 
@@ -64,7 +68,7 @@ export function FilterControls({
                   selectedFilter === option ? 'bg-muted text-foreground' : 'text-muted-foreground'
                 }`}
               >
-                {option}
+                {getOptionLabel(option)}
               </button>
             ))}
           </div>
diff --git a/components/ui/infinite-slider.tsx b/components/ui/infinite-slider.tsx
index d113e68..713646f 100644
--- a/components/ui/infinite-slider.tsx
+++ b/components/ui/infinite-slider.tsx
@@ -27,7 +27,7 @@ export function InfiniteSlider({
   const [ref, { width, height }] = useMeasure()
   const translation = useMotionValue(0)
   const [isTransitioning, setIsTransitioning] = useState(false)
-  const [key, setKey] = useState(0)
+  const [, setKey] = useState(0)
   const reducedMotion = useReducedMotion()
 
   useEffect(() => {
@@ -36,7 +36,7 @@ export function InfiniteSlider({
       return
     }
 
-    let controls
+    let controls: ReturnType<typeof animate>
     const size = direction === 'horizontal' ? width : height
     const contentSize = size + gap
     const from = reverse ? -contentSize / 2 : 0
diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
index f415a6c..ee74f70 100644
--- a/components/ui/navbar.tsx
+++ b/components/ui/navbar.tsx
@@ -433,7 +433,7 @@ export function Navbar({
                 variant="ghost"
                 aria-expanded={open}
                 aria-controls="mobile-menu"
-                aria-label="Toggle menu"
+                aria-label={t('common.toggleMenu')}
               >
                 <MenuToggleIcon
                   className="size-6"
diff --git a/components/ui/testimonials-columns.tsx b/components/ui/testimonials-columns.tsx
index b616255..187e75d 100644
--- a/components/ui/testimonials-columns.tsx
+++ b/components/ui/testimonials-columns.tsx
@@ -1,12 +1,9 @@
 'use client'
 import Image from 'next/image'
 import React, { useEffect, useRef } from 'react'
+import type { Testimonial } from '@/types/homepage'
 
-export const TestimonialsColumns = (props: {
-  className?: string
-  testimonials: typeof testimonials
-  duration?: number
-}) => {
+export const TestimonialsColumns = (props: { className?: string; testimonials: Testimonial[]; duration?: number }) => {
   const scrollRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -43,13 +40,19 @@ export const TestimonialsColumns = (props: {
                 >
                   <div className="text-muted-foreground mb-4 text-sm leading-relaxed">{text}</div>
                   <div className="flex items-center gap-3">
-                    <Image
-                      width={40}
-                      height={40}
-                      src={image || '/placeholder.svg'}
-                      alt={name}
-                      className="h-10 w-10 rounded-full object-cover"
-                    />
+                    {image ? (
+                      <Image
+                        width={40}
+                        height={40}
+                        src={image}
+                        alt={name}
+                        className="h-10 w-10 shrink-0 rounded-full object-cover"
+                      />
+                    ) : (
+                      <div className="bg-primary/10 text-primary flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-semibold">
+                        {name.charAt(0)}
+                      </div>
+                    )}
                     <div className="flex flex-col">
                       <div className="text-sm leading-5 font-semibold tracking-tight">{name}</div>
                       <div className="text-muted-foreground text-xs leading-5 tracking-tight">{role}</div>
@@ -64,96 +67,3 @@ export const TestimonialsColumns = (props: {
     </div>
   )
 }
-
-const testimonials = [
-  {
-    text: 'Hype Company transformed our startup idea into a $2M ARR SaaS platform. Their technical expertise and business understanding is unmatched.',
-    image: '/professional-woman-dark-hair.png',
-    name: 'Sarah Chen',
-    role: 'TechFlow CEO',
-  },
-  {
-    text: "Best development partner we've worked with. They think like founders, not just developers. Our product launched 3 months ahead of schedule.",
-    image: '/hispanic-man-beard.png',
-    name: 'Marcus Rodriguez',
-    role: 'StartupLab Founder',
-  },
-  {
-    text: 'Clean code, on-time delivery, zero drama. Exactly what every startup needs. They built our MVP and it scaled to 100K users seamlessly.',
-    image: '/blonde-woman-glasses.png',
-    name: 'Emma Thompson',
-    role: 'DigitalCore CTO',
-  },
-  {
-    text: "They don't just build features, they build businesses. Our conversion rate doubled after their redesign and optimization work.",
-    image: '/asian-man-short-hair.png',
-    name: 'David Kim',
-    role: 'InnovateLab VP',
-  },
-  {
-    text: 'Hype Company delivered a mobile app that exceeded all expectations. The user experience is flawless and performance is lightning fast.',
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'Lisa Park',
-    role: 'MobileFirst Founder',
-  },
-  {
-    text: 'Their full-stack expertise saved us months of development time. From backend architecture to pixel-perfect frontend, they delivered excellence.',
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'Alex Rivera',
-    role: 'CodeCraft CTO',
-  },
-  {
-    text: 'Working with Hype Company was a game-changer. They understood our vision and brought it to life with incredible attention to detail.',
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'Jennifer Walsh',
-    role: 'DesignHub CEO',
-  },
-  {
-    text: "The team's ability to solve complex technical challenges while maintaining clean, scalable code is impressive. Highly recommend them.",
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'Michael Chang',
-    role: 'TechScale VP Engineering',
-  },
-  {
-    text: 'From concept to launch, Hype Company guided us through every step. Their expertise in modern web technologies is world-class.',
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'Rachel Green',
-    role: 'WebFlow Founder',
-  },
-  {
-    text: 'The AI integration they built for us increased our efficiency by 300%. Their understanding of cutting-edge technology is remarkable.',
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'James Wilson',
-    role: 'AI Ventures CEO',
-  },
-  {
-    text: 'Exceptional work on our e-commerce platform. Sales increased 150% within the first month after launch. Truly outstanding results.',
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'Sofia Martinez',
-    role: 'RetailTech Founder',
-  },
-  {
-    text: 'Their blockchain solution revolutionized our supply chain. The transparency and efficiency gains have been incredible for our business.',
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'Kwame Asante',
-    role: 'ChainLogic CTO',
-  },
-  {
-    text: "Hype Company's design thinking approach resulted in a 40% increase in user engagement. They truly understand modern user experience.",
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'Zoe Anderson',
-    role: 'UXFlow Director',
-  },
-  {
-    text: 'The fintech app they developed for us passed all security audits with flying colors. Their attention to compliance and security is top-notch.',
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'Raj Patel',
-    role: 'FinSecure Founder',
-  },
-  {
-    text: 'Outstanding API development and integration work. They connected 15 different services seamlessly. True technical mastery.',
-    image: '/placeholder.svg?height=40&width=40',
-    name: 'Aisha Johnson',
-    role: 'APIHub CTO',
-  },
-]
diff --git a/components/ui/youtube-video-showcase.tsx b/components/ui/youtube-video-showcase.tsx
index f2b0dfe..e7d889a 100644
--- a/components/ui/youtube-video-showcase.tsx
+++ b/components/ui/youtube-video-showcase.tsx
@@ -2,7 +2,7 @@
 
 import { Calendar, Code, Play, Users, Video } from 'lucide-react'
 import Image from 'next/image'
-import { useTranslations } from 'next-intl'
+import { useLocale, useTranslations } from 'next-intl'
 import { useEffect, useState } from 'react'
 import { AspectRatio } from '@/components/ui/aspect-ratio'
 import type { VibeVideo, VideoIconKey } from '@/types/homepage'
@@ -224,6 +224,7 @@ interface YouTubeVideoShowcaseProps {
 
 export function YouTubeVideoShowcase({ vibeVideos }: YouTubeVideoShowcaseProps) {
   const t = useTranslations('youtubeShowcase')
+  const locale = useLocale()
   const [activeIndex, setActiveIndex] = useState(0)
   const [animatedVideos, setAnimatedVideos] = useState<number[]>([])
 
@@ -264,8 +265,17 @@ export function YouTubeVideoShowcase({ vibeVideos }: YouTubeVideoShowcaseProps)
   }, [vibeVideos])
 
   const formatDate = (dateString: string) => {
+    if (!dateString) {
+      return t('dateUnavailable')
+    }
+
     const date = new Date(dateString)
-    return date.toLocaleDateString('id-ID', {
+
+    if (Number.isNaN(date.getTime())) {
+      return t('dateUnavailable')
+    }
+
+    return date.toLocaleDateString(locale, {
       day: 'numeric',
       month: 'short',
       year: 'numeric',
diff --git a/hooks/useProjectFilters.ts b/hooks/useProjectFilters.ts
index d8d6a4d..ff6ca11 100644
--- a/hooks/useProjectFilters.ts
+++ b/hooks/useProjectFilters.ts
@@ -6,6 +6,7 @@
 import { useEffect, useState } from 'react'
 import { fetchProjectsWithSorting } from '@/lib/actions'
 import { getCategories } from '@/lib/categories'
+import { ALL_PROJECT_FILTER_VALUE } from '@/lib/constants/project-filters'
 import type { Project, SortBy } from '@/types/homepage'
 
 interface UseProjectFiltersOptions {
@@ -17,10 +18,10 @@ interface UseProjectFiltersOptions {
 export function useProjectFilters({
   authReady,
   initialProjects = [],
-  initialFilterOptions = ['All'],
+  initialFilterOptions = [ALL_PROJECT_FILTER_VALUE],
 }: UseProjectFiltersOptions) {
-  const [selectedFilter, setSelectedFilter] = useState('All')
-  const [selectedTrending, setSelectedTrending] = useState('Trending')
+  const [selectedFilter, setSelectedFilter] = useState(ALL_PROJECT_FILTER_VALUE)
+  const [selectedTrending, setSelectedTrending] = useState<SortBy>('trending')
   const [visibleProjects, setVisibleProjects] = useState(6)
   const [filterOptions, setFilterOptions] = useState<string[]>(initialFilterOptions)
   const [projects, setProjects] = useState<Project[]>(initialProjects)
@@ -37,9 +38,9 @@ export function useProjectFilters({
       try {
         const categories = await getCategories()
         const categoryDisplayNames = categories.map((cat) => cat.display_name)
-        setFilterOptions(['All', ...categoryDisplayNames])
-      } catch (error) {
-        console.error('Failed to fetch categories for filters:', error)
+        setFilterOptions([ALL_PROJECT_FILTER_VALUE, ...categoryDisplayNames])
+      } catch {
+        setFilterOptions(initialFilterOptions)
       }
     }
 
@@ -52,7 +53,7 @@ export function useProjectFilters({
       return
     }
 
-    if (skipInitialFetch && selectedTrending === 'Trending' && selectedFilter === 'All') {
+    if (skipInitialFetch && selectedTrending === 'trending' && selectedFilter === ALL_PROJECT_FILTER_VALUE) {
       setSkipInitialFetch(false)
       return
     }
@@ -61,43 +62,27 @@ export function useProjectFilters({
       try {
         setLoading(true)
 
-        // Convert selectedTrending to sortBy parameter
-        let sortBy: SortBy = 'newest'
-        switch (selectedTrending) {
-          case 'Trending':
-            sortBy = 'trending'
-            break
-          case 'Top':
-            sortBy = 'top'
-            break
-          case 'Newest':
-          default:
-            sortBy = 'newest'
-            break
-        }
-
-        // Fetch projects with new sorting function
         const { projects: fetchedProjects, error } = await fetchProjectsWithSorting(
-          sortBy,
-          selectedFilter === 'All' ? undefined : selectedFilter,
+          selectedTrending,
+          selectedFilter === ALL_PROJECT_FILTER_VALUE ? undefined : selectedFilter,
           20, // limit
         )
 
         if (error) {
-          console.error('Error fetching projects:', error)
+          setProjects(initialProjects)
           return
         }
 
         setProjects(fetchedProjects || [])
-      } catch (error) {
-        console.error('Error fetching projects:', error)
+      } catch {
+        setProjects(initialProjects)
       } finally {
         setLoading(false)
       }
     }
 
     fetchProjects()
-  }, [authReady, selectedTrending, selectedFilter, skipInitialFetch])
+  }, [authReady, initialProjects, selectedTrending, selectedFilter, skipInitialFetch])
 
   const loadMore = () => {
     setVisibleProjects((prev) => prev + 6)
diff --git a/lib/constants/project-filters.ts b/lib/constants/project-filters.ts
new file mode 100644
index 0000000..f3bfd10
--- /dev/null
+++ b/lib/constants/project-filters.ts
@@ -0,0 +1 @@
+export const ALL_PROJECT_FILTER_VALUE = '__all__'
diff --git a/messages/en.json b/messages/en.json
index cf9f599..2e3fba1 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -20,6 +20,18 @@
         "title": "Events",
         "description": "Discover upcoming AI and dev community events from VibeDev ID."
       }
+    },
+    "organization": {
+      "contactType": "Community Support",
+      "audienceType": "Developers, AI enthusiasts, and tech innovators",
+      "keywords": [
+        "vibe coding",
+        "AI-powered coding",
+        "Indonesian developer community",
+        "open source collaboration",
+        "developer events Indonesia",
+        "AI tools for developers"
+      ]
     }
   },
   "common": {
@@ -30,7 +42,9 @@
     "write": "Write",
     "writePost": "Write a Post",
     "close": "Close",
-    "submitProject": "Submit Project"
+    "submitProject": "Submit Project",
+    "skipToMainContent": "Skip to main content",
+    "toggleMenu": "Toggle menu"
   },
   "settings": {
     "language": "Language",
@@ -73,6 +87,7 @@
     "viewAll": "View All Videos on Our Channel",
     "watch": "Watch",
     "videoLabel": "Video",
+    "dateUnavailable": "Date not available",
     "views": "views",
     "error": "Failed to load videos. Please try refreshing the page!",
     "fallbackVideos": {
@@ -196,6 +211,7 @@
   "projectList": {
     "title": "Indonesian Developer Project Showcase",
     "description": "Discover cool projects created by the Indonesian vibe coder community. From AI tools to open source projects, all the best developer works are here.",
+    "all": "All",
     "filter": "Filter",
     "submitButton": "Submit Project",
     "noProjects": "No projects found with the selected filter",
diff --git a/messages/id.json b/messages/id.json
index eb1cdbc..0e3ebc4 100644
--- a/messages/id.json
+++ b/messages/id.json
@@ -20,6 +20,18 @@
         "title": "Event",
         "description": "Temukan event AI dan developer community yang akan datang dari VibeDev ID."
       }
+    },
+    "organization": {
+      "contactType": "Dukungan komunitas",
+      "audienceType": "Developer, AI enthusiast, dan tech innovator",
+      "keywords": [
+        "vibe coding",
+        "komunitas vibe coding",
+        "komunitas vibe coding indonesia",
+        "vibe coder indonesia",
+        "coding pake AI",
+        "open source indonesia"
+      ]
     }
   },
   "common": {
@@ -30,7 +42,9 @@
     "write": "Tulis",
     "writePost": "Tulis Postingan",
     "close": "Tutup",
-    "submitProject": "Kirim Project"
+    "submitProject": "Kirim Project",
+    "skipToMainContent": "Lewati ke konten utama",
+    "toggleMenu": "Buka/Tutup menu"
   },
   "settings": {
     "language": "Bahasa",
@@ -73,6 +87,7 @@
     "viewAll": "Lihat Semua Video di Channel Kami",
     "watch": "Tonton",
     "videoLabel": "Video",
+    "dateUnavailable": "Tanggal tidak tersedia",
     "views": "ditonton",
     "error": "Gagal memuat video. Coba refresh halaman ya!",
     "fallbackVideos": {
@@ -196,6 +211,7 @@
   "projectList": {
     "title": "Showcase Project Developer Indonesia",
     "description": "Temukan project keren yang dibuat oleh komunitas vibe coder Indonesia. Dari AI tools sampai open source projects, semua karya developer terbaik ada di sini.",
+    "all": "Semua",
     "filter": "Filter",
     "submitButton": "Submit Project",
     "noProjects": "Belum ada project dengan filter yang dipilih",
diff --git a/types/homepage.ts b/types/homepage.ts
index 70186ac..ce37fd1 100644
--- a/types/homepage.ts
+++ b/types/homepage.ts
@@ -47,7 +47,7 @@ export interface VibeVideo {
 
 export interface Testimonial {
   text: string
-  image: string
+  image?: string
   name: string
   role: string
 }
@@ -73,7 +73,7 @@ export interface AuthState {
 
 export interface ProjectFilters {
   selectedFilter: string
-  selectedTrending: string
+  selectedTrending: SortBy
   visibleProjects: number
   filterOptions: string[]
 }