Mən mövcud React layihəmdə Home / Feed səhifəsinin UI dizaynını yeniləmək istəyirəm.

Mən sənə 2 şəkil göndərmişəm:

1. Birinci şəkil — istədiyim yeni dizayn nümunəsidir.

2. İkinci şəkil — layihəmdə hazırkı Home səhifəsinin vəziyyətidir.

Məqsəd:

Hazırkı Home səhifəsini birinci şəkildəki dizayna maksimum oxşar formada yenidən qur. UI ümumi olaraq Twitter/X stilinə yaxın, sadə, təmiz və professional görünməlidir.

Əsas fərq:

Birinci şəkildə sağ tərəfdə “Konuşulanlar”, “Sana göre” kimi hissələr var. Mənim layihəmdə isə sağ tərəfdə bunlar olmalıdır:

1. “Takib edə biləcəyin şəxslər” bölməsi

2. “Önümüzdəki 1 həftədə ad günü olan şəxslər” bölməsi

Yəni sağ sidebar mənim layihəmin data strukturuna uyğun olmalıdır.

Texnologiyalar:

- React

- Tailwind CSS

- React Router varsa mövcud routing pozulmasın

- lucide-react iconları istifadə oluna bilər

- Mövcud kod strukturu qorunmalıdır

Ümumi Layout tələbləri:

- Səhifə 3 əsas hissədən ibarət olmalıdır:

1. Sol sidebar / navigation

2. Orta əsas feed content

3. Sağ sidebar widgets

Desktop görünüş:

- Sol navbar sabit genişlikdə olmalıdır.

- Orta hissə feed üçün ayrılmalıdır.

- Sağ tərəfdə widget-lər yerləşməlidir.

- Layout birinci şəkildəki kimi sağdan-soldan container daxilində olmalıdır.

- Kontent çox geniş yayılmamalıdır.

- Orta feed hissəsi border-left və border-right ilə ayrılmış ola bilər.

- Sağ sidebar desktop-da görünməlidir.

- Səhifədə horizontal overflow olmamalıdır.

Mobile görünüş:

- Sağ sidebar mobile-da gizlədilməlidir.

- Sol sidebar mobile-da aşağı hissədə bottom navigation kimi göstərilməlidir.

- Mobile navbar ekranın aşağısında fixed olmalıdır.

- Mobile-da search navbar daxilində olmamalıdır.

- Feed content tam enə uyğun responsive görünməlidir.

- Bottom navbar kontentin üstünə düşməsin deyə əsas content-ə padding-bottom verilməlidir.

Navbar tələbləri:

- Navbar birinci şəkildəki kimi sadə və minimal olmalıdır.

- Search input navbar daxilində olmayacaq.

- Desktop-da sol tərəfdə icon + text formasında navigation item-lar olsun.

- Aktiv olan menu item background və accent color ilə seçilsin.

- Mobile-da yalnız icon-lar və ya qısa label-lar göstərilsin.

- Navbar çox böyük və ağır görünməsin.

Əsas rəng sistemi:

Layihədə əsas accent rəng olaraq bu rəng istifadə olunmalıdır:

rgb(26, 135, 211)

Bu rəng gələcəkdə Settings səhifəsində dəyişdirilə biləcək formada qurulmalıdır. Ona görə rənglər hardcoded şəkildə hər component-də təkrar yazılmamalıdır.

Mümkünsə:

- CSS variable istifadə et: --accent-color: rgb(26, 135, 211)

- və ya Tailwind config / theme sistemi ilə reusable qur

Accent color aşağıdakı yerlərdə istifadə olunmalıdır:

- Aktiv tab underline

- Aktiv navbar item

- Post button

- Follow button

- Save, repost və oxşar action button-lar

- Mention text-lər, məsələn @username

- Hashtag text-lər, məsələn #education

- Aktiv link və seçilmiş elementlər

Theme tələbləri:

Mən həm light mode, həm də dark mode üçün dizayn şəkilləri göndərmişəm. UI hər iki mode-da düzgün işləməlidir.

Light mode:

- Background açıq və təmiz olmalıdır.

- Card-lar ağ və ya çox açıq boz tonlarda olmalıdır.

- Border-lər incə və səliqəli görünməlidir.

Dark mode:

- Background tünd olmalıdır.

- Card və widget-lər dark mode-a uyğun rəngdə olmalıdır.

- Text-lər oxunaqlı olmalıdır.

- Border və hover rəngləri dark mode-a uyğunlaşdırılmalıdır.

Home / Feed orta hissə tələbləri:

- Yuxarıda tab hissəsi olmalıdır.

- Tab-lar birinci şəkildəki kimi sadə və horizontal görünməlidir.

- Məsələn:

- Yenilər

- Trend

- Takip

- Sana özel

- Aktiv tab accent color underline ilə göstərilsin.

