From a21523bfecff77c6977bdf48e95a4d63025153c4 Mon Sep 17 00:00:00 2001
From: LUCA-PYTHON <87448287+LUCA-PYTHON@users.noreply.github.com>
Date: Fri, 12 Jun 2026 07:56:53 +0200
Subject: [PATCH 1/2] Fixed home pages, 100% done

---
 frontend/src/pages/Home.jsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 2cd89a2..5989256 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -568,10 +568,13 @@ function HomeCanvas({ progressRef, pointerRef, webglSupported, ctaVisible, cubeT
   const [mobile, setMobile] = useState(false);
 
   useEffect(() => {
-    const update = () => setMobile(window.innerWidth < 768);
+    const mediaQuery = window.matchMedia("(max-width: 980px)");
+    const update = () => setMobile(mediaQuery.matches);
+
     update();
-    window.addEventListener("resize", update);
-    return () => window.removeEventListener("resize", update);
+    mediaQuery.addEventListener("change", update);
+
+    return () => mediaQuery.removeEventListener("change", update);
   }, []);
 
   if (!webglSupported) {
@@ -614,7 +617,7 @@ function TechList({ items }) {
   );
 }
 
-function ServiceSection({ id, icon, align = "left", title, desc, children, learnMore }) {
+function ServiceSection({ id, serviceHref, icon, align = "left", title, desc, children, learnMore }) {
   return (
     <section id={id} className={`journey-section service-journey-section service--${align}`}>
       <div className="service-grid">
@@ -629,7 +632,7 @@ function ServiceSection({ id, icon, align = "left", title, desc, children, learn
           <h2>{title}</h2>
           <p>{desc}</p>
           {children}
-          <Link className="journey-link" to="/contact">
+          <Link className="journey-link" to={serviceHref}>
             {learnMore}
             <ArrowRight size={14} />
           </Link>
@@ -776,7 +779,7 @@ export default function Home() {
           </h1>
           <p className="hero-desc">{t("home.hero.description")}</p>
           <div className="journey-actions">
-            <Link className="home-primary-button" to="/contact">
+            <Link className="home-primary-button" to="/services">
               {t("home.hero.cta.primary")}
               <ArrowRight size={16} />
             </Link>
@@ -798,6 +801,7 @@ export default function Home() {
 
       <ServiceSection
         id="discord"
+        serviceHref="/services#discord-bots"
         icon={<MessageSquare size={22} />}
         align="left"
         title={t("home.section.discord.title")}
@@ -809,6 +813,7 @@ export default function Home() {
 
       <ServiceSection
         id="web"
+        serviceHref="/services#web-development"
         icon={<Code2 size={22} />}
         align="right"
         title={t("home.section.web.title")}
@@ -820,6 +825,7 @@ export default function Home() {
 
       <ServiceSection
         id="mobile"
+        serviceHref="/services#app-development"
         icon={<Smartphone size={22} />}
         align="left"
         title={t("home.section.app.title")}
@@ -831,6 +837,7 @@ export default function Home() {
 
       <ServiceSection
         id="individual"
+        serviceHref="/services#individual-solutions"
         icon={<Users size={22} />}
         align="right"
         title={t("home.section.individual.title")}
@@ -856,8 +863,8 @@ export default function Home() {
               {t("home.cta.button")}
               <ArrowRight size={16} />
             </Link>
-            <Link className="home-secondary-button" to="/github">
-              {t("nav.servies")}
+            <Link className="home-secondary-button" to="/services">
+              {t("nav.services")}
             </Link>
           </div>
         </motion.div>

From d1a08001b69e6b8797487d14e7d4c96182faee5f Mon Sep 17 00:00:00 2001
From: LUCA-PYTHON <87448287+LUCA-PYTHON@users.noreply.github.com>
Date: Fri, 12 Jun 2026 08:01:36 +0200
Subject: [PATCH 2/2] Fix responsive home layout

---
 frontend/src/styles/Home.css | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/src/styles/Home.css b/frontend/src/styles/Home.css
index cff853c..2579daf 100644
--- a/frontend/src/styles/Home.css
+++ b/frontend/src/styles/Home.css
@@ -134,7 +134,7 @@
   margin: 0 auto;
   padding: 120px 64px;
   box-sizing: border-box;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   align-items: center;
   min-height: 100vh;
 }
@@ -143,6 +143,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  width: 100%;
+  min-width: 0;
   max-width: 520px;
   padding: 48px;
   border-radius: 24px;
@@ -169,7 +171,6 @@
 .service--left .service-text {
   grid-area: text;
   justify-self: start;
-  margin-left: -250px;
 }
 
 .service--right .service-grid {
@@ -180,7 +181,6 @@
   justify-self: end;
   align-items: flex-end;
   text-align: right;
-  margin-right: -250px;
 }
 
 #hero {
@@ -488,9 +488,11 @@
   .journey-content,
   .service-grid { padding-left: 44px; padding-right: 44px; }
   .hero-journey-content h1 { max-width: 480px; }
+
+  .service-text { padding: 40px; }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 980px) {
   .journey-section { padding: 96px 0; min-height: 90vh; }
   .hero-journey-section { padding-top: 118px; padding-bottom: 56px; }
 
@@ -509,7 +511,8 @@
   .service-text {
     align-items: center !important;
     text-align: center !important;
-    max-width: 100% !important;
+    width: min(100%, 620px);
+    max-width: 620px !important;
     justify-self: center !important;
     padding: 32px 24px !important;
     margin-left: 0 !important;
@@ -540,10 +543,30 @@
   }
 }
 
+@media (min-width: 769px) and (max-width: 980px) {
+  .journey-content,
+  .final-journey-content { padding-left: 44px; padding-right: 44px; }
+
+  .hero-journey-content {
+    max-width: 680px;
+    margin-left: 0;
+  }
+
+  .hero-journey-content h1 { font-size: clamp(42px, 6.5vw, 58px); }
+
+  .journey-actions {
+    flex-direction: row;
+    width: auto;
+  }
+
+  .home-primary-button,
+  .home-secondary-button { width: auto; }
+}
+
 @media (max-width: 480px) {
   .hero-journey-content h1 { font-size: 30px; }
   .journey-content,
   .service-grid,
   .final-journey-content { padding-left: 18px; padding-right: 18px; }
   .svc-icon { width: 44px; height: 44px; border-radius: 12px; }
-}
\ No newline at end of file
+}