feat: complete UI/UX improvements and localization
This commit is contained in:
AyrisAI
+185
-38
@@ -1,48 +1,195 @@
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||
import Link from 'next/link'
|
||||
'use client'
|
||||
|
||||
export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
|
||||
const t = await getTranslations('hero')
|
||||
const nav = await getTranslations('nav')
|
||||
const footer = await getTranslations('footer')
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { Link } from '@/i18n/routing'
|
||||
import { motion, useReducedMotion } from 'framer-motion'
|
||||
import { MapPin, Wifi, UtensilsCrossed, Waves, Car } from 'lucide-react'
|
||||
import Image from 'next/image'
|
||||
import BougainvilleaMotif from '@/components/BougainvilleaMotif'
|
||||
|
||||
const EASE: [number, number, number, number] = [0.22, 1, 0.36, 1]
|
||||
|
||||
export default function HomePage() {
|
||||
const tHero = useTranslations('hero')
|
||||
const tFeatures = useTranslations('features')
|
||||
const tRooms = useTranslations('home_rooms')
|
||||
const prefersReduced = useReducedMotion()
|
||||
|
||||
const heroContainer = prefersReduced ? undefined : {
|
||||
hidden: {},
|
||||
show: { transition: { staggerChildren: 0.12 } }
|
||||
}
|
||||
|
||||
const heroItem = prefersReduced ? undefined : {
|
||||
hidden: { opacity: 0, y: 40, filter: 'blur(8px)' },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
filter: 'blur(0px)',
|
||||
transition: { duration: 0.8, ease: EASE }
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col min-h-screen">
|
||||
<header className="px-6 py-4 border-b flex items-center justify-between">
|
||||
<div className="font-bold text-xl">Boilerplate</div>
|
||||
<nav className="space-x-4">
|
||||
<Link href="/" className="text-gray-600 hover:text-gray-900">{nav('home')}</Link>
|
||||
<Link href="/about" className="text-gray-600 hover:text-gray-900">{nav('about')}</Link>
|
||||
<Link href="/contact" className="text-gray-600 hover:text-gray-900">{nav('contact')}</Link>
|
||||
<Link href="/login" className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm">Login</Link>
|
||||
</nav>
|
||||
<div className="bg-background text-on-surface">
|
||||
{/* Hero Section */}
|
||||
<header className="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80"
|
||||
alt="Sitar Apart Hotel View"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-secondary/40 via-secondary/20 to-secondary/60" />
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
variants={heroContainer}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="relative z-10 text-center px-margin-mobile max-w-3xl"
|
||||
>
|
||||
<motion.h1 variants={heroItem} className="font-serif text-[40px] md:text-[60px] leading-[1.2] font-semibold text-white mb-6 drop-shadow-lg">
|
||||
{tHero('title')}
|
||||
</motion.h1>
|
||||
|
||||
<motion.p variants={heroItem} className="font-sans text-[18px] text-white/90 mb-10 max-w-xl mx-auto leading-relaxed drop-shadow-md">
|
||||
{tHero('description')}
|
||||
</motion.p>
|
||||
|
||||
<motion.div variants={heroItem}>
|
||||
<Link
|
||||
href="/dairelerimiz"
|
||||
className="inline-block bg-accent-pink text-white px-10 py-5 rounded-full font-sans font-bold text-[16px] tracking-wider uppercase hover:scale-105 transition-all duration-300 shadow-xl cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-accent-pink"
|
||||
>
|
||||
{tHero('cta')}
|
||||
</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-white">
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</svg>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex flex-col items-center justify-center text-center px-4">
|
||||
<h1 className="text-5xl font-extrabold tracking-tight text-gray-900 sm:text-7xl mb-6">
|
||||
{t('title')}
|
||||
</h1>
|
||||
<p className="mt-4 text-xl text-gray-500 max-w-2xl mx-auto mb-8">
|
||||
This is a dummy landing page to demonstrate the localization setup using next-intl.
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<button className="px-8 py-3 bg-blue-600 text-white rounded-full font-medium hover:bg-blue-700 transition">
|
||||
{t('cta')}
|
||||
</button>
|
||||
|
||||
<div className="flex bg-gray-100 rounded-full p-1">
|
||||
<Link href="/tr" className={`px-4 py-2 rounded-full text-sm font-medium ${locale === 'tr' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-900'}`}>TR</Link>
|
||||
<Link href="/en" className={`px-4 py-2 rounded-full text-sm font-medium ${locale === 'en' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-900'}`}>EN</Link>
|
||||
</div>
|
||||
{/* Amenities Strip */}
|
||||
<section className="bg-surface-container-lowest py-12 relative z-20 -mt-10 mx-margin-mobile md:mx-auto max-w-container-max rounded-[16px] shadow-[0_32px_64px_-12px_rgba(112,90,76,0.04)] border border-outline-variant/20">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 px-gutter">
|
||||
{[
|
||||
{ icon: Waves, label: tFeatures('pool') },
|
||||
{ icon: Wifi, label: tFeatures('wifi') },
|
||||
{ icon: UtensilsCrossed, label: tFeatures('kitchen') },
|
||||
{ icon: Car, label: tFeatures('parking') }
|
||||
].map((amenity, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.1, ease: EASE }}
|
||||
className="flex flex-col items-center text-center gap-3 group"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary transition-transform duration-300 group-hover:scale-110">
|
||||
<amenity.icon className="w-6 h-6" />
|
||||
</div>
|
||||
<span className="font-sans font-bold text-[14px] text-secondary tracking-wide">{amenity.label}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<footer className="py-6 border-t text-center text-gray-500 text-sm">
|
||||
<p>{footer('rights')} <a href="https://ayris.tech" className="hover:text-blue-600 transition">Created by ayris.tech</a></p>
|
||||
</footer>
|
||||
{/* Apartments Section */}
|
||||
<section className="py-section-gap px-margin-mobile max-w-container-max mx-auto overflow-visible">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-100px' }}
|
||||
transition={{ duration: 0.8, ease: EASE }}
|
||||
className="relative mb-16 text-center"
|
||||
>
|
||||
<div className="absolute -top-12 left-1/2 -translate-x-1/2 w-32 h-32 flex items-center justify-center opacity-15 -rotate-6 pointer-events-none text-accent-pink">
|
||||
<BougainvilleaMotif className="w-24 h-24" />
|
||||
</div>
|
||||
<h2 className="font-serif text-[32px] md:text-[40px] font-semibold text-secondary mb-4 relative z-10">
|
||||
{tRooms('title')}
|
||||
</h2>
|
||||
<p className="text-on-surface-variant text-[16px] max-w-xl mx-auto font-sans">
|
||||
{tRooms('subtitle')}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||
{[
|
||||
{
|
||||
id: '1-0-daire',
|
||||
title: tRooms('room_1.title'),
|
||||
desc: tRooms('room_1.desc'),
|
||||
img: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80'
|
||||
},
|
||||
{
|
||||
id: '1-1-daire-a',
|
||||
title: tRooms('room_2.title'),
|
||||
desc: tRooms('room_2.desc'),
|
||||
img: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80'
|
||||
},
|
||||
{
|
||||
id: '1-1-daire-b',
|
||||
title: tRooms('room_3.title'),
|
||||
desc: tRooms('room_3.desc'),
|
||||
img: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80'
|
||||
}
|
||||
].map((room, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-50px' }}
|
||||
transition={{ duration: 0.6, delay: idx * 0.15, ease: EASE }}
|
||||
className="group bg-surface-container-lowest rounded-[24px] overflow-hidden shadow-[0_32px_64px_-12px_rgba(112,90,76,0.04)] border border-outline-variant/20 transition-transform duration-500 hover:-translate-y-2 flex flex-col cursor-pointer"
|
||||
>
|
||||
<div className="aspect-[3/2] overflow-hidden relative">
|
||||
<Image
|
||||
src={room.img}
|
||||
alt={room.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6 flex flex-col flex-1 bg-surface-container-lowest relative z-10">
|
||||
<h3 className="font-serif text-[24px] font-medium text-secondary mb-3 group-hover:text-primary transition-colors">{room.title}</h3>
|
||||
<p className="font-sans text-on-surface-variant mb-6 text-[16px] leading-relaxed flex-1">
|
||||
{room.desc}
|
||||
</p>
|
||||
<Link
|
||||
href={`/dairelerimiz/${room.id}`}
|
||||
className="inline-flex items-center text-primary font-sans font-bold text-[16px] border-b-2 border-transparent hover:border-primary transition-colors pb-1 w-fit cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
|
||||
>
|
||||
Detayları İncele <span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="text-center mt-16"
|
||||
>
|
||||
<Link
|
||||
href="/dairelerimiz"
|
||||
className="inline-flex items-center justify-center px-10 py-4 border-2 border-primary text-primary hover:bg-primary hover:text-white rounded-full font-sans font-bold text-[16px] uppercase tracking-wider transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-primary/50 focus-visible:ring-offset-2"
|
||||
>
|
||||
Tüm Daireleri Gör
|
||||
</Link>
|
||||
</motion.div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user