feat: integrate Cloudinary image upload, Instagram Feed, and fix Next.js warnings
This commit is contained in:
+24
-14
@@ -5,9 +5,18 @@ import { motion } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
import { Sun } from 'lucide-react';
|
||||
|
||||
export default function Beach() {
|
||||
export default function Beach({ dbBeach }: { dbBeach?: any }) {
|
||||
const t = useTranslations('Beach');
|
||||
|
||||
const titleVal = dbBeach?.title || t('title');
|
||||
const descVal = dbBeach?.description || t('description');
|
||||
const resInfoVal = dbBeach?.reservationInfo || t('reservation_info');
|
||||
|
||||
const img1 = dbBeach?.image1 || "https://picsum.photos/400/600?random=10";
|
||||
const img2 = dbBeach?.image2 || "https://picsum.photos/400/400?random=11";
|
||||
const img3 = dbBeach?.image3 || "https://picsum.photos/400/400?random=12";
|
||||
const img4 = dbBeach?.image4 || "https://picsum.photos/400/600?random=13";
|
||||
|
||||
const openWhatsApp = () => {
|
||||
const phone = process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || '905000000000';
|
||||
window.open(
|
||||
@@ -37,19 +46,20 @@ export default function Beach() {
|
||||
>
|
||||
<div className="relative h-64 rounded-2xl overflow-hidden shadow-md">
|
||||
<Image
|
||||
src="https://picsum.photos/400/600?random=10"
|
||||
alt="Plaj"
|
||||
src={img1}
|
||||
alt="Plaj 1"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 50vw, 25vw"
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
className="object-cover hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative h-48 rounded-2xl overflow-hidden shadow-md">
|
||||
<Image
|
||||
src="https://picsum.photos/400/400?random=11"
|
||||
alt="Şezlong"
|
||||
src={img2}
|
||||
alt="Plaj 2"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 50vw, 25vw"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
className="object-cover hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
@@ -64,16 +74,16 @@ export default function Beach() {
|
||||
>
|
||||
<div className="relative h-48 rounded-2xl overflow-hidden shadow-md">
|
||||
<Image
|
||||
src="https://picsum.photos/400/400?random=12"
|
||||
alt="Deniz"
|
||||
src={img3}
|
||||
alt="Plaj 3"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 50vw, 25vw"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
className="object-cover hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative h-64 rounded-2xl overflow-hidden shadow-md">
|
||||
<Image
|
||||
src="https://picsum.photos/400/600?random=13"
|
||||
src={img4}
|
||||
alt="Koy"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 50vw, 25vw"
|
||||
@@ -97,10 +107,10 @@ export default function Beach() {
|
||||
</div>
|
||||
|
||||
<h2 className="font-heading text-5xl md:text-6xl font-black text-midnight leading-tight">
|
||||
{t('title')}
|
||||
{titleVal}
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-midnight/60 leading-relaxed">{t('description')}</p>
|
||||
<p className="text-lg text-midnight/60 leading-relaxed whitespace-pre-wrap">{descVal}</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4 py-6 border-y border-sandy">
|
||||
@@ -114,7 +124,7 @@ export default function Beach() {
|
||||
|
||||
{/* Info & CTA */}
|
||||
<div className="p-6 rounded-2xl bg-sandy/50 border border-sandy">
|
||||
<p className="text-midnight/70 text-sm font-medium mb-5">{t('reservation_info')}</p>
|
||||
<p className="text-midnight/70 text-sm font-medium mb-5">{resInfoVal}</p>
|
||||
<button
|
||||
onClick={openWhatsApp}
|
||||
className="px-8 py-3.5 rounded-full font-black text-sm text-midnight transition-all duration-300 hover:scale-105 hover:shadow-lg"
|
||||
|
||||
Reference in New Issue
Block a user