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 { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
import Layout from './components/layout/Layout';
|
||||
import Home from './pages/Home';
|
||||
import Products from './pages/Products';
|
||||
import Services from './pages/Services';
|
||||
|
|
@ -13,6 +12,7 @@ import NotFound from './pages/NotFound';
|
|||
import { LanguageProvider } from './context/LanguageContext';
|
||||
import { useState } from 'react';
|
||||
import Demo from './pages/Demo';
|
||||
import Layout from './pages/Layout';
|
||||
|
||||
// Create a client
|
||||
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 Hero from "../components/home/Hero";
|
||||
import Features from "../components/home/Features";
|
||||
import Solutions from "../components/home/Solutions";
|
||||
import CallToAction from "../components/home/CallToAction";
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import {
|
||||
ArrowRight,
|
||||
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 { 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 (
|
||||
<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 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 = {
|
||||
[LAYOUT_TYPE_CLASSIC]: lazy(() => import('./ClassicLayout')),
|
||||
[LAYOUT_TYPE_MODERN]: lazy(() => import('./ModernLayout')),
|
||||
|
|
@ -23,7 +31,7 @@ const layouts = {
|
|||
}
|
||||
|
||||
const Layout = () => {
|
||||
const layoutType = useStoreState((state) => state.theme.layout.type)
|
||||
const layoutType = useStoreState((state) => state.theme.layout.type) as LayoutType
|
||||
|
||||
const { authenticated } = useAuth()
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue