ayrisdev/ayrisapart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fb

Browse Source
This commit is contained in:
ayrisdev
2026-04-19 17:23:31 +03:00
parent 9cad199125
commit 4f2188363a
122 changed files with 3215 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
app/[lang]/about/AboutClient.tsx Normal file
View File

@@ -0,0 +1,142 @@
'use client'
import { motion } from "framer-motion"
import Image from "next/image"
import { Check, Hotel, Star, Globe } from 'lucide-react'
export default function AboutClient({ lang, dict }: { lang: string, dict: any }) {
const whyUs = [
{ title: dict.about.why['1'].t, desc: dict.about.why['1'].d },
{ title: dict.about.why['2'].t, desc: dict.about.why['2'].d },
{ title: dict.about.why['3'].t, desc: dict.about.why['3'].d },
{ title: dict.about.why['4'].t, desc: dict.about.why['4'].d }
]
const stats = [
{ icon: <Hotel size={32} />, value: '8+', label: 'Premium Room' },
{ icon: <Star size={32} />, value: '4.8', label: 'Guest Rating' },
{ icon: <Globe size={32} />, value: '10+', label: 'Countries' }
]
return (
<main className="bg-[#FAF7F0] min-h-screen">
{/* HERO SECTION */}
<section className="pt-44 pb-20 px-6">
<div className="max-w-4xl mx-auto text-center space-y-10">
<motion.h1
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 1 }}
className="text-7xl md:text-[120px] font-serif text-[#1A1A1A] leading-[0.9] tracking-tight uppercase"
>
{dict.about.title}
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="text-[#1A1A1A]/70 text-lg md:text-xl max-w-2xl mx-auto font-medium leading-relaxed italic"
>
{dict.about.subtitle}
</motion.p>
</div>
</section>
{/* STORY & WHY US SECTION */}
<section className="py-24 px-6 md:px-12 max-w-[1400px] mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-start">
{/* Left: Story */}
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
className="lg:col-span-7 space-y-10"
>
<h2 className="text-4xl md:text-5xl font-serif text-[#1A1A1A]">{dict.about.story.title}</h2>
<div className="space-y-8 text-[#1A1A1A]/70 text-lg leading-relaxed italic border-l-2 border-[#C88C4B] pl-8">
<p>{dict.about.story.p1}</p>
<p>{dict.about.story.p2}</p>
</div>
</motion.div>
{/* Right: Why Us Card */}
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
className="lg:col-span-5 bg-white p-10 md:p-12 rounded-[2px] shadow-2xl border border-[#1A1A1A]/5"
>
<h3 className="text-3xl font-serif text-[#1A1A1A] mb-8">{dict.about.why.title}</h3>
<div className="space-y-8">
{whyUs.map((item, idx) => (
<div key={idx} className="flex items-start space-x-4">
<div className="mt-1 bg-[#C88C4B]/10 p-1 rounded-full text-[#C88C4B]">
<Check size={16} />
</div>
<div className="space-y-1">
<p className="font-bold text-[#1A1A1A] text-sm uppercase tracking-wider">{item.title}</p>
<p className="text-[#1A1A1A]/60 text-sm italic">{item.desc}</p>
</div>
</div>
))}
</div>
</motion.div>
</div>
</section>
{/* STATS SECTION */}
<section className="py-24 px-6 md:px-12 max-w-[1400px] mx-auto overflow-hidden">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{stats.map((stat, idx) => (
<motion.div
key={idx}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: idx * 0.1 }}
className="bg-white p-12 text-center space-y-6 rounded-[2px] shadow-sm hover:shadow-xl transition-shadow duration-500 border border-[#1A1A1A]/5 group"
>
<div className="flex justify-center text-[#C88C4B] group-hover:scale-110 transition-transform duration-500">
{stat.icon}
</div>
<div className="space-y-1">
<p className="text-5xl font-serif text-[#1A1A1A]">{stat.value}</p>
<p className="text-[11px] font-bold tracking-[0.3em] uppercase text-[#1A1A1A]/40">{stat.label}</p>
</div>
</motion.div>
))}
</div>
</section>
{/* VISION SECTION */}
<section className="py-32 px-6">
<div className="max-w-4xl mx-auto bg-white p-16 md:p-24 text-center space-y-10 rounded-[2px] shadow-2xl border border-[#1A1A1A]/5">
<motion.h2
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
className="text-[12px] font-bold tracking-[0.5em] uppercase text-[#1A1A1A]/30"
>
{dict.about.vision.title}
</motion.h2>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.2 }}
className="text-2xl md:text-4xl font-serif leading-tight text-[#1A1A1A] italic"
>
{dict.about.vision.text}
</motion.p>
</div>
</section>
</main>
)
}