[V0_FILE]plaintext:file="public/images/hero-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/change-slide-7r8wQ4y0Qc8QISpqfH1IcQ0j6P6qbl.tsx" isMerged="true" [V0_FILE]plaintext:file="public/images/hero-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/change-slide-7r8wQ4y0Qc8QISpqfH1IcQ0j6P6qbl.tsx" isMerged="true" [V0_FILE]plaintext:file="public/images/hero-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/change-slide-7r8wQ4y0Qc8QISpqfH1IcQ0j6P6qbl.tsx" isMerged="true" [V0_FILE]plaintext:file="public/images/headquarters.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/change-slide-7r8wQ4y0Qc8QISpqfH1IcQ0j6P6qbl.tsx" isMerged="true" [V0_FILE]plaintext:file="public/images/luxury-residence.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/change-slide-7r8wQ4y0Qc8QISpqfH1IcQ0j6P6qbl.tsx" isMerged="true" [V0_FILE]plaintext:file="public/images/hotel-project.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/change-slide-7r8wQ4y0Qc8QISpqfH1IcQ0j6P6qbl.tsx" isMerged="true" [V0_FILE]plaintext:file="public/images/business-tower.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/change-slide-7r8wQ4y0Qc8QISpqfH1IcQ0j6P6qbl.tsx" isMerged="true" [V0_FILE]plaintext:file="public/images/shopping-mall.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/change-slide-7r8wQ4y0Qc8QISpqfH1IcQ0j6P6qbl.tsx" isMerged="true" [V0_FILE]plaintext:file="public/images/hotel-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/change-slide-7r8wQ4y0Qc8QISpqfH1IcQ0j6P6qbl.tsx" isMerged="true" [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#D4AF37", // Gold foreground: "#000000", // Black }, secondary: { DEFAULT: "#000000", // Black foreground: "#ffffff", // White }, accent: { DEFAULT: "#C0C0C0", // Silver foreground: "#000000", // Black }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, boxShadow: { gold: "0 4px 14px 0 rgba(212, 175, 55, 0.3)", silver: "0 4px 14px 0 rgba(192, 192, 192, 0.3)", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/logo.tsx" isEdit="true" isMerged="true" import { Building } from "lucide-react" export default function Logo() { return (

SANEX Group

) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground shadow-gold hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground shadow-md hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/contact-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" export default function ContactForm() { const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSuccess, setIsSuccess] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission await new Promise((resolve) => setTimeout(resolve, 1500)) setIsSubmitting(false) setIsSuccess(true) setFormData({ name: "", email: "", phone: "", message: "" }) // Reset success message after 5 seconds setTimeout(() => setIsSuccess(false), 5000) } return (

Adınız Soyadınız

E-posta Adresiniz

Telefon Numaranız

Mesajınız

</div>

<Button type="submit" className="w-full" disabled={isSubmitting}>
        {isSubmitting ? "Gönderiliyor..." : "Gönder"}
      </Button>

