From cd26c9c36b8e84d4166109649b31fb78f5e7921e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= <sedat.ozturk@sozsoft.com>
Date: Tue, 18 Nov 2025 21:27:17 +0300
Subject: [PATCH] =?UTF-8?q?Ana=20sayfa=20d=C3=BCzenlemesi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/public/Home.tsx | 221 +++++++++++++++++++++++++++--------
 1 file changed, 172 insertions(+), 49 deletions(-)

diff --git a/ui/src/views/public/Home.tsx b/ui/src/views/public/Home.tsx
index b292481f..5f36740b 100644
--- a/ui/src/views/public/Home.tsx
+++ b/ui/src/views/public/Home.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import {
   FaArrowRight,
@@ -13,7 +13,9 @@ import {
   FaBookOpen,
   FaCreditCard,
   FaRegComment,
-  FaPhone
+  FaPhone,
+  FaChevronLeft,
+  FaChevronRight
 } from 'react-icons/fa';
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { ROUTES_ENUM } from '@/routes/route.constant'
@@ -21,6 +23,88 @@ import { Helmet } from 'react-helmet'
 
 const Home: React.FC = () => {
   const { translate } = useLocalization()
+  const [currentSlide, setCurrentSlide] = useState(0)
+
+  const slides = [
+    {
+      title: "Türkiye'nin Lider Dil Kursu Yazılımı",
+      subtitle: "Dil eğitimi kurumlarınız için özel olarak tasarlanmış, kapsamlı ve kolay kullanımlı yazılım çözümü",
+      services: [
+        {
+          icon: <FaCalendarAlt className="mx-auto mb-4 text-blue-400" size={40} />,
+          title: translate('::Public.hero.service1.title'),
+          desc: translate('::Public.hero.service1.desc')
+        },
+        {
+          icon: <FaUsers className="mx-auto mb-4 text-purple-400" size={40} />,
+          title: translate('::Public.hero.service2.title'),
+          desc: translate('::Public.hero.service2.desc')
+        },
+        {
+          icon: <FaShieldAlt className="mx-auto mb-4 text-indigo-400" size={40} />,
+          title: translate('::Public.hero.service3.title'),
+          desc: translate('::Public.hero.service3.desc')
+        }
+      ]
+    },
+    {
+      title: "Yeni Nesil ERP Platformu",
+      subtitle: "İşletmenizi dijital dönüşüme hazırlayan, entegre ve ölçeklenebilir kurumsal kaynak planlama sistemi",
+      services: [
+        {
+          icon: <FaChartBar className="mx-auto mb-4 text-green-400" size={40} />,
+          title: "İş Zekası",
+          desc: "Gelişmiş raporlama ve analitik araçlar"
+        },
+        {
+          icon: <FaCreditCard className="mx-auto mb-4 text-yellow-400" size={40} />,
+          title: "Finans Yönetimi",
+          desc: "Tam entegre muhasebe ve finans modülü"
+        },
+        {
+          icon: <FaDatabase className="mx-auto mb-4 text-red-400" size={40} />,
+          title: "Veri Güvenliği",
+          desc: "Kurumsal düzeyde veri koruma"
+        }
+      ]
+    },
+    {
+      title: "Low Code Platform",
+      subtitle: "Kod yazmadan hızlı uygulama geliştirin, iş süreçlerinizi kolayca dijitalleştirin",
+      services: [
+        {
+          icon: <FaDesktop className="mx-auto mb-4 text-cyan-400" size={40} />,
+          title: "Görsel Tasarım",
+          desc: "Sürükle-bırak ile uygulama geliştirme"
+        },
+        {
+          icon: <FaServer className="mx-auto mb-4 text-orange-400" size={40} />,
+          title: "Otomatik API",
+          desc: "Otomatik oluşturulan RESTful servisler"
+        },
+        {
+          icon: <FaMobileAlt className="mx-auto mb-4 text-pink-400" size={40} />,
+          title: "Çoklu Platform",
+          desc: "Web, mobil ve desktop uygulamalar"
+        }
+      ]
+    }
+  ]
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % slides.length)
+    }, 5000)
+    return () => clearInterval(timer)
+  }, [])
+
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % slides.length)
+  }
+
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length)
+  }
 
   const features = [
     {
@@ -100,8 +184,8 @@ const Home: React.FC = () => {
         defaultTitle="Erp Platform"
       ></Helmet>
 
-      {/* Hero */}
-      <div className="relative min-h-screen">
+      {/* Hero Carousel */}
+      <div className="relative min-h-screen overflow-hidden">
         <div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900"></div>
         <div
           className="absolute inset-0 opacity-20"
@@ -113,55 +197,94 @@ const Home: React.FC = () => {
           }}
         ></div>
 
-        <div className="relative container mx-auto px-4 pt-32 pb-16">
-          <div className="max-w-4xl mx-auto text-center">
-            <h1 className="text-3xl md:text-5xl font-bold mb-6 text-white">
-              {translate('::Public.hero.title')}
-            </h1>
-            <p className="text-xl md:text-2xl text-gray-300 mb-12">
-              {translate('::Public.hero.subtitle')}
-            </p>
+        {/* Carousel Content */}
+        <div className="relative container mx-auto px-4 pt-32 pb-16 h-screen flex items-center">
+          {slides.map((slide, index) => (
+            <div
+              key={index}
+              className={`absolute inset-0 transition-all duration-700 ease-in-out ${
+                index === currentSlide
+                  ? 'opacity-100 translate-x-0'
+                  : index < currentSlide
+                  ? 'opacity-0 -translate-x-full'
+                  : 'opacity-0 translate-x-full'
+              }`}
+            >
+              <div className="container mx-auto px-4 pt-32">
+                <div className="max-w-4xl mx-auto text-center">
+                  <h1 className="text-3xl md:text-6xl font-bold mb-6 text-white animate-fade-in">
+                    {slide.title}
+                  </h1>
+                  <p className="text-xl md:text-2xl text-gray-300 mb-12 animate-fade-in-delay">
+                    {slide.subtitle}
+                  </p>
 
-            <div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
-              <Link
-                to={ROUTES_ENUM.public.contact}
-                className="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-semibold transition-all transform hover:scale-105"
-              >
-                {translate('::Public.hero.cta.consultation')}{' '}
-                <FaArrowRight className="ml-2" size={20} />
-              </Link>
-              <Link
-                to={ROUTES_ENUM.public.products}
-                className="inline-flex items-center justify-center px-8 py-4 bg-white/10 hover:bg-white/20 text-white rounded-lg font-semibold backdrop-blur-sm transition-all transform hover:scale-105"
-              >
-                {translate('::Public.hero.cta.discover')}
-              </Link>
-            </div>
+                  <div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
+                    <Link
+                      to={ROUTES_ENUM.public.contact}
+                      className="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-semibold transition-all transform hover:scale-105"
+                    >
+                      {translate('::Public.hero.cta.consultation')}{' '}
+                      <FaArrowRight className="ml-2" size={20} />
+                    </Link>
+                    <Link
+                      to={ROUTES_ENUM.public.products}
+                      className="inline-flex items-center justify-center px-8 py-4 bg-white/10 hover:bg-white/20 text-white rounded-lg font-semibold backdrop-blur-sm transition-all transform hover:scale-105"
+                    >
+                      {translate('::Public.hero.cta.discover')}
+                    </Link>
+                  </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
-              <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all">
-                <FaCalendarAlt className="mx-auto mb-4 text-blue-400" size={40} />
-                <h3 className="text-xl font-semibold mb-3 text-white">
-                  {translate('::Public.hero.service1.title')}
-                </h3>
-                <p className="text-gray-300">{translate('::Public.hero.service1.desc')}</p>
-              </div>
-              <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all">
-                <FaUsers className="mx-auto mb-4 text-purple-400" size={40} />
-                <h3 className="text-xl font-semibold mb-3 text-white">
-                  {translate('::Public.hero.service2.title')}
-                </h3>
-                <p className="text-gray-300">{translate('::Public.hero.service2.desc')}</p>
-              </div>
-              <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all">
-                <FaShieldAlt className="mx-auto mb-4 text-indigo-400" size={40} />
-                <h3 className="text-xl font-semibold mb-3 text-white">
-                  {translate('::Public.hero.service3.title')}
-                </h3>
-                <p className="text-gray-300">{translate('::Public.hero.service3.desc')}</p>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+                    {slide.services.map((service, i) => (
+                      <div
+                        key={i}
+                        className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all"
+                      >
+                        {service.icon}
+                        <h3 className="text-xl font-semibold mb-3 text-white">
+                          {service.title}
+                        </h3>
+                        <p className="text-gray-300">{service.desc}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
+          ))}
+        </div>
+
+        {/* Navigation Buttons */}
+        <button
+          onClick={prevSlide}
+          className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white p-4 rounded-full transition-all z-10"
+          aria-label="Previous slide"
+        >
+          <FaChevronLeft size={24} />
+        </button>
+        <button
+          onClick={nextSlide}
+          className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white p-4 rounded-full transition-all z-10"
+          aria-label="Next slide"
+        >
+          <FaChevronRight size={24} />
+        </button>
+
+        {/* Slide Indicators */}
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3 z-10">
+          {slides.map((_, index) => (
+            <button
+              key={index}
+              onClick={() => setCurrentSlide(index)}
+              className={`w-3 h-3 rounded-full transition-all ${
+                index === currentSlide
+                  ? 'bg-white w-8'
+                  : 'bg-white/50 hover:bg-white/70'
+              }`}
+              aria-label={`Go to slide ${index + 1}`}
+            />
+          ))}
         </div>
       </div>