company sadeleştirme
This commit is contained in:
Sedat Öztürk
parent
f72d93b262
commit
24d65547b1
12 changed files with 560 additions and 609 deletions
|
|
@ -1,7 +1,6 @@
|
||||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
import { Toaster } from 'react-hot-toast';
|
import { Toaster } from 'react-hot-toast';
|
||||||
import Layout from './components/layout/Layout';
|
|
||||||
import Home from './pages/Home';
|
import Home from './pages/Home';
|
||||||
import Products from './pages/Products';
|
import Products from './pages/Products';
|
||||||
import Services from './pages/Services';
|
import Services from './pages/Services';
|
||||||
|
|
@ -13,6 +12,7 @@ import NotFound from './pages/NotFound';
|
||||||
import { LanguageProvider } from './context/LanguageContext';
|
import { LanguageProvider } from './context/LanguageContext';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import Demo from './pages/Demo';
|
import Demo from './pages/Demo';
|
||||||
|
import Layout from './pages/Layout';
|
||||||
|
|
||||||
// Create a client
|
// Create a client
|
||||||
const queryClient = new QueryClient({
|
const queryClient = new QueryClient({
|
||||||
|
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
import { useLanguage } from '../../context/LanguageContext';
|
|
||||||
|
|
||||||
const CallToAction: React.FC = () => {
|
|
||||||
const { t } = useLanguage();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="bg-blue-600 py-16">
|
|
||||||
<div className="container mx-auto px-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<h2 className="text-3xl font-bold text-white mb-4">
|
|
||||||
{t('common.getStarted')}
|
|
||||||
</h2>
|
|
||||||
<p className="text-white text-lg mb-8">
|
|
||||||
{t('common.contact')}
|
|
||||||
</p>
|
|
||||||
<Link to="/contact" className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
|
|
||||||
{t('common.learnMore')}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CallToAction;
|
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Zap, Users, BarChart, Calendar, BookOpen, CreditCard, MessageSquare, Phone, Shield } from 'lucide-react';
|
|
||||||
import { useLanguage } from '../../context/LanguageContext';
|
|
||||||
|
|
||||||
const Features: React.FC = () => {
|
|
||||||
const { t } = useLanguage();
|
|
||||||
|
|
||||||
const features = [
|
|
||||||
{
|
|
||||||
icon: <Users className="w-12 h-12 text-blue-500" />,
|
|
||||||
title: t('features.reliable'),
|
|
||||||
description: t('features.reliable.desc')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <Calendar className="w-12 h-12 text-blue-500" />,
|
|
||||||
title: t('features.rapid'),
|
|
||||||
description: t('features.rapid.desc')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <BookOpen className="w-12 h-12 text-blue-500" />,
|
|
||||||
title: t('features.expert'),
|
|
||||||
description: t('features.expert.desc')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <CreditCard className="w-12 h-12 text-blue-500" />,
|
|
||||||
title: t('features.muhasebe'),
|
|
||||||
description: t('features.muhasebe.desc')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <MessageSquare className="w-12 h-12 text-blue-500" />,
|
|
||||||
title: t('features.iletisim'),
|
|
||||||
description: t('features.iletisim.desc'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <Phone className="w-12 h-12 text-blue-500" />,
|
|
||||||
title: t('features.mobil'),
|
|
||||||
description: t('features.mobil.desc'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <BarChart className="w-12 h-12 text-blue-500" />,
|
|
||||||
title: t('features.scalable'),
|
|
||||||
description: t('features.scalable.desc')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <Shield className="w-12 h-12 text-blue-500" />,
|
|
||||||
title: t('features.guvenlik'),
|
|
||||||
description: t('features.guvenlik.desc'),
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<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">
|
|
||||||
{t('features.title')}
|
|
||||||
</h2>
|
|
||||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
||||||
{t('features.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
||||||
{features.map((feature, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300"
|
|
||||||
>
|
|
||||||
<div className="mb-6">{feature.icon}</div>
|
|
||||||
<h3 className="text-xl font-semibold text-gray-900 mb-4">
|
|
||||||
{feature.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
{feature.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Features;
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { ArrowRight, Code, Globe2, Cpu, Calendar, Users, Shield } from 'lucide-react';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
import { useLanguage } from '../../context/LanguageContext';
|
|
||||||
|
|
||||||
const Hero: React.FC = () => {
|
|
||||||
const { t } = useLanguage();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<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 text-white">
|
|
||||||
<h1 className="text-3xl md:text-6xl font-bold mb-6 leading-tight">
|
|
||||||
{t('hero.title')}
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p className="text-xl md:text-2xl text-gray-300 mb-12 leading-relaxed">
|
|
||||||
{t('hero.subtitle')}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
|
|
||||||
<Link
|
|
||||||
to="/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"
|
|
||||||
>
|
|
||||||
{t('hero.cta.consultation')}
|
|
||||||
<ArrowRight className="ml-2" size={20} />
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/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"
|
|
||||||
>
|
|
||||||
{t('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 transform transition-all hover:scale-105 hover:bg-white/10">
|
|
||||||
<Calendar className="mx-auto mb-4 text-blue-400" size={40} />
|
|
||||||
<h3 className="text-xl font-semibold mb-3">{t('hero.service1.title')}</h3>
|
|
||||||
<p className="text-gray-300">{t('hero.service1.desc')}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center transform transition-all hover:scale-105 hover:bg-white/10">
|
|
||||||
<Users className="mx-auto mb-4 text-purple-400" size={40} />
|
|
||||||
<h3 className="text-xl font-semibold mb-3">{t('hero.service2.title')}</h3>
|
|
||||||
<p className="text-gray-300">{t('hero.service2.desc')}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center transform transition-all hover:scale-105 hover:bg-white/10">
|
|
||||||
<Shield className="mx-auto mb-4 text-indigo-400" size={40} />
|
|
||||||
<h3 className="text-xl font-semibold mb-3">{t('hero.service3.title')}</h3>
|
|
||||||
<p className="text-gray-300">{t('hero.service3.desc')}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Hero;
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Monitor, Smartphone, Server, Database } from 'lucide-react';
|
|
||||||
import { useLanguage } from '../../context/LanguageContext';
|
|
||||||
|
|
||||||
const Solutions: React.FC = () => {
|
|
||||||
const { t } = useLanguage();
|
|
||||||
|
|
||||||
const solutions = [
|
|
||||||
{
|
|
||||||
icon: <Monitor className="w-16 h-16 text-white" />,
|
|
||||||
title: t('solutions.web.title'),
|
|
||||||
description: t('solutions.web.desc'),
|
|
||||||
color: 'bg-blue-600'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <Smartphone className="w-16 h-16 text-white" />,
|
|
||||||
title: t('solutions.mobile.title'),
|
|
||||||
description: t('solutions.mobile.desc'),
|
|
||||||
color: 'bg-purple-600'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <Server className="w-16 h-16 text-white" />,
|
|
||||||
title: t('solutions.custom.title'),
|
|
||||||
description: t('solutions.custom.desc'),
|
|
||||||
color: 'bg-green-600'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <Database className="w-16 h-16 text-white" />,
|
|
||||||
title: t('solutions.database.title'),
|
|
||||||
description: t('solutions.database.desc'),
|
|
||||||
color: 'bg-red-600'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<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">
|
|
||||||
{t('solutions.title')}
|
|
||||||
</h2>
|
|
||||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
||||||
{t('solutions.subtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
||||||
{solutions.map((solution, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="group relative overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
|
|
||||||
>
|
|
||||||
<div className={`${solution.color} p-8 h-full`}>
|
|
||||||
<div className="mb-6">{solution.icon}</div>
|
|
||||||
<h3 className="text-2xl font-semibold text-white mb-4">
|
|
||||||
{solution.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-white/90">
|
|
||||||
{solution.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Solutions;
|
|
||||||
|
|
@ -1,156 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Mail, Phone, MapPin, Facebook, Twitter, Linkedin, Instagram } from 'lucide-react';
|
|
||||||
import Logo from './Logo';
|
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
import { useLanguage } from '../../context/LanguageContext';
|
|
||||||
|
|
||||||
const Footer: React.FC = () => {
|
|
||||||
const { t } = useLanguage();
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<footer className="bg-gray-900 text-white pt-16 pb-8">
|
|
||||||
<div className="container mx-auto px-4">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
||||||
{/* Company Info */}
|
|
||||||
<div>
|
|
||||||
<Logo color="#ffffff" />
|
|
||||||
<p className="mt-4 text-gray-400 text-sm">
|
|
||||||
{t('footer.companyInfo')}
|
|
||||||
</p>
|
|
||||||
<div className="flex space-x-4 mt-6">
|
|
||||||
<a href="https://facebook.com/sozsoft" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
<Facebook size={20} />
|
|
||||||
</a>
|
|
||||||
<a href="https://twitter.com/sozsoft" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
<Twitter size={20} />
|
|
||||||
</a>
|
|
||||||
<a href="https://linkedin.com/sozsoft" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
<Linkedin size={20} />
|
|
||||||
</a>
|
|
||||||
<a href="https://instagram.com/sozsoft" target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
<Instagram size={20} />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quick Links */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-bold mb-4">{t('footer.quickLinksTitle')}</h3>
|
|
||||||
<ul className="space-y-2">
|
|
||||||
<li>
|
|
||||||
<Link to="/" className="text-gray-400 hover:text-white transition-colors">{t('nav.home')}</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/products" className="text-gray-400 hover:text-white transition-colors">{t('nav.products')}</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/services" className="text-gray-400 hover:text-white transition-colors">{t('nav.services')}</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/about" className="text-gray-400 hover:text-white transition-colors">{t('nav.about')}</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/blog" className="text-gray-400 hover:text-white transition-colors">{t('nav.blog')}</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/contact" className="text-gray-400 hover:text-white transition-colors">{t('nav.contact')}</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Services */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-bold mb-4">{t('footer.servicesTitle')}</h3>
|
|
||||||
<ul className="space-y-2">
|
|
||||||
<li>
|
|
||||||
<Link to="/services" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
{t('services.software.title')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/services" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
{t('services.web.title')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/services" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
{t('services.mobile.title')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/services" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
{t('services.database.title')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/services" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
{t('services.integration.title')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/services" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
{t('services.consulting.title')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact Info */}
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg font-bold mb-4">{t('nav.contact')}</h3>
|
|
||||||
<ul className="space-y-3">
|
|
||||||
<li className="flex items-start space-x-3">
|
|
||||||
<MapPin size={20} className="text-gray-400 mt-1 flex-shrink-0" />
|
|
||||||
<span className="text-gray-400">
|
|
||||||
{t('footer.address')}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center space-x-3">
|
|
||||||
<Phone size={20} className="text-gray-400 flex-shrink-0" />
|
|
||||||
<a href="tel:+905447697638" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
+90 (544) 769 7 638
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center space-x-3">
|
|
||||||
<Mail size={20} className="text-gray-400 flex-shrink-0" />
|
|
||||||
<a href="mailto:destek@sozsoft.com" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
destek@sozsoft.com
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t border-gray-800 mt-12 pt-8">
|
|
||||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
|
||||||
<p className="text-gray-400 text-sm">
|
|
||||||
© {currentYear} Sözsoft. {t('footer.copyright')}
|
|
||||||
</p>
|
|
||||||
<div className="mt-4 md:mt-0">
|
|
||||||
<ul className="flex space-x-6 text-sm">
|
|
||||||
<li>
|
|
||||||
<Link to="/about" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
{t('footer.privacyPolicy')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/about" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
{t('footer.termsOfUse')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link to="/sitemap" className="text-gray-400 hover:text-white transition-colors">
|
|
||||||
{t('footer.sitemap')}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Footer;
|
|
||||||
|
|
@ -1,159 +0,0 @@
|
||||||
import React, { useState, useEffect } from "react";
|
|
||||||
import {
|
|
||||||
Menu,
|
|
||||||
X,
|
|
||||||
Globe,
|
|
||||||
Home,
|
|
||||||
Info,
|
|
||||||
Package,
|
|
||||||
Briefcase,
|
|
||||||
BookOpen,
|
|
||||||
Phone,
|
|
||||||
} from "lucide-react";
|
|
||||||
import Logo from "./Logo";
|
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
|
||||||
import { useLanguage } from "../../context/LanguageContext";
|
|
||||||
|
|
||||||
interface HeaderProps {
|
|
||||||
openDemoModal: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Header: React.FC<HeaderProps> = ({ openDemoModal }) => {
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
const [scrolled, setScrolled] = useState(false);
|
|
||||||
const { language, setLanguage, t } = useLanguage();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleScroll = () => {
|
|
||||||
const isScrolled = window.scrollY > 10;
|
|
||||||
if (isScrolled !== scrolled) {
|
|
||||||
setScrolled(isScrolled);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("scroll", handleScroll);
|
|
||||||
return () => window.removeEventListener("scroll", handleScroll);
|
|
||||||
}, [scrolled]);
|
|
||||||
|
|
||||||
const toggleMenu = () => setIsOpen(!isOpen);
|
|
||||||
const toggleLanguage = () => setLanguage(language === "en" ? "tr" : "en");
|
|
||||||
|
|
||||||
const navLinks = [
|
|
||||||
{ name: t("nav.home"), path: "/", icon: Home },
|
|
||||||
{ name: t("nav.about"), path: "/about", icon: Info },
|
|
||||||
{ name: t("nav.products"), path: "/products", icon: Package },
|
|
||||||
{ name: t("nav.services"), path: "/services", icon: Briefcase },
|
|
||||||
{ name: t("nav.blog"), path: "/blog", icon: BookOpen },
|
|
||||||
{ name: t("nav.demo"), action: openDemoModal, icon: Globe },
|
|
||||||
{ name: t("nav.contact"), path: "/contact", icon: Phone },
|
|
||||||
{ name: t("nav.giris"), path: import.meta.env.VITE_KURS_URL },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header
|
|
||||||
className={`fixed w-full z-50 transition-all duration-300 ${
|
|
||||||
scrolled
|
|
||||||
? "bg-gray-900/95 backdrop-blur-sm shadow-md py-2"
|
|
||||||
: "bg-gray-900/80 backdrop-blur-sm py-4"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="container mx-auto px-4 flex items-center justify-between">
|
|
||||||
<Link to="/">
|
|
||||||
<Logo color="#ffffff" />
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{/* Desktop Navigation */}
|
|
||||||
<nav className="hidden md:flex items-center space-x-6">
|
|
||||||
{navLinks.map((link) =>
|
|
||||||
link.path ? (
|
|
||||||
<Link
|
|
||||||
key={link.path}
|
|
||||||
to={link.path}
|
|
||||||
className={`font-medium text-sm text-white hover:text-blue-400 transition-colors ${
|
|
||||||
link.name === "Giriş" || link.name === "Login" ? "bg-blue-600 rounded px-2 py-1" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{link.name}
|
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
key={link.name}
|
|
||||||
onClick={link.action}
|
|
||||||
className={`font-medium text-sm text-white hover:text-blue-400 transition-colors ${
|
|
||||||
link.name === "Giriş" || link.name === "Login" ? "bg-blue-600 rounded px-2 py-1" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{link.name}
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={toggleLanguage}
|
|
||||||
className="flex items-center space-x-1 font-medium text-sm text-white hover:text-blue-400 transition-colors"
|
|
||||||
>
|
|
||||||
<Globe size={16} />
|
|
||||||
<span>{language.toUpperCase()}</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* Mobile Menu Button */}
|
|
||||||
<button
|
|
||||||
className="md:hidden text-white"
|
|
||||||
onClick={toggleMenu}
|
|
||||||
aria-label="Toggle menu"
|
|
||||||
>
|
|
||||||
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mobile Navigation */}
|
|
||||||
{isOpen && (
|
|
||||||
<div className="md:hidden bg-gray-900/95 backdrop-blur-sm shadow-lg">
|
|
||||||
<div className="container mx-auto px-4 py-2">
|
|
||||||
<nav className="flex flex-col space-y-4 py-4">
|
|
||||||
{navLinks.map((link) =>
|
|
||||||
link.path ? (
|
|
||||||
<Link
|
|
||||||
key={link.path}
|
|
||||||
to={link.path}
|
|
||||||
className={`font-medium text-white hover:text-blue-400 transition-colors ${
|
|
||||||
link.name === "Giriş" || link.name === "Login" ? "bg-blue-600 rounded px-2 py-1" : ""
|
|
||||||
}`}
|
|
||||||
onClick={toggleMenu}
|
|
||||||
>
|
|
||||||
{link.name}
|
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
key={link.name}
|
|
||||||
onClick={() => {
|
|
||||||
link.action && link.action();
|
|
||||||
toggleMenu();
|
|
||||||
}}
|
|
||||||
className={`font-medium text-white hover:text-blue-400 transition-colors ${
|
|
||||||
link.name === "Giriş" || link.name === "Login" ? "bg-blue-600 rounded px-2 py-1" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{link.name}
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={toggleLanguage}
|
|
||||||
className="flex items-center space-x-1 font-medium text-white hover:text-blue-400 transition-colors"
|
|
||||||
>
|
|
||||||
<Globe size={16} />
|
|
||||||
<span>{language.toUpperCase()}</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import React, { useEffect } from 'react';
|
|
||||||
import { useLocation } from 'react-router-dom';
|
|
||||||
import Header from './Header';
|
|
||||||
import Footer from './Footer';
|
|
||||||
|
|
||||||
interface LayoutProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
openDemoModal: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Layout: React.FC<LayoutProps> = ({ children, openDemoModal }) => {
|
|
||||||
const location = useLocation();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
}, [location.pathname]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col min-h-screen">
|
|
||||||
<Header openDemoModal={openDemoModal} />
|
|
||||||
<main className="flex-grow">
|
|
||||||
{children}
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Layout;
|
|
||||||
|
|
@ -1,18 +1,140 @@
|
||||||
import React from "react";
|
import React from 'react'
|
||||||
import Hero from "../components/home/Hero";
|
import { Link } from 'react-router-dom'
|
||||||
import Features from "../components/home/Features";
|
import {
|
||||||
import Solutions from "../components/home/Solutions";
|
ArrowRight,
|
||||||
import CallToAction from "../components/home/CallToAction";
|
Calendar,
|
||||||
|
Users,
|
||||||
|
Shield,
|
||||||
|
Monitor,
|
||||||
|
Smartphone,
|
||||||
|
Server,
|
||||||
|
Database,
|
||||||
|
BarChart,
|
||||||
|
BookOpen,
|
||||||
|
CreditCard,
|
||||||
|
MessageSquare,
|
||||||
|
Phone,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { useLanguage } from '../context/LanguageContext'
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
const Home: React.FC = () => {
|
||||||
|
const { t } = useLanguage()
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{ icon: <Users className="w-12 h-12 text-blue-500" />, title: t('features.reliable'), description: t('features.reliable.desc') },
|
||||||
|
{ icon: <Calendar className="w-12 h-12 text-blue-500" />, title: t('features.rapid'), description: t('features.rapid.desc') },
|
||||||
|
{ icon: <BookOpen className="w-12 h-12 text-blue-500" />, title: t('features.expert'), description: t('features.expert.desc') },
|
||||||
|
{ icon: <CreditCard className="w-12 h-12 text-blue-500" />, title: t('features.muhasebe'), description: t('features.muhasebe.desc') },
|
||||||
|
{ icon: <MessageSquare className="w-12 h-12 text-blue-500" />, title: t('features.iletisim'), description: t('features.iletisim.desc') },
|
||||||
|
{ icon: <Phone className="w-12 h-12 text-blue-500" />, title: t('features.mobil'), description: t('features.mobil.desc') },
|
||||||
|
{ icon: <BarChart className="w-12 h-12 text-blue-500" />, title: t('features.scalable'), description: t('features.scalable.desc') },
|
||||||
|
{ icon: <Shield className="w-12 h-12 text-blue-500" />, title: t('features.guvenlik'), description: t('features.guvenlik.desc') },
|
||||||
|
]
|
||||||
|
|
||||||
|
const solutions = [
|
||||||
|
{ icon: <Monitor className="w-16 h-16 text-white" />, title: t('solutions.web.title'), description: t('solutions.web.desc'), color: 'bg-blue-600' },
|
||||||
|
{ icon: <Smartphone className="w-16 h-16 text-white" />, title: t('solutions.mobile.title'), description: t('solutions.mobile.desc'), color: 'bg-purple-600' },
|
||||||
|
{ icon: <Server className="w-16 h-16 text-white" />, title: t('solutions.custom.title'), description: t('solutions.custom.desc'), color: 'bg-green-600' },
|
||||||
|
{ icon: <Database className="w-16 h-16 text-white" />, title: t('solutions.database.title'), description: t('solutions.database.desc'), color: 'bg-red-600' },
|
||||||
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen">
|
<div className="min-h-screen">
|
||||||
<Hero />
|
|
||||||
<Features />
|
|
||||||
<Solutions />
|
|
||||||
<CallToAction />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Home;
|
{/* 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 text-white">
|
||||||
|
<h1 className="text-3xl md:text-6xl font-bold mb-6">{t('hero.title')}</h1>
|
||||||
|
<p className="text-xl md:text-2xl text-gray-300 mb-12">{t('hero.subtitle')}</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
|
||||||
|
<Link to="/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">
|
||||||
|
{t('hero.cta.consultation')} <ArrowRight className="ml-2" size={20} />
|
||||||
|
</Link>
|
||||||
|
<Link to="/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">
|
||||||
|
{t('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">
|
||||||
|
<Calendar className="mx-auto mb-4 text-blue-400" size={40} />
|
||||||
|
<h3 className="text-xl font-semibold mb-3">{t('hero.service1.title')}</h3>
|
||||||
|
<p className="text-gray-300">{t('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">
|
||||||
|
<Users className="mx-auto mb-4 text-purple-400" size={40} />
|
||||||
|
<h3 className="text-xl font-semibold mb-3">{t('hero.service2.title')}</h3>
|
||||||
|
<p className="text-gray-300">{t('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">
|
||||||
|
<Shield className="mx-auto mb-4 text-indigo-400" size={40} />
|
||||||
|
<h3 className="text-xl font-semibold mb-3">{t('hero.service3.title')}</h3>
|
||||||
|
<p className="text-gray-300">{t('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">{t('features.title')}</h2>
|
||||||
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">{t('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>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-4">{feature.title}</h3>
|
||||||
|
<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">{t('solutions.title')}</h2>
|
||||||
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">{t('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">{t('common.getStarted')}</h2>
|
||||||
|
<p className="text-white text-lg mb-8">{t('common.contact')}</p>
|
||||||
|
<Link to="/contact" className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
|
||||||
|
{t('common.learnMore')}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Home
|
||||||
|
|
|
||||||
415
company/src/pages/Layout.tsx
Normal file
415
company/src/pages/Layout.tsx
Normal file
|
|
@ -0,0 +1,415 @@
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { useLocation, Link, useNavigate } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Menu,
|
||||||
|
X,
|
||||||
|
Globe,
|
||||||
|
Home,
|
||||||
|
Info,
|
||||||
|
Package,
|
||||||
|
Briefcase,
|
||||||
|
BookOpen,
|
||||||
|
Phone,
|
||||||
|
Facebook,
|
||||||
|
Twitter,
|
||||||
|
Linkedin,
|
||||||
|
Instagram,
|
||||||
|
MapPin,
|
||||||
|
Mail,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useLanguage } from "../context/LanguageContext";
|
||||||
|
import Logo from "./Logo";
|
||||||
|
|
||||||
|
interface LayoutProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
openDemoModal: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Layout: React.FC<LayoutProps> = ({ children, openDemoModal }) => {
|
||||||
|
const location = useLocation();
|
||||||
|
const { t, language, setLanguage } = useLanguage();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [scrolled, setScrolled] = useState(false);
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
}, [location.pathname]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
const isScrolled = window.scrollY > 10;
|
||||||
|
if (isScrolled !== scrolled) {
|
||||||
|
setScrolled(isScrolled);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, [scrolled]);
|
||||||
|
|
||||||
|
const toggleMenu = () => setIsOpen(!isOpen);
|
||||||
|
const toggleLanguage = () => setLanguage(language === "en" ? "tr" : "en");
|
||||||
|
|
||||||
|
const navLinks = [
|
||||||
|
{ name: t("nav.home"), path: "/", icon: Home },
|
||||||
|
{ name: t("nav.about"), path: "/about", icon: Info },
|
||||||
|
{ name: t("nav.products"), path: "/products", icon: Package },
|
||||||
|
{ name: t("nav.services"), path: "/services", icon: Briefcase },
|
||||||
|
{ name: t("nav.blog"), path: "/blog", icon: BookOpen },
|
||||||
|
{ name: t("nav.demo"), action: openDemoModal, icon: Globe },
|
||||||
|
{ name: t("nav.contact"), path: "/contact", icon: Phone },
|
||||||
|
{ name: t("nav.giris"), path: import.meta.env.VITE_KURS_URL },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col min-h-screen">
|
||||||
|
{/* HEADER */}
|
||||||
|
<header
|
||||||
|
className={`fixed w-full z-50 transition-all duration-300 ${
|
||||||
|
scrolled
|
||||||
|
? "bg-gray-900/95 backdrop-blur-sm shadow-md py-2"
|
||||||
|
: "bg-gray-900/80 backdrop-blur-sm py-4"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="container mx-auto px-4 flex items-center justify-between">
|
||||||
|
<Link to="/">
|
||||||
|
<Logo color="#ffffff" />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<nav className="hidden md:flex items-center space-x-6">
|
||||||
|
{navLinks.map((link) =>
|
||||||
|
link.path ? (
|
||||||
|
<Link
|
||||||
|
key={link.path}
|
||||||
|
to={link.path}
|
||||||
|
className={`font-medium text-sm text-white hover:text-blue-400 transition-colors ${
|
||||||
|
link.name === "Giriş" || link.name === "Login"
|
||||||
|
? "bg-blue-600 rounded px-2 py-1"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
key={link.name}
|
||||||
|
onClick={link.action}
|
||||||
|
className={`font-medium text-sm text-white hover:text-blue-400 transition-colors ${
|
||||||
|
link.name === "Giriş" || link.name === "Login"
|
||||||
|
? "bg-blue-600 rounded px-2 py-1"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={toggleLanguage}
|
||||||
|
className="flex items-center space-x-1 font-medium text-sm text-white hover:text-blue-400 transition-colors"
|
||||||
|
>
|
||||||
|
<Globe size={16} />
|
||||||
|
<span>{language.toUpperCase()}</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
<button
|
||||||
|
className="md:hidden text-white"
|
||||||
|
onClick={toggleMenu}
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
>
|
||||||
|
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Navigation */}
|
||||||
|
{isOpen && (
|
||||||
|
<div className="md:hidden bg-gray-900/95 backdrop-blur-sm shadow-lg">
|
||||||
|
<div className="container mx-auto px-4 py-2">
|
||||||
|
<nav className="flex flex-col space-y-4 py-4">
|
||||||
|
{navLinks.map((link) =>
|
||||||
|
link.path ? (
|
||||||
|
<Link
|
||||||
|
key={link.path}
|
||||||
|
to={link.path}
|
||||||
|
className={`font-medium text-white hover:text-blue-400 transition-colors ${
|
||||||
|
link.name === "Giriş" || link.name === "Login"
|
||||||
|
? "bg-blue-600 rounded px-2 py-1"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
onClick={toggleMenu}
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
key={link.name}
|
||||||
|
onClick={() => {
|
||||||
|
link.action && link.action();
|
||||||
|
toggleMenu();
|
||||||
|
}}
|
||||||
|
className={`font-medium text-white hover:text-blue-400 transition-colors ${
|
||||||
|
link.name === "Giriş" || link.name === "Login"
|
||||||
|
? "bg-blue-600 rounded px-2 py-1"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={toggleLanguage}
|
||||||
|
className="flex items-center space-x-1 font-medium text-white hover:text-blue-400 transition-colors"
|
||||||
|
>
|
||||||
|
<Globe size={16} />
|
||||||
|
<span>{language.toUpperCase()}</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="flex-grow">{children}</main>
|
||||||
|
|
||||||
|
<footer className="bg-gray-900 text-white pt-16 pb-8">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{/* Company Info */}
|
||||||
|
<div>
|
||||||
|
<Logo color="#ffffff" />
|
||||||
|
<p className="mt-4 text-gray-400 text-sm">
|
||||||
|
{t("footer.companyInfo")}
|
||||||
|
</p>
|
||||||
|
<div className="flex space-x-4 mt-6">
|
||||||
|
<a
|
||||||
|
href="https://facebook.com/sozsoft"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<Facebook size={20} />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://twitter.com/sozsoft"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<Twitter size={20} />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://linkedin.com/sozsoft"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<Linkedin size={20} />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://instagram.com/sozsoft"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<Instagram size={20} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Links */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold mb-4">
|
||||||
|
{t("footer.quickLinksTitle")}
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("nav.home")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/products"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("nav.products")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("nav.services")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/about"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("nav.about")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/blog"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("nav.blog")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/contact"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("nav.contact")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Services */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold mb-4">
|
||||||
|
{t("footer.servicesTitle")}
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("services.software.title")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("services.web.title")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("services.mobile.title")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("services.database.title")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("services.integration.title")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/services"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("services.consulting.title")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Info */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold mb-4">{t("nav.contact")}</h3>
|
||||||
|
<ul className="space-y-3">
|
||||||
|
<li className="flex items-start space-x-3">
|
||||||
|
<MapPin
|
||||||
|
size={20}
|
||||||
|
className="text-gray-400 mt-1 flex-shrink-0"
|
||||||
|
/>
|
||||||
|
<span className="text-gray-400">{t("footer.address")}</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center space-x-3">
|
||||||
|
<Phone size={20} className="text-gray-400 flex-shrink-0" />
|
||||||
|
<a
|
||||||
|
href="tel:+905447697638"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
+90 (544) 769 7 638
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center space-x-3">
|
||||||
|
<Mail size={20} className="text-gray-400 flex-shrink-0" />
|
||||||
|
<a
|
||||||
|
href="mailto:destek@sozsoft.com"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
destek@sozsoft.com
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-gray-800 mt-12 pt-8">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p className="text-gray-400 text-sm">
|
||||||
|
© {currentYear} Sözsoft. {t("footer.copyright")}
|
||||||
|
</p>
|
||||||
|
<div className="mt-4 md:mt-0">
|
||||||
|
<ul className="flex space-x-6 text-sm">
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/about"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("footer.privacyPolicy")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/about"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("footer.termsOfUse")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
to="/sitemap"
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{t("footer.sitemap")}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
|
|
@ -13,6 +13,14 @@ import useAuth from '@/utils/hooks/useAuth'
|
||||||
import useDirection from '@/utils/hooks/useDirection'
|
import useDirection from '@/utils/hooks/useDirection'
|
||||||
import useLocale from '@/utils/hooks/useLocale'
|
import useLocale from '@/utils/hooks/useLocale'
|
||||||
|
|
||||||
|
export type LayoutType =
|
||||||
|
| typeof LAYOUT_TYPE_CLASSIC
|
||||||
|
| typeof LAYOUT_TYPE_MODERN
|
||||||
|
| typeof LAYOUT_TYPE_SIMPLE
|
||||||
|
| typeof LAYOUT_TYPE_STACKED_SIDE
|
||||||
|
| typeof LAYOUT_TYPE_DECKED
|
||||||
|
| typeof LAYOUT_TYPE_BLANK
|
||||||
|
|
||||||
const layouts = {
|
const layouts = {
|
||||||
[LAYOUT_TYPE_CLASSIC]: lazy(() => import('./ClassicLayout')),
|
[LAYOUT_TYPE_CLASSIC]: lazy(() => import('./ClassicLayout')),
|
||||||
[LAYOUT_TYPE_MODERN]: lazy(() => import('./ModernLayout')),
|
[LAYOUT_TYPE_MODERN]: lazy(() => import('./ModernLayout')),
|
||||||
|
|
@ -23,7 +31,7 @@ const layouts = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Layout = () => {
|
const Layout = () => {
|
||||||
const layoutType = useStoreState((state) => state.theme.layout.type)
|
const layoutType = useStoreState((state) => state.theme.layout.type) as LayoutType
|
||||||
|
|
||||||
const { authenticated } = useAuth()
|
const { authenticated } = useAuth()
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue