diff --git a/company/src/App.tsx b/company/src/App.tsx
index 3b32f5b5..5c5a475a 100644
--- a/company/src/App.tsx
+++ b/company/src/App.tsx
@@ -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({
diff --git a/company/src/components/home/CallToAction.tsx b/company/src/components/home/CallToAction.tsx
deleted file mode 100644
index 64926d18..00000000
--- a/company/src/components/home/CallToAction.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/company/src/components/home/Features.tsx b/company/src/components/home/Features.tsx
deleted file mode 100644
index 317c30d7..00000000
--- a/company/src/components/home/Features.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/company/src/components/home/Hero.tsx b/company/src/components/home/Hero.tsx
deleted file mode 100644
index b74c4ab6..00000000
--- a/company/src/components/home/Hero.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/company/src/components/home/Solutions.tsx b/company/src/components/home/Solutions.tsx
deleted file mode 100644
index b3b184e7..00000000
--- a/company/src/components/home/Solutions.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/company/src/components/layout/Footer.tsx b/company/src/components/layout/Footer.tsx
deleted file mode 100644
index db40cd03..00000000
--- a/company/src/components/layout/Footer.tsx
+++ /dev/null
@@ -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">
-              &copy; {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;
diff --git a/company/src/components/layout/Header.tsx b/company/src/components/layout/Header.tsx
deleted file mode 100644
index bba305d7..00000000
--- a/company/src/components/layout/Header.tsx
+++ /dev/null
@@ -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;
diff --git a/company/src/components/layout/Layout.tsx b/company/src/components/layout/Layout.tsx
deleted file mode 100644
index 783b6fa0..00000000
--- a/company/src/components/layout/Layout.tsx
+++ /dev/null
@@ -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;
diff --git a/company/src/pages/Home.tsx b/company/src/pages/Home.tsx
index 4a32223b..01cc2cac 100644
--- a/company/src/pages/Home.tsx
+++ b/company/src/pages/Home.tsx
@@ -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
diff --git a/company/src/pages/Layout.tsx b/company/src/pages/Layout.tsx
new file mode 100644
index 00000000..2d6003d7
--- /dev/null
+++ b/company/src/pages/Layout.tsx
@@ -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">
+                &copy; {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;
diff --git a/company/src/components/layout/Logo.tsx b/company/src/pages/Logo.tsx
similarity index 100%
rename from company/src/components/layout/Logo.tsx
rename to company/src/pages/Logo.tsx
diff --git a/ui/src/components/layouts/Layouts.tsx b/ui/src/components/layouts/Layouts.tsx
index 1fd2e63b..977efa0d 100644
--- a/ui/src/components/layouts/Layouts.tsx
+++ b/ui/src/components/layouts/Layouts.tsx
@@ -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()