{isSuccess && (
        <div className="p-3 bg-green-50 text-green-700 rounded-md text-center shadow-md">
          Mesajınız başarıyla gönderildi. En kısa sürede size dönüş yapacağız.
        </div>
      )}
    </form>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import Navbar from "@/components/navbar"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "SANEX Şirketler Grubu - İnşaat & Otelcilik",
  description: "SANEX Şirketler Grubu, inşaat, hafriyat ve otelcilik alanlarında hizmet veren lider bir kuruluştur.",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="tr" className="scroll-smooth">
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <Navbar />
          <div className="pt-20">{children}</div>
          <footer className="bg-secondary text-white py-12">
            <div className="container px-4">
              <div className="grid md:grid-cols-3 gap-8">
                <div>
                  <h3 className="text-xl font-bold mb-4 text-primary">SANEX Şirketler Grubu</h3>
                  <p className="text-gray-400">
                    İnşaat, hafriyat ve otelcilik alanlarında kaliteli ve güvenilir hizmet sunuyoruz.
                  </p>
                </div>
                <div>
                  <h3 className="text-xl font-bold mb-4 text-primary">İletişim</h3>
                  <p className="text-gray-400">Merdivenköy, Dikyol Sk. No:2, 34732 Kadıköy/İstanbul</p>
                  <p className="text-gray-400">+90 537 017 55 16</p>
                  <p className="text-gray-400">info@sanaexgroup.com</p>
                </div>
                <div>
                  <h3 className="text-xl font-bold mb-4 text-primary">Hızlı Bağlantılar</h3>
                  <ul className="space-y-2 text-gray-400">
                    <li>
                      <a href="#about" className="hover:text-primary transition-colors">
                        Hakkımızda
                      </a>
                    </li>
                    <li>
                      <a href="#services" className="hover:text-primary transition-colors">
                        Hizmetler
                      </a>
                    </li>
                    <li>
                      <a href="#projects" className="hover:text-primary transition-colors">
                        Projeler
                      </a>
                    </li>
                    <li>
                      <a href="#contact" className="hover:text-primary transition-colors">
                        İletişim
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
                <p>© {new Date().getFullYear()} SANEX Şirketler Grubu. Tüm hakları saklıdır.</p>
              </div>
            </div>
          </footer>
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Menu, X } from "lucide-react"
import Logo from "@/components/logo"
import { Button } from "@/components/ui/button"

export default function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen)
  }

return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm shadow-md">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-20">
          <Link href="/" className="flex items-center">
            <Logo />
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <Link href="#about" className="text-gray-700 hover:text-primary font-medium transition-colors">
              Hakkımızda
            </Link>
            <Link href="#services" className="text-gray-700 hover:text-primary font-medium transition-colors">
              Hizmetler
            </Link>
            <Link href="#projects" className="text-gray-700 hover:text-primary font-medium transition-colors">
              Projeler
            </Link>
            <Link href="#hotels" className="text-gray-700 hover:text-primary font-medium transition-colors">
              Otellerimiz
            </Link>
            <Link href="#contact" className="text-gray-700 hover:text-primary font-medium transition-colors">
              İletişim
            </Link>
            <Button asChild>
              <Link href="#contact">Teklif Al</Link>
            </Button>
          </nav>

{/* Mobile Menu Button */}
          <button
            className="md:hidden text-gray-700 focus:outline-none"
            onClick={toggleMenu}
            aria-label={isMenuOpen ? "Menüyü Kapat" : "Menüyü Aç"}
          >
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>

{/* Mobile Navigation */}
      {isMenuOpen && (
        <div className="md:hidden bg-white border-t">
          <div className="container mx-auto px-4 py-4">
            <nav className="flex flex-col space-y-4">
              <Link
                href="#about"
                className="text-gray-700 hover:text-primary font-medium py-2 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Hakkımızda
              </Link>
              <Link
                href="#services"
                className="text-gray-700 hover:text-primary font-medium py-2 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Hizmetler
              </Link>
              <Link
                href="#projects"
                className="text-gray-700 hover:text-primary font-medium py-2 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Projeler
              </Link>
              <Link
                href="#hotels"
                className="text-gray-700 hover:text-primary font-medium py-2 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Otellerimiz
              </Link>
              <Link
                href="#contact"
                className="text-gray-700 hover:text-primary font-medium py-2 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                İletişim
              </Link>
              <Button asChild className="w-full">
                <Link href="#contact" onClick={() => setIsMenuOpen(false)}>
                  Teklif Al
                </Link>
              </Button>
            </nav>
          </div>
        </div>
      )}
    </header>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem; /* Genel yazı boyutunu küçülttüm */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 90%; /* Başlık boyutlarını küçülttüm */
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

.text-smaller {
    font-size: 0.9rem;
  }

.heading-smaller {
    font-size: 90%;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;

--card: 0 0% 100%;
    --card-foreground: 0 0% 0%;

--popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;

--primary: 46 55% 52%;
    --primary-foreground: 0 0% 0%;

--secondary: 0 0% 0%;
    --secondary-foreground: 0 0% 100%;

--muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

--accent: 0 0% 75.3%;
    --accent-foreground: 0 0% 0%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 0%;

--radius: 0.5rem;
  }

.dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;

--card: 0 0% 0%;
    --card-foreground: 0 0% 100%;

--popover: 0 0% 0%;
    --popover-foreground: 0 0% 100%;

--primary: 46 55% 52%;
    --primary-foreground: 0 0% 0%;

--secondary: 0 0% 100%;
    --secondary-foreground: 0 0% 0%;

--muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

--accent: 0 0% 75.3%;
    --accent-foreground: 0 0% 0%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.gold-gradient {
  background: linear-gradient(135deg, #d4af37 0%, #f5e7a3 50%, #d4af37 100%);
}

.silver-gradient {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%);
}

.image-frame {
  @apply relative overflow-hidden rounded-lg shadow-lg border-2 border-primary;
}

.button-gold {
  @apply bg-primary text-primary-foreground hover:bg-primary/90 shadow-gold transition-all;
}

.button-black {
  @apply bg-secondary text-secondary-foreground hover:bg-secondary/90 shadow-md transition-all;
}

.card-shadow {
  @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
}

[V0_FILE]typescriptreact:file="components/project-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Image from "next/image"

interface ProjectCardProps {
  image: string
  title: string
  description: string
}

