ss
This commit is contained in:
mstfyldz
@@ -0,0 +1,50 @@
|
||||
import { getDemoBySlug } from "@/data/demos";
|
||||
import KlinikTemplate from "@/components/templates/KlinikTemplate";
|
||||
import RestoranTemplate from "@/components/templates/RestoranTemplate";
|
||||
import KurumsalTemplate from "@/components/templates/KurumsalTemplate";
|
||||
import DentalTemplate from "@/components/templates/DentalTemplate";
|
||||
import RestoranTemplate2 from "@/components/templates/RestoranTemplate2";
|
||||
import TaxiTemplate from "@/components/templates/TaxiTemplate";
|
||||
import TaxiTemplate2 from "@/components/templates/TaxiTemplate2";
|
||||
import ChatbotTemplate from "@/components/templates/ChatbotTemplate";
|
||||
import BarTemplate from "@/components/templates/BarTemplate";
|
||||
import BarTemplate2 from "@/components/templates/BarTemplate2";
|
||||
import HotelTemplate1 from "@/components/templates/HotelTemplate1";
|
||||
import HotelTemplate2 from "@/components/templates/HotelTemplate2";
|
||||
import HotelTemplate3 from "@/components/templates/HotelTemplate3";
|
||||
import BodrumCerrahiTemplate from "@/components/templates/BodrumCerrahiTemplate";
|
||||
import ChatbotTemplate2 from "@/components/templates/ChatbotTemplate2";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
const data = getDemoBySlug(slug);
|
||||
if (!data) return { title: "Demo bulunamadı" };
|
||||
return {
|
||||
title: `${data.firma.adi} — Ayris Tech Demo`,
|
||||
description: data.firma.slogan,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function DemoPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
const data = getDemoBySlug(slug);
|
||||
if (!data) notFound();
|
||||
|
||||
if (data.template === "klinik") return <KlinikTemplate data={data} />;
|
||||
if (data.template === "restoran") return <RestoranTemplate data={data} />;
|
||||
if (data.template === "kurumsal") return <KurumsalTemplate data={data} />;
|
||||
if (data.template === "dental") return <DentalTemplate data={data} />;
|
||||
if (data.template === "restoran2") return <RestoranTemplate2 data={data} />;
|
||||
if (data.template === "taxi") return <TaxiTemplate data={data} />;
|
||||
if (data.template === "taxi2") return <TaxiTemplate2 data={data} />;
|
||||
if (data.template === "chatbot") return <ChatbotTemplate data={data} />;
|
||||
if (data.template === "bar") return <BarTemplate data={data} />;
|
||||
if (data.template === "bar2") return <BarTemplate2 data={data} />;
|
||||
if (data.template === "hotel1") return <HotelTemplate1 data={data} />;
|
||||
if (data.template === "hotel2") return <HotelTemplate2 data={data} />;
|
||||
if (data.template === "hotel3") return <HotelTemplate3 data={data} />;
|
||||
if (data.template === "bodrumcerrahi") return <BodrumCerrahiTemplate data={data} />;
|
||||
if (data.template === "chatbot2") return <ChatbotTemplate2 data={data} />;
|
||||
notFound();
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,4 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
* { scroll-behavior: smooth; }
|
||||
html { scroll-padding-top: 80px; }
|
||||
@@ -0,0 +1,34 @@
|
||||
import type { Metadata } from "next";
|
||||
import Script from "next/script";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Ayris Tech — Demo",
|
||||
description: "Ayris Tech tarafından hazırlanan demo sayfaları",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="tr" className="antialiased">
|
||||
<head>
|
||||
<Script id="perf-measure-patch" strategy="beforeInteractive">
|
||||
{`
|
||||
(function() {
|
||||
if (typeof window !== 'undefined' && window.performance && window.performance.measure) {
|
||||
var _measure = window.performance.measure;
|
||||
window.performance.measure = function() {
|
||||
try {
|
||||
return _measure.apply(window.performance, arguments);
|
||||
} catch (e) {
|
||||
// Silently catch native timing measurement exceptions (e.g. negative timestamps or missing marks)
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
`}
|
||||
</Script>
|
||||
</head>
|
||||
<body className="font-sans">{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
+338
@@ -0,0 +1,338 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user