- Tab hissəsi sticky ola bilər, amma navbar ilə conflict yaratmasın.

Post yaratma hissəsi:

- Feed-in yuxarı hissəsində post paylaşmaq üçün sadə input/card olmalıdır.

- Avatar, text input və paylaş button-u olsun.

- Button accent color ilə verilsin.

- UI birinci şəkildəki kimi minimal olsun.

Post card tələbləri:

- Hər post card-da:

- Avatar

- Ad və username

- Vaxt

- Post mətni

- Lazım olarsa link preview/card

- Comment, repost, like, save action-ları

- Action icon-lar sadə və incə olmalıdır.

- Hover state-lər əlavə edilməlidir.

- Postlar arasında incə border olmalıdır.

- Mention və hashtag-lar accent color ilə göstərilməlidir.

Sağ sidebar tələbləri:

Sağ sidebar desktop-da görünməlidir, mobile-da gizlədilməlidir.

Sağ sidebar-da 2 əsas widget olmalıdır:

1. “Takib edə biləcəyin şəxslər”

Bu widget-də:

- İstifadəçi avatarı

- Ad

- Username

- “Takib et” button-u

- Maksimum 4-5 nəfər göstərilsin

- Əgər data çoxdursa “Hamısını gör” linki əlavə edilə bilər

- Button accent color və ya uyğun secondary style ilə verilsin

2. “Önümüzdəki 1 həftədə ad günü olan şəxslər”

Bu widget-də:

- Yaxın 7 gün ərzində ad günü olan şəxslər göstərilsin

- Avatar

- Ad soyad

- Tarix

- İstəyə görə “bu gün”, “sabah”, “3 gün sonra” kimi qısa label göstərilə bilər

- Əgər yaxın 1 həftədə ad günü yoxdursa, boş state göstər:

“Önümüzdəki 1 həftədə ad günü yoxdur.”

Widget dizayn tələbləri:

- Birinci şəkildəki sağ card-lara oxşar radius, border və spacing istifadə et.

- Widget-lər çox böyük olmasın.

- İçindəki item-lar səliqəli və oxunaqlı olsun.

- Light və dark mode-a uyğun görünsün.

Loading / Skeleton tələbləri:

Hər loading vəziyyətində spinner əvəzinə uyğun skeleton göstərilməlidir.

Skeleton nümunələri:

- Postlar yüklənəndə post card skeleton

- Feed tab və composer yüklənəndə composer skeleton

- Sağ sidebar follow list yüklənəndə user list skeleton

- Birthday list yüklənəndə birthday item skeleton

Skeleton:

- Real component formasına uyğun olmalıdır

- Light və dark mode-da uyğun görünməlidir

- Pulse animation istifadə oluna bilər

Data tələbləri:

Mövcud data strukturunu pozma. Əgər data yoxdursa, nümunə mock data yarat.

Mock data üçün nümunə struktur belə ola bilər:

const suggestedUsers = [

{

id: 1,

name: "Jafar Mustafayev",

username: "jafarmustafayev",

avatar: "",

isFollowing: false

}

];

const upcomingBirthdays = [

{

id: 1,

name: "Leyla Guliyeva",

username: "leyla_g",

avatar: "",

birthday: "2026-06-12"

}

];

Birthday filter logic:

- Bugünkü tarixdən başlayaraq növbəti 7 gün ərzində olan ad günlərini göstər.

- İl fərqini nəzərə alma, yalnız gün və ay əsasında müqayisə et.

- Siyahını tarixə görə yaxın olandan uzağa doğru sırala.

Kod keyfiyyəti tələbləri:

- Kod təmiz, reusable və maintainable olmalıdır.

- Component-ləri çox böyütmə.

- Lazım olsa bu component-ləri ayrıca yarat:

- HomeLayout

- SidebarNav

- MobileBottomNav

- FeedTabs

- PostComposer

- PostCard

- RightSidebar

- SuggestedUsersWidget

- UpcomingBirthdaysWidget

- Skeleton components

- Tailwind class-ları səliqəli yazılsın.

- Responsive breakpoint-lər düzgün istifadə olunsun.

- Dark mode üçün dark: class-lar əlavə edilsin.

- Mövcud layihənin dizaynını pozmadan Home səhifəsini yenilə.

Nəticə olaraq mənə bunları ver:

1. Hansı faylları dəyişməli olduğumu göstər.

2. Yeni yaradılacaq component-lərin adlarını göstər.

3. Hər fayl üçün tam və işlək kod ver.

4. Əgər mock data lazımdırsa, onu ayrıca data faylı kimi yarat.

5. Layout-un desktop və mobile-da necə işlədiyini qısa izah et.

6. Accent color-un gələcəkdə Settings-dən dəyişdirilə bilməsi üçün necə qurulduğunu izah et.