export default function ProjectCard({ image, title, description }: ProjectCardProps) {
  return (
    <div className="group overflow-hidden rounded-lg card-shadow bg-white">
      <div className="relative h-64 overflow-hidden image-frame">
        <Image
          src={image || "/placeholder.svg"}
          alt={title}
          fill
          className="object-cover transition-transform duration-500 group-hover:scale-110"
        />
      </div>
      <div className="p-6 bg-white">
        <h3 className="text-lg font-bold mb-2 heading-smaller">{title}</h3>
        <p className="text-muted-foreground text-smaller">{description}</p>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/hotel-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ExternalLink } from "lucide-react"

interface HotelCardProps {
  image: string
  name: string
  description: string
  website: string
}

export default function HotelCard({ image, name, description, website }: HotelCardProps) {
  return (
    <div className="bg-white rounded-lg card-shadow overflow-hidden">
      <div className="relative h-64 overflow-hidden image-frame">
        <Image src={image || "/placeholder.svg"} alt={name} fill className="object-cover" />
      </div>
      <div className="p-6">
        <h3 className="text-lg font-bold mb-2 heading-smaller">{name}</h3>
        <p className="text-muted-foreground mb-4 text-smaller">{description}</p>
        <Button asChild variant="outline" className="w-full button-gold">
          <Link
            href={website}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center justify-center text-smaller"
          >
            Ziyaret Et
            <ExternalLink className="ml-2 h-4 w-4" />
          </Link>
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/service-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type { ReactNode } from "react"

interface ServiceCardProps {
  icon: ReactNode
  title: string
  description: string
}

export default function ServiceCard({ icon, title, description }: ServiceCardProps) {
  return (
    <div className="bg-white p-8 rounded-lg card-shadow hover:border-primary hover:border transition-all">
      <div className="text-primary mb-4">{icon}</div>
      <h3 className="text-lg font-bold mb-3 heading-smaller">{title}</h3>
      <p className="text-muted-foreground text-smaller">{description}</p>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/testimonial-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Quote } from "lucide-react"

interface TestimonialCardProps {
  quote: string
  author: string
  position: string
}

export default function TestimonialCard({ quote, author, position }: TestimonialCardProps) {
  return (
    <div className="bg-white p-8 rounded-lg card-shadow border border-accent/30">
      <Quote className="h-8 w-8 text-primary mb-4" />
      <p className="text-muted-foreground mb-4 italic text-smaller">{quote}</p>
      <div>
        <h4 className="font-bold heading-smaller">{author}</h4>
        <p className="text-sm text-muted-foreground text-smaller">{position}</p>
      </div>
    </div>
  )
}

[V0_FILE]plaintext:file="public/images/hero-1.png" url="https://www.sanexgroup.com/5.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/hero-2.png" url="https://www.sanexgroup.com/13.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/hero-3.png" url="https://www.sanexgroup.com/3.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/about.png" url="https://www.sanexgroup.com/25.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/project-1.png" url="https://www.sanexgroup.com/24.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/project-2.png" url="https://www.sanexgroup.com/22.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/project-3.png" url="https://www.sanexgroup.com/21.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/project-4.png" url="https://www.sanexgroup.com/20.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/hotel-1.jpg" url="https://www.sanexgroup.com/istodel.jpg" isMerged="true"

[V0_FILE]plaintext:file="public/images/hotel-2.jpg" url="https://www.sanexgroup.com/dis12.jpg" isMerged="true"

[V0_FILE]plaintext:file="public/images/hotel-3.png" url="https://www.sanexgroup.com/lo2.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/construction.jpg" url="https://www.sanexgroup.com/17.jpg" isMerged="true"

[V0_FILE]plaintext:file="public/images/cement.png" url="https://www.sanexgroup.com/16.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/iron.png" url="https://www.sanexgroup.com/10.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/brick.png" url="https://www.sanexgroup.com/14.png" isMerged="true"

[V0_FILE]plaintext:file="public/images/textile.jpeg" url="https://www.sanexgroup.com/cocuktissort.jpeg" isMerged="true"

[V0_FILE]plaintext:file="public/images/baby-clothes.jpeg" url="https://www.sanexgroup.com/bebektulum.jpeg" isMerged="true"

[V0_FILE]plaintext:file="public/images/child-clothes.jpeg" url="https://www.sanexgroup.com/cocukelbise.jpeg" isMerged="true"

[V0_FILE]plaintext:file="public/images/apollon-room-1.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/apollon-garden-otel_77a5ab13-60nIsTKUKo6eqRxminKzVKmGIQURzv.webp"

[V0_FILE]plaintext:file="public/images/apollon-room-2.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/apollon-garden-otel_ac2bdc7e-fRwwZXg8YkG0N1ETljL7xbf3De7l37.webp"

[V0_FILE]plaintext:file="public/images/apollon-exterior.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/apollon-garden-otel_3e80b23b-mSEQHGb6LmPqIbjrkVNuHJmcOxqAb4.webp"

[V0_FILE]plaintext:file="public/images/istanbul-hotel.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/istodel.jpg-bKqbnqAVuSwu2zG4OnX594aFeQsfkV.jpeg"

[V0_FILE]plaintext:file="public/images/adrasan-hotel.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dis12.jpg-qHcvAlxO8lpFyqlj11fShgcONTI3KM.jpeg"

[V0_FILE]plaintext:file="public/images/sanex-building.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/25.png-PuMA24RAmyTTD44J0vFwiDG657fzaK.jpeg"

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
"use client"

import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Award, Building2, ChevronRight, Hotel, Mail, MapPin, Phone, ShieldCheck, Truck, X } from "lucide-react"
import HeroSlider from "@/components/hero-slider"
import ServiceCard from "@/components/service-card"
import ProjectCard from "@/components/project-card"
import HotelCard from "@/components/hotel-card"
import TestimonialCard from "@/components/testimonial-card"
import ContactForm from "@/components/contact-form"

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col">
      {/* Hero Section */}
      <section className="relative w-full h-[600px] md:h-[700px]">
        <HeroSlider />
        <div className="absolute inset-0 bg-black/60 flex items-center justify-center">
          <div className="container px-4 text-center">
            <h1 className="text-4xl md:text-6xl font-bold text-primary mb-4">Güçlü Yapılar, Güçlü Gelecek</h1>
            <p className="text-xl text-white/90 mb-8 max-w-3xl mx-auto">
              İnşaat, hafriyat ve otelcilikte yenilikçi çözümler sunuyoruz.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button asChild size="lg" className="text-base">
                <Link href="#services">Hizmetlerimizi Keşfet</Link>
              </Button>
              <Button asChild variant="secondary" size="lg" className="text-base">
                <Link href="#contact">Teklif Al</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

{/* About Section */}
      <section id="about" className="py-20 bg-white">
        <div className="container px-4">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="relative h-[400px] rounded-lg overflow-hidden image-frame">
              <Image src="/images/sanex-building.jpeg" alt="SANEX Genel Merkezi" fill className="object-cover" />
            </div>
            <div>
              <h2 className="text-3xl font-bold mb-6 text-secondary">Hakkımızda</h2>
              <p className="text-muted-foreground mb-6">
                SANEX Şirketler Grubu, inşaat, hafriyat, otelcilik ve gayrimenkul sektörlerinde yılların deneyimi ile
                lider bir firmadır. Modern mimariyi, yenilikçi teknolojilerle buluşturarak, güvenilir ve kaliteli
                projeler sunuyoruz.
              </p>

<ul className="space-y-3 mb-8">
                <li className="flex gap-3">
                  <div className="mt-1 text-primary">
                    <Award size={20} />
                  </div>
                  <div>
                    <span className="font-semibold">Küresel Vizyon:</span> Yurt içi ve yurt dışında prestijli projelere
                    imza atıyoruz.
                  </div>
                </li>
                <li className="flex gap-3">
                  <div className="mt-1 text-primary">
                    <Building2 size={20} />
                  </div>
                  <div>
                    <span className="font-semibold">Güçlü Altyapı:</span> En son inşaat teknolojileriyle sürdürülebilir
                    ve dayanıklı yapılar inşa ediyoruz.
                  </div>
                </li>
                <li className="flex gap-3">
                  <div className="mt-1 text-primary">
                    <Hotel size={20} />
                  </div>
                  <div>
                    <span className="font-semibold">Otelcilik:</span> Lüks konaklama ve tatil deneyimi sunan
                    otellerimizle sektörde fark yaratıyoruz.
                  </div>
                </li>
              </ul>

<Button asChild>
                <Link href="#projects">
                  Projelerimizi Keşfet
                  <ChevronRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

{/* Services Section */}
      <section id="services" className="py-20 bg-gray-50">
        <div className="container px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4 text-secondary">Hizmetlerimiz</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              SANEX olarak müşterilerimize kapsamlı ve kaliteli hizmetler sunuyoruz.
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            <ServiceCard
              icon={<Building2 className="h-10 w-10" />}
              title="İnşaat"
              description="Konut, ticari ve endüstriyel yapılar için kapsamlı inşaat hizmetleri sunuyoruz."
            />
            <ServiceCard
              icon={<Truck className="h-10 w-10" />}
              title="Hafriyat"
              description="Modern ekipmanlarla profesyonel hafriyat ve zemin düzenleme hizmetleri."
            />
            <ServiceCard
              icon={<Hotel className="h-10 w-10" />}
              title="Otelcilik"
              description="Lüks ve konforlu otellerimizle misafirlerimize unutulmaz deneyimler sunuyoruz."
            />
          </div>
        </div>
      </section>

{/* Projects Section */}
      <section id="projects" className="py-20 bg-white">
        <div className="container px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4 text-secondary">Projelerimiz</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              SANEX olarak, inşaat ve otelcilik alanında prestijli projelere imza atıyoruz.
            </p>
          </div>

{/* Hotels Section */}
      <section id="hotels" className="py-20 bg-gray-50">
        <div className="container px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4 text-secondary">Otellerimiz</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              SANEX Holding'in lüks ve konforlu otellerinde unutulmaz bir tatil deneyimi yaşayın.
            </p>
          </div>

{/* Products Section */}
      <section id="products" className="py-20 bg-white">
        <div className="container px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4 text-secondary">Ürünlerimiz</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              SANEX olarak sunduğumuz kaliteli ürünleri keşfedin.
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-8">
            {/* Construction Materials */}
            <div className="bg-white rounded-lg card-shadow overflow-hidden">
              <div className="relative h-64 overflow-hidden image-frame">
                <Image src="/images/construction.jpg" alt="İnşaat Malzemeleri" fill className="object-cover" />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2 heading-smaller">İnşaat Malzemeleri</h3>
                <p className="text-muted-foreground mb-4 text-smaller">
                  Yüksek kaliteli inşaat malzemelerimizi keşfedin.
                </p>
                <Button
                  variant="default"
                  className="w-full"
                  onClick={() => document.getElementById("construction-modal")?.classList.remove("hidden")}
                >
                  İncele
                </Button>
              </div>
            </div>

{/* Textile Products */}
            <div className="bg-white rounded-lg card-shadow overflow-hidden">
              <div className="relative h-64 overflow-hidden image-frame">
                <Image src="/images/textile.jpeg" alt="Tekstil Ürünleri" fill className="object-cover" />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2 heading-smaller">Tekstil Ürünleri</h3>
                <p className="text-muted-foreground mb-4 text-smaller">
                  Bebek ve çocuk giyim ürünlerimizle konforu yaşayın. Toptan Sipariş için Ürünlerimizi İnceleyin.
                </p>
                <Button
                  variant="default"
                  className="w-full"
                  onClick={() => document.getElementById("textile-modal")?.classList.remove("hidden")}
                >
                  İncele
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Construction Materials Modal */}
      <div
        id="construction-modal"
        className="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
      >
        <div className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto card-shadow">
          <div className="p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-secondary">İnşaat Malzemeleri</h2>
              <button
                onClick={() => document.getElementById("construction-modal")?.classList.add("hidden")}
                className="text-gray-500 hover:text-gray-700"
              >
                <X size={24} />
              </button>
            </div>

<div className="grid md:grid-cols-3 gap-6">
              <div className="bg-white rounded-lg card-shadow overflow-hidden">
                <div className="relative h-48 overflow-hidden image-frame">
                  <Image src="/images/cement.png" alt="Çimento" fill className="object-cover" />
                </div>
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2 heading-smaller">Çimento</h3>
                  <p className="text-muted-foreground text-smaller">Yüksek kaliteli çimento ürünleri.</p>
                </div>
              </div>

<div className="bg-white rounded-lg card-shadow overflow-hidden">
                <div className="relative h-48 overflow-hidden image-frame">
                  <Image src="/images/iron.png" alt="Demir" fill className="object-cover" />
                </div>
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2 heading-smaller">Demir</h3>
                  <p className="text-muted-foreground text-smaller">Güçlü ve dayanıklı demir malzemeleri.</p>
                </div>
              </div>

<div className="bg-white rounded-lg card-shadow overflow-hidden">
                <div className="relative h-48 overflow-hidden image-frame">
                  <Image src="/images/brick.png" alt="Tuğla" fill className="object-cover" />
                </div>
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2 heading-smaller">Tuğla</h3>
                  <p className="text-muted-foreground text-smaller">Farklı projeler için çeşitli tuğla seçenekleri.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Textile Products Modal */}
      <div id="textile-modal" className="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto card-shadow">
          <div className="p-6">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-secondary">Tekstil Ürünleri</h2>
              <button
                onClick={() => document.getElementById("textile-modal")?.classList.add("hidden")}
                className="text-gray-500 hover:text-gray-700"
              >
                <X size={24} />
              </button>
            </div>

<div className="grid md:grid-cols-2 gap-6">
              <div className="bg-white rounded-lg card-shadow overflow-hidden">
                <div className="relative h-64 overflow-hidden image-frame">
                  <Image src="/images/baby-clothes.jpeg" alt="Bebek Giyim" fill className="object-cover" />
                </div>
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2 heading-smaller">Bebek Giyim</h3>
                  <p className="text-muted-foreground text-smaller">Yumuşak ve konforlu bebek giysileri.</p>
                </div>
              </div>

<div className="bg-white rounded-lg card-shadow overflow-hidden">
                <div className="relative h-64 overflow-hidden image-frame">
                  <Image src="/images/child-clothes.jpeg" alt="Çocuk Giyim" fill className="object-cover" />
                </div>
                <div className="p-4">
                  <h3 className="text-lg font-bold mb-2 heading-smaller">Çocuk Giyim</h3>
                  <p className="text-muted-foreground text-smaller">Rahat ve şık çocuk kıyafetleri.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Why Choose Us Section */}
      <section id="why-us" className="py-20 bg-gray-50">
        <div className="container px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4 text-secondary">Neden Bizi Seçmelisiniz?</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">SANEX olarak farkımızı ortaya koyan değerlerimiz.</p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            <div className="bg-white p-8 rounded-lg card-shadow">
              <Award className="h-12 w-12 text-primary mb-4" />
              <h3 className="text-xl font-bold mb-3">10+ Yıllık Deneyim</h3>
              <p className="text-muted-foreground mb-4">
                İnşaat ve otelcilik sektörlerinde edindiğimiz köklü tecrübeyle, projelerinizi en iyi şekilde hayata
                geçiriyoruz.
              </p>
              <ul className="space-y-2">
                <li className="flex gap-2">
                  <div className="text-primary">•</div>
                  <div>
                    <span className="font-medium">200+ Tamamlanan Proje:</span> Sanayi tesislerinden lüks otellere.
                  </div>
                </li>
                <li className="flex gap-2">
                  <div className="text-primary">•</div>
                  <div>
                    <span className="font-medium">Kapsamlı Ekip:</span> Alanında uzman mühendis ve mimarlar.
                  </div>
                </li>
                <li className="flex gap-2">
                  <div className="text-primary">•</div>
                  <div>
                    <span className="font-medium">Uluslararası Standartlar:</span> Global kalite ve sertifikalara
                    uyumluluk.
                  </div>
                </li>
              </ul>
            </div>

<div className="bg-white p-8 rounded-lg card-shadow">
              <ShieldCheck className="h-12 w-12 text-primary mb-4" />
              <h3 className="text-xl font-bold mb-3">Kalite Garantisi</h3>
              <p className="text-muted-foreground mb-4">
                Yüksek kaliteli malzemeler ve ileri teknoloji kullanarak projelerinizde maksimum güvenlik ve
                dayanıklılığı sağlıyoruz.
              </p>
              <ul className="space-y-2">
                <li className="flex gap-2">
                  <div className="text-primary">•</div>
                  <div>
                    <span className="font-medium">1. Sınıf Malzemeler:</span> İnşaat ve dekorasyonda üstün kalite.
                  </div>
                </li>
                <li className="flex gap-2">
                  <div className="text-primary">•</div>
                  <div>
                    <span className="font-medium">Teknolojik Altyapı:</span> Akıllı bina sistemleri ve yenilikçi
                    çözümler.
                  </div>
                </li>
                <li className="flex gap-2">
                  <div className="text-primary">•</div>
                  <div>
                    <span className="font-medium">Enerji Verimliliği:</span> Çevre dostu ve sürdürülebilir projeler.
                  </div>
                </li>
              </ul>
            </div>

<div className="bg-white p-8 rounded-lg card-shadow">
              <ShieldCheck className="h-12 w-12 text-primary mb-4" />
              <h3 className="text-xl font-bold mb-3">Güvenilir Hizmet</h3>
              <p className="text-muted-foreground mb-4">
                Müşteri memnuniyetini ön planda tutarak, projelerinizi zamanında ve eksiksiz tamamlıyoruz.
              </p>
              <ul className="space-y-2">
                <li className="flex gap-2">
                  <div className="text-primary">•</div>
                  <div>
                    <span className="font-medium">%98 Müşteri Memnuniyeti:</span> Müşterilerimizin geri bildirimleriyle
                    gelişiyoruz.
                  </div>
                </li>
                <li className="flex gap-2">
                  <div className="text-primary">•</div>
                  <div>
                    <span className="font-medium">Zamanında Teslimat:</span> Planlanan sürede projelerinizi
                    tamamlıyoruz.
                  </div>
                </li>
                <li className="flex gap-2">
                  <div className="text-primary">•</div>
                  <div>
                    <span className="font-medium">Şeffaf Süreç:</span> Tüm aşamalarda açık iletişim ve düzenli
                    bilgilendirme.
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

