Ana sayfa düzenlemesi

ui/src/assets/styles/components/_menu-item.css

@@ -1,5 +1,5 @@
 .menu-item {
-  @apply cursor-pointer font-medium rounded-md flex items-center w-full whitespace-nowrap px-1;
+  @apply cursor-pointer font-medium rounded-md flex items-center w-full whitespace-nowrap px-1.5;
 
   &.menu-item-light {
     @apply text-gray-600;

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 */}
+      {/* Hero Carousel */}
-      <div className="relative min-h-screen">
+      <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,13 +197,26 @@ const Home: React.FC = () => {
           }}
         ></div>
 
-        <div className="relative container mx-auto px-4 pt-32 pb-16">
+        {/* 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-5xl font-bold mb-6 text-white">
+                  <h1 className="text-3xl md:text-6xl font-bold mb-6 text-white animate-fade-in">
-              {translate('::Public.hero.title')}
+                    {slide.title}
                   </h1>
-            <p className="text-xl md:text-2xl text-gray-300 mb-12">
+                  <p className="text-xl md:text-2xl text-gray-300 mb-12 animate-fade-in-delay">
-              {translate('::Public.hero.subtitle')}
+                    {slide.subtitle}
                   </p>
 
                   <div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
@@ -139,30 +236,56 @@ const Home: React.FC = () => {
                   </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">
+                    {slide.services.map((service, i) => (
-                <FaCalendarAlt className="mx-auto mb-4 text-blue-400" size={40} />
+                      <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">
-                  {translate('::Public.hero.service1.title')}
+                          {service.title}
                         </h3>
-                <p className="text-gray-300">{translate('::Public.hero.service1.desc')}</p>
+                        <p className="text-gray-300">{service.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>
                 </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>
 
       {/* Features */}