.

2025-08-15 16:02:20 -05:00
parent 4f9299e8b2
commit 3a9e0c89a6
12 changed files with 294 additions and 175 deletions
--- a/src/styles/about.css
+++ b/src/styles/about.css
@@ -1,10 +1,13 @@
 /* about.css */
+body {
+  background-image: url("/images/subtle-prism.svg");
+}

 /*? ↓ About Section Styles ↓ */

 .about-section {
  max-width: 1000px;
-  margin: 60px auto;
+  margin: 30px auto;
  padding: 0 20px;
  color: #495057;
  line-height: 1.6;
@@ -19,17 +22,17 @@
 .about-section h1 {
  font-size: 2.5rem;
  text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }

 .about-section h2 {
  font-size: 1.8rem;
-  margin-top: 40px;
 }

 .about-section p {
-  margin-bottom: 20px;
+  margin-bottom: 5px;
  font-size: 1.05rem;
+  text-align: left;
 }

 .about-section a {
@@ -44,15 +47,16 @@
 /*? ↓ Contact Section Styles ↓ */

 .contact-section {
-  max-width: 800px;
+  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
  color: #495057;
+  background-color: #d3e9f1;
 }

 .contact-section h2 {
  font-size: 2rem;
-  margin-bottom: 20px;
+  margin: 20px 0px;
  text-align: center;
 }

@@ -135,7 +139,7 @@
 #contact-form button[type="submit"] {
  margin-top: 30px;
  padding: 12px 25px;
-  background-color: #2e97be;
+  background-color: #ea7e0b;
  color: #fff;
  border: none;
  border-radius: 50px;
--- a/src/styles/header-footer.css
+++ b/src/styles/header-footer.css
@@ -14,12 +14,13 @@ body {

 /*? ↓  Start Header ↓ */
 .main-header {
-    background: linear-gradient(to right, #1E2A38 0%, #E8F3FF 10%, #E8F3FF 40%, #1E2A38 100%);
-    color: #495057;
-    padding: 20px 40px;
+    background: linear-gradient(to right, #cff1ff 0%, #ffffff 10%, #ffffff 40%, #cff1ff 100%);
+    color: #cff1ff;
+    padding: 10px ;
    border-bottom: 1px solid #dee2e6;
 }

+
 .main-nav {
    display: flex;
    justify-content: space-between;
@@ -28,18 +29,11 @@ body {
    margin: 0 auto;
 }

-.nav-logo a {
-    font-size: 1.8em;
-    font-weight: 700;
-    color: #2E97BE;
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
 .nav-list {
    list-style: none;
    display: flex;
    gap: 30px;
+    align-items: center;
 }

 .nav-item a {
@@ -55,9 +49,17 @@ body {
    z-index: 1;
 }

+.nav-logo a {
+    font-size: 1.8em;
+    font-weight: 700;
+    color: #495057;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
 .nav-item a:hover {
    color: #ffffff;
-    background-color: #2E97BE;
+    background-color: #ea7e0b;
    transform: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
@@ -69,9 +71,8 @@ body {
    left: 0;
    width: 100%;
    height: 100%;
-    background: linear-gradient(45deg, #2E97BE, #3498db);
-    border-radius: 10px;

+    border-radius: 10px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
@@ -86,15 +87,20 @@ body {
    margin: 0;
 }

+.nav-logo a:hover {
+    color: #ea7e0b; /* This will now be applied */
+    background-color: transparent; /* Override the background change */
+    box-shadow: none; /* Remove the shadow */
+}
+


 /*? ↓  Start Footer ↓ */
 footer {
-    background: linear-gradient(to right, #1E2A38 0%, #E8F3FF 33%, #E8F3FF 66%, #1E2A38 100%);
-    color: #495057;
+    background: url("/images/footer-background.svg");
    border-top: 1px solid #dee2e6;
-    margin-top: 30px;
-    padding: 30px 40px;
+    margin-top: 20px;
+    padding: 10px 20px;
 }

 .footer-content {
@@ -122,7 +128,7 @@ footer ul {
    display: flex;
    justify-content: center;
    gap: 30px;
-    margin-top: 20px;
+    margin-top: 10px;
 }

 .social-links a,
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,5 +1,20 @@
 /* index.css */
+body {
+    background-image: url("/images/pattern-randomized.svg");
+    background-attachment: fixed;
+    background-size: cover;
+}

+.intro.module {
+    width: 70%;
+    max-width: 900px;
+    min-width: 300px;
+    line-height: 1.6em;
+}
+
+.module h2 {
+    font-size: 1.8rem;
+}
 /*? ↓  Start Intro  ↓ */

 .intro {
@@ -8,10 +23,16 @@

 .intro h1 {
    color: #495057;
+    margin-bottom: 20px;
 }

 .intro h1 .accent-name {
-    color: #2e97be;
+    color: #ea7e0b;
+}
+
+.intro p {
+    font-size: 1.1em;
+    font-weight: 600;
 }

 /*? ↓  Start Benefits Section  ↓ */
@@ -32,42 +53,83 @@
    margin-bottom: 20px;
 }

+.benefits-container p, .transition p {
+    font-size: 1.2em;
+    font-weight: 600;
+}
+
 .benefits-visual {
    position: relative;
    display: grid;
    gap: 20px;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    min-height: 150px;
 }

 .benefits-card {
-    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-height: 150px;
+    background-color: rgba(234, 126, 11, .4);
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 15px 10px 15px 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-    transition: all 0.3s ease;
+    transition: all 0.3s ease-in-out;
+    overflow: hidden;
 }

 .benefits-card:hover {
    transform: translateY(-5px);
+    background: linear-gradient(to right, #DDF0FF 0%, #fff 40%, #fff 60%, #DDF0FF 100%);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }

-.benefits-card ul {
-    list-style: none;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.5s ease-in-out;
-    padding: 0;
+.benefits-card h3 {
+    font-size: 1.8em;
+    color: #495057;
+    transition: font-size 0.4s ease-in-out;
 }

-.benefits-card:hover ul {
-    max-height: var(--ul-height);
-    margin-top: 10px;
+.benefits-card ul {
+    list-style: inside;
+    padding-top: 10px;
 }

+.hover-list {
+    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+}
+
+.benefits-card:hover .hover-list {
+    max-height: 300px;
+    opacity: 1;
+}
+
+.benefits-card:hover h3 {
+    font-size: 1.2em;
+    text-decoration: underline;
+}
+
+.transition {
+    margin-top: 30px;
+    font-weight: 600;
+}
+
+.transition p:first-child {
+    font-size: 1.3em;
+}
+
+.transition p:last-child {
+    font-size: 1.4rem;
+}
+
+

 /*? ↓  Start Services Container  ↓ */

@@ -75,7 +137,7 @@
    position: relative;
    width: 100%;
    max-width: 800px;
-    margin: 50px auto;
+    margin: 10px auto;
    overflow: hidden;
    min-height: 400px;
 }
@@ -144,7 +206,7 @@
 }

 .carousel-button:hover {
-    background-color: rgba(46, 151, 190, 1);
+    background-color: #ea7e0b;
 }

 .prev-button {
@@ -156,6 +218,9 @@
 }

 /*? ↓  Start CTA Section  ↓ */
+.inspiration {
+    padding-top: 20px;
+}

 .cta-section {
    max-width: 1200px;
@@ -173,9 +238,9 @@
 .demos-link,
 .cta-button {
    display: inline-block;
-    padding: 12px 25px;
-    margin-top: 20px;
-    background-color: #2e97be;
+    padding: 8px 25px;
+    margin: 20px 0px 20px 0px;
+    background-color: #ea7e0b;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
@@ -185,7 +250,12 @@

 .demos-link:hover,
 .cta-button:hover {
-    background-color: #2781a5;
+    background-color: #2e97be;
+    box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2);
+}
+
+.demos-link:active, .cta-button:active {
+    background-color: #ea7e0b;
    box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2);
 }

--- a/src/styles/modules.css
+++ b/src/styles/modules.css
@@ -0,0 +1,13 @@
+body {
+    background: linear-gradient(to bottom, #9FB8CC 0%, #DAE4F0 30%, #ffffff 50%, #DAE4F0 70%, #9FB8CC 100%);
+}
+
+.module {
+    margin: 25px auto;
+    padding: 1.5rem;
+    max-width: 1200px ;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    background-color: #ffffff ;
+    border-radius: 15px;
+    border: 1px #7B8899 solid;
+}