{/* Testimonials Section */}
      <section id="testimonials" className="py-20 bg-white">
        <div className="container px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4 text-secondary">Müşterilerimiz Ne Diyor?</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Müşterilerimizin memnuniyeti bizim için en büyük başarıdır.
            </p>
          </div>

{/* Contact Section */}
      <section id="contact" className="py-20 bg-gray-50">
        <div className="container px-4">
          <div className="grid md:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold mb-6 text-secondary">İletişim</h2>
              <p className="text-muted-foreground mb-8">
                Bize ulaşın ve projeleriniz için teklif alın. Uzman ekibimiz size en kısa sürede dönüş yapacaktır.
              </p>

<div className="space-y-4 mb-8">
                <div className="flex items-start gap-4">
                  <MapPin className="h-6 w-6 text-primary mt-1" />
                  <div>
                    <h3 className="font-semibold text-lg">Adres</h3>
                    <p className="text-muted-foreground">Merdivenköy, Dikyol Sk. No:2, 34732 Kadıköy/İstanbul</p>
                  </div>
                </div>

<div className="flex items-start gap-4">
                  <Phone className="h-6 w-6 text-primary mt-1" />
                  <div>
                    <h3 className="font-semibold text-lg">Telefon</h3>
                    <p className="text-muted-foreground">+90 537 017 55 16</p>
                  </div>
                </div>

