feat: complete UI/UX improvements and localization

2026-07-15 14:42:51 +03:00
parent 2d149f1178
commit a36b833e00
32 changed files with 3667 additions and 348 deletions
@@ -0,0 +1,107 @@
+import { getTranslations, setRequestLocale } from 'next-intl/server'
+import { Link } from '@/i18n/routing'
+import Image from 'next/image'
+import { Users, Square, Info } from 'lucide-react'
+
+export default async function RoomsPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params
+  setRequestLocale(locale)
+  
+  const tNav = await getTranslations('nav')
+  const tRooms = await getTranslations('rooms')
+
+  const MOCK_ROOMS = [
+    {
+      slug: '1-0-daire',
+      name: tRooms('room_list.1_0_daire.name'),
+      description: tRooms('room_list.1_0_daire.desc'),
+      capacity: 2,
+      size: '25m²',
+      image: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80',
+      amenities: ['Mini Mutfak', 'Klima', 'Balkon', 'WiFi']
+    },
+    {
+      slug: '1-1-daire-a',
+      name: tRooms('room_list.1_1_daire_a.name'),
+      description: tRooms('room_list.1_1_daire_a.desc'),
+      capacity: 2,
+      size: '40m²',
+      image: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
+      amenities: ['Ayrı Mutfak', 'Klima', 'Balkon', 'WiFi', 'Oturma Alanı']
+    },
+    {
+      slug: '1-1-daire-b',
+      name: tRooms('room_list.1_1_daire_b.name'),
+      description: tRooms('room_list.1_1_daire_b.desc'),
+      capacity: 4,
+      size: '50m²',
+      image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80',
+      amenities: ['2 Oda', 'Ayrı Mutfak', 'Klima', 'Balkon', 'WiFi']
+    }
+  ];
+
+  return (
+    <div className="flex-1 bg-gray-50 py-12 pt-32">
+      <div className="container mx-auto px-4">
+        <div className="mb-10 text-center max-w-2xl mx-auto">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">{tRooms('title')}</h1>
+          <p className="text-gray-600 text-lg">
+            {tRooms('description')}
+          </p>
+        </div>
+
+        <div className="space-y-12 max-w-5xl mx-auto">
+          {MOCK_ROOMS.map((room) => (
+            <div key={room.slug} className="bg-white rounded-2xl overflow-hidden border shadow-sm flex flex-col md:flex-row group">
+              <div className="relative w-full md:w-2/5 h-64 md:h-auto bg-gray-100">
+                <Image 
+                  src={room.image}
+                  alt={room.name}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 40vw"
+                  className="object-cover group-hover:scale-105 transition-transform duration-500"
+                />
+              </div>
+              <div className="p-6 md:p-8 flex-1 flex flex-col">
+                <div className="flex justify-between items-start mb-4">
+                  <h2 className="text-2xl font-bold text-gray-900">{room.name}</h2>
+                </div>
+                
+                <p className="text-gray-600 mb-6 flex-1">
+                  {room.description}
+                </p>
+
+                <div className="flex flex-wrap gap-4 mb-8">
+                  <div className="flex items-center gap-1.5 text-sm text-gray-500 font-medium">
+                    <Users className="w-4 h-4 text-[#2FB6C4]" />
+                    <span>{room.capacity} {tRooms('capacity')}</span>
+                  </div>
+                  <div className="flex items-center gap-1.5 text-sm text-gray-500 font-medium">
+                    <Square className="w-4 h-4 text-[#2FB6C4]" />
+                    <span>{room.size}</span>
+                  </div>
+                  <div className="flex items-center gap-1.5 text-sm text-gray-500 font-medium">
+                    <Info className="w-4 h-4 text-[#2FB6C4]" />
+                    <span>{room.amenities.length} {tRooms('amenities')}</span>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between mt-auto border-t pt-6">
+                  <div className="text-sm text-gray-500">
+                    <span className="font-bold text-gray-900 text-lg">{tRooms('ask_price')}</span> {tRooms('per_night')}
+                  </div>
+                  <Link 
+                    href={`/dairelerimiz/${room.slug}`} 
+                    className="px-6 py-2.5 bg-[#2FB6C4] hover:bg-[#2597a3] text-white rounded-md font-medium transition-colors duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2FB6C4] focus-visible:ring-offset-2"
+                  >
+                    {tRooms('details_btn')}
+                  </Link>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}