first commit
This commit is contained in:
58
Dockerfile
Normal file
58
Dockerfile
Normal file
@@ -0,0 +1,58 @@
|
||||
# 1. Base image
|
||||
FROM node:20-alpine AS base
|
||||
|
||||
# 2. Dependencies
|
||||
FROM base AS deps
|
||||
RUN apk add --no-cache libc6-compat
|
||||
WORKDIR /app
|
||||
|
||||
# Install dependencies based on the preferred package manager
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN npm ci --legacy-peer-deps
|
||||
|
||||
|
||||
# 3. Builder
|
||||
FROM base AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
|
||||
# Environment variables must be present at build time for Next.js
|
||||
# Coolify will provide these, but we can set defaults
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
# Generate Prisma Client
|
||||
RUN npx prisma generate
|
||||
|
||||
RUN npm run build
|
||||
|
||||
# 4. Runner
|
||||
FROM base AS runner
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
COPY --from=builder /app/public ./public
|
||||
|
||||
# Set the correct permission for prerender cache
|
||||
RUN mkdir .next
|
||||
RUN chown nextjs:nodejs .next
|
||||
|
||||
# Automatically leverage output traces to reduce image size
|
||||
# https://nextjs.org/docs/advanced-features/output-file-tracing
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
|
||||
USER nextjs
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
ENV PORT=3000
|
||||
# set hostname to localhost
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
23
YONETIM.md
Normal file
23
YONETIM.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# 🏗️ Site Yönetim Kılavuzu
|
||||
|
||||
Bu site, bir admin paneline ihtiyaç duymadan, merkezi bir veri dosyası üzerinden yönetilecek şekilde tasarlanmıştır.
|
||||
|
||||
## 📝 İçerik Nasıl Güncellenir?
|
||||
|
||||
Tüm içerik yönetimi **`lib/data.ts`** dosyası üzerinden yapılır. Bu dosyayı herhangi bir metin düzenleyici ile açarak şu bilgileri güncelleyebilirsiniz:
|
||||
|
||||
### 📞 İletişim Bilgileri
|
||||
`siteConfig` nesnesi altındaki adres, telefon, e-posta ve WhatsApp numaralarını değiştirmeniz yeterlidir.
|
||||
|
||||
### 🏗️ Filo Yönetimi (Araç Ekleme/Çıkarma)
|
||||
`FLEET_ITEMS` listesine yeni bir araç ekleyebilir veya mevcut olanları düzenleyebilirsiniz.
|
||||
- **Örnek:** Yeni bir vinç aldığınızda, listedeki bir öğeyi kopyalayıp altına yapıştırın ve bilgilerini güncelleyin.
|
||||
|
||||
### 🛠️ Hizmetler
|
||||
`SERVICES` listesi altındaki başlıkları ve açıklamaları değiştirerek ana sayfadaki ve hizmetler sayfasındaki kartları güncelleyebilirsiniz.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Dikkat Edilmesi Gerekenler
|
||||
- Bilgileri güncellerken tırnak işaretlerini (`"..."`) ve virgülleri (`,`) silmemeye özen gösterin.
|
||||
- Yeni bir görsel eklemek isterseniz, görselin internet linkini veya `public/` klasöründeki yolunu yazabilirsiniz.
|
||||
123
app/filomuz/page.tsx
Normal file
123
app/filomuz/page.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Footer } from "@/components/Footer";
|
||||
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
|
||||
import { CTASection } from "@/components/CTASection";
|
||||
import { LoadMeterSection } from "@/components/LoadMeterSection";
|
||||
import Image from "next/image";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Metadata } from "next";
|
||||
import { FLEET_ITEMS } from "@/lib/data";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Geniş Vinç Filosu ve İş Makineleri Parkurumuz",
|
||||
description: "300 tondan 500 tona kadar mobil vinçler, sepetli platformlar ve hiyap vinçlerden oluşan modern araç filomuzla hizmetinizdeyiz.",
|
||||
};
|
||||
|
||||
const FLEET_CATEGORIES = ["Hepsi", "Mobil Vinç", "Sepetli Platform", "Hiyap", "Kule Vinç"];
|
||||
|
||||
export default function FleetPage() {
|
||||
return (
|
||||
<main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<header className="relative h-[70vh] flex items-end overflow-hidden bg-surface-container-lowest">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Heavy crane"
|
||||
fill
|
||||
className="object-cover grayscale opacity-60"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>
|
||||
</div>
|
||||
<div className="relative z-10 w-full px-8 pb-16">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<span className="text-primary font-headline font-bold text-sm tracking-[0.3em] uppercase mb-4 block">
|
||||
PREZİSYONEL GÜÇ
|
||||
</span>
|
||||
<h1 className="text-6xl md:text-8xl font-black text-on-surface uppercase tracking-tighter leading-none mb-6">
|
||||
MAKİNE <br/><span className="text-primary">PARKURUMUZ</span>
|
||||
</h1>
|
||||
<div className="w-24 h-2 bg-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Filter System */}
|
||||
<section className="bg-surface-container border-y border-outline-variant/10">
|
||||
<div className="max-w-7xl mx-auto px-8 py-6">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<span className="text-on-surface-variant font-headline text-xs uppercase tracking-widest mr-4">Filtrele:</span>
|
||||
{FLEET_CATEGORIES.map((category, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={cn(
|
||||
"px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all",
|
||||
index === 0
|
||||
? "bg-primary text-on-primary"
|
||||
: "bg-surface-container-highest text-on-surface-variant hover:text-primary"
|
||||
)}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Fleet Grid */}
|
||||
<section className="max-w-7xl mx-auto px-8 py-20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/10">
|
||||
{FLEET_ITEMS.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col"
|
||||
>
|
||||
<div className="aspect-[4/3] overflow-hidden relative">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<div className={cn(
|
||||
"absolute top-4 left-4 px-3 py-1 text-[10px] font-black uppercase tracking-tighter",
|
||||
item.status === "Müsait" ? "bg-primary text-on-primary" : "bg-error text-on-error"
|
||||
)}>
|
||||
{item.status}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-8 flex-1 flex flex-col">
|
||||
<h3 className="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">
|
||||
{item.name}
|
||||
</h3>
|
||||
<p className="text-on-surface-variant text-sm mb-6 font-light">
|
||||
{item.description}
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
|
||||
<div>
|
||||
<span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
|
||||
<span className="text-on-surface font-headline font-bold text-xl">{item.capacity}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
|
||||
<span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300">
|
||||
İncele
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<LoadMeterSection />
|
||||
<CTASection />
|
||||
<Footer />
|
||||
<FloatingWhatsApp />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +1,98 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--background: #131313;
|
||||
--foreground: #E5E2E1;
|
||||
--primary: #FFD700; /* Industrial Yellow */
|
||||
--primary-container: #FFD700;
|
||||
--on-primary: #3A3000;
|
||||
--surface: #131313;
|
||||
--surface-container: #20201F;
|
||||
--surface-container-low: #1C1B1B;
|
||||
--surface-container-high: #2A2A2A;
|
||||
--surface-container-highest: #353535;
|
||||
--surface-container-lowest: #0E0E0E;
|
||||
--on-surface-variant: #D0C6AB;
|
||||
--outline-variant: #4D4732;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-container: var(--primary-container);
|
||||
--color-on-primary: var(--on-primary);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-container: var(--surface-container);
|
||||
--color-surface-container-low: var(--surface-container-low);
|
||||
--color-surface-container-high: var(--surface-container-high);
|
||||
--color-surface-container-highest: var(--surface-container-highest);
|
||||
--color-surface-container-lowest: var(--surface-container-lowest);
|
||||
--color-on-surface-variant: var(--on-surface-variant);
|
||||
--color-outline-variant: var(--outline-variant);
|
||||
|
||||
--font-headline: var(--font-space-grotesk), sans-serif;
|
||||
--font-body: var(--font-inter), sans-serif;
|
||||
--font-label: var(--font-inter), sans-serif;
|
||||
|
||||
--radius-none: 0px;
|
||||
--radius-sm: 0px;
|
||||
--radius-md: 0px;
|
||||
--radius-lg: 0px;
|
||||
--radius-xl: 0px;
|
||||
--radius-2xl: 0px;
|
||||
--radius-3xl: 0px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
--background: #131313;
|
||||
--foreground: #E5E2E1;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: var(--font-body), Arial, Helvetica, sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-headline);
|
||||
}
|
||||
|
||||
.text-stroke {
|
||||
-webkit-text-stroke: 1px rgba(255, 215, 0, 0.3);
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.noise-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
opacity: 0.05;
|
||||
background-image: url("https://grainy-gradients.vercel.app/noise.svg");
|
||||
}
|
||||
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
177
app/hakkimizda/page.tsx
Normal file
177
app/hakkimizda/page.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Footer } from "@/components/Footer";
|
||||
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
|
||||
import { CTASection } from "@/components/CTASection";
|
||||
import Image from "next/image";
|
||||
import { Shield, Zap, Target, Users, Rocket, Eye } from "lucide-react";
|
||||
import { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Hakkımızda | Aydoğan Nakliyat Vinç Kurumsal",
|
||||
description: "20 yılı aşkın tecrübemizle Dalaman ve Muğla bölgesinin lider vinç ve nakliyat firmasıyız. Vizyonumuz, misyonumuz ve profesyonel ekibimiz hakkında bilgi alın.",
|
||||
};
|
||||
|
||||
const VALUES = [
|
||||
{
|
||||
title: "Güvenlik",
|
||||
description: "Sıfır kaza politikasıyla, tüm operasyonlarımızda uluslararası güvenlik standartlarını uyguluyoruz.",
|
||||
icon: <Shield className="w-10 h-10 text-primary" />
|
||||
},
|
||||
{
|
||||
title: "Hız",
|
||||
description: "Zamanın değerini biliyoruz. En karmaşık projeleri bile belirlenen takvim dahilinde tamamlıyoruz.",
|
||||
icon: <Zap className="w-10 h-10 text-primary" />
|
||||
},
|
||||
{
|
||||
title: "Hassasiyet",
|
||||
description: "Milimetrik hesaplamalarla, en değerli yüklerinizi en ufak bir zarar görmeden taşıyoruz.",
|
||||
icon: <Target className="w-10 h-10 text-primary" />
|
||||
},
|
||||
{
|
||||
title: "Müşteri Odaklılık",
|
||||
description: "Her projenin kendine has ihtiyaçları vardır. Size özel esnek ve akılcı çözümler üretiyoruz.",
|
||||
icon: <Users className="w-10 h-10 text-primary" />
|
||||
}
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ label: "Yıllık Tecrübe", value: "20+" },
|
||||
{ label: "Tamamlanan Proje", value: "1500+" },
|
||||
{ label: "Modern Araç Filosu", value: "25+" },
|
||||
{ label: "Maksimum Kapasite", value: "500t" }
|
||||
];
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[60vh] flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Crane at sunset"
|
||||
fill
|
||||
className="object-cover grayscale opacity-60"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-surface/40 to-surface/90"></div>
|
||||
</div>
|
||||
<div className="relative z-10 text-center px-4">
|
||||
<h1 className="text-primary text-6xl md:text-8xl font-headline font-black tracking-tighter uppercase">
|
||||
Hakkımızda
|
||||
</h1>
|
||||
<div className="h-1 w-24 bg-primary mx-auto mt-4 mb-6"></div>
|
||||
<p className="text-on-surface text-lg md:text-xl max-w-2xl mx-auto font-light tracking-wide uppercase">
|
||||
Dalaman'ın güvenilir çözüm ortağı: Tecrübe, güç ve hassasiyetle yükseliyoruz.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Our Story */}
|
||||
<section className="py-24 px-8 md:px-16 bg-surface">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="relative">
|
||||
<div className="absolute -top-4 -left-4 w-24 h-24 border-t-4 border-l-4 border-primary"></div>
|
||||
<div className="relative aspect-[4/3] w-full overflow-hidden">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Crane operation"
|
||||
fill
|
||||
className="object-cover grayscale hover:grayscale-0 transition-all duration-700"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute -bottom-8 -right-8 bg-primary p-8 hidden md:block">
|
||||
<p className="text-on-primary font-headline font-black text-4xl">20+</p>
|
||||
<p className="text-on-primary text-xs uppercase font-bold tracking-widest">Yıllık Tecrübe</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<span className="text-primary font-headline text-sm uppercase tracking-[0.3em]">Kurumsal Kimliğimiz</span>
|
||||
<h2 className="text-4xl md:text-5xl font-headline font-bold text-on-surface leading-none uppercase">
|
||||
Dalaman'ın Gücü, Sizin Güveniniz.
|
||||
</h2>
|
||||
<p className="text-on-surface-variant text-lg leading-relaxed">
|
||||
Aydoğan Nakliyat Vinç olarak, Dalaman ve çevresinde uzun yıllardır güvenilirlik ve tecrübeyle hizmet vermekteyiz. Sektördeki köklü geçmişimizle, her projede en yüksek standartları hedefliyoruz.
|
||||
</p>
|
||||
<p className="text-on-surface-variant text-lg leading-relaxed">
|
||||
Ağır yük nakliyatından hassas vinç operasyonlarına kadar, modern filomuz ve uzman kadromuzla projelerinizin her aşamasında yanınızdayız. Mühendislik odaklı yaklaşımımızla, en zorlu coğrafi koşullarda bile kusursuz hizmet sağlıyoruz.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Core Values */}
|
||||
<section className="py-24 bg-surface-container-low border-y border-outline-variant/10">
|
||||
<div className="max-w-7xl mx-auto px-8 md:px-16">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-headline font-bold text-white uppercase tracking-wider">Temel Değerlerimiz</h2>
|
||||
<div className="w-16 h-1 bg-primary mx-auto mt-4"></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-outline-variant/20">
|
||||
{VALUES.map((value, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary transition-all group"
|
||||
>
|
||||
<div className="mb-6 transition-transform group-hover:scale-110 duration-300">
|
||||
{value.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-headline font-bold text-white mb-3 uppercase tracking-tight">
|
||||
{value.title}
|
||||
</h3>
|
||||
<p className="text-on-surface-variant text-sm leading-relaxed">
|
||||
{value.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mission & Vision */}
|
||||
<section className="py-24 px-8 md:px-16 bg-surface">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20 border border-outline-variant/20">
|
||||
<div className="bg-surface-container-high p-12 lg:p-20">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-12 h-12 bg-primary flex items-center justify-center">
|
||||
<Rocket className="w-6 h-6 text-on-primary" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-headline font-bold text-white uppercase tracking-tight">Misyonumuz</h2>
|
||||
</div>
|
||||
<p className="text-on-surface-variant text-lg leading-relaxed italic">
|
||||
"Modern teknolojiyi geleneksel iş ahlakıyla birleştirerek, Dalaman bölgesindeki altyapı ve inşaat projelerine en güvenilir, en hızlı ve en profesyonel lojistik ve vinç desteğini sağlamak."
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-surface-container-lowest p-12 lg:p-20">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-12 h-12 bg-primary flex items-center justify-center">
|
||||
<Eye className="w-6 h-6 text-on-primary" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-headline font-bold text-white uppercase tracking-tight">Vizyonumuz</h2>
|
||||
</div>
|
||||
<p className="text-on-surface-variant text-lg leading-relaxed">
|
||||
"Sektörde yenilikçi çözümlerimiz ve sarsılmaz güvenilirliğimizle, sadece Dalaman'da değil, tüm Ege ve Akdeniz bölgesinde ağır nakliyat ve vinç hizmetlerinde lider marka olmak."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats */}
|
||||
<section className="py-20 bg-primary">
|
||||
<div className="max-w-7xl mx-auto px-8 md:px-16 flex flex-wrap justify-between gap-12 text-on-primary">
|
||||
{STATS.map((stat, index) => (
|
||||
<div key={index} className="flex flex-col items-center md:items-start">
|
||||
<span className="text-5xl font-headline font-black">{stat.value}</span>
|
||||
<span className="text-xs font-bold uppercase tracking-widest opacity-80">{stat.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CTASection />
|
||||
<Footer />
|
||||
<FloatingWhatsApp />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
170
app/hizmetler/page.tsx
Normal file
170
app/hizmetler/page.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Footer } from "@/components/Footer";
|
||||
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
|
||||
import { CTASection } from "@/components/CTASection";
|
||||
import { Settings, ArrowUp, Truck, Compass, ArrowRight, Shield, Zap, Clock } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Metadata } from "next";
|
||||
import { SERVICES } from "@/lib/data";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Muğla Vinç Kiralama ve Ağır Nakliyat Hizmetleri",
|
||||
description: "Dalaman merkezli 500 tona kadar mobil vinç kiralama, sepetli platform, ağır nakliyat ve proje taşımacılığı. Ege Bölgesi ve Türkiye geneli profesyonel çözümler.",
|
||||
keywords: ["muğla vinç kiralama", "dalaman vinç kiralama", "sepetli platform", "ağır nakliyat muğla", "proje taşımacılığı", "fethiye vinç", "ortaca vinç"],
|
||||
};
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
id: "01",
|
||||
title: "Hassas Mühendislik",
|
||||
description: "Her kaldırma operasyonu için detaylı simülasyon ve planlama.",
|
||||
icon: <Shield className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
id: "02",
|
||||
title: "Sertifikalı Operatörler",
|
||||
description: "Uluslararası standartlarda eğitim almış uzman teknik ekip.",
|
||||
icon: <Zap className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
id: "03",
|
||||
title: "7/24 Teknik Destek",
|
||||
description: "Kesintisiz operasyon için anında müdahale ve destek hizmeti.",
|
||||
icon: <Clock className="w-6 h-6" />
|
||||
}
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ label: "Max Kapasite", value: "500T", highlighted: true },
|
||||
{ label: "Yıllık Deneyim", value: "15+", highlighted: false },
|
||||
{ label: "İş Güvenliği", value: "100%", highlighted: false },
|
||||
{ label: "Aktif Operasyon", value: "24/7", highlighted: true }
|
||||
];
|
||||
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[60vh] flex items-center justify-start overflow-hidden px-8 md:px-16 border-b border-outline-variant/10">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Cranes at sunset"
|
||||
fill
|
||||
className="object-cover opacity-40 grayscale"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-transparent"></div>
|
||||
</div>
|
||||
<div className="relative z-10 max-w-4xl">
|
||||
<p className="text-primary font-headline font-bold tracking-[0.2em] uppercase mb-4 text-sm">
|
||||
Endüstriyel Güç ve Mühendislik Çözümleri
|
||||
</p>
|
||||
<h1 className="text-7xl md:text-9xl font-black font-headline tracking-tighter text-on-surface leading-[0.9] uppercase">
|
||||
Hizmetlerimiz
|
||||
</h1>
|
||||
<div className="mt-8 flex gap-4">
|
||||
<div className="h-1 w-24 bg-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Grid */}
|
||||
<section className="py-24 px-8 md:px-16 bg-surface">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20">
|
||||
{SERVICES.map((service, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden"
|
||||
>
|
||||
<div className="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
|
||||
<div>
|
||||
<div className="mb-8">
|
||||
{index === 0 && <Settings className="w-12 h-12 text-primary" />}
|
||||
{index === 1 && <ArrowUp className="w-12 h-12 text-primary" />}
|
||||
{index === 2 && <Truck className="w-12 h-12 text-primary" />}
|
||||
{index === 3 && <Compass className="w-12 h-12 text-primary" />}
|
||||
</div>
|
||||
<h3 className="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-12">
|
||||
<button className="flex items-center gap-4 bg-primary text-on-primary px-8 py-4 font-headline font-bold uppercase hover:brightness-110 transition-all">
|
||||
Teklif Al
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Subtle Background Image for Card */}
|
||||
<div className="absolute right-0 bottom-0 w-1/2 h-full opacity-5 pointer-events-none grayscale group-hover:opacity-10 transition-opacity">
|
||||
<Image
|
||||
src={service.image}
|
||||
alt={service.title}
|
||||
fill
|
||||
className="object-contain object-right-bottom"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us */}
|
||||
<section className="py-24 px-8 md:px-16 bg-surface-container-lowest border-y border-outline-variant/10">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
||||
<div>
|
||||
<h2 className="text-5xl font-headline font-black uppercase mb-8 leading-tight">
|
||||
Neden AYDOĞAN NAKLİYAT?
|
||||
</h2>
|
||||
<p className="text-on-surface-variant font-body text-xl mb-12 leading-relaxed">
|
||||
Endüstriyel operasyonlarda güvenlik bir seçenek değil, zorunluluktur. Mühendislik odaklı yaklaşımımızla riskleri minimize ediyoruz.
|
||||
</p>
|
||||
<div className="space-y-12">
|
||||
{FEATURES.map((feature) => (
|
||||
<div key={feature.id} className="flex gap-6">
|
||||
<div className="text-primary text-5xl font-black font-headline">{feature.id}</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-headline font-bold uppercase mb-2">{feature.title}</h4>
|
||||
<p className="text-on-surface-variant text-sm">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{STATS.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cn(
|
||||
"bg-surface-container-high p-8 flex flex-col justify-center transition-all hover:translate-y-[-4px]",
|
||||
stat.highlighted && "border-l-4 border-primary"
|
||||
)}
|
||||
>
|
||||
<span className={cn(
|
||||
"text-5xl font-black font-headline mb-2",
|
||||
stat.highlighted ? "text-primary" : "text-on-surface"
|
||||
)}>
|
||||
{stat.value}
|
||||
</span>
|
||||
<span className="text-xs uppercase tracking-widest font-bold opacity-60">
|
||||
{stat.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CTASection />
|
||||
<Footer />
|
||||
<FloatingWhatsApp />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
175
app/iletisim/page.tsx
Normal file
175
app/iletisim/page.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Footer } from "@/components/Footer";
|
||||
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
|
||||
import Image from "next/image";
|
||||
import { MapPin, Phone, Mail, ArrowRight, Navigation } from "lucide-react";
|
||||
import { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "İletişim | Dalaman, Muğla Vinç ve Nakliyat",
|
||||
description: "Aydoğan Nakliyat operasyon merkezine ulaşın. Dalaman Sanayi Sitesi'nde 7/24 hizmet veriyoruz. Teklif almak için bizi arayın.",
|
||||
};
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[40vh] min-h-[300px] flex items-center justify-start px-12 pt-20 overflow-hidden bg-surface-container-lowest">
|
||||
<div className="absolute inset-0 opacity-40 z-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Industrial machinery"
|
||||
fill
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-surface via-surface/80 to-transparent"></div>
|
||||
</div>
|
||||
<div className="relative z-10 max-w-4xl">
|
||||
<h1 className="text-6xl md:text-8xl font-black uppercase tracking-tighter text-on-surface mb-2">
|
||||
İletişim
|
||||
</h1>
|
||||
<div className="h-1 w-24 bg-primary"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="grid grid-cols-1 lg:grid-cols-2 gap-0 min-h-[600px] bg-outline-variant/5">
|
||||
{/* Left Column: Contact Details */}
|
||||
<section className="bg-surface-container p-12 lg:p-24 flex flex-col justify-center">
|
||||
<h2 className="text-3xl font-bold tracking-tighter uppercase mb-12 text-on-surface">Operasyon Merkezi</h2>
|
||||
<div className="space-y-12">
|
||||
{/* Address */}
|
||||
<div className="flex items-start gap-6 group">
|
||||
<div className="bg-surface-container-high p-4 text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
|
||||
<MapPin className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] uppercase tracking-[0.3em] text-on-surface-variant mb-1 font-bold">Adres</p>
|
||||
<p className="text-xl font-medium text-on-surface leading-snug">
|
||||
Merkez Mah. Sanayi Sitesi No: 42<br/>Dalaman / Muğla
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Phone */}
|
||||
<div className="flex items-start gap-6 group">
|
||||
<div className="bg-surface-container-high p-4 text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
|
||||
<Phone className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] uppercase tracking-[0.3em] text-on-surface-variant mb-1 font-bold">Telefon</p>
|
||||
<p className="text-3xl font-black text-on-surface tracking-tighter">
|
||||
+90 252 692 00 00
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Email */}
|
||||
<div className="flex items-start gap-6 group">
|
||||
<div className="bg-surface-container-high p-4 text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
|
||||
<Mail className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] uppercase tracking-[0.3em] text-on-surface-variant mb-1 font-bold">E-Posta</p>
|
||||
<p className="text-xl font-medium text-on-surface">
|
||||
info@aydogannakliyat.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social/Status Indicators */}
|
||||
<div className="mt-20 flex flex-wrap gap-4">
|
||||
<div className="px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-[10px] font-bold uppercase tracking-widest flex items-center gap-2">
|
||||
<span className="w-2 h-2 bg-primary animate-pulse"></span>
|
||||
7/24 Aktif Operasyon
|
||||
</div>
|
||||
<div className="px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-[10px] font-bold uppercase tracking-widest flex items-center gap-2">
|
||||
<span className="w-2 h-2 bg-primary"></span>
|
||||
Muğla & Çevresi
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Right Column: Contact Form */}
|
||||
<section className="bg-surface-container-low p-12 lg:p-24 flex flex-col justify-center border-l border-outline-variant/10">
|
||||
<h2 className="text-3xl font-bold tracking-tighter uppercase mb-8 text-on-surface">Teklif Talebi & Mesaj</h2>
|
||||
<form action="#" className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Adınız Soyadınız</label>
|
||||
<input
|
||||
className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all"
|
||||
placeholder="Ahmet Yılmaz"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">E-Posta</label>
|
||||
<input
|
||||
className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all"
|
||||
placeholder="ahmet@example.com"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Telefon Numarası</label>
|
||||
<input
|
||||
className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all"
|
||||
placeholder="+90 5xx xxx xx xx"
|
||||
type="tel"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Mesajınız / İş Detayları</label>
|
||||
<textarea
|
||||
className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all"
|
||||
placeholder="Taşıma yükü, mesafe ve tarih bilgisi belirtiniz..."
|
||||
rows={4}
|
||||
></textarea>
|
||||
</div>
|
||||
<button
|
||||
className="w-full bg-primary text-on-primary py-5 text-xl font-black uppercase tracking-widest hover:brightness-110 transition-all active:scale-[0.98]"
|
||||
type="submit"
|
||||
>
|
||||
Gönder
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Map Section */}
|
||||
<section className="w-full h-[500px] bg-surface-container-lowest relative overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?q=80&w=2066&auto=format&fit=crop"
|
||||
alt="Dalaman map mockup"
|
||||
fill
|
||||
className="object-cover grayscale contrast-125 brightness-50 opacity-80"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-surface/20"></div>
|
||||
<div className="relative z-10 h-full flex items-center justify-center px-4">
|
||||
<div className="bg-surface p-8 border-l-4 border-primary max-w-sm shadow-2xl">
|
||||
<Navigation className="text-primary w-10 h-10 mb-4" />
|
||||
<h3 className="text-2xl font-black uppercase tracking-tighter text-on-surface mb-2">Lokasyonumuz</h3>
|
||||
<p className="text-on-surface-variant leading-relaxed mb-6 italic text-sm">
|
||||
Dalaman Sanayi Sitesi'nin kalbinde, tüm Ege ve Akdeniz bölgesine hızlı erişim noktasındayız.
|
||||
</p>
|
||||
<a
|
||||
className="text-primary font-bold uppercase tracking-widest text-xs flex items-center gap-2 hover:gap-4 transition-all"
|
||||
href="https://maps.google.com"
|
||||
target="_blank"
|
||||
>
|
||||
Yol Tarifi Al <ArrowRight className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
<FloatingWhatsApp />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,58 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Space_Grotesk, Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { JsonLd } from "@/components/JsonLd";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
const spaceGrotesk = Space_Grotesk({
|
||||
variable: "--font-space-grotesk",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
metadataBase: new URL("https://aydogannakliyatvinc.com"), // Gerçek domain ile değiştirilmeli
|
||||
title: {
|
||||
default: "Aydoğan Nakliyat Vinç | Dalaman, Muğla, Ege Bölgesi",
|
||||
template: "%s | Aydoğan Nakliyat Vinç"
|
||||
},
|
||||
description: "Muğla Dalaman merkezli profesyonel vinç kiralama ve ağır nakliyat hizmetleri. 7/24 tekne taşıma, konteyner nakliyesi ve tüm Türkiye geneli ağır yük çözümleri.",
|
||||
keywords: ["vinç kiralama", "nakliyat", "muğla vinç", "dalaman vinç", "ağır nakliyat", "tekne taşıma", "konteyner taşıma", "ege bölgesi vinç", "türkiye geneli nakliyat"],
|
||||
authors: [{ name: "Aydoğan Nakliyat" }],
|
||||
creator: "Aydoğan Nakliyat",
|
||||
publisher: "Aydoğan Nakliyat",
|
||||
formatDetection: {
|
||||
email: false,
|
||||
address: true,
|
||||
telephone: true,
|
||||
},
|
||||
openGraph: {
|
||||
title: "Aydoğan Nakliyat Vinç | Dalaman, Muğla, Ege Bölgesi",
|
||||
description: "Profesyonel vinç kiralama ve ağır nakliyat hizmetleri. 7/24 güvenilir çözümler.",
|
||||
url: "https://aydogannakliyatvinc.com",
|
||||
siteName: "Aydoğan Nakliyat Vinç",
|
||||
locale: "tr_TR",
|
||||
type: "website",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Aydoğan Nakliyat Vinç | Dalaman, Muğla, Ege Bölgesi",
|
||||
description: "Profesyonel vinç kiralama ve ağır nakliyat hizmetleri.",
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
'max-video-preview': -1,
|
||||
'max-image-preview': 'large',
|
||||
'max-snippet': -1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -24,10 +62,14 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
lang="tr"
|
||||
className={`${spaceGrotesk.variable} ${inter.variable} h-full antialiased dark`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
<body className="min-h-full flex flex-col relative">
|
||||
<JsonLd />
|
||||
<div className="noise-overlay" />
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
86
app/page.tsx
86
app/page.tsx
@@ -1,65 +1,31 @@
|
||||
import Image from "next/image";
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import { Hero } from "@/components/Hero";
|
||||
import { StatsGrid } from "@/components/StatsGrid";
|
||||
import { ServicesPreview } from "@/components/ServicesPreview";
|
||||
import { FleetSection } from "@/components/FleetSection";
|
||||
import { LoadMeterSection } from "@/components/LoadMeterSection";
|
||||
import { CTASection } from "@/components/CTASection";
|
||||
import { Footer } from "@/components/Footer";
|
||||
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
|
||||
import { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Aydoğan Nakliyat Vinç | Dalaman, Muğla Vinç Kiralama",
|
||||
description: "Dalaman ve Muğla genelinde 7/24 vinç kiralama, ağır nakliyat, tekne taşıma ve konteyner nakliyesi. Güçlü filo, uzman kadro ve uygun fiyatlı çözümler.",
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
|
||||
<Navbar />
|
||||
<Hero />
|
||||
<StatsGrid />
|
||||
<ServicesPreview />
|
||||
<FleetSection />
|
||||
<LoadMeterSection />
|
||||
<CTASection />
|
||||
<Footer />
|
||||
<FloatingWhatsApp />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
12
app/robots.ts
Normal file
12
app/robots.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { MetadataRoute } from 'next';
|
||||
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
return {
|
||||
rules: {
|
||||
userAgent: '*',
|
||||
allow: '/',
|
||||
disallow: '/private/',
|
||||
},
|
||||
sitemap: 'https://aydogannakliyatvinc.com/sitemap.xml',
|
||||
};
|
||||
}
|
||||
38
app/sitemap.ts
Normal file
38
app/sitemap.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { MetadataRoute } from 'next';
|
||||
|
||||
export default function sitemap(): MetadataRoute.Sitemap {
|
||||
const baseUrl = 'https://aydogannakliyatvinc.com';
|
||||
|
||||
return [
|
||||
{
|
||||
url: baseUrl,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 1,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/hizmetler`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/filomuz`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.7,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/hakkimizda`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.5,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/iletisim`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: 'monthly',
|
||||
priority: 0.6,
|
||||
},
|
||||
];
|
||||
}
|
||||
67
components/CTASection.tsx
Normal file
67
components/CTASection.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export function CTASection() {
|
||||
return (
|
||||
<section className="relative py-40 px-12 overflow-hidden bg-background" id="Contact">
|
||||
{/* Background Image & Overlay */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
className="w-full h-full object-cover"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfGw5gCmOA1OaPBLY-dOl2wTGviHc5c2Xn05kgak1sHagc64z3vjbl8Ov1KBLQPkoLFdv0ktOtczfX5VEdrujgg8rgBnw40Bzc7Ai836w4QATDFGTdmpO9aHk3s7nLib4yerxLzG1woNJ2SChKlZ831GmYaHOH6NJYOf-N-zjb8Tc2086UpH97RBMUqb7yXw-kdpvj7u-er1ujBxir2hi5WVWKuX_kMdJ-aM-co4c8AfQpo_sO32TcwzB93hhlq6eGc8m23YMoJfU"
|
||||
alt="Construction site at night"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-neutral-900/80 backdrop-blur-sm"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-center max-w-4xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-12 inline-flex items-center gap-4 bg-primary/10 px-6 py-2 border border-primary/20"
|
||||
>
|
||||
<span className="w-2 h-2 bg-primary animate-pulse"></span>
|
||||
<span className="font-label text-[10px] uppercase tracking-widest text-primary font-black">7/24 Acil Müdahale</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="font-headline text-4xl md:text-8xl font-bold text-white mb-8 leading-[0.85] tracking-tighter text-balance"
|
||||
>
|
||||
Sıradaki Büyük Projeniz İçin Hazır mısınız?
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-lg md:text-2xl text-on-surface-variant mb-16 max-w-2xl mx-auto leading-relaxed"
|
||||
>
|
||||
Dalaman ve çevresinde profesyonel vinç ve nakliyat çözümleri için hemen fiyat teklifi alın.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex flex-col md:flex-row gap-0 max-w-2xl mx-auto"
|
||||
>
|
||||
<input
|
||||
className="bg-surface-container-lowest border-none font-headline font-bold uppercase tracking-widest px-10 py-6 text-base w-full focus:ring-0 focus:border-b-4 focus:border-primary outline-none transition-all placeholder:text-white/20"
|
||||
placeholder="Telefon Numaranız"
|
||||
type="text"
|
||||
/>
|
||||
<button className="bg-primary text-on-primary font-headline font-black uppercase tracking-widest px-12 py-6 text-xl hover:brightness-110 active:scale-95 transition-all rounded-none shadow-[10px_10px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none whitespace-nowrap">
|
||||
Sizi Arayalım
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
111
components/FleetSection.tsx
Normal file
111
components/FleetSection.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const VEHICLES = [
|
||||
{
|
||||
title: "Liebherr LTM 1100",
|
||||
category: "Mobil Teleskopik Vinç",
|
||||
specs: [
|
||||
{ label: "Kapasite", value: "100 TON" },
|
||||
{ label: "Bom Uzunluğu", value: "60 METRE" },
|
||||
],
|
||||
status: "Mevcut",
|
||||
statusColor: "bg-primary text-on-primary",
|
||||
image: "https://lh3.googleusercontent.com/aida-public/AB6AXuDz5b4r2KouL9upv0olAupqoFkF2Irw10VTeLh8XSl4F94ujjrHJ6keKViHybvoJlR3RgL-WrvsCYDjKNuVYUdALEH7KEjvZmZm40mxJWzQGN_aFUEllY41CpcYxAmHjiyrkgTKgEh9qZuDQ62Pzi-sffDKM9dv8bNg3YWH-ypFworfKyQiaXgLS0wucMj9LpVlzzl2zXrKv6WTv8hJr986CWoKM8b1mTI8ajgq_2oF9vltwrfrZDT8LYEKtgGSmIM84AAlzqZXwMU",
|
||||
},
|
||||
{
|
||||
title: "Hiyap 75 Ton",
|
||||
category: "Kamyon Üstü Vinç",
|
||||
specs: [
|
||||
{ label: "Kapasite", value: "75 TON" },
|
||||
{ label: "Erişim", value: "35 METRE" },
|
||||
],
|
||||
status: "Mevcut",
|
||||
statusColor: "bg-primary text-on-primary",
|
||||
image: "https://lh3.googleusercontent.com/aida-public/AB6AXuCTUgbJ7VOHrnV2PY8AX4lAxBfdbp3hP7HdMRv4RJsWYQv6_coiWlqlodtyBjta-2PoSZnOXc1pKQHpbZGS9_6VLIUPyZ-sUH15ENiBjf466dq7GpPBHpS1uqFXm44tK_ZJ0okneK2mtHwo5h459sPzZ5iXakBitbs70sI0X86VQm2dePia2r1weEXW6Znhn8pOcB_hwLybrmfyEhr-b47X20UbQrbSFp2WCIGZUv4IsAlgn775KDuQH96BvaSLC56kOZG8Q5S9Tu0",
|
||||
},
|
||||
{
|
||||
title: "Teleskopik Platform",
|
||||
category: "Yüksek İrtifa Erişimi",
|
||||
specs: [
|
||||
{ label: "Yükseklik", value: "45 METRE" },
|
||||
{ label: "Sepet Kapasitesi", value: "300 KG" },
|
||||
],
|
||||
status: "Bakımda",
|
||||
statusColor: "bg-error-container text-white",
|
||||
image: "https://lh3.googleusercontent.com/aida-public/AB6AXuBfXE8_qXbdFXu-5NJjxR_il3lZOkzp6NaLTMMtNr_1_dO0ohKzutRHZLm3Rs3xuwheOE_PUWTDxIavnRfKcdCpASPX9AlxSuZFWaZKax5RWmgLnIBk-ojo_XghFLjC1ES1ACDK-PdB901GE3AxkMj-lWSFkbU8PaUhJ9XxizBHb4BVtvej64-5uXmm9e99Cax1_Xs8_Hm9L7uR8PRX5teGng9Q1gxbGbFCAQw5WG3cZrPESDEbj4osSFEwW8lokMlO0uB9xsaGZxw",
|
||||
},
|
||||
];
|
||||
|
||||
export function FleetSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-surface-container-low overflow-hidden" id="Fleet">
|
||||
<div className="px-6 md:px-12 mb-16 md:mb-24 flex flex-col md:flex-row justify-between items-start md:items-end gap-8">
|
||||
<div>
|
||||
<h2 className="font-headline text-5xl md:text-8xl font-bold tracking-tighter text-stroke uppercase leading-none">Makine Parkuru</h2>
|
||||
<h3 className="font-headline text-3xl md:text-5xl font-bold text-white -mt-4 md:-mt-8">Modern ve Güçlü Filo</h3>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="h-1 w-12 bg-primary"></div>
|
||||
<div className="h-1 w-4 bg-primary/30"></div>
|
||||
<div className="h-1 w-4 bg-primary/30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6 md:gap-12 overflow-x-auto no-scrollbar px-6 md:px-12 pb-12 cursor-grab active:cursor-grabbing">
|
||||
{VEHICLES.map((v, idx) => (
|
||||
<motion.div
|
||||
key={v.title}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: idx * 0.1, duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="min-w-[320px] md:min-w-[500px] bg-surface-container-lowest flex flex-col group shadow-2xl"
|
||||
>
|
||||
<div className="h-64 md:h-96 overflow-hidden relative">
|
||||
<img
|
||||
className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-1000 group-hover:scale-105"
|
||||
src={v.image}
|
||||
alt={v.title}
|
||||
/>
|
||||
<div className={cn("absolute top-0 left-0 px-4 py-2 font-label text-[10px] font-bold uppercase tracking-widest", v.statusColor)}>
|
||||
{v.status}
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-lowest via-transparent to-transparent opacity-60"></div>
|
||||
</div>
|
||||
<div className="p-8 md:p-12">
|
||||
<div className="flex justify-between items-start mb-8">
|
||||
<div>
|
||||
<h4 className="font-headline text-2xl md:text-3xl font-bold text-white mb-2 uppercase tracking-tight">{v.title}</h4>
|
||||
<span className="font-label text-xs text-primary uppercase tracking-[0.2em] font-bold">{v.category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-px bg-outline-variant/20">
|
||||
{v.specs.map(spec => (
|
||||
<div key={spec.label} className="bg-surface-container-lowest p-6 transition-colors hover:bg-surface-container-low">
|
||||
<span className="block font-label text-[10px] text-on-surface-variant uppercase mb-2 tracking-widest">{spec.label}</span>
|
||||
<span className="font-headline font-bold text-xl md:text-2xl text-white">{spec.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="w-full mt-8 py-4 font-headline font-bold uppercase tracking-widest text-xs border border-white/5 hover:bg-white hover:text-black transition-all">
|
||||
Teknik Katalog
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
{/* Visual cue for more items */}
|
||||
<div className="min-w-[100px] flex items-center justify-center">
|
||||
<span className="font-headline text-white/10 text-9xl font-black select-none">NEXT</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 md:px-12 mt-8 flex items-center gap-4">
|
||||
<span className="font-label text-[10px] uppercase tracking-widest text-on-surface-variant">Kaydırarak inceleyin</span>
|
||||
<div className="h-px flex-1 bg-white/5"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
24
components/FloatingWhatsApp.tsx
Normal file
24
components/FloatingWhatsApp.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import { MessageCircle } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export function FloatingWhatsApp() {
|
||||
return (
|
||||
<div className="fixed bottom-6 right-6 md:bottom-10 md:right-10 z-[110]">
|
||||
<motion.a
|
||||
href="https://wa.me/905XXXXXXXXX"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
whileHover={{ x: -4, y: -4 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="bg-[#25D366] text-white w-14 h-14 md:w-20 md:h-20 flex items-center justify-center shadow-[10px_10px_0px_0px_rgba(0,0,0,0.5)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,0.5)] transition-all rounded-none relative group"
|
||||
>
|
||||
<MessageCircle size={32} fill="currentColor" className="text-white md:scale-125" />
|
||||
<span className="absolute right-full mr-4 bg-surface-container-highest text-white px-4 py-2 text-[10px] uppercase tracking-widest font-black opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
|
||||
Hemen Whatsapp'tan Yazın
|
||||
</span>
|
||||
</motion.a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
68
components/Footer.tsx
Normal file
68
components/Footer.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="w-full py-24 px-6 md:px-12 grid grid-cols-1 md:grid-cols-4 gap-12 bg-surface-container-lowest relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent"></div>
|
||||
|
||||
<div className="col-span-1 md:col-span-1">
|
||||
<div className="text-2xl font-black text-white mb-8 tracking-tighter">
|
||||
AYDOĞAN <span className="text-primary">VINÇ</span>
|
||||
</div>
|
||||
<p className="text-on-surface-variant font-label text-[10px] md:text-xs leading-loose uppercase tracking-widest max-w-xs">
|
||||
Ağır sanayi ve inşaat sektöründe güvenin simgesi. Modern ekipmanlarımız ve uzman kadromuzla Dalaman'ın en güçlü ortağıyız.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="md:pl-12">
|
||||
<h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Merkez Ofis</h4>
|
||||
<ul className="space-y-4">
|
||||
<li><span className="text-white font-label text-[10px] uppercase tracking-widest leading-relaxed">Merkez Mah. Sanayi Sitesi No: 42 Dalaman / Muğla</span></li>
|
||||
<li><span className="text-white font-label text-[10px] uppercase tracking-widest">T: +90 252 692 XX XX</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="md:pl-12">
|
||||
<h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Hizmetler</h4>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
{ name: "Mobil Vinç Kiralama", href: "/hizmetler" },
|
||||
{ name: "Sepetli Platform", href: "/hizmetler" },
|
||||
{ name: "Lojistik Çözümleri", href: "/hizmetler" }
|
||||
].map(item => (
|
||||
<li key={item.name}><Link href={item.href} className="text-on-surface-variant hover:text-white transition-colors font-label text-[10px] uppercase tracking-widest">{item.name}</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="md:pl-12">
|
||||
<h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Hızlı Menü</h4>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
{ name: "Hakkımızda", href: "/hakkimizda" },
|
||||
{ name: "Makine Parkuru", href: "/filomuz" },
|
||||
{ name: "İletişim", href: "/iletisim" },
|
||||
{ name: "KVKK", href: "#" }
|
||||
].map(item => (
|
||||
<li key={item.name}><Link href={item.href} className="text-on-surface-variant hover:text-white transition-colors font-label text-[10px] uppercase tracking-widest">{item.name}</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="col-span-full mt-12 pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<span className="text-on-surface-variant/40 font-label text-[10px] uppercase tracking-[0.2em]">© 2024 Aydoğan Nakliyat Vinç. Tüm Hakları Saklıdır.</span>
|
||||
<div className="flex gap-8">
|
||||
<a href="#" className="text-white/40 hover:text-primary transition-colors">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
||||
</a>
|
||||
<a href="#" className="text-white/40 hover:text-primary transition-colors">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
|
||||
</a>
|
||||
<a href="#" className="text-white/40 hover:text-primary transition-colors">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
74
components/Hero.tsx
Normal file
74
components/Hero.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="relative h-screen w-full flex items-center overflow-hidden bg-background">
|
||||
{/* Background Image & Overlay */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
className="w-full h-full object-cover"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCLXU-xpLyEH2Y_iMlpzL1U0DoDchOaBY8PKcSBT2U3v11rmlCAjjeP2-9STqyYMt43TFAM0jM-OZpBGmr0OX46suuzs38u_O-xYRzRHGYy9gFF7VOKIirFizFPLHtGLg8i9xxv30qrQuCfb8zx7DZ4iq04mAPl2uZZIhCtA6dxWSaZxJD4_lj3OZeekkyGVHlO18LQalVXg63CfNEu913EGtwTEEKMclHSCZo2yRRwAB1xnh0R3YBuuiJiUYADnGVKv2G7VD_pAL4"
|
||||
alt="Heavy duty crane in Dalaman"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 px-6 md:px-12 max-w-6xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="mb-8 flex items-center gap-4"
|
||||
>
|
||||
<span className="h-[2px] w-8 md:w-12 bg-primary"></span>
|
||||
<span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold">Dalaman / Muğla</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="font-headline text-[clamp(2.5rem,8vw,5.5rem)] font-bold leading-[0.9] tracking-tighter text-white mb-8 text-balance"
|
||||
>
|
||||
Dalaman’ın Güçlü <br />
|
||||
Çözüm Ortağı: <span className="text-primary">Aydoğan Vinç</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.ul
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 0.5 }}
|
||||
className="space-y-4 mb-16"
|
||||
>
|
||||
{["Ağır Nakliyat", "Sepetli Platform", "Mobil Vinç Kiralama"].map((item, idx) => (
|
||||
<li key={item} className="flex items-center gap-4 group">
|
||||
<span className="w-2 h-2 bg-primary"></span>
|
||||
<span className="font-headline text-lg md:text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors cursor-default">
|
||||
{item}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</motion.ul>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.8 }}
|
||||
className="flex flex-col sm:flex-row gap-4"
|
||||
>
|
||||
<button className="bg-primary text-on-primary px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:brightness-110 transition-all rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.3)] active:shadow-none active:translate-x-[2px] active:translate-y-[2px]">
|
||||
Hizmet Alın
|
||||
</button>
|
||||
<button className="bg-surface-container-high text-white px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:bg-white hover:text-black transition-all rounded-none border-b-2 border-primary/50">
|
||||
Filomuz
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Gradient Texture */}
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-background to-transparent"></div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
69
components/JsonLd.tsx
Normal file
69
components/JsonLd.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
|
||||
export const JsonLd = () => {
|
||||
const businessSchema = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "Aydoğan Nakliyat Vinç",
|
||||
"image": "https://aydogannakliyatvinc.com/logo.png", // Varsa gerçek logo URL'si
|
||||
"@id": "https://aydogannakliyatvinc.com",
|
||||
"url": "https://aydogannakliyatvinc.com",
|
||||
"telephone": "+902526920000",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "Merkez Mah. Sanayi Sitesi No: 42",
|
||||
"addressLocality": "Dalaman",
|
||||
"addressRegion": "Muğla",
|
||||
"postalCode": "48770",
|
||||
"addressCountry": "TR"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": 36.7644,
|
||||
"longitude": 28.8028
|
||||
},
|
||||
"openingHoursSpecification": {
|
||||
"@type": "OpeningHoursSpecification",
|
||||
"dayOfWeek": [
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
"Sunday"
|
||||
],
|
||||
"opens": "00:00",
|
||||
"closes": "23:59"
|
||||
},
|
||||
"sameAs": [
|
||||
"https://www.facebook.com/aydogannakliyatvinc", // Örnek sosyal medya linkleri
|
||||
"https://www.instagram.com/aydogannakliyatvinc"
|
||||
],
|
||||
"areaServed": [
|
||||
{
|
||||
"@type": "City",
|
||||
"name": "Dalaman"
|
||||
},
|
||||
{
|
||||
"@type": "City",
|
||||
"name": "Muğla"
|
||||
},
|
||||
{
|
||||
"@type": "State",
|
||||
"name": "Ege Bölgesi"
|
||||
},
|
||||
{
|
||||
"@type": "Country",
|
||||
"name": "Türkiye"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(businessSchema) }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
49
components/LoadMeterSection.tsx
Normal file
49
components/LoadMeterSection.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const METERS = [
|
||||
{ label: "Ağır Yük Transferi", value: 85 },
|
||||
{ label: "Mobil Vinç Operasyonları", value: 95 },
|
||||
];
|
||||
|
||||
export function LoadMeterSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 px-6 md:px-12 bg-surface flex flex-col items-center">
|
||||
<div className="w-full max-w-5xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16 md:mb-24"
|
||||
>
|
||||
<span className="font-label text-xs uppercase tracking-[0.3em] text-primary font-bold mb-4 block">Operasyonel Güç</span>
|
||||
<h3 className="font-headline text-3xl md:text-5xl font-bold uppercase tracking-tight text-white text-balance leading-none">Projeleriniz İçin Optimum Güç Hesabı</h3>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
|
||||
{METERS.map((m, idx) => (
|
||||
<div key={m.label} className="flex flex-col">
|
||||
<div className="flex justify-between font-label text-[10px] md:text-xs uppercase tracking-[0.2em] mb-6 font-bold">
|
||||
<span className="text-white/60">{m.label}</span>
|
||||
<span className="text-primary">{m.value}% Verimlilik</span>
|
||||
</div>
|
||||
<div className="h-4 md:h-6 w-full bg-surface-container-highest relative overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
whileInView={{ width: `${m.value}%` }}
|
||||
transition={{ duration: 1.5, delay: idx * 0.3, ease: "circOut" }}
|
||||
viewport={{ once: true }}
|
||||
className="h-full bg-primary relative"
|
||||
>
|
||||
<div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_75%,transparent_75%,transparent)] bg-[length:20px_20px]"></div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<p className="mt-4 text-xs text-on-surface-variant font-body leading-relaxed max-w-xs uppercase tracking-tighter">Sektör standartlarının üzerinde performans ve güvenlik marjı.</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
116
components/Navbar.tsx
Normal file
116
components/Navbar.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const NAV_LINKS = [
|
||||
{ name: "Hizmetler", href: "/hizmetler" },
|
||||
{ name: "Filomuz", href: "/filomuz" },
|
||||
{ name: "Hakkımızda", href: "/hakkimizda" },
|
||||
{ name: "İletişim", href: "/iletisim" },
|
||||
];
|
||||
|
||||
export function Navbar() {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={cn(
|
||||
"fixed top-0 left-0 w-full z-[100] flex justify-between items-center px-6 md:px-12 py-6 transition-all duration-300",
|
||||
isScrolled
|
||||
? "bg-surface-container-lowest/80 backdrop-blur-xl border-b border-outline-variant/15"
|
||||
: "bg-transparent"
|
||||
)}
|
||||
>
|
||||
{/* Logo */}
|
||||
<Link href="/" className="text-xl md:text-2xl font-black tracking-tighter text-primary">
|
||||
AYDOĞAN <span className="text-white">NAKLİYAT</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Links */}
|
||||
<div className="hidden md:flex items-center gap-12">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="font-headline uppercase tracking-widest text-xs font-bold text-white/60 hover:text-primary transition-all duration-300"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<button className="bg-primary-container text-on-primary px-8 py-3 font-headline font-bold uppercase tracking-widest text-xs hover:brightness-110 active:scale-95 transition-all rounded-none ring-offset-2 focus:ring-2 focus:ring-primary">
|
||||
Teklif Alın
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Toggle */}
|
||||
<button
|
||||
className="md:hidden text-white focus:outline-none p-2"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label="Menu toggle"
|
||||
>
|
||||
{mobileMenuOpen ? <X size={32} /> : <Menu size={32} />}
|
||||
</button>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
<AnimatePresence>
|
||||
{mobileMenuOpen && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/60 backdrop-blur-md md:hidden z-[-1]"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ x: "100%" }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: "100%" }}
|
||||
transition={{ type: "spring", damping: 25, stiffness: 200 }}
|
||||
className="fixed top-0 right-0 h-screen w-[85%] bg-surface-container-highest flex flex-col p-12 md:hidden shadow-2xl z-[101]"
|
||||
>
|
||||
<div className="flex justify-between items-center mb-16">
|
||||
<span className="font-headline font-black text-xl text-primary">MENÜ</span>
|
||||
<button onClick={() => setMobileMenuOpen(false)}>
|
||||
<X size={32} className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-10">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="font-headline text-3xl font-bold text-white uppercase tracking-tighter hover:text-primary transition-colors"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
))}
|
||||
<button className="mt-10 bg-primary-container text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none transition-all">
|
||||
Hızlı Teklif
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
92
components/ServicesPreview.tsx
Normal file
92
components/ServicesPreview.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Hammer, Truck, Building2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const SERVICES = [
|
||||
{
|
||||
id: "01",
|
||||
title: "Mobil Vinç",
|
||||
description: "Hızlı kurulum ve yüksek hareket kabiliyeti ile şantiye alanlarında esnek çözümler.",
|
||||
icon: Hammer,
|
||||
bg: "bg-surface-container",
|
||||
},
|
||||
{
|
||||
id: "02",
|
||||
title: "Ağır Nakliyat",
|
||||
description: "Standart dışı ölçülere sahip yüklerin özel ekipmanlarla güvenli taşımacılığı.",
|
||||
icon: Truck,
|
||||
bg: "bg-surface-container-high",
|
||||
},
|
||||
{
|
||||
id: "03",
|
||||
title: "Sepetli Platform",
|
||||
description: "Yüksek irtifa çalışmalarında personel güvenliğini ön plana çıkaran ekipmanlar.",
|
||||
icon: Building2,
|
||||
bg: "bg-surface-container-highest",
|
||||
},
|
||||
];
|
||||
|
||||
export function ServicesPreview() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 px-6 md:px-12 bg-surface" id="Services">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-16 md:mb-24 gap-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold mb-4 block">Hizmetlerimiz</span>
|
||||
<h2 className="font-headline text-4xl md:text-7xl font-bold tracking-tighter text-white leading-[0.9] text-balance">Yükünüz Ne Olursa Olsun, Güç Bizim İşimiz.</h2>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-left md:text-right"
|
||||
>
|
||||
<p className="text-on-surface-variant font-body text-base md:text-lg max-w-sm">Mühendislik temelli yaklaşımımızla en zorlu projelerinizde profesyonel destek sağlıyoruz.</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3">
|
||||
{SERVICES.map((service, index) => (
|
||||
<motion.div
|
||||
key={service.title}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.1, duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className={cn(
|
||||
"group relative aspect-square overflow-hidden p-8 md:p-16 transition-all duration-500",
|
||||
service.bg
|
||||
)}
|
||||
>
|
||||
<div className="relative z-10 h-full flex flex-col justify-between">
|
||||
<service.icon className="w-12 h-12 md:w-16 md:h-16 text-primary group-hover:scale-110 transition-transform duration-500" strokeWidth={1} />
|
||||
<div>
|
||||
<h3 className="font-headline text-2xl md:text-4xl font-bold mb-4 uppercase leading-none">{service.title}</h3>
|
||||
<p className="text-on-surface-variant text-sm md:text-base leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Number Background */}
|
||||
<div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity pointer-events-none">
|
||||
<span className="font-headline text-[12rem] font-black leading-none">{service.id}</span>
|
||||
</div>
|
||||
|
||||
{/* Hover Overlay */}
|
||||
<div className="absolute inset-0 bg-primary translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex flex-col items-center justify-center gap-6 p-8">
|
||||
<p className="text-on-primary text-center font-body font-medium leading-tight">Profesyonel operasyonel destek ve kiralama seçenekleri için.</p>
|
||||
<button className="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8 hover:tracking-widest transition-all">
|
||||
Detaylar
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
35
components/StatsGrid.tsx
Normal file
35
components/StatsGrid.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const STATS = [
|
||||
{ label: "Maksimum Kapasite", value: "150T" },
|
||||
{ label: "Teknik Destek", value: "24/7" },
|
||||
{ label: "Modern Filo", value: "15+" },
|
||||
{ label: "Güvenlik Kaydı", value: "100%" },
|
||||
];
|
||||
|
||||
export function StatsGrid() {
|
||||
return (
|
||||
<section className="grid grid-cols-2 md:grid-cols-4 bg-surface-container-lowest">
|
||||
{STATS.map((stat, idx) => (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.1, duration: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
className={cn(
|
||||
"p-8 md:p-16 flex flex-col justify-center transition-colors hover:bg-surface-container-low group",
|
||||
idx % 2 === 0 ? "bg-surface-container-lowest" : "bg-surface-container/30"
|
||||
)}
|
||||
>
|
||||
<span className="text-primary font-headline text-4xl md:text-6xl font-black mb-2 group-hover:scale-105 transition-transform origin-left">{stat.value}</span>
|
||||
<span className="font-label text-[10px] md:text-xs uppercase tracking-[0.2em] text-on-surface-variant font-bold">{stat.label}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
64
design/DESIGN.md
Normal file
64
design/DESIGN.md
Normal file
@@ -0,0 +1,64 @@
|
||||
# Design System Strategy: Industrial Precision
|
||||
|
||||
## 1. Overview & Creative North Star: "The Kinetic Monolith"
|
||||
The heavy lifting industry is defined by the intersection of massive scale and surgical precision. This design system moves away from the "cluttered construction" aesthetic, opting instead for **The Kinetic Monolith**. This North Star envisions the UI as a series of heavy, interlocking structural slabs—imposing, stable, and powerful—yet animated with a modern, high-tech fluidity.
|
||||
|
||||
To break the "standard corporate template" look, we utilize **Hard-Edge Brutalism** mixed with **Editorial Sophistication**. We embrace zero-radius corners (0px) to mimic the sharp cut of steel beams, and we leverage extreme typographic scales to command authority. This is not just a rental service; it is an engineering power-house.
|
||||
|
||||
---
|
||||
|
||||
## 2. Colors: High-Contrast Industrialism
|
||||
Our palette is rooted in the high-visibility world of heavy machinery. We use contrast not just for accessibility, but as a structural tool.
|
||||
|
||||
* **Primary (Industrial Yellow - #FFD700):** This is our "Action Signal." Use `primary_container` (#FFD700) for high-priority CTAs and `primary_fixed_dim` (#E9C400) for interactive states. It represents the crane, the caution, and the energy.
|
||||
* **Surface Foundation (Deep Charcoal - #131313):** We avoid pure pitch black in favor of `surface` (#131313) to allow for depth.
|
||||
* **The "No-Line" Rule:** Direct intervention: **No 1px solid borders.** To separate a fleet category from a service description, shift the background from `surface` to `surface_container_low`. Boundaries are felt through tonal shifts, not drawn with lines.
|
||||
* **Surface Hierarchy & Nesting:** Treat the layout as an assembly line.
|
||||
* Main Page: `surface`
|
||||
* Structural Sections: `surface_container`
|
||||
* Interactive Cards: `surface_container_high`
|
||||
* **Signature Textures:** For hero sections, apply a subtle 10% opacity noise grain or a linear gradient from `surface` to `surface_container_highest` to mimic the matte finish of powder-coated steel.
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography: The Engineering Scale
|
||||
We use typography to convey weight. Our choices reflect the blueprint and the brand’s industrial backbone.
|
||||
|
||||
* **Display & Headlines (Space Grotesk):** A geometric sans-serif with a mechanical soul. The wide apertures and "tech" feel of Space Grotesk suggest precision. Use `display-lg` (3.5rem) with tight letter-spacing (-0.02em) for hero headlines to create a "wall of text" effect that feels immovable.
|
||||
* **Body & Labels (Inter):** The "Workhorse." Inter provides a neutral, highly legible contrast to the aggressive display type. Use `body-lg` for technical specifications and `label-sm` (uppercase with 0.05em tracking) for metadata like "Crane Capacity" or "Job Site Location."
|
||||
* **Visual Hierarchy:** Headlines should always be `on_surface` or `primary`. Body text should utilize `on_surface_variant` (#D0C6AB) to reduce visual noise in long technical descriptions.
|
||||
|
||||
---
|
||||
|
||||
## 4. Elevation & Depth: Tonal Layering
|
||||
In a world of 0px border radii, traditional shadows feel out of place. We achieve depth through **Structural Stacking**.
|
||||
|
||||
* **The Layering Principle:** Instead of lifting an object off the page, we "carve" it into the interface. A "Heavy Lift" service card should be `surface_container_lowest` (#0E0E0E) nested within a `surface_container` (#20201F) section. This creates a recessed, high-end "machined" look.
|
||||
* **The "Ghost Border" Fallback:** Where separation is critical for accessibility, use `outline_variant` at 15% opacity. It should be felt as a subtle change in light, not a hard edge.
|
||||
* **Glassmorphism & Depth:** For navigation bars or floating action menus, use `surface_bright` at 70% opacity with a `40px` backdrop blur. This keeps the "Industrial Yellow" of the primary content visible as it scrolls beneath, maintaining brand energy throughout the journey.
|
||||
|
||||
---
|
||||
|
||||
## 5. Components: The Machined Toolkit
|
||||
|
||||
* **Buttons:**
|
||||
* **Primary:** `primary_container` (#FFD700) background, `on_primary` (#3A3000) text. **0px border radius.** Hover state: `primary_fixed_dim`.
|
||||
* **Secondary:** `surface_container_highest` background, `primary` text. This looks like a dark steel plate with yellow engraving.
|
||||
* **Heavy Duty Cards:** No dividers. Separate the "Header" of the card from the "Body" by using a `surface_container_high` top section and a `surface_container` bottom section.
|
||||
* **Input Fields:** Use `surface_container_lowest` for the field background with a `primary` 2px bottom-only border on focus. This mimics the "underlined" look of technical architectural drawings.
|
||||
* **Fleet Status Chips:** Use `tertiary_container` (Cyan/Teal) for "Available" and `error_container` for "In Maintenance." These should be rectangular, sharp, and high-contrast.
|
||||
* **The "Load Meter":** A custom component for this industry. A thick horizontal bar using `primary_container` to show crane capacity usage, set against a `surface_container_highest` track.
|
||||
|
||||
---
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
### Do:
|
||||
* **Do** use intentional asymmetry. Align heavy text blocks to the left and allow large "crane-arm" imagery to break the grid and bleed off the right edge of the screen.
|
||||
* **Do** use "Extreme Contrast." Pair a `display-lg` headline with a `label-sm` sub-headline for an editorial, high-end feel.
|
||||
* **Do** use `primary` (Yellow) sparingly as a spotlight. If everything is yellow, nothing is important.
|
||||
|
||||
### Don't:
|
||||
* **Don't** use rounded corners. Everything must be 0px. Softness contradicts the brand’s "Robust and Reliable" personality.
|
||||
* **Don't** use standard 1px grey dividers. Use white space or a background color shift of 2–3% to define sections.
|
||||
* **Don't** use generic stock photography. Use high-contrast, desaturated imagery of machinery with "Industrial Yellow" accents highlighted.
|
||||
350
design/filo_aydo_an_nakliyat_vin/code.html
Normal file
350
design/filo_aydo_an_nakliyat_vin/code.html
Normal file
@@ -0,0 +1,350 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="tr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>MAKİNE PARKURUMUZ | TITAN CRANE</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary-container": "#ffd700",
|
||||
"primary-fixed-dim": "#e9c400",
|
||||
"outline-variant": "#4d4732",
|
||||
"error-container": "#93000a",
|
||||
"error": "#ffb4ab",
|
||||
"on-secondary-container": "#b4b5b5",
|
||||
"on-secondary-fixed": "#1a1c1c",
|
||||
"on-error-container": "#ffdad6",
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"tertiary-fixed-dim": "#00dbe8",
|
||||
"surface-variant": "#353535",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"surface": "#131313",
|
||||
"secondary-fixed": "#e2e2e2",
|
||||
"on-secondary-fixed-variant": "#454747",
|
||||
"surface-container-highest": "#353535",
|
||||
"inverse-primary": "#705d00",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"primary": "#fff6df",
|
||||
"secondary-fixed-dim": "#c6c6c7",
|
||||
"outline": "#999077",
|
||||
"on-surface": "#e5e2e1",
|
||||
"surface-bright": "#393939",
|
||||
"surface-dim": "#131313",
|
||||
"background": "#131313",
|
||||
"secondary": "#c6c6c7",
|
||||
"on-error": "#690005",
|
||||
"on-tertiary": "#00363a",
|
||||
"on-background": "#e5e2e1",
|
||||
"on-tertiary-container": "#006a70",
|
||||
"on-primary-fixed": "#221b00",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"on-primary": "#3a3000",
|
||||
"primary-fixed": "#ffe16d",
|
||||
"on-primary-container": "#705e00",
|
||||
"surface-container": "#20201f",
|
||||
"tertiary": "#defcff",
|
||||
"on-secondary": "#2f3131",
|
||||
"tertiary-container": "#00f1ff",
|
||||
"secondary-container": "#454747",
|
||||
"on-tertiary-fixed": "#002022",
|
||||
"inverse-on-surface": "#313030",
|
||||
"surface-tint": "#e9c400",
|
||||
"on-primary-fixed-variant": "#544600",
|
||||
"on-surface-variant": "#d0c6ab",
|
||||
"tertiary-fixed": "#79f5ff",
|
||||
"on-tertiary-fixed-variant": "#004f54"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0px",
|
||||
"lg": "0px",
|
||||
"xl": "0px",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Space Grotesk"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #131313;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
h1, h2, h3, .font-headline {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
.grain-texture {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
opacity: 0.05;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-on-surface">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 w-full z-50 rounded-none bg-[#131313]/70 backdrop-blur-xl flex justify-between items-center px-8 py-4 w-full max-w-full">
|
||||
<div class="text-2xl font-black text-[#FFD700] tracking-tighter uppercase font-headline">TITAN CRANE</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a class="text-[#FFD700] border-b-2 border-[#FFD700] pb-1 font-space-grotesk uppercase tracking-tighter text-sm" href="#">Fleet</a>
|
||||
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors font-space-grotesk uppercase tracking-tighter text-sm" href="#">Services</a>
|
||||
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors font-space-grotesk uppercase tracking-tighter text-sm" href="#">Safety</a>
|
||||
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors font-space-grotesk uppercase tracking-tighter text-sm" href="#">Projects</a>
|
||||
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors font-space-grotesk uppercase tracking-tighter text-sm" href="#">Locations</a>
|
||||
</div>
|
||||
<button class="bg-primary-container text-on-primary px-6 py-2 font-bold uppercase text-xs tracking-widest active:scale-95 transition-transform hover:bg-[#E9C400]">
|
||||
Request a Quote
|
||||
</button>
|
||||
</nav>
|
||||
<!-- Hero Section -->
|
||||
<header class="relative h-[716px] flex items-end overflow-hidden bg-surface-container-lowest">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img class="w-full h-full object-cover grayscale opacity-60" data-alt="Massive yellow mobile crane against a dark dramatic sky with high contrast industrial lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCvyLR2euo0fVVJkD-pAUW5zCbh36Xhb1cSRdpfUNDLDM6DmaXORj2DONfF1VoGVkBnNh4uRcvCKTWsTVFYWn6Sw_KeBLJXICZZFUNpOfL0gild7ZnBMjDkR0PEzcvETXmR8vxVOsgJX_d44GkU3iMgOqQoHcYuxckCgAwIsPKKrKDRh0t4bI2MHtD4ndwtEmNqfDmALm3p-3dV6I-4ZSFifLniBhyJ5KkYAV4f3wHxbhn7JiJ_20b3KFvYCnYA7nCBNinlPnpl6pw"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>
|
||||
</div>
|
||||
<div class="relative z-10 w-full px-8 pb-16">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<span class="text-primary-container font-label text-sm tracking-[0.3em] uppercase mb-4 block">PRESIZONEL GÜÇ</span>
|
||||
<h1 class="text-6xl md:text-8xl font-black text-on-surface uppercase tracking-tighter leading-none mb-6">
|
||||
MAKİNE <br/><span class="text-primary-container">PARKURUMUZ</span>
|
||||
</h1>
|
||||
<div class="w-24 h-2 bg-primary-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grain-texture absolute inset-0 pointer-events-none"></div>
|
||||
</header>
|
||||
<!-- Filter System -->
|
||||
<section class="bg-surface-container border-y border-outline-variant/10">
|
||||
<div class="max-w-7xl mx-auto px-8 py-6">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<span class="text-on-surface-variant font-label text-xs uppercase tracking-widest mr-4">Filtrele:</span>
|
||||
<button class="bg-primary-container text-on-primary px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all">Hepsi</button>
|
||||
<button class="bg-surface-container-highest text-on-surface-variant hover:text-primary-container px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all">Mobil Vinç</button>
|
||||
<button class="bg-surface-container-highest text-on-surface-variant hover:text-primary-container px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all">Sepetli Platform</button>
|
||||
<button class="bg-surface-container-highest text-on-surface-variant hover:text-primary-container px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all">Hiyap</button>
|
||||
<button class="bg-surface-container-highest text-on-surface-variant hover:text-primary-container px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all">Kule Vinç</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Fleet Grid -->
|
||||
<main class="max-w-7xl mx-auto px-8 py-20">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1">
|
||||
<!-- Card 1 -->
|
||||
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
|
||||
<div class="aspect-[4/3] overflow-hidden relative">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Modern yellow mobile crane telescopic boom extending against industrial backdrop" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDW0yUd90QJSDeEWjis8tC8BkjXiWlSkY00JYzv9G7TwcoFYkaIYTpUck4XVO2OiMtKwW1-wUCy5J8Kj5UlhEw01bLPfiVxjb9FHBa2ObodH0ComQfNNBjvrbtVwBP9M4M5qrRCn3PrLOaKOYy2x61IIkcFnJD5JtW_N1bfooX_PAu9KJ5v7QAe9E22C0A-L_h_R9GKbhoPwoIkBaeKw4Bs-FjKZN1BD_U6j-0PON5OfVabv-NzpXdHeGvJBe0rqj6rUpDL5o4_SG0"/>
|
||||
<div class="absolute top-4 left-4 bg-primary-container text-on-primary px-3 py-1 text-[10px] font-black uppercase tracking-tighter">Müsait</div>
|
||||
</div>
|
||||
<div class="p-8 flex-1 flex flex-col">
|
||||
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Liebherr LTM 1300</h3>
|
||||
<p class="text-on-surface-variant text-sm mb-6 font-light">Endüstriyel ağır kaldırma operasyonları için maksimum stabilite ve erişim gücü.</p>
|
||||
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">300 Ton</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Bom Boyu</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">78 Metre</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
|
||||
İncele
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
|
||||
<div class="aspect-[4/3] overflow-hidden relative">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Heavy duty truck mounted crane parked in industrial warehouse lot" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD1rvUBmDiCZcwh4MCEpjG2qF9o-Fc4Hz_L3MrEufnrnv46lExtWOk76OA6ui1jglnvFSOEMB7MCdt2X8zEC4T719Kq17e-6_K5h-XQmfj2mJjw4m48b4ZZ15VeuF1ZPXrEe7NqvJ5c7siwOdV-mgBqIqG3ycICi09GZ0zU1Fn91q_s8YwenDl6t8vOB6KMN0H2nDRTwmC54lw3jL5nW2qvLDVidbB8kbsR-n2Irc9RUaymcg9kxj4q2rITVjCqVCxek7LB4DHcFtE"/>
|
||||
<div class="absolute top-4 left-4 bg-tertiary-container text-on-tertiary px-3 py-1 text-[10px] font-black uppercase tracking-tighter">Bakımda</div>
|
||||
</div>
|
||||
<div class="p-8 flex-1 flex flex-col">
|
||||
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Hiyap 75 Ton</h3>
|
||||
<p class="text-on-surface-variant text-sm mb-6 font-light">Şehir içi dar alanlarda yüksek manevra kabiliyeti ve pratik yükleme çözümü.</p>
|
||||
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">75 Ton</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Bom Boyu</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">32 Metre</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
|
||||
İncele
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
|
||||
<div class="aspect-[4/3] overflow-hidden relative">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Yellow aerial platform lift extended high into the air against a blue sky" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAi-Q4h-JrRWfnROwByq5pf-yrdbV8MIB9RTkcdaVTEhjA2BVBlYiBW-Z2F9aD3D8ygfEbb_KR6eDr9ZsWmlRAkUs_Gm2Ux33h2rms_iRjn_bM_yCCz230UrB9Sy0utqUI66mGTgIQNvFdYBP3vLtRYui48ZZJOUPGqaHrnb-zn3npSV0dZsgT313suK0IAUPSvCsOstC6eXIf-EHdv3zfqcnnp3vMpKx6f-FdMEAbuWretxr9K1SeuVICkQWliGSlo2uDjG3S_vWM"/>
|
||||
<div class="absolute top-4 left-4 bg-primary-container text-on-primary px-3 py-1 text-[10px] font-black uppercase tracking-tighter">Müsait</div>
|
||||
</div>
|
||||
<div class="p-8 flex-1 flex flex-col">
|
||||
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Sepetli Platform 45M</h3>
|
||||
<p class="text-on-surface-variant text-sm mb-6 font-light">Yüksek irtifa montaj ve bakım çalışmaları için güvenli çalışma sahası.</p>
|
||||
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">450 Kg</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Yükseklik</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">45 Metre</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
|
||||
İncele
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4 -->
|
||||
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
|
||||
<div class="aspect-[4/3] overflow-hidden relative">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Heavy duty all-terrain mobile crane with yellow chassis on a construction site" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2XvHmZb4DIEfnkB7faNLimT5zC12Ux1ML8WsQk7zNuo-z7Iyav0u1YBmZ8RTIWGyAxPVlM_dahw5Y1wXYdXBHjc8o4n1mY2T5rFQ9AexyhJZZwkuhq3bfAcDv6b23Fz2idusXu5_e-xSMwJrmqzqOiX_IfnoP7YFkfvYr-6iQwCSyi_Ha0Q4OFl4nHTabSp8IqFMymL-61yygmH7UJDOSgmhP1gromESI9ZLfI8YoMqAQHGYVDayD44nNLyR6_ziuNc5fb1Bttkg"/>
|
||||
</div>
|
||||
<div class="p-8 flex-1 flex flex-col">
|
||||
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Groove GMK 6300</h3>
|
||||
<p class="text-on-surface-variant text-sm mb-6 font-light">Zorlu arazi koşullarında üstün performans sunan ağır sınıf mobil vinç.</p>
|
||||
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">300 Ton</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Bom Boyu</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">80 Metre</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
|
||||
İncele
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 5 -->
|
||||
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
|
||||
<div class="aspect-[4/3] overflow-hidden relative">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Yellow industrial crane boom and cables detail against a grey overcast sky" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDN7cNjdslGdfC328kuBjhiTN2f9xbE_KEv7d-3TmDzvwVUinf_XRpRc0ZWsXbIsrqIhknNB1TFYBFq_0uFxplE9XJo26TABtJF_GBDLzap33ysKQ23V7kVOEUZ-B3D2OphMIDPKVrGQMGkRI68peJ0cHaQVaPURs51uFwpazcn26brK-KeWkWLXUclY-Vp3CSXKnypnRnTxgY16JDL6ON8d-v3kvDn_c3Lf6EdYJeBoSWbUkzC62boQR2qgcfGeWHTnnUeKcMKvck"/>
|
||||
</div>
|
||||
<div class="p-8 flex-1 flex flex-col">
|
||||
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Manitou MT 1840</h3>
|
||||
<p class="text-on-surface-variant text-sm mb-6 font-light">Teleskopik yükleyici ile şantiye içi malzeme taşıma ve yükleme çözümleri.</p>
|
||||
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">4 Ton</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Yükseklik</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">18 Metre</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
|
||||
İncele
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 6 -->
|
||||
<div class="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col">
|
||||
<div class="aspect-[4/3] overflow-hidden relative">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" data-alt="Giant tower crane components assembly at a major construction infrastructure project" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfokNl49gClI2o2IfZuf6cDESoZL2vluhuMXHzuSlIepJVIWqXCFyLhF1jKMQ-YEWx7YhI76AnlCRjGBs-6zZuBqeZNdzr3bXAW3_ikytHbgYgDC9YJDhjJTvFHfecTXdaraq9m6wT1x1qr17lbsA2O2gYsU33ds261WouhAaHWD_4mXKqoURMM3YriKE-Bn4EUTM2-AgU4g4KtuvHjOzG3vzjOzmvtBlEH77Qc_9MKBE9qKesxE0wHxsLtrbrcfmO2okGtEf5gAE"/>
|
||||
</div>
|
||||
<div class="p-8 flex-1 flex flex-col">
|
||||
<h3 class="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">Kule Vinç T-Serisi</h3>
|
||||
<p class="text-on-surface-variant text-sm mb-6 font-light">Geniş kapsama alanı ve yüksek kaldırma performansı ile uzun vadeli projeler.</p>
|
||||
<div class="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">12 Ton</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-primary-container text-[10px] uppercase tracking-widest mb-1">Yarıçap</span>
|
||||
<span class="text-on-surface font-headline font-bold text-xl">60 Metre</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-8 w-full bg-surface-container-highest text-primary-container py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary-container hover:text-on-primary transition-all duration-300">
|
||||
İncele
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Load Meter Component - Custom Component from Design System -->
|
||||
<section class="max-w-7xl mx-auto px-8 mb-20">
|
||||
<div class="bg-surface-container p-12 relative overflow-hidden">
|
||||
<div class="relative z-10 grid md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-4xl font-black text-on-surface uppercase tracking-tighter mb-4">HAFTALIK PARKUR <span class="text-primary-container">DOLULUK ORANI</span></h2>
|
||||
<p class="text-on-surface-variant text-sm uppercase tracking-widest">Şu anki aktif çalışma kapasitemiz ve müsaitlik durumu.</p>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div class="flex justify-between text-[10px] font-bold uppercase tracking-widest mb-2">
|
||||
<span>Ağır Sınıf Mobil Vinçler</span>
|
||||
<span class="text-primary-container">85% Dolu</span>
|
||||
</div>
|
||||
<div class="h-4 bg-surface-container-highest w-full">
|
||||
<div class="h-full bg-primary-container" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-[10px] font-bold uppercase tracking-widest mb-2">
|
||||
<span>Sepetli Platformlar</span>
|
||||
<span class="text-primary-container">40% Dolu</span>
|
||||
</div>
|
||||
<div class="h-4 bg-surface-container-highest w-full">
|
||||
<div class="h-full bg-primary-container" style="width: 40%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grain-texture absolute inset-0 pointer-events-none"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Call to Action -->
|
||||
<section class="bg-primary-container py-24 text-center">
|
||||
<div class="max-w-4xl mx-auto px-8">
|
||||
<h2 class="text-5xl md:text-7xl font-black text-on-primary uppercase tracking-tighter mb-8 leading-none">PROJENİZ İÇİN <br/>EN GÜÇLÜ ÇÖZÜM</h2>
|
||||
<p class="text-on-primary text-lg mb-12 font-medium opacity-80">Uzman operatör kadromuz ve teknolojik makine parkurumuzla 7/24 hizmetinizdeyiz.</p>
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<button class="bg-on-primary text-primary-container px-12 py-5 font-black uppercase text-sm tracking-widest hover:bg-surface-container-lowest transition-all">HEMEN TEKLİF AL</button>
|
||||
<button class="border-2 border-on-primary text-on-primary px-12 py-5 font-black uppercase text-sm tracking-widest hover:bg-on-primary hover:text-primary-container transition-all">KATALOĞU İNDİR</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#0E0E0E] w-full rounded-none border-t border-[#FFD700]/10 flex flex-col md:flex-row justify-between items-center px-8 py-12 w-full">
|
||||
<div class="mb-8 md:mb-0">
|
||||
<div class="text-[#FFD700] font-black text-2xl tracking-tighter mb-2 uppercase font-headline">TITAN HEAVY LIFT</div>
|
||||
<p class="text-[#D0C6AB]/60 font-inter text-xs tracking-widest uppercase">© 2024 TITAN HEAVY LIFT. ALL RIGHTS RESERVED.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-8">
|
||||
<a class="text-[#D0C6AB]/60 hover:text-[#FFD700] transition-colors font-inter text-xs tracking-widest uppercase" href="#">Terms of Service</a>
|
||||
<a class="text-[#D0C6AB]/60 hover:text-[#FFD700] transition-colors font-inter text-xs tracking-widest uppercase" href="#">Privacy Policy</a>
|
||||
<a class="text-[#D0C6AB]/60 hover:text-[#FFD700] transition-colors font-inter text-xs tracking-widest uppercase" href="#">Fleet Specifications</a>
|
||||
<a class="text-[#D0C6AB]/60 hover:text-[#FFD700] transition-colors font-inter text-xs tracking-widest uppercase" href="#">Operator Portal</a>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Floating WhatsApp -->
|
||||
<a class="fixed bottom-8 right-8 z-[100] bg-[#25D366] text-white p-4 shadow-2xl flex items-center justify-center transition-transform hover:scale-110 active:scale-95" href="https://wa.me/900000000000">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewbox="0 0 24 24">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</body></html>
|
||||
BIN
design/filo_aydo_an_nakliyat_vin/screen.png
Normal file
BIN
design/filo_aydo_an_nakliyat_vin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 777 KiB |
297
design/hakk_m_zda_aydo_an_nakliyat_vin/code.html
Normal file
297
design/hakk_m_zda_aydo_an_nakliyat_vin/code.html
Normal file
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="tr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Hakkımızda | Aydoğan Nakliyat</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary-fixed-dim": "#e9c400",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"on-primary-fixed-variant": "#544600",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"primary": "#fff6df",
|
||||
"on-surface-variant": "#d0c6ab",
|
||||
"surface-tint": "#e9c400",
|
||||
"on-secondary": "#2f3131",
|
||||
"tertiary": "#defcff",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"on-primary-fixed": "#221b00",
|
||||
"surface-container-highest": "#353535",
|
||||
"on-surface": "#e5e2e1",
|
||||
"surface-dim": "#131313",
|
||||
"error-container": "#93000a",
|
||||
"inverse-primary": "#705d00",
|
||||
"primary-container": "#ffd700",
|
||||
"on-primary": "#3a3000",
|
||||
"background": "#131313",
|
||||
"surface-container": "#20201f",
|
||||
"surface": "#131313",
|
||||
"outline-variant": "#4d4732"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0px",
|
||||
"lg": "0px",
|
||||
"xl": "0px",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Space Grotesk", "sans-serif"],
|
||||
"body": ["Inter", "sans-serif"],
|
||||
"label": ["Inter", "sans-serif"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #131313;
|
||||
color: #e5e2e1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body">
|
||||
<!-- Shared Header -->
|
||||
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-outline-variant px-6 lg:px-20 py-4 bg-surface sticky top-0 z-50">
|
||||
<div class="flex items-center gap-4 text-white">
|
||||
<div class="size-8 text-primary-container">
|
||||
<svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path clip-rule="evenodd" d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z" fill="currentColor" fill-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-white text-xl font-headline font-bold leading-tight tracking-[-0.015em]">Aydoğan Nakliyat</h2>
|
||||
</div>
|
||||
<div class="hidden md:flex flex-1 justify-end gap-8">
|
||||
<nav class="flex items-center gap-9">
|
||||
<a class="text-white text-sm font-medium hover:text-primary-container transition-colors" href="#">Anasayfa</a>
|
||||
<a class="text-white text-sm font-medium hover:text-primary-container transition-colors" href="#">Hizmetler</a>
|
||||
<a class="text-white text-sm font-medium hover:text-primary-container transition-colors" href="#">Galeri</a>
|
||||
<a class="text-white text-sm font-medium hover:text-primary-container transition-colors" href="#">İletişim</a>
|
||||
</nav>
|
||||
<button class="flex items-center justify-center bg-surface-container-highest text-white px-4 py-2 hover:bg-primary-container hover:text-on-primary transition-all">
|
||||
<span class="material-symbols-outlined mr-2" data-icon="phone">phone</span>
|
||||
<span class="text-sm font-bold">Hemen Ara</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[614px] min-h-[400px] flex items-center justify-center overflow-hidden">
|
||||
<div class="absolute inset-0 bg-cover bg-center z-0" data-alt="Heavy industrial crane towering against a dramatic sunset sky at a construction site with sharp steel textures and golden lighting" style="background-image: linear-gradient(to bottom, rgba(19, 19, 19, 0.4), rgba(19, 19, 19, 0.9)), url('https://lh3.googleusercontent.com/aida-public/AB6AXuDgXwx1ScSKzThcSZVBFwN2BfXUpbEFYwOgbCkAXqa4hzIeOQRxqMHjyzUIMv0C7EmaDkB7J4CF5mJ8SBTZLJ91xh_wxkyNpzz53jpwiygithDN0XoMXWrhddNaK2byvFVuhqiHmEMoOvoqq1s0I9TAq4IVB9gWhQvf76BPuUy6BHSm-ly6tFv4NxoFbr5r_oauFVge63qLtA6XBwV-jtNe_Dqt4HR8Mktf5ECW_6PjSQCFrtSu3h4PF3VfTWKGjxfbkak2qbNTYnA');">
|
||||
</div>
|
||||
<div class="relative z-10 text-center px-4">
|
||||
<h1 class="text-primary-container text-6xl md:text-8xl font-headline font-black tracking-tighter uppercase">
|
||||
Hakkımızda
|
||||
</h1>
|
||||
<div class="h-1 w-24 bg-primary-container mx-auto mt-4 mb-6"></div>
|
||||
<p class="text-on-surface text-lg md:text-xl max-w-2xl mx-auto font-light tracking-wide">
|
||||
Dalaman'ın güvenilir çözüm ortağı: Tecrübe, güç ve hassasiyetle yükseliyoruz.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Our Story -->
|
||||
<section class="py-20 px-6 lg:px-20 bg-surface">
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="relative">
|
||||
<div class="absolute -top-4 -left-4 w-24 h-24 border-t-4 border-l-4 border-primary-container"></div>
|
||||
<img alt="Our Story" class="grayscale hover:grayscale-0 transition-all duration-700" data-alt="Wide angle shot of a large yellow heavy-duty crane parked at an industrial site in Dalaman with mountain background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzBYFgesJhpqzuW-5vjLXy989WMZa7pD-d3JQJTOGKzaJ5YiXNYLSMY3aAByWjMgfuSYT5d5lqSaMObGYU2Yo6eyWgIrajXeSRzOJ9uqzLgt7Ui4Ssl_pmcGKjzqA3zYFm1Q-HHdevkymKLOID80gM69nTigSgqvbADDs5lmMH5I0ws9n7mskTpCooZslypTrss6hE-MNWmRnnFK492nXC9DS-F3yKDmI1B-sVuNgtwK1X-jS01uPyz_X2eo1QoQ6rX5EOU1vsHSk"/>
|
||||
<div class="absolute -bottom-8 -right-8 bg-primary-container p-8 hidden md:block">
|
||||
<p class="text-on-primary font-headline font-black text-4xl">20+</p>
|
||||
<p class="text-on-primary text-xs uppercase font-bold tracking-widest">Yıllık Tecrübe</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-6">
|
||||
<span class="text-primary-container font-label text-sm uppercase tracking-[0.3em]">Kurumsal Kimliğimiz</span>
|
||||
<h2 class="text-4xl md:text-5xl font-headline font-bold text-on-surface leading-none">Dalaman'ın Gücü, Sizin Güveniniz.</h2>
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed">
|
||||
Aydoğan Nakliyat Vinç olarak, Dalaman ve çevresinde uzun yıllardır güvenilirlik ve tecrübeyle hizmet vermekteyiz. Sektördeki köklü geçmişimizle, her projede en yüksek standartları hedefliyoruz.
|
||||
</p>
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed">
|
||||
Ağır yük nakliyatından hassas vinç operasyonlarına kadar, modern filomuz ve uzman kadromuzla projelerinizin her aşamasında yanınızdayız. Mühendislik odaklı yaklaşımımızla, en zorlu coğrafi koşullarda bile kusursuz hizmet sağlıyoruz.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Core Values -->
|
||||
<section class="py-20 bg-surface-container-low border-y border-outline-variant">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-20">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl font-headline font-bold text-white uppercase tracking-wider">Temel Değerlerimiz</h2>
|
||||
<div class="w-16 h-1 bg-primary-container mx-auto mt-4"></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Value 1 -->
|
||||
<div class="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary-container transition-all">
|
||||
<span class="material-symbols-outlined text-primary-container text-4xl mb-6" data-icon="security">security</span>
|
||||
<h3 class="text-xl font-headline font-bold text-white mb-3">Güvenlik</h3>
|
||||
<p class="text-on-surface-variant text-sm">Sıfır kaza politikasıyla, tüm operasyonlarımızda uluslararası güvenlik standartlarını uyguluyoruz.</p>
|
||||
</div>
|
||||
<!-- Value 2 -->
|
||||
<div class="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary-container transition-all">
|
||||
<span class="material-symbols-outlined text-primary-container text-4xl mb-6" data-icon="speed">speed</span>
|
||||
<h3 class="text-xl font-headline font-bold text-white mb-3">Hız</h3>
|
||||
<p class="text-on-surface-variant text-sm">Zamanın değerini biliyoruz. En karmaşık projeleri bile belirlenen takvim dahilinde tamamlıyoruz.</p>
|
||||
</div>
|
||||
<!-- Value 3 -->
|
||||
<div class="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary-container transition-all">
|
||||
<span class="material-symbols-outlined text-primary-container text-4xl mb-6" data-icon="precision_manufacturing">precision_manufacturing</span>
|
||||
<h3 class="text-xl font-headline font-bold text-white mb-3">Hassasiyet</h3>
|
||||
<p class="text-on-surface-variant text-sm">Milimetrik hesaplamalarla, en değerli yüklerinizi en ufak bir zarar görmeden taşıyoruz.</p>
|
||||
</div>
|
||||
<!-- Value 4 -->
|
||||
<div class="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary-container transition-all">
|
||||
<span class="material-symbols-outlined text-primary-container text-4xl mb-6" data-icon="group">group</span>
|
||||
<h3 class="text-xl font-headline font-bold text-white mb-3">Müşteri Odaklılık</h3>
|
||||
<p class="text-on-surface-variant text-sm">Her projenin kendine has ihtiyaçları vardır. Size özel esnek ve akılcı çözümler üretiyoruz.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Mission & Vision -->
|
||||
<section class="py-20 px-6 lg:px-20 bg-surface">
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant border border-outline-variant">
|
||||
<div class="bg-surface-container-high p-12 lg:p-20">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-primary" data-icon="rocket_launch">rocket_launch</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-headline font-bold text-white uppercase tracking-tight">Misyonumuz</h2>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed italic">
|
||||
"Modern teknolojiyi geleneksel iş ahlakıyla birleştirerek, Dalaman bölgesindeki altyapı ve inşaat projelerine en güvenilir, en hızlı ve en profesyonel lojistik ve vinç desteğini sağlamak."
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-12 lg:p-20">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-primary-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-primary" data-icon="visibility">visibility</span>
|
||||
</div>
|
||||
<h2 class="text-3xl font-headline font-bold text-white uppercase tracking-tight">Vizyonumuz</h2>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed">
|
||||
"Sektörde yenilikçi çözümlerimiz ve sarsılmaz güvenilirliğimizle, sadece Dalaman'da değil, tüm Ege ve Akdeniz bölgesinde ağır nakliyat ve vinç hizmetlerinde lider marka olmak."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Stats -->
|
||||
<section class="py-16 bg-primary-container">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-20 flex flex-wrap justify-between gap-12 text-on-primary">
|
||||
<div class="flex flex-col items-center md:items-start">
|
||||
<span class="text-5xl font-headline font-black">20+</span>
|
||||
<span class="text-xs font-bold uppercase tracking-widest opacity-80">Yıllık Tecrübe</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center md:items-start">
|
||||
<span class="text-5xl font-headline font-black">1500+</span>
|
||||
<span class="text-xs font-bold uppercase tracking-widest opacity-80">Tamamlanan Proje</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center md:items-start">
|
||||
<span class="text-5xl font-headline font-black">25+</span>
|
||||
<span class="text-xs font-bold uppercase tracking-widest opacity-80">Modern Araç Filosu</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center md:items-start">
|
||||
<span class="text-5xl font-headline font-black">500t</span>
|
||||
<span class="text-xs font-bold uppercase tracking-widest opacity-80">Maksimum Kaldırma Kapasitesi</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Call to Action -->
|
||||
<section class="relative py-24 px-6 lg:px-20 overflow-hidden bg-surface-container-lowest">
|
||||
<div class="absolute right-0 top-0 h-full w-1/3 opacity-20 hidden lg:block">
|
||||
<img class="h-full w-full object-cover" data-alt="Technical close-up of heavy industrial gears and steel chains from a crane system with industrial yellow highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA_ZX-fbwQbf9kIEKnJnFtu5NQ363H44RdCxqVhdpgIUb0jKFxAqO6uKqCDRQ7qS49Sd7Kwt8VTe_lzV0ZEHkJJnL767brwA1lticCl17-MHc78XDvJhCZjD6r6oLqhTgut5U9LvjXY0UjD3VH0HPo7_MLdK45SnTu3nqQ7Y11hqTwxxyWaqzmT0qKiYbIs0ryfiebNF9wu4JaIE_pWilEt7JiwhZNWb1jcZWCn1FDrAskjvDf2ioo-CD1mk7vXVcKI4_DhUvcqXP8"/>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto relative z-10">
|
||||
<div class="max-w-2xl">
|
||||
<h2 class="text-4xl md:text-6xl font-headline font-black text-white leading-tight mb-8">
|
||||
BÜYÜK PROJELER, <span class="text-primary-container">GÜÇLÜ ÇÖZÜMLER</span> İSTER.
|
||||
</h2>
|
||||
<p class="text-on-surface-variant text-xl mb-10">
|
||||
Sizin için en uygun vinç ve nakliyat çözümünü birlikte planlayalım. Projenizin detaylarını paylaşın, profesyonel teklifimizi sunalım.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<button class="bg-primary-container text-on-primary px-10 py-5 font-headline font-bold text-lg hover:bg-white transition-all">
|
||||
Teklif İste
|
||||
</button>
|
||||
<button class="border-2 border-primary-container text-primary-container px-10 py-5 font-headline font-bold text-lg hover:bg-primary-container hover:text-on-primary transition-all">
|
||||
Hizmetlerimiz
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-surface-container-low border-t border-outline-variant pt-20 pb-10">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-20">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<div class="size-6 text-primary-container">
|
||||
<svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xl font-headline font-bold text-white">Aydoğan Nakliyat</span>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-sm leading-relaxed mb-6">
|
||||
Dalaman ve çevresinde profesyonel vinç ve nakliyat çözümleri sunuyoruz. Tecrübemizle yükünüzü hafifletiyoruz.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-white font-headline font-bold mb-6 uppercase text-sm tracking-widest">Hızlı Bağlantılar</h4>
|
||||
<ul class="flex flex-col gap-3">
|
||||
<li><a class="text-on-surface-variant hover:text-primary-container text-sm transition-colors" href="#">Anasayfa</a></li>
|
||||
<li><a class="text-on-surface-variant hover:text-primary-container text-sm transition-colors" href="#">Hizmetlerimiz</a></li>
|
||||
<li><a class="text-on-surface-variant hover:text-primary-container text-sm transition-colors" href="#">Galeri</a></li>
|
||||
<li><a class="text-on-surface-variant hover:text-primary-container text-sm transition-colors" href="#">Hakkımızda</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-white font-headline font-bold mb-6 uppercase text-sm tracking-widest">İletişim Bilgileri</h4>
|
||||
<ul class="flex flex-col gap-4 text-on-surface-variant text-sm">
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="location_on">location_on</span>
|
||||
<span>Dalaman, Muğla, Türkiye</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="call">call</span>
|
||||
<span>+90 (5XX) XXX XX XX</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="mail">mail</span>
|
||||
<span>info@aydogannakliyat.com</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-white font-headline font-bold mb-6 uppercase text-sm tracking-widest">Çalışma Saatleri</h4>
|
||||
<ul class="flex flex-col gap-3 text-on-surface-variant text-sm">
|
||||
<li class="flex justify-between"><span>Pazartesi - Cumartesi:</span> <span>08:00 - 19:00</span></li>
|
||||
<li class="flex justify-between"><span>Pazar:</span> <span class="text-primary-container">Acil Durum</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-20 border-t border-outline-variant pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-on-surface-variant font-medium">
|
||||
<p>© 2024 Aydoğan Nakliyat Vinç. Tüm Hakları Saklıdır.</p>
|
||||
<div class="flex gap-6">
|
||||
<a class="hover:text-primary-container" href="#">Gizlilik Politikası</a>
|
||||
<a class="hover:text-primary-container" href="#">KVKK</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- WhatsApp Floating Icon -->
|
||||
<a class="fixed bottom-8 right-8 z-[100] bg-[#25D366] text-white p-4 rounded-full shadow-2xl hover:scale-110 transition-transform flex items-center justify-center" href="https://wa.me/905000000000" target="_blank">
|
||||
<svg fill="currentColor" height="32" viewbox="0 0 448 512" width="32" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.7 17.8 69.7 27.2 106.2 27.2 122.4 0 222-99.6 222-222 0-59.3-23-115.1-65-157.1zM223.9 445.9c-33.1 0-65.4-8.9-93.6-25.7l-6.7-4-69.6 18.3 18.6-67.9-4.4-7c-18.4-29.4-28.1-63.3-28.1-98.2 0-101.7 82.8-184.5 184.5-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.7-186.6 184.7zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-5.5-2.8-23.2-8.5-44.2-27.1-16.4-14.6-27.4-32.7-30.6-38.2-3.2-5.6-.3-8.6 2.4-11.3 2.5-2.5 5.5-6.5 8.3-9.7 2.8-3.3 3.7-5.6 5.6-9.3 1.9-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 13.2 5.8 23.5 9.2 31.5 11.8 13.3 4.2 25.4 3.6 35 2.2 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</body></html>
|
||||
BIN
design/hakk_m_zda_aydo_an_nakliyat_vin/screen.png
Normal file
BIN
design/hakk_m_zda_aydo_an_nakliyat_vin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
291
design/hizmetlerimiz_aydo_an_nakliyat_vin/code.html
Normal file
291
design/hizmetlerimiz_aydo_an_nakliyat_vin/code.html
Normal file
@@ -0,0 +1,291 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="tr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary": "#3a3000",
|
||||
"background": "#131313",
|
||||
"error": "#ffb4ab",
|
||||
"outline": "#999077",
|
||||
"secondary-container": "#454747",
|
||||
"on-error-container": "#ffdad6",
|
||||
"surface-container": "#20201f",
|
||||
"secondary-fixed-dim": "#c6c6c7",
|
||||
"primary-container": "#ffd700",
|
||||
"secondary": "#c6c6c7",
|
||||
"on-tertiary-fixed-variant": "#004f54",
|
||||
"on-secondary-fixed-variant": "#454747",
|
||||
"tertiary-fixed-dim": "#00dbe8",
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"tertiary-fixed": "#79f5ff",
|
||||
"tertiary-container": "#00f1ff",
|
||||
"inverse-on-surface": "#313030",
|
||||
"secondary-fixed": "#e2e2e2",
|
||||
"surface-bright": "#393939",
|
||||
"on-error": "#690005",
|
||||
"on-background": "#e5e2e1",
|
||||
"surface": "#131313",
|
||||
"on-tertiary": "#00363a",
|
||||
"outline-variant": "#4d4732",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"primary-fixed-dim": "#e9c400",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"on-primary-fixed-variant": "#544600",
|
||||
"primary": "#fff6df",
|
||||
"on-surface-variant": "#d0c6ab",
|
||||
"surface-tint": "#e9c400",
|
||||
"on-secondary": "#2f3131",
|
||||
"tertiary": "#defcff",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"surface-variant": "#353535",
|
||||
"on-primary-fixed": "#221b00",
|
||||
"on-tertiary-fixed": "#002022",
|
||||
"on-primary-container": "#705e00",
|
||||
"on-tertiary-container": "#006a70",
|
||||
"on-surface": "#e5e2e1",
|
||||
"surface-dim": "#131313",
|
||||
"error-container": "#93000a",
|
||||
"inverse-primary": "#705d00",
|
||||
"surface-container-highest": "#353535",
|
||||
"on-secondary-fixed": "#1a1c1c",
|
||||
"primary-fixed": "#ffe16d",
|
||||
"on-secondary-container": "#b4b5b5"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0px",
|
||||
"lg": "0px",
|
||||
"xl": "0px",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Space Grotesk"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>.material-symbols-outlined {
|
||||
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24
|
||||
}
|
||||
body {
|
||||
background-color: #131313;
|
||||
color: #e5e2e1;
|
||||
font-family: "Inter", sans-serif
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
font-family: "Space Grotesk", sans-serif
|
||||
}
|
||||
.grain-texture {
|
||||
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuBVwwV1AWmSjh-DBeqCdb2UTs8eFT_RmZr-5H8WwzjfLASrJY99H9HTmAHD5opdxRXZEVAiVf74SzfO2e_wpfs9a7C5Tn8wRPGLDpioUM-iyLB2fkQmxFbweDOLQQeRmbggDPcZFnmFiKG8qA8WeVKAWAx2RtwenmI7yD_qzMEnAy-Q2LaDJBzSTl_IQc-XwH80daKeIBOEjfsVZG7OREHX8JpnnLwJmulLITAurtFflvbiMiAG3D2lQ4k7oyyZFwX0-S4add9EzqE);
|
||||
opacity: 0.05
|
||||
}</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background">
|
||||
<!-- TopNavBar Shell -->
|
||||
<header class="fixed top-0 w-full z-50 bg-[#131313]/70 backdrop-blur-xl duration-300 ease-in-out">
|
||||
<nav class="flex justify-between items-center px-8 h-20 w-full">
|
||||
<div class="text-2xl font-black tracking-tighter text-[#FFD700] font-headline uppercase">
|
||||
IRON & AMBER
|
||||
</div>
|
||||
<div class="hidden md:flex gap-8 font-headline tracking-tight uppercase text-sm">
|
||||
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Hizmetler</a>
|
||||
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Filo</a>
|
||||
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Projeler</a>
|
||||
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Hakkımızda</a>
|
||||
<a class="text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">İletişim</a>
|
||||
</div>
|
||||
<button class="bg-[#FFD700] text-[#3A3000] px-6 py-2 font-headline font-bold uppercase hover:bg-[#E9C400] transition-all">
|
||||
Teklif Al
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="pt-20">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[614px] flex items-center justify-start overflow-hidden px-8 md:px-16 border-b border-outline-variant/10">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img class="w-full h-full object-cover opacity-40 grayscale group-hover:grayscale-0 transition-all duration-700" data-alt="dramatic wide shot of industrial cranes against a dark moody sunset sky with sharp metallic details and high contrast" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDwqSqF8cra4s8At58Qo27cjXx5m7VTzIWpj9O82VD-gI2HBnIi1MpJs93KtibYShoKFucIMIduy0TxTGEDVJvfm0r0ZB5DSDElbQYJjgjwlwg4cL5cvkG1foS1prcOz08fXmPUEKW0WD2c8FEQMZ6scJH7tG_8EozXUg0-UmzgovkycTEVtgd0pOx9t75ZrdDVi9EEHSkTqBAe6QhFgcmluUEt_kX4mDRGaKFDqoEWs1PJ94_nybPwsZCaDyebX6BYtXCyPTwJ4TI"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-transparent"></div>
|
||||
</div>
|
||||
<div class="relative z-10 max-w-4xl">
|
||||
<p class="text-primary-container font-headline font-bold tracking-[0.2em] uppercase mb-4 text-sm">Endüstriyel Güç ve Mühendislik Çözümleri</p>
|
||||
<h1 class="text-7xl md:text-9xl font-black font-headline tracking-tighter text-on-surface leading-[0.9] uppercase">
|
||||
Hizmetlerimiz
|
||||
</h1>
|
||||
<div class="mt-8 flex gap-4">
|
||||
<div class="h-1 w-24 bg-primary-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Services Grid -->
|
||||
<section class="py-24 px-8 md:px-16 bg-surface">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20">
|
||||
<!-- Card 1: Mobil Vinç -->
|
||||
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden">
|
||||
<div class="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
|
||||
<div>
|
||||
<span class="material-symbols-outlined text-primary-container text-5xl mb-8" data-icon="precision_manufacturing">precision_manufacturing</span>
|
||||
<h3 class="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">Mobil Vinç Kiralama</h3>
|
||||
<p class="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
|
||||
500 tona kadar kaldırma kapasitesine sahip geniş filomuzla, en zorlu şantiye koşullarında yüksek hassasiyetli operasyonlar.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<button class="flex items-center gap-4 bg-primary-container text-on-primary px-8 py-4 font-headline font-bold uppercase hover:bg-primary-fixed-dim transition-all">
|
||||
Teklif Al
|
||||
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Subtle Background Image for Card -->
|
||||
<div class="absolute right-0 bottom-0 w-1/2 h-full opacity-10 pointer-events-none grayscale group-hover:opacity-20 transition-opacity">
|
||||
<img class="w-full h-full object-contain object-right-bottom" data-alt="technical blueprint of a mobile crane arm with mechanical joints and heavy hydraulic systems" src="https://lh3.googleusercontent.com/aida-public/AB6AXuANXgTwtnfZAFquOw7HpfE2qtolA0Z9o4XQT-FhR3kMhiMV8slT27bO3MbdvaWlb9SqJWHwX5cdRjpbvHPAcjB5bWc_Gr1ukSjeNQTjhKpYDbXf-7iQAbl6vO64cKymJR9bomQQgsZf0ly8Ypt1MGaYa42zVw_psCsXwRP8oqeHIuRasy0-cJiM2qJ8Zt0GAdlTuJ3tMsJ9fzHavgliwLDMFkxLw5eMOT6QLaDWzHlNNBYtRsiMs2_8TnG4PHgi-D-EXy5Z1GZjbAY"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2: Sepetli Platform -->
|
||||
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden">
|
||||
<div class="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
|
||||
<div>
|
||||
<span class="material-symbols-outlined text-primary-container text-5xl mb-8" data-icon="height">height</span>
|
||||
<h3 class="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">Sepetli Platform</h3>
|
||||
<p class="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
|
||||
75 metreye kadar erişim sağlayan modern platform filomuzla yüksek irtifa montaj ve bakım işlerinizde maksimum güvenlik.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<button class="flex items-center gap-4 bg-primary-container text-on-primary px-8 py-4 font-headline font-bold uppercase hover:bg-primary-fixed-dim transition-all">
|
||||
Teklif Al
|
||||
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute right-0 bottom-0 w-1/2 h-full opacity-10 pointer-events-none grayscale group-hover:opacity-20 transition-opacity">
|
||||
<img class="w-full h-full object-contain object-right-bottom" data-alt="industrial lift platform mechanical structure showing the telescopic boom mechanism" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBtmvvD8rlL-hCcOw4pkjudj6MGroo3uBv4S1nfGUTopjMu0U3Msp4k5RzxOzI-4hfNTPcB354QejZyrizHahV00R8N6tw9sp5R9fx6l2ySXQGw8iwQx_T962PfROQ5cqc3ul4QeAbvCn6wFhEqV8dm-AkW_3PoBZNEmtDUgOK3njdiJE7McFrE8AcjtLcjVsS76YJ-79rQklEDSTBridOQhx-7ttWTiAALZmvrsTF0qazX_tDpNSkQb-HFYpNC4yhmpfr2jX5IFVQ"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3: Ağır Nakliyat -->
|
||||
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden">
|
||||
<div class="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
|
||||
<div>
|
||||
<span class="material-symbols-outlined text-primary-container text-5xl mb-8" data-icon="conveyor_belt">conveyor_belt</span>
|
||||
<h3 class="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">Ağır Nakliyat</h3>
|
||||
<p class="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
|
||||
Gabari dışı ve ağır tonajlı yüklerin özel ekipmanlar ve low-bed araçlarla emniyetli bir şekilde taşınması ve konumlandırılması.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<button class="flex items-center gap-4 bg-primary-container text-on-primary px-8 py-4 font-headline font-bold uppercase hover:bg-primary-fixed-dim transition-all">
|
||||
Teklif Al
|
||||
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute right-0 bottom-0 w-1/2 h-full opacity-10 pointer-events-none grayscale group-hover:opacity-20 transition-opacity">
|
||||
<img class="w-full h-full object-contain object-right-bottom" data-alt="massive multi-axle heavy transport trailer carrying a large industrial transformer" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrf0iOTsZNrVAFqtriXdBuiH10S9pduEgn54N1MPF9n_llxMc_OQK25_OgAoRznmFhTJAMEzAdORN7c5x3YMobLAr168lX8afjJLQJA01Y6VC9yG6a95l_bnln5toBh0gdGsIu_0wpev4AIlxpdlNrf9DnnpFCcVHnsqj1ioaLlHdHaUzR11hpZvQGGB4AElZTveripGz5VIp7-nOI53MUpzn5uYrSFa9Sb4iGM6wpoY4i-_4egSbxCjaq9VLRWlJuN069pk7pdo0"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4: Proje Taşımacılığı -->
|
||||
<div class="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden">
|
||||
<div class="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
|
||||
<div>
|
||||
<span class="material-symbols-outlined text-primary-container text-5xl mb-8" data-icon="architecture">architecture</span>
|
||||
<h3 class="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">Proje Taşımacılığı</h3>
|
||||
<p class="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
|
||||
Anahtar teslim endüstriyel tesis taşıma ve kurulum projeleri için mühendislik temelli uçtan uca lojistik planlama.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<button class="flex items-center gap-4 bg-primary-container text-on-primary px-8 py-4 font-headline font-bold uppercase hover:bg-primary-fixed-dim transition-all">
|
||||
Teklif Al
|
||||
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute right-0 bottom-0 w-1/2 h-full opacity-10 pointer-events-none grayscale group-hover:opacity-20 transition-opacity">
|
||||
<img class="w-full h-full object-contain object-right-bottom" data-alt="complex logistics map with technical routing lines and industrial site markings" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDaH8bz8pUVZksNKTaJCf3RgNgb1qDqtcuEQtrW_1ZXw2QFLvacS97LwbYCZhl08kZ-I6VNRC_fL-sEcUg6Eb3FxreeXN9uJHvqTbepMb7B8Hp-1JFQ0kvL8hMOuZGeoEFHbULBG5luTL6J0XS7vWjA5Iy4I3FqYc39s19Id5SjIT2_Z6eZ_dLlwqS7eJTDgptQwplcDLQ44zUp3MvS00qZOTasQDbYrpNK4poks-Vzpch3O5X75nYAFt-EGJhmvenOl7WS2T_gfHY"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Why Choose Us / Metrics -->
|
||||
<section class="py-24 px-8 md:px-16 bg-surface-container-lowest border-y border-outline-variant/10">
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
|
||||
<div>
|
||||
<h2 class="text-5xl font-headline font-black uppercase mb-8 leading-tight">
|
||||
Neden IRON & AMBER?
|
||||
</h2>
|
||||
<p class="text-on-surface-variant font-body text-xl mb-12 leading-relaxed">
|
||||
Endüstriyel operasyonlarda güvenlik bir seçenek değil, zorunluluktur. Mühendislik odaklı yaklaşımımızla riskleri minimize ediyoruz.
|
||||
</p>
|
||||
<div class="space-y-12">
|
||||
<div class="flex gap-6">
|
||||
<div class="text-primary-container text-5xl font-black font-headline">01</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-headline font-bold uppercase mb-2">Hassas Mühendislik</h4>
|
||||
<p class="text-on-surface-variant text-sm">Her kaldırma operasyonu için detaylı simülasyon ve planlama.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<div class="text-primary-container text-5xl font-black font-headline">02</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-headline font-bold uppercase mb-2">Sertifikalı Operatörler</h4>
|
||||
<p class="text-on-surface-variant text-sm">Uluslararası standartlarda eğitim almış uzman teknik ekip.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<div class="text-primary-container text-5xl font-black font-headline">03</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-headline font-bold uppercase mb-2">7/24 Teknik Destek</h4>
|
||||
<p class="text-on-surface-variant text-sm">Kesintisiz operasyon için anında müdahale ve destek hizmeti.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-high p-8 flex flex-col justify-center border-l-4 border-primary-container">
|
||||
<span class="text-5xl font-black font-headline text-primary-container mb-2">500T</span>
|
||||
<span class="text-xs uppercase tracking-widest font-bold opacity-60">Max Kapasite</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-8 flex flex-col justify-center">
|
||||
<span class="text-5xl font-black font-headline text-on-surface mb-2">15+</span>
|
||||
<span class="text-xs uppercase tracking-widest font-bold opacity-60">Yıllık Deneyim</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-8 flex flex-col justify-center">
|
||||
<span class="text-5xl font-black font-headline text-on-surface mb-2">100%</span>
|
||||
<span class="text-xs uppercase tracking-widest font-bold opacity-60">İş Güvenliği</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-8 flex flex-col justify-center border-l-4 border-primary-container">
|
||||
<span class="text-5xl font-black font-headline text-primary-container mb-2">24/7</span>
|
||||
<span class="text-xs uppercase tracking-widest font-bold opacity-60">Aktif Operasyon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer Shell -->
|
||||
<footer class="bg-[#131313] w-full border-t-0 flex flex-col md:flex-row justify-between items-center px-8 py-12 transition-opacity duration-200">
|
||||
<div class="flex flex-col gap-4 mb-8 md:mb-0">
|
||||
<div class="text-[#FFD700] font-black text-2xl font-headline uppercase tracking-tighter">IRON & AMBER</div>
|
||||
<p class="text-[#D0C6AB] font-inter text-xs uppercase tracking-widest">© 2024 IRON & AMBER INDUSTRIAL SOLUTIONS</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-8 text-[#D0C6AB] font-inter text-sm uppercase tracking-widest">
|
||||
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">Mobil Vinç Kiralama</a>
|
||||
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">Sepetli Platform</a>
|
||||
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">Ağır Nakliyat</a>
|
||||
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">Teknik Destek</a>
|
||||
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">KVKK</a>
|
||||
<a class="hover:text-[#FFD700] underline decoration-2 transition-all" href="#">Gizlilik Politikası</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
design/hizmetlerimiz_aydo_an_nakliyat_vin/screen.png
Normal file
BIN
design/hizmetlerimiz_aydo_an_nakliyat_vin/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
395
design/homepage.html
Normal file
395
design/homepage.html
Normal file
@@ -0,0 +1,395 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="tr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary-container": "#ffd700",
|
||||
"background": "#131313",
|
||||
"surface": "#131313",
|
||||
"outline": "#999077",
|
||||
"surface-container-highest": "#353535",
|
||||
"on-primary-container": "#705e00",
|
||||
"tertiary-fixed": "#79f5ff",
|
||||
"secondary-fixed-dim": "#c6c6c7",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"on-error": "#690005",
|
||||
"on-tertiary-container": "#006a70",
|
||||
"on-primary-fixed-variant": "#544600",
|
||||
"error": "#ffb4ab",
|
||||
"inverse-on-surface": "#313030",
|
||||
"on-error-container": "#ffdad6",
|
||||
"secondary-fixed": "#e2e2e2",
|
||||
"secondary": "#c6c6c7",
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"on-primary": "#3a3000",
|
||||
"surface-variant": "#353535",
|
||||
"on-tertiary": "#00363a",
|
||||
"surface-dim": "#131313",
|
||||
"tertiary-fixed-dim": "#00dbe8",
|
||||
"primary": "#fff6df",
|
||||
"on-surface-variant": "#d0c6ab",
|
||||
"primary-fixed": "#ffe16d",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"tertiary-container": "#00f1ff",
|
||||
"secondary-container": "#454747",
|
||||
"primary-fixed-dim": "#e9c400",
|
||||
"on-secondary-fixed": "#1a1c1c",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"on-background": "#e5e2e1",
|
||||
"on-surface": "#e5e2e1",
|
||||
"outline-variant": "#4d4732",
|
||||
"on-primary-fixed": "#221b00",
|
||||
"on-tertiary-fixed": "#002022",
|
||||
"tertiary": "#defcff",
|
||||
"surface-tint": "#e9c400",
|
||||
"on-secondary-fixed-variant": "#454747",
|
||||
"inverse-primary": "#705d00",
|
||||
"error-container": "#93000a",
|
||||
"surface-bright": "#393939",
|
||||
"on-secondary-container": "#b4b5b5",
|
||||
"on-tertiary-fixed-variant": "#004f54",
|
||||
"on-secondary": "#2f3131",
|
||||
"surface-container": "#20201f"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0px",
|
||||
"lg": "0px",
|
||||
"xl": "0px",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Space Grotesk"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.text-stroke { -webkit-text-stroke: 1px rgba(255, 215, 0, 0.3); color: transparent; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body selection:bg-primary-container selection:text-on-primary">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 left-0 w-full z-[100] flex justify-between items-center px-12 py-6 bg-neutral-900/70 dark:bg-neutral-900/70 backdrop-blur-xl border-b border-white/10">
|
||||
<div class="text-2xl font-black tracking-tighter text-yellow-400">Aydoğan Nakliyat Vinç</div>
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-wider text-sm font-bold text-yellow-400 border-b-2 border-yellow-400 pb-1" href="#">Services</a>
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-wider text-sm font-bold text-white/80 hover:text-yellow-400 transition-colors duration-300" href="#">Fleet</a>
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-wider text-sm font-bold text-white/80 hover:text-yellow-400 transition-colors duration-300" href="#">About</a>
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-wider text-sm font-bold text-white/80 hover:text-yellow-400 transition-colors duration-300" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-primary-container text-on-primary px-6 py-3 font-headline font-bold uppercase tracking-widest text-sm hover:bg-primary-fixed-dim active:scale-95 transition-all">
|
||||
Request a Quote
|
||||
</button>
|
||||
</nav>
|
||||
<!-- SideNavBar (WhatsApp FAB) -->
|
||||
<div class="fixed bottom-8 right-8 z-50">
|
||||
<a class="bg-green-600 text-white font-['Inter'] font-semibold w-16 h-16 flex items-center justify-center shadow-[8px_8px_0px_0px_rgba(0,0,0,0.3)] hover:translate-x-1 hover:translate-y-1 hover:shadow-none active:scale-90 transition-all" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">chat</span>
|
||||
</a>
|
||||
</div>
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-screen w-full flex items-center overflow-hidden">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Massive yellow construction crane standing tall against a dramatic orange and purple sunset sky on the Dalaman coast, industrial aesthetic, 8k resolution" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCLXU-xpLyEH2Y_iMlpzL1U0DoDchOaBY8PKcSBT2U3v11rmlCAjjeP2-9STqyYMt43TFAM0jM-OZpBGmr0OX46suuzs38u_O-xYRzRHGYy9gFF7VOKIirFizFPLHtGLg8i9xxv30qrQuCfb8zx7DZ4iq04mAPl2uZZIhCtA6dxWSaZxJD4_lj3OZeekkyGVHlO18LQalVXg63CfNEu913EGtwTEEKMclHSCZo2yRRwAB1xnh0R3YBuuiJiUYADnGVKv2G7VD_pAL4"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
|
||||
</div>
|
||||
<div class="relative z-10 px-12 max-w-5xl">
|
||||
<div class="mb-6 flex items-center gap-4">
|
||||
<span class="h-[2px] w-12 bg-primary-container"></span>
|
||||
<span class="font-label text-sm uppercase tracking-[0.3em] text-primary-container font-bold">Dalaman / Muğla</span>
|
||||
</div>
|
||||
<h1 class="font-headline text-6xl md:text-8xl font-bold leading-[0.9] tracking-tighter text-white mb-8">
|
||||
Dalaman’ın Güçlü Çözüm Ortağı: <span class="text-primary-container">Aydoğan Vinç</span>
|
||||
</h1>
|
||||
<ul class="space-y-4 mb-12">
|
||||
<li class="flex items-center gap-4 group">
|
||||
<span class="w-2 h-2 bg-primary-container"></span>
|
||||
<span class="font-headline text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors">Ağır Nakliyat</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-4 group">
|
||||
<span class="w-2 h-2 bg-primary-container"></span>
|
||||
<span class="font-headline text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors">Sepetli Platform</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-4 group">
|
||||
<span class="w-2 h-2 bg-primary-container"></span>
|
||||
<span class="font-headline text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors">Mobil Vinç Kiralama</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex gap-4">
|
||||
<button class="bg-primary-container text-on-primary px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:bg-primary-fixed-dim transition-all">
|
||||
Hizmet Alın
|
||||
</button>
|
||||
<button class="bg-surface-container-high text-white px-10 py-5 font-headline font-black uppercase tracking-widest text-lg border border-white/10 hover:bg-white hover:text-black transition-all">
|
||||
Filomuz
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Absolute Texture Overlay -->
|
||||
<div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-background to-transparent"></div>
|
||||
</section>
|
||||
<!-- Stats Grid (Kinetic Monolith) -->
|
||||
<section class="grid grid-cols-2 md:grid-cols-4 bg-surface-container-lowest border-y border-white/5">
|
||||
<div class="p-12 border-r border-white/5 flex flex-col justify-center">
|
||||
<span class="text-primary-container font-headline text-5xl font-black mb-2">150T</span>
|
||||
<span class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Maksimum Kapasite</span>
|
||||
</div>
|
||||
<div class="p-12 border-r border-white/5 flex flex-col justify-center">
|
||||
<span class="text-primary-container font-headline text-5xl font-black mb-2">24/7</span>
|
||||
<span class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Teknik Destek</span>
|
||||
</div>
|
||||
<div class="p-12 border-r border-white/5 flex flex-col justify-center">
|
||||
<span class="text-primary-container font-headline text-5xl font-black mb-2">15+</span>
|
||||
<span class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Modern Filo</span>
|
||||
</div>
|
||||
<div class="p-12 flex flex-col justify-center">
|
||||
<span class="text-primary-container font-headline text-5xl font-black mb-2">100%</span>
|
||||
<span class="font-label text-xs uppercase tracking-widest text-on-surface-variant">Güvenlik Kaydı</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Services Section (Bento Style) -->
|
||||
<section class="py-32 px-12 bg-surface" id="Services">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-20 gap-8">
|
||||
<div class="max-w-2xl">
|
||||
<span class="font-label text-sm uppercase tracking-[0.3em] text-primary-container font-bold mb-4 block">Hizmetlerimiz</span>
|
||||
<h2 class="font-headline text-6xl font-bold tracking-tighter text-white">Yükünüz Ne Olursa Olsun, Güç Bizim İşimiz.</h2>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-on-surface-variant font-body max-w-sm mb-6">Mühendislik temelli yaklaşımımızla en zorlu projelerinizde profesyonel destek sağlıyoruz.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-0">
|
||||
<!-- Service Card 1 -->
|
||||
<div class="group relative aspect-square bg-surface-container overflow-hidden p-12 border border-white/5">
|
||||
<div class="relative z-10 h-full flex flex-col justify-between">
|
||||
<span class="material-symbols-outlined text-primary-container text-5xl" style="font-variation-settings: 'FILL' 1;">precision_manufacturing</span>
|
||||
<div>
|
||||
<h3 class="font-headline text-3xl font-bold mb-4 uppercase">Mobil Vinç</h3>
|
||||
<p class="text-on-surface-variant leading-relaxed">Hızlı kurulum ve yüksek hareket kabiliyeti ile şantiye alanlarında esnek çözümler.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="font-headline text-9xl font-black">01</span>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-primary-container translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex items-center justify-center">
|
||||
<button class="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8">Detaylar</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Service Card 2 -->
|
||||
<div class="group relative aspect-square bg-surface-container-high overflow-hidden p-12 border border-white/5">
|
||||
<div class="relative z-10 h-full flex flex-col justify-between">
|
||||
<span class="material-symbols-outlined text-primary-container text-5xl" style="font-variation-settings: 'FILL' 1;">local_shipping</span>
|
||||
<div>
|
||||
<h3 class="font-headline text-3xl font-bold mb-4 uppercase">Ağır Nakliyat</h3>
|
||||
<p class="text-on-surface-variant leading-relaxed">Standart dışı ölçülere sahip yüklerin özel ekipmanlarla güvenli taşımacılığı.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="font-headline text-9xl font-black">02</span>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-primary-container translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex items-center justify-center">
|
||||
<button class="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8">Detaylar</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Service Card 3 -->
|
||||
<div class="group relative aspect-square bg-surface-container-highest overflow-hidden p-12 border border-white/5">
|
||||
<div class="relative z-10 h-full flex flex-col justify-between">
|
||||
<span class="material-symbols-outlined text-primary-container text-5xl" style="font-variation-settings: 'FILL' 1;">elevator</span>
|
||||
<div>
|
||||
<h3 class="font-headline text-3xl font-bold mb-4 uppercase">Sepetli Platform</h3>
|
||||
<p class="text-on-surface-variant leading-relaxed">Yüksek irtifa çalışmalarında personel güvenliğini ön plana çıkaran ekipmanlar.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="font-headline text-9xl font-black">03</span>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-primary-container translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex items-center justify-center">
|
||||
<button class="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8">Detaylar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Fleet Section -->
|
||||
<section class="py-32 bg-surface-container-low overflow-hidden" id="Fleet">
|
||||
<div class="px-12 mb-20">
|
||||
<h2 class="font-headline text-7xl font-bold tracking-tighter text-stroke uppercase">Makine Parkuru</h2>
|
||||
<h3 class="font-headline text-5xl font-bold text-white -mt-8">Modern ve Güçlü Filo</h3>
|
||||
</div>
|
||||
<div class="flex gap-8 overflow-x-auto no-scrollbar px-12 pb-12">
|
||||
<!-- Vehicle Card 1 -->
|
||||
<div class="min-w-[450px] bg-surface flex flex-col">
|
||||
<div class="h-80 overflow-hidden relative">
|
||||
<img class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700" data-alt="Modern all-terrain telescopic crane in yellow parked on an industrial site, heavy machinery close-up, sharp focus, technical lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDz5b4r2KouL9upv0olAupqoFkF2Irw10VTeLh8XSl4F94ujjrHJ6keKViHybvoJlR3RgL-WrvsCYDjKNuVYUdALEH7KEjvZmZm40mxJWzQGN_aFUEllY41CpcYxAmHjiyrkgTKgEh9qZuDQ62Pzi-sffDKM9dv8bNg3YWH-ypFworfKyQiaXgLS0wucMj9LpVlzzl2zXrKv6WTv8hJr986CWoKM8b1mTI8ajgq_2oF9vltwrfrZDT8LYEKtgGSmIM84AAlzqZXwMU"/>
|
||||
<div class="absolute top-4 left-4 bg-primary-container text-on-primary px-3 py-1 font-label text-xs font-bold uppercase">Mevcut</div>
|
||||
</div>
|
||||
<div class="p-8 border-x border-b border-white/5">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<h4 class="font-headline text-2xl font-bold text-white mb-1">Liebherr LTM 1100</h4>
|
||||
<span class="font-label text-xs text-on-surface-variant uppercase tracking-widest">Mobil Teleskopik Vinç</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-high p-4">
|
||||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Kapasite</span>
|
||||
<span class="font-headline font-bold text-lg">100 TON</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-4">
|
||||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Bom Uzunluğu</span>
|
||||
<span class="font-headline font-bold text-lg">60 METRE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vehicle Card 2 -->
|
||||
<div class="min-w-[450px] bg-surface flex flex-col">
|
||||
<div class="h-80 overflow-hidden relative">
|
||||
<img class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700" data-alt="Industrial crane truck with articulated arm standing in a loading dock area, sunset lighting, high contrast commercial photography style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTUgbJ7VOHrnV2PY8AX4lAxBfdbp3hP7HdMRv4RJsWYQv6_coiWlqlodtyBjta-2PoSZnOXc1pKQHpbZGS9_6VLIUPyZ-sUH15ENiBjf466dq7GpPBHpS1uqFXm44tK_ZJ0okneK2mtHwo5h459sPzZ5iXakBitbs70sI0X86VQm2dePia2r1weEXW6Znhn8pOcB_hwLybrmfyEhr-b47X20UbQrbSFp2WCIGZUv4IsAlgn775KDuQH96BvaSLC56kOZG8Q5S9Tu0"/>
|
||||
<div class="absolute top-4 left-4 bg-primary-container text-on-primary px-3 py-1 font-label text-xs font-bold uppercase">Mevcut</div>
|
||||
</div>
|
||||
<div class="p-8 border-x border-b border-white/5">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<h4 class="font-headline text-2xl font-bold text-white mb-1">Hiyap 75 Ton</h4>
|
||||
<span class="font-label text-xs text-on-surface-variant uppercase tracking-widest">Kamyon Üstü Vinç</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-high p-4">
|
||||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Kapasite</span>
|
||||
<span class="font-headline font-bold text-lg">75 TON</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-4">
|
||||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Erişim</span>
|
||||
<span class="font-headline font-bold text-lg">35 METRE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vehicle Card 3 -->
|
||||
<div class="min-w-[450px] bg-surface flex flex-col">
|
||||
<div class="h-80 overflow-hidden relative">
|
||||
<img class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700" data-alt="Hydraulic crane arm detail with heavy chains and hooks, industrial textures of steel and oil, 8k resolution, cinematic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfXE8_qXbdFXu-5NJjxR_il3lZOkzp6NaLTMMtNr_1_dO0ohKzutRHZLm3Rs3xuwheOE_PUWTDxIavnRfKcdCpASPX9AlxSuZFWaZKax5RWmgLnIBk-ojo_XghFLjC1ES1ACDK-PdB901GE3AxkMj-lWSFkbU8PaUhJ9XxizBHb4BVtvej64-5uXmm9e99Cax1_Xs8_Hm9L7uR8PRX5teGng9Q1gxbGbFCAQw5WG3cZrPESDEbj4osSFEwW8lokMlO0uB9xsaGZxw"/>
|
||||
<div class="absolute top-4 left-4 bg-error-container text-white px-3 py-1 font-label text-xs font-bold uppercase">Bakımda</div>
|
||||
</div>
|
||||
<div class="p-8 border-x border-b border-white/5">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<h4 class="font-headline text-2xl font-bold text-white mb-1">Teleskopik Platform</h4>
|
||||
<span class="font-label text-xs text-on-surface-variant uppercase tracking-widest">Yüksek İrtifa Erişimi</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-high p-4">
|
||||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Yükseklik</span>
|
||||
<span class="font-headline font-bold text-lg">45 METRE</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-4">
|
||||
<span class="block font-label text-[10px] text-on-surface-variant uppercase mb-1">Sepet Kapasitesi</span>
|
||||
<span class="font-headline font-bold text-lg">300 KG</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Capacity Load Meter Section (Custom Component) -->
|
||||
<section class="py-24 px-12 bg-surface flex flex-col items-center">
|
||||
<div class="w-full max-w-4xl text-center mb-16">
|
||||
<h3 class="font-headline text-4xl font-bold mb-8 uppercase tracking-tight">Projeleriniz İçin Optimum Güç Hesabı</h3>
|
||||
<div class="space-y-12">
|
||||
<div>
|
||||
<div class="flex justify-between font-label text-xs uppercase tracking-widest mb-4">
|
||||
<span>Ağır Yük Transferi</span>
|
||||
<span class="text-primary-container">85% Verimlilik</span>
|
||||
</div>
|
||||
<div class="h-6 w-full bg-surface-container-highest">
|
||||
<div class="h-full bg-primary-container w-[85%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between font-label text-xs uppercase tracking-widest mb-4">
|
||||
<span>Mobil Vinç Operasyonları</span>
|
||||
<span class="text-primary-container">95% Başarı</span>
|
||||
</div>
|
||||
<div class="h-6 w-full bg-surface-container-highest">
|
||||
<div class="h-full bg-primary-container w-[95%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Call to Action Section -->
|
||||
<section class="relative py-40 px-12 overflow-hidden">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img class="w-full h-full object-cover" data-alt="Industrial construction site at night with bright floodlights illuminating steel structures and crane silhouettes, dramatic shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfGw5gCmOA1OaPBLY-dOl2wTGviHc5c2Xn05kgak1sHagc64z3vjbl8Ov1KBLQPkoLFdv0ktOtczfX5VEdrujgg8rgBnw40Bzc7Ai836w4QATDFGTdmpO9aHk3s7nLib4yerxLzG1woNJ2SChKlZ831GmYaHOH6NJYOf-N-zjb8Tc2086UpH97RBMUqb7yXw-kdpvj7u-er1ujBxir2hi5WVWKuX_kMdJ-aM-co4c8AfQpo_sO32TcwzB93hhlq6eGc8m23YMoJfU"/>
|
||||
<div class="absolute inset-0 bg-neutral-900/80 backdrop-blur-sm"></div>
|
||||
</div>
|
||||
<div class="relative z-10 text-center max-w-3xl mx-auto">
|
||||
<h2 class="font-headline text-5xl md:text-7xl font-bold text-white mb-8">Sıradaki Büyük Projeniz İçin Hazır mısınız?</h2>
|
||||
<p class="text-xl text-on-surface-variant mb-12">Dalaman ve çevresinde profesyonel vinç ve nakliyat çözümleri için hemen fiyat teklifi alın.</p>
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-center">
|
||||
<input class="bg-surface-container-lowest border-none font-body px-8 py-5 text-lg w-full md:w-80 focus:ring-2 focus:ring-primary-container" placeholder="Telefon Numaranız" type="text"/>
|
||||
<button class="bg-primary-container text-on-primary font-headline font-black uppercase tracking-widest px-12 py-5 text-lg hover:bg-primary-fixed-dim transition-all">
|
||||
Sizi Arayalım
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="w-full py-16 px-12 grid grid-cols-1 md:grid-cols-4 gap-12 bg-neutral-900 border-t border-neutral-800">
|
||||
<div class="col-span-1 md:col-span-1">
|
||||
<div class="text-xl font-black text-white mb-6">Aydoğan Nakliyat Vinç</div>
|
||||
<p class="text-neutral-500 font-label text-xs leading-loose">
|
||||
Ağır sanayi ve inşaat sektöründe güvenin simgesi. Modern ekipmanlarımız ve uzman kadromuzla Dalaman'ın en güçlü ortağıyız.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-yellow-400 font-['Inter'] text-xs uppercase tracking-widest mb-6 font-bold">Dalaman HQ</h4>
|
||||
<ul class="space-y-4">
|
||||
<li><span class="text-neutral-500 font-label text-xs uppercase tracking-widest">Adres: Merkez Mah. Sanayi Sitesi No: 42 Dalaman / Muğla</span></li>
|
||||
<li><span class="text-neutral-500 font-label text-xs uppercase tracking-widest">Tel: +90 252 692 XX XX</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-yellow-400 font-['Inter'] text-xs uppercase tracking-widest mb-6 font-bold">Services</h4>
|
||||
<ul class="space-y-4">
|
||||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Mobil Vinç Kiralama</a></li>
|
||||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Sepetli Platform</a></li>
|
||||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Lojistik Çözümleri</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-yellow-400 font-['Inter'] text-xs uppercase tracking-widest mb-6 font-bold">Fleet Catalog</h4>
|
||||
<ul class="space-y-4">
|
||||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Ağır Yük Vinçleri</a></li>
|
||||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Teleskopik Vinçler</a></li>
|
||||
<li><a class="text-neutral-500 hover:text-white transition-colors font-label text-xs uppercase tracking-widest" href="#">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-full border-t border-white/5 pt-12 flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<span class="text-neutral-500 font-label text-xs uppercase tracking-widest">© 2024 Aydoğan Nakliyat Vinç. All Rights Reserved.</span>
|
||||
<div class="flex gap-6">
|
||||
<a class="text-white/40 hover:text-yellow-400 transition-colors" href="#"><span class="material-symbols-outlined">social_leaderboard</span></a>
|
||||
<a class="text-white/40 hover:text-yellow-400 transition-colors" href="#"><span class="material-symbols-outlined">camera</span></a>
|
||||
<a class="text-white/40 hover:text-yellow-400 transition-colors" href="#"><span class="material-symbols-outlined">share</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
design/homepage.png
Normal file
BIN
design/homepage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
64
design/iron_amber/DESIGN.md
Normal file
64
design/iron_amber/DESIGN.md
Normal file
@@ -0,0 +1,64 @@
|
||||
# Design System Strategy: Industrial Precision
|
||||
|
||||
## 1. Overview & Creative North Star: "The Kinetic Monolith"
|
||||
The heavy lifting industry is defined by the intersection of massive scale and surgical precision. This design system moves away from the "cluttered construction" aesthetic, opting instead for **The Kinetic Monolith**. This North Star envisions the UI as a series of heavy, interlocking structural slabs—imposing, stable, and powerful—yet animated with a modern, high-tech fluidity.
|
||||
|
||||
To break the "standard corporate template" look, we utilize **Hard-Edge Brutalism** mixed with **Editorial Sophistication**. We embrace zero-radius corners (0px) to mimic the sharp cut of steel beams, and we leverage extreme typographic scales to command authority. This is not just a rental service; it is an engineering power-house.
|
||||
|
||||
---
|
||||
|
||||
## 2. Colors: High-Contrast Industrialism
|
||||
Our palette is rooted in the high-visibility world of heavy machinery. We use contrast not just for accessibility, but as a structural tool.
|
||||
|
||||
* **Primary (Industrial Yellow - #FFD700):** This is our "Action Signal." Use `primary_container` (#FFD700) for high-priority CTAs and `primary_fixed_dim` (#E9C400) for interactive states. It represents the crane, the caution, and the energy.
|
||||
* **Surface Foundation (Deep Charcoal - #131313):** We avoid pure pitch black in favor of `surface` (#131313) to allow for depth.
|
||||
* **The "No-Line" Rule:** Direct intervention: **No 1px solid borders.** To separate a fleet category from a service description, shift the background from `surface` to `surface_container_low`. Boundaries are felt through tonal shifts, not drawn with lines.
|
||||
* **Surface Hierarchy & Nesting:** Treat the layout as an assembly line.
|
||||
* Main Page: `surface`
|
||||
* Structural Sections: `surface_container`
|
||||
* Interactive Cards: `surface_container_high`
|
||||
* **Signature Textures:** For hero sections, apply a subtle 10% opacity noise grain or a linear gradient from `surface` to `surface_container_highest` to mimic the matte finish of powder-coated steel.
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography: The Engineering Scale
|
||||
We use typography to convey weight. Our choices reflect the blueprint and the brand’s industrial backbone.
|
||||
|
||||
* **Display & Headlines (Space Grotesk):** A geometric sans-serif with a mechanical soul. The wide apertures and "tech" feel of Space Grotesk suggest precision. Use `display-lg` (3.5rem) with tight letter-spacing (-0.02em) for hero headlines to create a "wall of text" effect that feels immovable.
|
||||
* **Body & Labels (Inter):** The "Workhorse." Inter provides a neutral, highly legible contrast to the aggressive display type. Use `body-lg` for technical specifications and `label-sm` (uppercase with 0.05em tracking) for metadata like "Crane Capacity" or "Job Site Location."
|
||||
* **Visual Hierarchy:** Headlines should always be `on_surface` or `primary`. Body text should utilize `on_surface_variant` (#D0C6AB) to reduce visual noise in long technical descriptions.
|
||||
|
||||
---
|
||||
|
||||
## 4. Elevation & Depth: Tonal Layering
|
||||
In a world of 0px border radii, traditional shadows feel out of place. We achieve depth through **Structural Stacking**.
|
||||
|
||||
* **The Layering Principle:** Instead of lifting an object off the page, we "carve" it into the interface. A "Heavy Lift" service card should be `surface_container_lowest` (#0E0E0E) nested within a `surface_container` (#20201F) section. This creates a recessed, high-end "machined" look.
|
||||
* **The "Ghost Border" Fallback:** Where separation is critical for accessibility, use `outline_variant` at 15% opacity. It should be felt as a subtle change in light, not a hard edge.
|
||||
* **Glassmorphism & Depth:** For navigation bars or floating action menus, use `surface_bright` at 70% opacity with a `40px` backdrop blur. This keeps the "Industrial Yellow" of the primary content visible as it scrolls beneath, maintaining brand energy throughout the journey.
|
||||
|
||||
---
|
||||
|
||||
## 5. Components: The Machined Toolkit
|
||||
|
||||
* **Buttons:**
|
||||
* **Primary:** `primary_container` (#FFD700) background, `on_primary` (#3A3000) text. **0px border radius.** Hover state: `primary_fixed_dim`.
|
||||
* **Secondary:** `surface_container_highest` background, `primary` text. This looks like a dark steel plate with yellow engraving.
|
||||
* **Heavy Duty Cards:** No dividers. Separate the "Header" of the card from the "Body" by using a `surface_container_high` top section and a `surface_container` bottom section.
|
||||
* **Input Fields:** Use `surface_container_lowest` for the field background with a `primary` 2px bottom-only border on focus. This mimics the "underlined" look of technical architectural drawings.
|
||||
* **Fleet Status Chips:** Use `tertiary_container` (Cyan/Teal) for "Available" and `error_container` for "In Maintenance." These should be rectangular, sharp, and high-contrast.
|
||||
* **The "Load Meter":** A custom component for this industry. A thick horizontal bar using `primary_container` to show crane capacity usage, set against a `surface_container_highest` track.
|
||||
|
||||
---
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
### Do:
|
||||
* **Do** use intentional asymmetry. Align heavy text blocks to the left and allow large "crane-arm" imagery to break the grid and bleed off the right edge of the screen.
|
||||
* **Do** use "Extreme Contrast." Pair a `display-lg` headline with a `label-sm` sub-headline for an editorial, high-end feel.
|
||||
* **Do** use `primary` (Yellow) sparingly as a spotlight. If everything is yellow, nothing is important.
|
||||
|
||||
### Don't:
|
||||
* **Don't** use rounded corners. Everything must be 0px. Softness contradicts the brand’s "Robust and Reliable" personality.
|
||||
* **Don't** use standard 1px grey dividers. Use white space or a background color shift of 2–3% to define sections.
|
||||
* **Don't** use generic stock photography. Use high-contrast, desaturated imagery of machinery with "Industrial Yellow" accents highlighted.
|
||||
@@ -0,0 +1,249 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="tr"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>İletişim | Aydoğan Nakliyat Vinç</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-bright": "#393939",
|
||||
"outline-variant": "#4d4732",
|
||||
"on-error": "#690005",
|
||||
"on-background": "#e5e2e1",
|
||||
"surface": "#131313",
|
||||
"on-tertiary": "#00363a",
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"inverse-on-surface": "#313030",
|
||||
"secondary-fixed": "#e2e2e2",
|
||||
"tertiary-fixed": "#79f5ff",
|
||||
"tertiary-container": "#00f1ff",
|
||||
"secondary": "#c6c6c7",
|
||||
"on-tertiary-fixed-variant": "#004f54",
|
||||
"on-secondary-fixed-variant": "#454747",
|
||||
"primary-container": "#ffd700",
|
||||
"tertiary-fixed-dim": "#00dbe8",
|
||||
"error": "#ffb4ab",
|
||||
"outline": "#999077",
|
||||
"on-primary": "#3a3000",
|
||||
"background": "#131313",
|
||||
"surface-container": "#20201f",
|
||||
"secondary-fixed-dim": "#c6c6c7",
|
||||
"secondary-container": "#454747",
|
||||
"on-error-container": "#ffdad6",
|
||||
"inverse-primary": "#705d00",
|
||||
"surface-container-highest": "#353535",
|
||||
"on-secondary-fixed": "#1a1c1c",
|
||||
"error-container": "#93000a",
|
||||
"on-secondary-container": "#b4b5b5",
|
||||
"primary-fixed": "#ffe16d",
|
||||
"surface-variant": "#353535",
|
||||
"on-primary-fixed": "#221b00",
|
||||
"on-tertiary-fixed": "#002022",
|
||||
"surface-container-low": "#1c1b1b",
|
||||
"surface-dim": "#131313",
|
||||
"on-primary-container": "#705e00",
|
||||
"on-tertiary-container": "#006a70",
|
||||
"on-surface": "#e5e2e1",
|
||||
"primary": "#fff6df",
|
||||
"surface-container-high": "#2a2a2a",
|
||||
"on-primary-fixed-variant": "#544600",
|
||||
"surface-tint": "#e9c400",
|
||||
"on-secondary": "#2f3131",
|
||||
"tertiary": "#defcff",
|
||||
"on-surface-variant": "#d0c6ab",
|
||||
"surface-container-lowest": "#0e0e0e",
|
||||
"primary-fixed-dim": "#e9c400"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0px",
|
||||
"lg": "0px",
|
||||
"xl": "0px",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Space Grotesk"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #131313;
|
||||
color: #e5e2e1;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 w-full z-50 rounded-none bg-[#131313]/70 backdrop-blur-xl flex justify-between items-center px-6 py-4 w-full">
|
||||
<div class="text-2xl font-black tracking-tighter text-[#FFD700]">Aydoğan Nakliyat Vinç</div>
|
||||
<div class="hidden md:flex gap-8 items-center">
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Fleet</a>
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Services</a>
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-[#D0C6AB] hover:text-[#FFD700] transition-colors" href="#">Safety</a>
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-[#FFD700] border-b-2 border-[#FFD700] pb-1" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-primary-container text-on-primary px-6 py-2 font-bold uppercase tracking-tighter hover:bg-primary-fixed-dim active:scale-95 transition-all duration-150">
|
||||
Request a Quote
|
||||
</button>
|
||||
</nav>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[409px] min-h-[300px] flex items-center justify-start px-12 pt-20 overflow-hidden bg-surface-container-lowest">
|
||||
<div class="absolute inset-0 opacity-40">
|
||||
<img alt="" class="w-full h-full object-cover grayscale" data-alt="close-up of industrial steel construction machinery and crane hydraulics in dramatic lighting with high contrast and deep shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfkKct5D5377QaAJJkrQWe4e1bB-ePs2iyvcGIM20gmCTblVxW51Pzx33a5BGtv2dyYafOhcQH1ZucqiYi7xFbfXxCqGyqK8hXRNsN1fWPOKvAy0Nn8F8JjxR7zpGVWu_xXIEeoYZWnUr3NXL4A11sgKXAuaNqH1n31-pKbA18vgWIIHHE5X683sgE8dTiSqtYHKtpDO0RHSTp_Knh60ikeLM_N35WWs0opR8PV7WGZPjTwM6J5f2r5k2EUGANBnF62L5aLUddyKs"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-surface via-surface/80 to-transparent"></div>
|
||||
</div>
|
||||
<div class="relative z-10 max-w-4xl">
|
||||
<h1 class="text-6xl md:text-8xl font-black uppercase tracking-tighter text-on-surface mb-2">
|
||||
İletişim
|
||||
</h1>
|
||||
<div class="h-1 w-24 bg-primary-container"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Main Content -->
|
||||
<main class="grid grid-cols-1 lg:grid-cols-2 gap-0 min-h-[600px]">
|
||||
<!-- Left Column: Contact Details -->
|
||||
<section class="bg-surface-container p-12 lg:p-24 flex flex-col justify-center">
|
||||
<h2 class="text-3xl font-bold tracking-tighter uppercase mb-12 text-on-surface">Operasyon Merkezi</h2>
|
||||
<div class="space-y-12">
|
||||
<!-- Address -->
|
||||
<div class="flex items-start gap-6 group">
|
||||
<div class="bg-surface-container-high p-4 text-primary-container group-hover:bg-primary-container group-hover:text-on-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-3xl" data-icon="foundation">foundation</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-sm uppercase tracking-widest text-on-surface-variant mb-1 font-bold">Adres</p>
|
||||
<p class="text-xl font-medium text-on-surface leading-snug">
|
||||
Merkez Mah. Sanayi Sitesi No: 42<br/>Dalaman / Muğla
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Phone -->
|
||||
<div class="flex items-start gap-6 group">
|
||||
<div class="bg-surface-container-high p-4 text-primary-container group-hover:bg-primary-container group-hover:text-on-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-3xl" data-icon="distance">distance</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-sm uppercase tracking-widest text-on-surface-variant mb-1 font-bold">Telefon</p>
|
||||
<p class="text-3xl font-black text-on-surface tracking-tighter">
|
||||
+90 252 692 XX XX
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Email -->
|
||||
<div class="flex items-start gap-6 group">
|
||||
<div class="bg-surface-container-high p-4 text-primary-container group-hover:bg-primary-container group-hover:text-on-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-3xl" data-icon="contact_support">contact_support</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-sm uppercase tracking-widest text-on-surface-variant mb-1 font-bold">E-Posta</p>
|
||||
<p class="text-xl font-medium text-on-surface">
|
||||
info@aydogannakliyat.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Social/Status Indicators -->
|
||||
<div class="mt-20 flex gap-4">
|
||||
<div class="px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-xs font-bold uppercase tracking-widest flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-primary-container"></span>
|
||||
7/24 Aktif Operasyon
|
||||
</div>
|
||||
<div class="px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-xs font-bold uppercase tracking-widest flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-tertiary-container"></span>
|
||||
Muğla & Çevresi
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Right Column: Contact Form -->
|
||||
<section class="bg-surface-container-low p-12 lg:p-24 flex flex-col justify-center border-l border-outline-variant/10">
|
||||
<h2 class="text-3xl font-bold tracking-tighter uppercase mb-8 text-on-surface">Teklif Talebi & Mesaj</h2>
|
||||
<form action="#" class="space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Adınız Soyadınız</label>
|
||||
<input class="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary-container focus:ring-0 text-on-surface p-4 transition-all" placeholder="Ahmet Yılmaz" type="text"/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">E-Posta</label>
|
||||
<input class="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary-container focus:ring-0 text-on-surface p-4 transition-all" placeholder="ahmet@example.com" type="email"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Telefon Numarası</label>
|
||||
<input class="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary-container focus:ring-0 text-on-surface p-4 transition-all" placeholder="+90 5xx xxx xx xx" type="tel"/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Mesajınız / İş Detayları</label>
|
||||
<textarea class="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary-container focus:ring-0 text-on-surface p-4 transition-all" placeholder="Taşıma yükü, mesafe ve tarih bilgisi belirtiniz..." rows="4"></textarea>
|
||||
</div>
|
||||
<button class="w-full bg-primary-container text-on-primary py-5 text-xl font-black uppercase tracking-widest hover:bg-primary-fixed-dim transition-all active:scale-[0.98]" type="submit">
|
||||
Gönder
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Map Section -->
|
||||
<section class="w-full h-[500px] bg-surface-container-lowest relative">
|
||||
<div class="absolute inset-0 flex items-center justify-center grayscale contrast-125 brightness-50 opacity-80">
|
||||
<!-- Mock Map Background -->
|
||||
<img alt="Map Location" class="w-full h-full object-cover" data-alt="stylized architectural map design of a city grid in dark charcoal tones with professional industrial aesthetics" data-location="Dalaman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD5Desu88UuLMQs0-2cNDeOMzanJF6G0Iiqrqo56itv6tXw1SexCDPYVblKrKLUKnyFvfSZiI2ArtL9z5dbDDuNUQUl4BFaON7rfxsXdIH7e89b4rqym8pfsugGqVybr4O91VQ5BqQ1q2od53qa3PzpP8AyPbuWZO9xHuFWu0nHx_SDxjDatzVeE5ZySY2qXYf2bJ_5GORZltIllO3vG5aDJMGzgnj1hLOcI29jxVlMve3ssgUQcFPJren6byGVzPXyTe44_5yHZ-k"/>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-surface/20"></div>
|
||||
<div class="relative z-10 h-full flex items-center justify-center">
|
||||
<div class="bg-surface p-8 border-l-4 border-primary-container max-w-sm">
|
||||
<span class="material-symbols-outlined text-primary-container text-4xl mb-4" data-icon="distance" style="font-variation-settings: 'FILL' 1;">distance</span>
|
||||
<h3 class="text-2xl font-black uppercase tracking-tighter text-on-surface mb-2">Lokasyonumuz</h3>
|
||||
<p class="text-on-surface-variant leading-relaxed mb-6 italic">
|
||||
Dalaman Sanayi Sitesi'nin kalbinde, tüm Ege ve Akdeniz bölgesine hızlı erişim noktasındayız.
|
||||
</p>
|
||||
<a class="text-primary-container font-bold uppercase tracking-widest text-sm flex items-center gap-2 hover:gap-4 transition-all" href="#">
|
||||
Yol Tarifi Al <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer -->
|
||||
<footer class="w-full rounded-none border-t border-[#D0C6AB]/10 bg-[#0E0E0E] flex flex-col md:flex-row justify-between items-center px-12 py-16 w-full">
|
||||
<div class="mb-8 md:mb-0">
|
||||
<div class="text-[#FFD700] font-black uppercase text-xl mb-2">Aydoğan Nakliyat Vinç</div>
|
||||
<p class="font-['Inter'] text-sm tracking-wide text-[#D0C6AB] max-w-xs">
|
||||
© 2024 Aydoğan Nakliyat Vinç. All rights reserved. Precision Engineering & Heavy Lifting.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-8 justify-center">
|
||||
<a class="font-['Inter'] text-sm tracking-wide text-[#D0C6AB] hover:text-white transition-colors" href="#">Privacy Policy</a>
|
||||
<a class="font-['Inter'] text-sm tracking-wide text-[#D0C6AB] hover:text-white transition-colors" href="#">Terms of Service</a>
|
||||
<a class="font-['Inter'] text-sm tracking-wide text-[#D0C6AB] hover:text-white transition-colors" href="#">Fleet Safety</a>
|
||||
<a class="font-['Inter'] text-sm tracking-wide text-[#D0C6AB] hover:text-white transition-colors" href="#">Certifications</a>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Floating WhatsApp Action (Inspired by SideNavBar CTAs) -->
|
||||
<div class="fixed bottom-8 right-8 z-50">
|
||||
<a class="group flex items-center gap-4 bg-primary-container text-on-primary p-4 shadow-2xl active:scale-90 transition-all duration-200" href="https://wa.me/902526920000">
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="text-[10px] font-black uppercase tracking-tighter opacity-70">Direct Line</span>
|
||||
<span class="font-headline font-bold text-sm">WHATSAPP</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-3xl" data-icon="contact_support" style="font-variation-settings: 'FILL' 1;">contact_support</span>
|
||||
</a>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
63
docs/prd.md
Normal file
63
docs/prd.md
Normal file
@@ -0,0 +1,63 @@
|
||||
PRD 2.0: Aydoğan Nakliyat Vinç - Modern & Lead Odaklı Web Projesi
|
||||
1. Proje Özeti (Güncellendi)
|
||||
Müşteri: Aydoğan Nakliyat Vinç (Dalaman)
|
||||
|
||||
Temel Hedef: Doğrudan İş Getirmek (Leads). Sitenin temel amacı, kullanıcının "Teklif Al" veya "Ara" butonuna basmasını sağlamaktır.
|
||||
|
||||
Görsel Vizyon: Geleneksel vinç firmalarından sıyrılan; modern, hareketli (animasyonlu), güven veren ve operasyonel gücü hissettiren birinci sınıf bir web sitesi.
|
||||
|
||||
2. Tasarım ve Kullanıcı Deneyimi (UI/UX) - [Yeni Odak]
|
||||
Bu kısım müşterinin "modernlik" isteğini karşılayacak.
|
||||
|
||||
A. Animasyon ve Hareket Stratejisi
|
||||
Smooth Scrolling: Sayfa kaydırması pürüzsüz ve akışkan olmalı.
|
||||
|
||||
Scroll-Triggered Animations: Kullanıcı sayfada aşağı indikçe vinç resimleri, teknik özellikler veya referans sayıları animasyonlu bir şekilde ekrana gelmeli. (Örn: Vinç kolu yukarı kalkıyor gibi bir efekt).
|
||||
|
||||
Parallax Efektleri: Arka plan görselleri (şantiye manzaraları) ve ön plan içerikleri farklı hızlarda hareket ederek derinlik hissi vermeli.
|
||||
|
||||
Lottie Animations: "Hızlı Servis" gibi ikonlar statik değil, hafif hareketli Lottie animasyonları olabilir.
|
||||
|
||||
Geçiş Efektleri: Sayfalar arası geçişler veya galeri görsellerine tıklama anları yumuşak olmalı.
|
||||
|
||||
B. Görsel Dil (Visual Identity)
|
||||
Renk Paleti: Sektörün standardı olan Güç/Enerji (Sarı/Turuncu) + Profesyonellik (Koyu Gri/Siyah) + Güven (Beyaz).
|
||||
|
||||
Tipografi: Modern, güçlü, sans-serif fontlar. (Örn: Inter, Poiret One, Oswald veya Montserrat).
|
||||
|
||||
3. Lead Generation (Müşteri Kazanımı) Odaklı Özellikler
|
||||
Sitenin her santimetrekaresi iş getirmek için tasarlanmalı.
|
||||
|
||||
Sticky "Hemen Teklif Al" Header: Sayfa ne kadar aşağı kaysa da, üstte "05XX XXX XX XX" telefonu ve "Hızlı Teklif Al" butonu sabit kalacak.
|
||||
|
||||
Floating WhatsApp Business: Sağ altta. "Operatörle Konuşun" veya "Fotoğraf Gönder, Teklif Al" metniyle. (Müşteri şantiyedeki sorunun fotoğrafını atabilir).
|
||||
|
||||
Hizmet Odaklı Kısa Formlar: Sadece "Bize Yazın" formu değil. "Vinç Kiralama" sayfasının sonunda "Kaç Tonluk Vinç Lazım?" diye başlayan 2 soruluk bir form olmalı.
|
||||
|
||||
Acil Durum Vurgusu: Gece çalışan veya kaza yapanlar için "7/24 Acil Müdahale" ibaresi her yerde göze çarpmalı.
|
||||
|
||||
4. Teknik Gereksinimler & Performans
|
||||
"Animasyonlu ve Modern" demek "Yavaş" demek olmamalı. SEO için hız çok önemli.
|
||||
|
||||
Altyapı: Mükemmel performans ve SEO için Next.js (React) veya Nuxt.js (Vue.js). Bu frameworkler animasyon kütüphaneleriyle (GSAP, Framer Motion) harika çalışır.
|
||||
|
||||
Görsel Optimizasyon: Tüm görseller WebP/AVIF formatında ve lazy-load (kaydırdıkça yüklenme) özelliğiyle gelmeli.
|
||||
|
||||
SEO Temeli (Özet):
|
||||
|
||||
Muğla ilçeleri odaklı (Dalaman, Ortaca, Fethiye, Göcek) URL yapısı.
|
||||
|
||||
Hızlı yükleme süreleri (PageSpeed Score > 90).
|
||||
|
||||
Kusursuz Mobil UI (Telefonda "tıklanamayacak kadar küçük buton" olmayacak).
|
||||
|
||||
5. İçerik Haritası (Taslak)
|
||||
Ana Sayfa (Hero: Hareketli Vinç Videosu/Görseli + Hızlı Teklif Al Butonu)
|
||||
|
||||
Hizmetlerimiz (Niş Alt Sayfalar: Tekne Taşıma, Çelik Montaj, Konteyner vb.)
|
||||
|
||||
Filomuz (Animasyonlu Kartlarla Araçlar)
|
||||
|
||||
Galeri/Referanslar (Zorlu Operasyonların Videoları)
|
||||
|
||||
İletişim (Harita, Adres, Tıkla Ara)
|
||||
78
lib/data.ts
Normal file
78
lib/data.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
import { Settings, ArrowUp, Truck, Compass, Shield, Zap, Clock, MapPin, Phone, Mail } from "lucide-react";
|
||||
|
||||
export const siteConfig = {
|
||||
name: "Aydoğan Nakliyat Vinç",
|
||||
url: "https://aydogannakliyatvinc.com",
|
||||
description: "Muğla Dalaman merkezli profesyonel vinç kiralama ve ağır nakliyat hizmetleri.",
|
||||
contact: {
|
||||
address: "Merkez Mah. Sanayi Sitesi No: 42 Dalaman / Muğla",
|
||||
phone: "+90 252 692 00 00",
|
||||
email: "info@aydogannakliyat.com",
|
||||
whatsapp: "902526920000",
|
||||
maps: "https://maps.google.com"
|
||||
},
|
||||
social: {
|
||||
facebook: "https://facebook.com/aydogannakliyatvinc",
|
||||
instagram: "https://instagram.com/aydogannakliyatvinc"
|
||||
}
|
||||
};
|
||||
|
||||
export const SERVICES = [
|
||||
{
|
||||
title: "Mobil Vinç Kiralama",
|
||||
description: "500 tona kadar kaldırma kapasitesine sahip geniş filomuzla, en zorlu şantiye koşullarında yüksek hassasiyetli operasyonlar.",
|
||||
image: "https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
title: "Sepetli Platform",
|
||||
description: "75 metreye kadar erişim sağlayan modern platform filomuzla yüksek irtifa montaj ve bakım işlerinizde maksimum güvenlik.",
|
||||
image: "https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
title: "Ağır Nakliyat",
|
||||
description: "Gabari dışı ve ağır tonajlı yüklerin özel ekipmanlar ve low-bed araçlarla emniyetli bir şekilde taşınması ve konumlandırılması.",
|
||||
image: "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?q=80&w=2070&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
title: "Proje Taşımacılığı",
|
||||
description: "Anahtar teslim endüstriyel tesis taşıma ve kurulum projeleri için mühendislik temelli uçtan uca lojistik planlama.",
|
||||
image: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=2070&auto=format&fit=crop"
|
||||
}
|
||||
];
|
||||
|
||||
export const FLEET_ITEMS = [
|
||||
{
|
||||
name: "Liebherr LTM 1300",
|
||||
description: "Endüstriyel ağır kaldırma operasyonları için maksimum stabilite ve erişim gücü.",
|
||||
capacity: "300 Ton",
|
||||
reach: "78 Metre",
|
||||
image: "https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop",
|
||||
status: "Müsait",
|
||||
category: "Mobil Vinç"
|
||||
},
|
||||
{
|
||||
name: "Hiyap 75 Ton",
|
||||
description: "Şehir içi dar alanlarda yüksek manevra kabiliyeti ve pratik yükleme çözümü.",
|
||||
capacity: "75 Ton",
|
||||
reach: "32 Metre",
|
||||
image: "https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop",
|
||||
status: "Bakımda",
|
||||
category: "Hiyap"
|
||||
},
|
||||
{
|
||||
name: "Sepetli Platform 45M",
|
||||
description: "Yüksek irtifa montaj ve bakım çalışmaları için güvenli çalışma sahası.",
|
||||
capacity: "450 Kg",
|
||||
reach: "45 Metre",
|
||||
image: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?q=80&w=2070&auto=format&fit=crop",
|
||||
status: "Müsait",
|
||||
category: "Sepetli Platform"
|
||||
}
|
||||
];
|
||||
|
||||
export const ABOUT_STATS = [
|
||||
{ label: "Yıllık Tecrübe", value: "20+" },
|
||||
{ label: "Tamamlanan Proje", value: "1500+" },
|
||||
{ label: "Modern Araç Filosu", value: "25+" },
|
||||
{ label: "Maksimum Kapasite", value: "500t" }
|
||||
];
|
||||
6
lib/utils.ts
Normal file
6
lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -1,7 +1,18 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'images.unsplash.com',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'lh3.googleusercontent.com',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
76
package-lock.json
generated
76
package-lock.json
generated
@@ -8,9 +8,13 @@
|
||||
"name": "aydogan",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.38.0",
|
||||
"lucide-react": "^1.8.0",
|
||||
"next": "16.2.3",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4"
|
||||
"react-dom": "19.2.4",
|
||||
"tailwind-merge": "^3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
@@ -2701,6 +2705,15 @@
|
||||
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
@@ -3692,6 +3705,33 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "12.38.0",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
|
||||
"integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.38.0",
|
||||
"motion-utils": "^12.36.0",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
@@ -4952,6 +4992,15 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.8.0.tgz",
|
||||
"integrity": "sha512-WuvlsjngSk7TnTBJ1hsCy3ql9V9VOdcPkd3PKcSmM34vJD8KG6molxz7m7zbYFgICwsanQWmJ13JlYs4Zp7Arw==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.21",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
||||
@@ -5019,6 +5068,21 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.38.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz",
|
||||
"integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.36.0"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "12.36.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz",
|
||||
"integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
@@ -6159,6 +6223,16 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwind-merge": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
|
||||
"integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/dcastil"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
|
||||
|
||||
@@ -9,9 +9,13 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^12.38.0",
|
||||
"lucide-react": "^1.8.0",
|
||||
"next": "16.2.3",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4"
|
||||
"react-dom": "19.2.4",
|
||||
"tailwind-merge": "^3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
|
||||
24
public/hizmetler.md
Normal file
24
public/hizmetler.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# Hizmetler ve Fiyatlandırma — Aydoğan Nakliyat Vinç
|
||||
|
||||
Aydoğan Nakliyat Vinç, Muğla ve Ege bölgesinde mühendislik temelli ağır kaldırma ve taşıma çözümleri sunar.
|
||||
|
||||
## Vinç Kiralama Hizmetleri
|
||||
- **Mobil Vinç (300-500 Ton):** Büyük ölçekli inşaat ve endüstriyel montaj projeleri.
|
||||
- **Hiyap Vinç (75 Ton):** Şehir içi yükleme ve boşaltma operasyonları.
|
||||
- **Sepetli Platform (45-75 Metre):** Yüksek irtifa bakım ve montaj işleri.
|
||||
|
||||
## Nakliyat Çözümleri
|
||||
- **Ağır Nakliyat:** Low-bed araçlar ile gabari dışı yük taşıma.
|
||||
- **Tekne/Yat Taşıma:** Marina ve tersane arası profesyonel transfer.
|
||||
- **Konteyner Taşıma:** 20' ve 40' konteyner nakliyesi.
|
||||
|
||||
## Bölgesel Kapsam
|
||||
1. **Birincil Bölge:** Dalaman, Muğla, Ortaca, Fethiye, Göcek, Köyceğiz.
|
||||
2. **İkincil Bölge:** Aydın, Denizli, İzmir, Antalya (Ege ve Akdeniz).
|
||||
3. **Genel Kapsam:** Tüm Türkiye geneli ağır yük projeleri.
|
||||
|
||||
## Teklif ve İletişim
|
||||
Fiyatlandırma işin süresine, kullanılacak makine kapasitesine ve mesafeye göre değişkenlik gösterir.
|
||||
- **Telefon:** +90 252 692 00 00
|
||||
- **E-posta:** info@aydogannakliyat.com
|
||||
- **Web:** https://aydogannakliyatvinc.com/iletisim
|
||||
22
public/llms.txt
Normal file
22
public/llms.txt
Normal file
@@ -0,0 +1,22 @@
|
||||
# Aydoğan Nakliyat Vinç
|
||||
|
||||
Muğla Dalaman merkezli profesyonel vinç kiralama ve ağır nakliyat hizmetleri.
|
||||
|
||||
## Temel Bilgiler
|
||||
- **Konum:** Dalaman, Muğla (Merkez Mah. Sanayi Sitesi No: 42)
|
||||
- **Hizmet Alanı:** Dalaman, Ortaca, Fethiye, Göcek başta olmak üzere tüm Ege Bölgesi ve Türkiye geneli.
|
||||
- **Operasyon:** 7/24 kesintisiz hizmet.
|
||||
- **İletişim:** +90 252 692 00 00 | info@aydogannakliyat.com
|
||||
|
||||
## Ana Hizmetler
|
||||
- Mobil Vinç Kiralama (500 tona kadar)
|
||||
- Sepetli Platform Hizmetleri (75 metreye kadar)
|
||||
- Ağır Nakliyat ve Low-bed Taşımacılığı
|
||||
- Tekne ve Yat Taşıma
|
||||
- Konteyner Nakliyesi
|
||||
- Proje Taşımacılığı ve Montaj
|
||||
|
||||
## Makine Parkuru
|
||||
Geniş filomuzda Liebherr, Groove gibi dünya markalarının 300-500 tonluk mobil vinçleri, 45-75 metrelik sepetli platformlar ve ağır sınıf hiyaplar bulunmaktadır.
|
||||
|
||||
Daha fazla bilgi için: https://aydogannakliyatvinc.com
|
||||
Reference in New Issue
Block a user