Ana sayfa düzenlemesi
This commit is contained in:
Sedat Öztürk
parent
32530c72c0
commit
cd26c9c36b
1 changed files with 172 additions and 49 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
import React from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import {
|
import {
|
||||||
FaArrowRight,
|
FaArrowRight,
|
||||||
|
|
@ -13,7 +13,9 @@ import {
|
||||||
FaBookOpen,
|
FaBookOpen,
|
||||||
FaCreditCard,
|
FaCreditCard,
|
||||||
FaRegComment,
|
FaRegComment,
|
||||||
FaPhone
|
FaPhone,
|
||||||
|
FaChevronLeft,
|
||||||
|
FaChevronRight
|
||||||
} from 'react-icons/fa';
|
} from 'react-icons/fa';
|
||||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||||||
|
|
@ -21,6 +23,88 @@ import { Helmet } from 'react-helmet'
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
const Home: React.FC = () => {
|
||||||
const { translate } = useLocalization()
|
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 = [
|
const features = [
|
||||||
{
|
{
|
||||||
|
|
@ -100,8 +184,8 @@ const Home: React.FC = () => {
|
||||||
defaultTitle="Erp Platform"
|
defaultTitle="Erp Platform"
|
||||||
></Helmet>
|
></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 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900"></div>
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 opacity-20"
|
className="absolute inset-0 opacity-20"
|
||||||
|
|
@ -113,55 +197,94 @@ const Home: React.FC = () => {
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
|
|
||||||
<div className="relative container mx-auto px-4 pt-32 pb-16">
|
{/* Carousel Content */}
|
||||||
<div className="max-w-4xl mx-auto text-center">
|
<div className="relative container mx-auto px-4 pt-32 pb-16 h-screen flex items-center">
|
||||||
<h1 className="text-3xl md:text-5xl font-bold mb-6 text-white">
|
{slides.map((slide, index) => (
|
||||||
{translate('::Public.hero.title')}
|
<div
|
||||||
</h1>
|
key={index}
|
||||||
<p className="text-xl md:text-2xl text-gray-300 mb-12">
|
className={`absolute inset-0 transition-all duration-700 ease-in-out ${
|
||||||
{translate('::Public.hero.subtitle')}
|
index === currentSlide
|
||||||
</p>
|
? '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">
|
<div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
|
||||||
<Link
|
<Link
|
||||||
to={ROUTES_ENUM.public.contact}
|
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"
|
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')}{' '}
|
{translate('::Public.hero.cta.consultation')}{' '}
|
||||||
<FaArrowRight className="ml-2" size={20} />
|
<FaArrowRight className="ml-2" size={20} />
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to={ROUTES_ENUM.public.products}
|
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"
|
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')}
|
{translate('::Public.hero.cta.discover')}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
<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
|
||||||
<h3 className="text-xl font-semibold mb-3 text-white">
|
key={i}
|
||||||
{translate('::Public.hero.service1.title')}
|
className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all"
|
||||||
</h3>
|
>
|
||||||
<p className="text-gray-300">{translate('::Public.hero.service1.desc')}</p>
|
{service.icon}
|
||||||
</div>
|
<h3 className="text-xl font-semibold mb-3 text-white">
|
||||||
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all">
|
{service.title}
|
||||||
<FaUsers className="mx-auto mb-4 text-purple-400" size={40} />
|
</h3>
|
||||||
<h3 className="text-xl font-semibold mb-3 text-white">
|
<p className="text-gray-300">{service.desc}</p>
|
||||||
{translate('::Public.hero.service2.title')}
|
</div>
|
||||||
</h3>
|
))}
|
||||||
<p className="text-gray-300">{translate('::Public.hero.service2.desc')}</p>
|
</div>
|
||||||
</div>
|
</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>
|
))}
|
||||||
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue