initial commit: project completion with proper gitignore
This commit is contained in:
AyrisAI
143
components/ServicesGrid.tsx
Normal file
143
components/ServicesGrid.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { getFeaturedServices } from "@/app/actions";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function ServicesGrid() {
|
||||
const [services, setServices] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchServices() {
|
||||
const data = await getFeaturedServices();
|
||||
if (data && data.length > 0) setServices(data);
|
||||
}
|
||||
fetchServices();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="border-t border-black/10">
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12">
|
||||
{/* Grid - Editorial bento layout */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 border-b border-black/10">
|
||||
|
||||
{/* Left large cell with image */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1 }}
|
||||
className="md:col-span-4 border-b md:border-b-0 md:border-r border-black/10 relative overflow-hidden group"
|
||||
>
|
||||
<div className="relative aspect-square md:aspect-auto md:h-full min-h-[400px]">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1473968512647-3e447244af8f?q=80&w=800"
|
||||
alt="Drone çekimi"
|
||||
fill
|
||||
className="object-cover grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right content area */}
|
||||
<div className="md:col-span-8 grid grid-cols-1 md:grid-cols-2">
|
||||
{/* Top-left cell: Services list */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="p-8 md:p-12 border-b border-r border-black/10 flex flex-col justify-between min-h-[200px]"
|
||||
>
|
||||
<div>
|
||||
<span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-6">Hizmetler</span>
|
||||
<div className="space-y-2">
|
||||
{["Sosyal Medya Yönetimi", "Drone Çekimi", "Video Prodüksiyon", "Reklam Yönetimi", "SEO"].map((item) => (
|
||||
<div key={item} className="text-[12px] text-black/60 hover:text-primary transition-colors cursor-pointer">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Top-right cell: Capabilities */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="p-8 md:p-12 border-b border-black/10 flex flex-col justify-between min-h-[200px]"
|
||||
>
|
||||
<div>
|
||||
<span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-6">Çözümler</span>
|
||||
<div className="space-y-2">
|
||||
{["Fotoğraf Çekimi", "Web Tasarım", "Otel Tanıtım", "Düğün Çekimi", "İçerik Üretimi"].map((item) => (
|
||||
<div key={item} className="text-[12px] text-black/60 hover:text-primary transition-colors cursor-pointer">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Bottom-left cell with diagonal */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.6 }}
|
||||
className="p-8 md:p-12 border-r border-black/10 relative cell-diagonal min-h-[200px] flex items-end"
|
||||
>
|
||||
<h3 className="editorial-headline text-2xl md:text-3xl text-black uppercase">
|
||||
Profesyonel<br />
|
||||
Prodüksiyon
|
||||
</h3>
|
||||
</motion.div>
|
||||
|
||||
{/* Bottom-right cell */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.8 }}
|
||||
className="p-8 md:p-12 relative cell-diagonal min-h-[200px] flex items-end"
|
||||
>
|
||||
<h3 className="editorial-headline text-2xl md:text-3xl text-black uppercase">
|
||||
Dijital<br />
|
||||
Pazarlama
|
||||
</h3>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description row */}
|
||||
<div className="py-8 grid grid-cols-1 md:grid-cols-12 gap-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="md:col-span-4 flex items-center"
|
||||
>
|
||||
<p className="text-[12px] text-black/50 leading-relaxed">
|
||||
Drone çekimlerinden sosyal medya yönetimine, markanızın dijitaldeki her ihtiyacını karşılıyoruz.
|
||||
</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="md:col-span-4 md:col-start-9 flex items-center md:justify-end"
|
||||
>
|
||||
<Link href="/services" className="button-primary group">
|
||||
Tüm Hizmetler
|
||||
<span className="group-hover:translate-x-1 transition-transform">→</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user