80 lines
3.0 KiB
TypeScript
80 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
|
|
export default function About({ dict }: { dict: any }) {
|
|
const stats = [
|
|
{ value: "5+", label: dict.about.stats.years },
|
|
{ value: "10K+", label: dict.about.stats.guests },
|
|
{ value: "4.8★", label: dict.about.stats.rating },
|
|
];
|
|
|
|
return (
|
|
<section id="about" className="py-24 bg-sand-light text-sea-dark overflow-hidden">
|
|
<div className="container mx-auto px-6 max-w-6xl">
|
|
<div className="grid md:grid-cols-2 gap-16 items-center">
|
|
|
|
{/* Text side */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 0.8 }}
|
|
className="space-y-6"
|
|
>
|
|
{/* Label with decorative lines */}
|
|
<div className="flex items-center gap-3">
|
|
<span className="w-8 h-px bg-coral" />
|
|
<h2 className="text-sm font-bold tracking-widest uppercase text-coral">{dict.about.title}</h2>
|
|
<span className="w-8 h-px bg-coral" />
|
|
</div>
|
|
|
|
<h3 className="text-4xl md:text-5xl font-serif leading-tight" dangerouslySetInnerHTML={{ __html: dict.about.heading }}></h3>
|
|
|
|
<p className="text-base opacity-75 leading-relaxed">
|
|
{dict.about.p1}
|
|
</p>
|
|
<p className="text-base opacity-75 leading-relaxed">
|
|
{dict.about.p2}
|
|
</p>
|
|
|
|
{/* Stats row */}
|
|
<div className="grid grid-cols-3 gap-6 pt-6 border-t border-sand-dark/40">
|
|
{stats.map((stat) => (
|
|
<div key={stat.label} className="text-center">
|
|
<div className="text-2xl md:text-3xl font-serif font-bold text-sea-dark">{stat.value}</div>
|
|
<div className="text-xs text-gray-500 uppercase tracking-wide mt-1">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Image side */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="relative h-[520px] w-full"
|
|
>
|
|
{/* Shadow shape behind */}
|
|
<div className="absolute inset-0 bg-sand-dark/25 rounded-t-full rounded-br-full transform translate-x-5 translate-y-5" />
|
|
{/* Image clipped to shape */}
|
|
<div className="absolute inset-0 rounded-t-full rounded-br-full overflow-hidden shadow-2xl">
|
|
<Image
|
|
src="https://media.ayris.tech/t/moybeach/moy-beach.jpg"
|
|
alt="Moy Beach Atmosphere"
|
|
fill
|
|
priority
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|