339 lines
20 KiB
TypeScript
339 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { demos } from "@/data/demos";
|
||
import Link from "next/link";
|
||
import { useState } from "react";
|
||
|
||
const fadeUp = {
|
||
hidden: { opacity: 0, y: 30 },
|
||
show: { opacity: 1, y: 0, transition: { duration: 0.65, ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number] } },
|
||
};
|
||
const stagger = { hidden: {}, show: { transition: { staggerChildren: 0.08 } } };
|
||
|
||
const templateLabels: Record<string, { label: string; renk: string }> = {
|
||
klinik: { label: "Klinik & Sağlık", renk: "#0ea5e9" },
|
||
restoran: { label: "Restoran & Kafe", renk: "#f97316" },
|
||
kurumsal: { label: "Kurumsal Çözüm", renk: "#6366f1" },
|
||
dental: { label: "Dental Estetik", renk: "#10B981" },
|
||
restoran2: { label: "Sicilya Trattoria", renk: "#3B82F6" },
|
||
taxi: { label: "Cab Service (Dark)", renk: "#F5C518" },
|
||
taxi2: { label: "Cab Service (Light)", renk: "#E5A900" },
|
||
chatbot: { label: "AI Chatbot / SaaS", renk: "#00E5FF" },
|
||
bar: { label: "Noir Velvet (Gold)", renk: "#D4AF37" },
|
||
bar2: { label: "Chalk & Char (Red)", renk: "#E63946" },
|
||
hotel1: { label: "Luxury Resort (Teal)", renk: "#14B8A6" },
|
||
hotel2: { label: "Bunkhouse Lodge (Sand)", renk: "#D97706" },
|
||
hotel3: { label: "Modernist Villa (Slate)", renk: "#94A3B8" },
|
||
bodrumcerrahi: { label: "Cerrahi Tıp Merkezi", renk: "#1B6FA8" },
|
||
chatbot2: { label: "Zenith AI (SaaS)", renk: "#8B5CF6" },
|
||
};
|
||
|
||
function getTemplateIcon(template: string, color: string) {
|
||
const iconProps = { className: "w-5 h-5", style: { color } };
|
||
|
||
switch(template) {
|
||
case "klinik":
|
||
case "dental":
|
||
return (
|
||
<svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
|
||
</svg>
|
||
);
|
||
case "restoran":
|
||
case "restoran2":
|
||
return (
|
||
<svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
|
||
</svg>
|
||
);
|
||
case "kurumsal":
|
||
return (
|
||
<svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h18v3H3V3Z" />
|
||
</svg>
|
||
);
|
||
case "taxi":
|
||
case "taxi2":
|
||
return (
|
||
<svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h7.5m3 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.5m-1.5-3h-15M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||
</svg>
|
||
);
|
||
case "chatbot":
|
||
case "chatbot2":
|
||
return (
|
||
<svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 0 1-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z" />
|
||
</svg>
|
||
);
|
||
case "bar":
|
||
case "bar2":
|
||
return (
|
||
<svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 22V12m9-9H3l9 9 9-9Z" />
|
||
</svg>
|
||
);
|
||
case "hotel1":
|
||
case "hotel2":
|
||
case "hotel3":
|
||
return (
|
||
<svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
||
</svg>
|
||
);
|
||
default:
|
||
return (
|
||
<svg {...iconProps} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904 9 21l5-2.788L19 21l-.813-5.096L22 12.333l-5.116-.743L15 7l-1.884 4.59L8 12.333l3.813 3.571ZM15 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
|
||
</svg>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default function Home() {
|
||
const demoList = Object.values(demos);
|
||
const [showModal, setShowModal] = useState(false);
|
||
const [brandName, setBrandName] = useState("");
|
||
const [email, setEmail] = useState("");
|
||
|
||
return (
|
||
<main className="min-h-screen bg-[#070913] text-slate-100 overflow-hidden relative selection:bg-indigo-500 selection:text-white pb-16">
|
||
|
||
{/* Premium Ambient Background Mesh */}
|
||
<div className="absolute top-[-10%] left-[-20%] w-[140%] h-[60%] bg-[radial-gradient(ellipse_60%_50%_at_50%_0%,rgba(99,102,241,0.12),rgba(255,255,255,0))] pointer-events-none z-0" />
|
||
<div className="absolute bottom-[10%] right-[-10%] w-[500px] h-[500px] bg-[radial-gradient(circle_at_center,rgba(6,182,212,0.02),transparent_70%)] pointer-events-none z-0" />
|
||
|
||
{/* ── HEADER & SHOWCASE INTRO ── */}
|
||
<section className="relative z-10 px-6 pt-24 pb-16">
|
||
<motion.div
|
||
className="max-w-4xl mx-auto text-center"
|
||
initial="hidden" animate="show" variants={stagger}>
|
||
|
||
<motion.div variants={fadeUp}
|
||
className="inline-flex items-center gap-2.5 text-[10px] font-black uppercase tracking-[2px] px-5 py-2.5 rounded-full mb-8 border border-white/5 bg-white/[0.03] text-indigo-300">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-indigo-400 animate-pulse" />
|
||
AYRIS TECH · DİJİTAL DENEYİM PORTFÖYÜ
|
||
</motion.div>
|
||
|
||
<motion.h1 variants={fadeUp}
|
||
className="text-4xl sm:text-6xl font-black text-white leading-[1.1] tracking-tight mb-8">
|
||
Yüksek Etkileşimli
|
||
<br />
|
||
<span className="bg-gradient-to-r from-indigo-300 via-cyan-300 to-emerald-300 bg-clip-text text-transparent">
|
||
Boutique Şablonlar
|
||
</span>
|
||
</motion.h1>
|
||
|
||
<motion.p variants={fadeUp} className="text-slate-400/80 text-sm sm:text-base leading-relaxed max-w-2xl mx-auto font-medium">
|
||
Sektör lideri markalar için tasarladığımız son derece akıcı, zengin mikro animasyonlu ve yüksek sadakatli dijital arayüz prototiplerimizi aşağıdan canlı olarak deneyimleyin.
|
||
</motion.p>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* ── DYNAMIC EXPERIENCES SHOWCASE GRID ── */}
|
||
<section className="relative z-10 px-6 max-w-7xl mx-auto">
|
||
<motion.div
|
||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
|
||
initial="hidden" animate="show" variants={stagger}>
|
||
|
||
{demoList.map((demo) => {
|
||
const tpl = templateLabels[demo.template] || { label: "Özel Tasarım", renk: "#6366f1" };
|
||
|
||
return (
|
||
<motion.div key={demo.slug} variants={fadeUp}>
|
||
<Link href={`/${demo.slug}`}>
|
||
<motion.div
|
||
className="group relative bg-[#0d111d]/40 border border-white/[0.04] rounded-3xl overflow-hidden cursor-pointer shadow-[0_20px_40px_rgba(0,0,0,0.3)] transition-all duration-300 hover:border-white/[0.12] hover:bg-[#121828]/50"
|
||
whileHover={{ y: -6 }}
|
||
>
|
||
{/* Glowing highlight border on hover */}
|
||
<div
|
||
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-2xl pointer-events-none"
|
||
style={{
|
||
background: `radial-gradient(130px circle at 50% 10%, ${demo.firma.renkAna}15, transparent)`
|
||
}}
|
||
/>
|
||
|
||
{/* Gradient top strip */}
|
||
<div className="h-1.5 w-full transition-all group-hover:h-2"
|
||
style={{ background: `linear-gradient(90deg, ${demo.firma.renkAna}, ${demo.firma.renkKoyu})` }} />
|
||
|
||
<div className="p-7">
|
||
{/* Logo Frame & Label Type */}
|
||
<div className="flex items-center justify-between mb-6">
|
||
<div className="w-12 h-12 rounded-2xl flex items-center justify-center transition-all group-hover:scale-102"
|
||
style={{ background: `${demo.firma.renkAna}12`, border: `1px solid ${demo.firma.renkAna}20` }}>
|
||
{getTemplateIcon(demo.template, demo.firma.renkAna)}
|
||
</div>
|
||
<span className="text-[9px] font-black px-3.5 py-1.5 rounded-full tracking-widest uppercase border border-white/[0.04]"
|
||
style={{ background: `${tpl.renk}10`, color: tpl.renk }}>
|
||
{tpl.label}
|
||
</span>
|
||
</div>
|
||
|
||
<h2 className="font-bold text-white text-lg mb-1.5 group-hover:text-indigo-300 transition-colors uppercase font-sans tracking-wide">{demo.firma.adi}</h2>
|
||
<p className="text-slate-400/50 text-[11px] font-bold tracking-widest uppercase mb-6 flex items-center gap-1.5">
|
||
<svg className="w-3.5 h-3.5 text-indigo-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
|
||
</svg>
|
||
{demo.firma.sehir}
|
||
</p>
|
||
|
||
{/* Stat Dials inside Cards */}
|
||
<div className="grid grid-cols-2 gap-3 mb-8">
|
||
{demo.istatistikler.slice(0, 2).map((s, i) => (
|
||
<div key={i} className="bg-white/[0.01] border border-white/[0.03] rounded-2xl p-4 flex flex-col justify-between h-20 hover:border-white/5 transition-colors">
|
||
<span className="text-slate-400/40 text-[9px] uppercase tracking-widest font-black leading-none block mb-2">{s.etiket.substring(0, 20)}...</span>
|
||
<span className="font-black text-white text-base leading-none block">{s.deger}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Premium CTA Row */}
|
||
<div className="flex items-center justify-between border-t border-white/[0.03] pt-5">
|
||
<span className="text-slate-400/30 text-xs font-mono select-none">/{demo.slug}</span>
|
||
<motion.span
|
||
className="text-[10px] font-black tracking-[2px] uppercase px-5 py-3 rounded-xl flex items-center gap-1.5 transition-all text-white"
|
||
style={{ background: demo.firma.renkAna }}
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}>
|
||
ÖNİZLE
|
||
<svg className="w-3.5 h-3.5 text-white shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
||
</svg>
|
||
</motion.span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</Link>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
|
||
{/* ── CUSTOM INQUIRY REQUEST CARD (CLIENT FACING) ── */}
|
||
<motion.div variants={fadeUp}>
|
||
<div
|
||
onClick={() => setShowModal(true)}
|
||
className="group bg-[#0d111d]/20 border border-dashed border-white/10 rounded-3xl p-8 h-full flex flex-col justify-between min-h-[360px] hover:border-indigo-400/50 hover:bg-[#121828]/30 transition-all cursor-pointer shadow-[0_20px_40px_rgba(0,0,0,0.2)]"
|
||
>
|
||
<div>
|
||
<div className="w-14 h-14 rounded-2xl bg-indigo-500/10 border border-indigo-400/20 flex items-center justify-center mb-6 group-hover:scale-102 transition-transform">
|
||
<svg className="w-6 h-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="font-bold text-white text-lg mb-2 uppercase tracking-wide">Sıradaki Tasarım Sizin Olsun</h3>
|
||
<p className="text-slate-400/60 text-xs leading-relaxed font-semibold">
|
||
Kendi markanız veya projeniz için özel kurgulanmış, zengin mikro animasyonlara ve üst segment görsel kimliğe sahip bir dijital şablon önizlemesi talep edin.
|
||
</p>
|
||
</div>
|
||
|
||
<motion.button
|
||
className="w-full py-4.5 rounded-xl border border-indigo-400/30 bg-indigo-500/5 hover:bg-indigo-500 text-indigo-300 hover:text-white font-black text-[9px] tracking-[2px] uppercase transition-all shadow-md mt-8"
|
||
whileHover={{ scale: 1.01 }}
|
||
>
|
||
ÖZEL KONSEPT TALEP ET
|
||
</motion.button>
|
||
</div>
|
||
</motion.div>
|
||
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* ── MINIMALIST FOOTER ── */}
|
||
<footer className="max-w-7xl mx-auto mt-24 pt-12 border-t border-white/[0.04] px-6 flex flex-col sm:flex-row items-center justify-between gap-6 relative z-10">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-cyan-500 flex items-center justify-center text-xs font-black text-white shadow-md shadow-indigo-500/25">
|
||
A
|
||
</div>
|
||
<span className="text-slate-400/50 text-xs font-bold tracking-wider">AYRIS TECH EXPERIENCES</span>
|
||
</div>
|
||
<a href="https://ayristech.com" target="_blank"
|
||
className="text-slate-400/30 text-xs hover:text-indigo-400 transition-colors font-bold tracking-wider uppercase">
|
||
ayristech.com →
|
||
</a>
|
||
</footer>
|
||
|
||
{/* ── CUSTOM INQUIRY MODAL (CLIENT LEAD GENERATION) ── */}
|
||
<AnimatePresence>
|
||
{showModal && (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/80 backdrop-blur-sm"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
>
|
||
<motion.div
|
||
className="bg-[#0f1322] rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-indigo-400/20 text-white"
|
||
initial={{ scale: 0.95, y: 20 }}
|
||
animate={{ scale: 1, y: 0 }}
|
||
exit={{ scale: 0.95, y: 20 }}
|
||
>
|
||
{/* Close Button */}
|
||
<button
|
||
className="absolute top-6 right-6 w-8 h-8 rounded-full bg-[#070913] border border-white/5 flex items-center justify-center text-white/40 hover:text-indigo-400 hover:border-indigo-400/20 transition-all cursor-pointer font-bold"
|
||
onClick={() => setShowModal(false)}
|
||
>
|
||
✕
|
||
</button>
|
||
|
||
{/* Success Icon */}
|
||
<div className="w-16 h-16 rounded-2xl bg-indigo-500/10 border border-indigo-400/20 flex items-center justify-center mb-6">
|
||
<svg className="w-8 h-8 stroke-indigo-400 fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-.778.099-1.533.284-2.253" />
|
||
</svg>
|
||
</div>
|
||
|
||
<h3 className="font-sans font-black text-white text-2xl mb-1 uppercase tracking-wider">
|
||
Konsept Başvurusu
|
||
</h3>
|
||
<p className="text-indigo-400 font-mono text-[9px] mb-6 uppercase tracking-widest font-black">
|
||
Ayris Tech Design Lab
|
||
</p>
|
||
|
||
{/* Form Fields */}
|
||
<div className="space-y-4 mb-8">
|
||
<div>
|
||
<label className="block text-[9px] font-black text-slate-400/50 mb-1.5 uppercase tracking-widest">Firma Adı</label>
|
||
<input
|
||
type="text"
|
||
value={brandName}
|
||
onChange={(e) => setBrandName(e.target.value)}
|
||
placeholder="Örn. Vestam Wellness"
|
||
className="w-full px-4 py-3 rounded-xl border border-white/5 bg-[#070913] text-xs text-white placeholder-white/20 focus:outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400 transition-all font-semibold"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-[9px] font-black text-slate-400/50 mb-1.5 uppercase tracking-widest">E-Posta Adresi</label>
|
||
<input
|
||
type="email"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
placeholder="you@company.com"
|
||
className="w-full px-4 py-3 rounded-xl border border-white/5 bg-[#070913] text-xs text-white placeholder-white/20 focus:outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400 transition-all font-semibold"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<motion.button
|
||
className="w-full py-4.5 rounded-xl bg-indigo-500 hover:bg-indigo-600 text-white font-bold text-[9px] tracking-[2px] uppercase cursor-pointer shadow-md shadow-indigo-500/15"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
onClick={() => {
|
||
setShowModal(false);
|
||
alert("Başvurunuz başarıyla kaydedildi! En kısa sürede iletişime geçeceğiz.");
|
||
}}
|
||
>
|
||
KONSEPT TALEBİNİ GÖNDER
|
||
</motion.button>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
</main>
|
||
);
|
||
}
|