Create layout for homepage

src/Client/src/app/app.css

@@ -44,7 +44,7 @@
 
     .active {
         background-color: #00000010;
-        color: var(--Mistox-Bright);
+        color: var(--Mistox-Frame);
     }
 
 .nav-button-login {

src/Client/src/app/pages/main/home/home.component.css

@@ -0,0 +1,48 @@
+.center-frame {
+    margin: 0 200px;
+    width: calc(100% - 400px);
+}
+
+.content-frame {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.content-frame:nth-child(even) {
+    flex-direction: row-reverse;
+}
+
+.floating-frame {
+    width: 450px;
+    background-color: var(--Mistox-Frame);
+    padding: 20px;
+    margin: 20px 0;
+    border: 1px solid #000;
+    border-radius: 10px;
+}
+
+.title-block {
+    margin: 0;
+    margin-bottom: 20px;
+    white-space: nowrap;
+    text-align: center;
+    font-size: 0.8rem;
+}
+
+.title-block h1 {
+    margin: 0;
+}
+
+hr {
+    width: 90%;
+    margin: 20px 5%;
+}
+
+.solution-frame {
+    height: 200px;
+    background-color: blueviolet;
+    width: calc(100% - 515px);
+    margin: 20px 0;
+}

src/Client/src/app/pages/main/home/home.component.html

@@ -1,27 +1,81 @@
-<div class="floating-frame">
+<div class="center-frame">
-    <h1>Death by a thousand slops</h1>
+    <div class="content-frame">
-    <span>
+        <div class="floating-frame">
-        If you were a company and wanted to go through your applications. Today that is near impossible with the
+            <div class="title-block">
-        thousands of auto applications.
+                <h1>death by a thousand applicants</h1>
-    </span>
+            </div>
-    <span>
+            <div class="content-block">
-        We have multiple measures in place to stop applicants from applying with outside tools. Making it faster to apply
+                <p><strong>Everyone’s applying to everything.</strong> With automation tools, job seekers blast out hundreds of applications in minutes.</p>
-        and easier for companies to filter for what they need.
+                <p>It’s turned the job market into noise — a flood of résumés that no recruiter can realistically sift through.</p>
-    </span>
+                <p><em>Volume wins the race, but nobody’s really being heard.</em></p>
-</div>
+            </div>
+        </div>
+        <div class="solution-frame">
 
-<div class="floating-frame">
+        </div>
-    <h1>AI Resume's</h1>
+    </div>
-    <span>
-        If you were to be going through resumes and see that they were all made with AI
-        You would start using AI to filter your resumes.
-    </span>
-</div>
 
-<div class="floating-frame">
+    <div class="content-frame">
-    <h1>AI Resume's</h1>
+        <div class="floating-frame">
-    <span>
+            <div class="title-block">
-        If you were to be going through resumes and see that they were all made with AI
+                <h1>keyword frenzie</h1>
-        You would start using AI to filter your resumes.
+            </div>
-    </span>
+            <div class="content-block">
+                <p><strong>AI is scanning your resume,</strong> not a human. And it’s not looking for personality — it’s hunting for keywords.</p>
+                <p>In today’s job market, crafting a resume isn’t about telling your story. It’s about guessing the right terms an algorithm wants to see.</p>
+                <p><em>It’s no longer about standing out — it’s about fitting the filter.</em></p>
+            </div>
+        </div>
+        <div class="solution-frame">
+
+        </div>
+    </div>
+
+    <div class="content-frame">
+        <div class="floating-frame">
+            <div class="title-block">
+                <h1>response black-hole</h1>
+            </div>
+            <div class="content-block">
+                <p><strong>Companies are overwhelmed,</strong> and most simply don’t have the time to respond to every application.</p>
+                <p>With hundreds — sometimes thousands — of resumes coming in for a single role, even automated responses fall short.</p>
+                <p><em>Silence isn't personal. It’s just capacity.</em></p>
+            </div>
+        </div>
+        <div class="solution-frame">
+
+        </div>
+    </div>
+
+    <div class="content-frame">
+        <div class="floating-frame">
+            <div class="title-block">
+                <h1>zombie postings</h1>
+            </div>
+            <div class="content-block">
+                <p><strong>Not every job posting is real.</strong> Some listings stay up long after the role is filled — or worse, never existed in the first place.</p>
+                <p>These "zombie listings" inflate the perception of a healthy job market or act as bait to collect resumes and personal data.</p>
+                <p><em>You're not always applying — sometimes you're just feeding the machine.</em></p>
+            </div>
+        </div>
+        <div class="solution-frame">
+
+        </div>
+    </div>
+
+    <div class="content-frame">
+        <div class="floating-frame">
+            <div class="title-block">
+                <h1>caveman tools</h1>
+            </div>
+            <div class="content-block">
+                <p><strong>Hiring tools haven't kept up.</strong> Most companies still rely on outdated systems to manage a flood of modern, automated applications.</p>
+                <p>What should be a streamlined process turns into digital clutter — messy dashboards, keyword roulette, and missed talent.</p>
+                <p><em>The tools are broken, but the workload keeps growing.</em></p>
+            </div>
+        </div>
+        <div class="solution-frame">
+
+        </div>
+    </div>
 </div>

src/Client/src/styles.css

@@ -5,7 +5,7 @@
     --Mistox-Medium: #890620;
     --Mistox-Light: #B6465F;
     --Mistox-Bright: #FC440F;
-    --Mistox-Frame: #ff000078;
+    --Mistox-Frame: #FF5A00CC;
     --Mistox-Button: #ff9999;
     --Mistox-Button-Hover: #ff999977;
     --Mistox-White: #FFF;