<div className="flex items-start gap-4">
                  <Mail className="h-6 w-6 text-primary mt-1" />
                  <div>
                    <h3 className="font-semibold text-lg">E-Posta</h3>
                    <p className="text-muted-foreground">info@sanaexgroup.com</p>
                  </div>
                </div>
              </div>

<div>
              <h2 className="text-3xl font-bold mb-6 text-secondary">Teklif Alın</h2>
              <ContactForm />
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}

[V0_FILE]typescriptreact:file="components/hero-slider.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"

const slides = [
  {
    id: 1,
    image: "/images/sanex-building.jpeg",
    alt: "SANEX Genel Merkezi",
  },
  {
    id: 2,
    image: "/images/apollon-room-1.webp",
    alt: "Lüks Otel Odası",
  },
  {
    id: 3,
    image: "/images/apollon-exterior.webp",
    alt: "Otel Dış Görünüm",
  },
]

export default function HeroSlider() {
  const [currentSlide, setCurrentSlide] = useState(0)

useEffect(() => {
    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length)
    }, 5000)

return () => clearInterval(interval)
  }, [])

return (
    <div className="relative w-full h-full overflow-hidden">
      {slides.map((slide, index) => (
        <div
          key={slide.id}
          className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
            index === currentSlide ? "opacity-100" : "opacity-0"
          }`}
        >
          <Image
            src={slide.image || "/placeholder.svg"}
            alt={slide.alt}
            fill
            priority={index === 0}
            className="object-cover"
          />
        </div>
      ))}

<div className="absolute bottom-6 left-0 right-0 flex justify-center gap-2">
        {slides.map((_, index) => (
          <button
            key={index}
            className={`w-3 h-3 rounded-full transition-all ${
              index === currentSlide ? "bg-white scale-125" : "bg-white/50"
            }`}
            onClick={() => setCurrentSlide(index)}
            aria-label={`Go to slide ${index + 1}`}
          />
        ))}
      </div>
    </div>
  )
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This