243 lines
9.3 KiB
TypeScript
243 lines
9.3 KiB
TypeScript
import React from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import {
|
|
FaArrowRight,
|
|
FaCalendarAlt,
|
|
FaUsers,
|
|
FaShieldAlt,
|
|
FaDesktop,
|
|
FaMobileAlt,
|
|
FaServer,
|
|
FaDatabase,
|
|
FaChartBar,
|
|
FaBookOpen,
|
|
FaCreditCard,
|
|
FaRegComment,
|
|
FaPhone
|
|
} from 'react-icons/fa';
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
|
import { Helmet } from 'react-helmet'
|
|
|
|
const Home: React.FC = () => {
|
|
const { translate } = useLocalization()
|
|
|
|
const features = [
|
|
{
|
|
icon: <FaUsers className="w-12 h-12 text-blue-500" />,
|
|
title: translate('::Public.features.reliable'),
|
|
description: translate('::Public.features.reliable.desc'),
|
|
},
|
|
{
|
|
icon: <FaCalendarAlt className="w-12 h-12 text-blue-500" />,
|
|
title: translate('::Public.features.rapid'),
|
|
description: translate('::Public.features.rapid.desc'),
|
|
},
|
|
{
|
|
icon: <FaBookOpen className="w-12 h-12 text-blue-500" />,
|
|
title: translate('::Public.features.expert'),
|
|
description: translate('::Public.features.expert.desc'),
|
|
},
|
|
{
|
|
icon: <FaCreditCard className="w-12 h-12 text-blue-500" />,
|
|
title: translate('::Public.features.muhasebe'),
|
|
description: translate('::Public.features.muhasebe.desc'),
|
|
},
|
|
{
|
|
icon: <FaRegComment className="w-12 h-12 text-blue-500" />,
|
|
title: translate('::Public.features.iletisim'),
|
|
description: translate('::Public.features.iletisim.desc'),
|
|
},
|
|
{
|
|
icon: <FaPhone className="w-12 h-12 text-blue-500" />,
|
|
title: translate('::Public.features.mobil'),
|
|
description: translate('::Public.features.mobil.desc'),
|
|
},
|
|
{
|
|
icon: <FaChartBar className="w-12 h-12 text-blue-500" />,
|
|
title: translate('::Public.features.scalable'),
|
|
description: translate('::Public.features.scalable.desc'),
|
|
},
|
|
{
|
|
icon: <FaShieldAlt className="w-12 h-12 text-blue-500" />,
|
|
title: translate('::Public.features.guvenlik'),
|
|
description: translate('::Public.features.guvenlik.desc'),
|
|
},
|
|
]
|
|
|
|
const solutions = [
|
|
{
|
|
icon: <FaDesktop className="w-16 h-16 text-white" />,
|
|
title: translate('::Public.solutions.web.title'),
|
|
description: translate('::Public.solutions.web.desc'),
|
|
color: 'bg-blue-600',
|
|
},
|
|
{
|
|
icon: <FaMobileAlt className="w-16 h-16 text-white" />,
|
|
title: translate('::Public.solutions.mobile.title'),
|
|
description: translate('::Public.solutions.mobile.desc'),
|
|
color: 'bg-purple-600',
|
|
},
|
|
{
|
|
icon: <FaServer className="w-16 h-16 text-white" />,
|
|
title: translate('::Public.solutions.custom.title'),
|
|
description: translate('::Public.solutions.custom.desc'),
|
|
color: 'bg-green-600',
|
|
},
|
|
{
|
|
icon: <FaDatabase className="w-16 h-16 text-white" />,
|
|
title: translate('::Public.solutions.database.title'),
|
|
description: translate('::Public.solutions.database.desc'),
|
|
color: 'bg-red-600',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<Helmet
|
|
titleTemplate="%s | Erp Platform"
|
|
title={translate('::' + 'App.Home')}
|
|
defaultTitle="Erp Platform"
|
|
></Helmet>
|
|
|
|
{/* Hero */}
|
|
<div className="relative min-h-screen">
|
|
<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"
|
|
style={{
|
|
backgroundImage:
|
|
'url("https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1920")',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
></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>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<section className="py-20 bg-white">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
{translate('::Public.features.title')}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
{translate('::Public.features.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{features.map((feature, i) => (
|
|
<div
|
|
key={i}
|
|
className="p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow"
|
|
>
|
|
<div className="mb-6">{feature.icon}</div>
|
|
<h2 className="text-2xl font-bold text-gray-900">{feature.title}</h2>
|
|
<p className="text-gray-600">{feature.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Solutions */}
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
{translate('::Public.solutions.title')}
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
{translate('::Public.solutions.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{solutions.map((s, i) => (
|
|
<div
|
|
key={i}
|
|
className="group relative overflow-hidden rounded-2xl transition-all hover:scale-105"
|
|
>
|
|
<div className={`${s.color} p-8 h-full`}>
|
|
<div className="mb-6">{s.icon}</div>
|
|
<h3 className="text-2xl font-semibold text-white mb-4">{s.title}</h3>
|
|
<p className="text-white/90">{s.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Call to Action */}
|
|
<section className="bg-blue-600 py-16">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<h2 className="text-3xl font-bold text-white mb-4">
|
|
{translate('::Public.common.getStarted')}
|
|
</h2>
|
|
<p className="text-white text-lg mb-8">{translate('::Public.common.contact')}</p>
|
|
<Link
|
|
to={ROUTES_ENUM.public.contact}
|
|
className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors"
|
|
>
|
|
{translate('::Public.common.learnMore')}
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|