From 2d7b72c37033a854eb7c4f5793e50d77ec883d34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Hrn=C4=8Di=C4=87?=
 <borishrncic@users.noreply.github.com>
Date: Sun, 30 Jun 2024 00:33:03 +0200
Subject: [PATCH 1/9] #

---
 brand/index.php       | 4 ++--
 business/index.php    | 6 +++---
 includes/hellobar.php | 2 +-
 wiki/index.php        | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/brand/index.php b/brand/index.php
index c67a977..f5f921a 100644
--- a/brand/index.php
+++ b/brand/index.php
@@ -8,7 +8,7 @@
         <!-- INCLUDE HEAD.PHP end -->
     </head>
 
-    <body class="light-mode docs-theme">
+    <body class="light-mode docs-theme polyfen-site">
 
         <!-- INCLUDE HELLO's start -->
         <?php include '../includes/hellobar.php';?>
@@ -20,7 +20,7 @@
                 <a href="/" class="logo">
                     <img src="imgs/the-polyfen-group-logo.svg" alt="The Polyfen Group" height="40px" width="auto">
                 </a>
-                <h2 class="caption">Brand Guidelines</h2>
+                <h2 class="caption uppercase">Brand Guidelines</h2>
                     <ul class="table-of-contents">
                         <li><a href="#download-assets" class="caption">1. Download assets</a></li>
                         <li><a href="#market-research" class="caption">2. Market research</a></li>
diff --git a/business/index.php b/business/index.php
index 7d62034..81b429f 100644
--- a/business/index.php
+++ b/business/index.php
@@ -8,7 +8,7 @@
         <!-- INCLUDE HEAD.PHP end -->
     </head>
 
-    <body class="light-mode docs-theme">
+    <body class="light-mode docs-theme polyfen-site">
 
         <!-- INCLUDE HELLO's start -->
         <?php include '../includes/hellobar.php';?>
@@ -20,7 +20,7 @@
                 <a href="/" class="logo">
                     <img src="imgs/the-polyfen-group-logo.svg" alt="The Polyfen Group" height="40px" width="auto">
                 </a>
-                <h2 class="caption">Business Plan</h2>
+                <h2 class="caption uppercase">Business Plan</h2>
                 <ul class="table-of-contents">
                     <li><a href="#overview" class="caption">1. Overview</a></li>
                     <li><a href="#purpose" class="caption">2. Purpose</a></li>
@@ -64,9 +64,9 @@
             <main> 
                 <section class="cover">
                     <img src="imgs/folder-illustration.svg" alt="Folder Illustration" height="200px" width="auto" >
-                    <hr>
                     <h1 class="title-1">Business Plan</h1>
                 </section>
+                <hr>
                 <!-- INCLUDE OVERVIEW.PHP start -->
                 <?php include 'content/overview.php';?>
                 <!-- INCLUDE OVERVIEW.PHP end -->
diff --git a/includes/hellobar.php b/includes/hellobar.php
index 51448bb..b60d9fb 100644
--- a/includes/hellobar.php
+++ b/includes/hellobar.php
@@ -1,4 +1,4 @@
-<div class="hellobar"> <small>Follow us on ➞</small>
+<div class="dark-mode hellobar"> <small>Follow us on ➞</small>
     <a href="http://polyfen.com/linkedin" target="_blank">
         <small>LinkedIn</small>
     </a>
diff --git a/wiki/index.php b/wiki/index.php
index 31aec5f..df652d1 100644
--- a/wiki/index.php
+++ b/wiki/index.php
@@ -8,7 +8,7 @@
         <!-- INCLUDE HEAD.PHP end -->
     </head>
 
-    <body class="light-mode docs-theme">
+    <body class="light-mode docs-theme polyfen-site">
 
         <!-- INCLUDE HELLO's start -->
         <?php include '../includes/hellobar.php';?>
@@ -21,7 +21,7 @@
                     <img src="imgs/the-polyfen-group-logo.svg" alt="The Polyfen group" height="40px"
                         width="auto">
                 </a>
-                <h2 class="caption">Team Wiki</h2>
+                <h2 class="caption uppercase">Team Wiki</h2>
                 <ul class="table-of-contents">
                     <li><a href="#tech-stack" class="caption">1. Tech stack</a></li>
                     <li><a href="#sprints" class="caption">2. Sprints</a></li>

From e5b7d9c9b6e501ec938906556f00e82bb3158f06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Hrn=C4=8Di=C4=87?=
 <borishrncic@users.noreply.github.com>
Date: Sun, 30 Jun 2024 00:50:53 +0200
Subject: [PATCH 2/9] #

---
 includes/navbar.php | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/includes/navbar.php b/includes/navbar.php
index d84d169..d969fc4 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -1,5 +1,4 @@
-<!--
-<nav class="navbar">
+<nav>
     <div class="nav-links">
         <a href="/">Home</a>
         <a href="/business/">Business Plan</a>
@@ -14,5 +13,4 @@
             <img src="../imgs/icons/close_icon.svg" alt="" height="28px" width="auto">
         </button>
     </div>
-</nav>
--->
\ No newline at end of file
+</nav>
\ No newline at end of file

From 965f592f010501c838c4c9d50f67d18659cfd432 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Hrn=C4=8Di=C4=87?=
 <borishrncic@users.noreply.github.com>
Date: Sun, 30 Jun 2024 01:06:15 +0200
Subject: [PATCH 3/9] #

---
 includes/common-app-calling.php | 9 ++-------
 includes/head.php               | 5 ++++-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/includes/common-app-calling.php b/includes/common-app-calling.php
index f3d8535..3dc61a9 100644
--- a/includes/common-app-calling.php
+++ b/includes/common-app-calling.php
@@ -1,12 +1,7 @@
 
-<!-- CSS General -->
+<!-- POLYKIT -->
 <link rel="stylesheet" href="https://polykit.xyz/app/css/polykit-v0-3.css" type="text/css">
-<link rel="stylesheet" href="../app/styles-new.css" type="text/css">
-
-
-<!-- scripts -->
-<script defer src="../app/current-page.js"></script>
-<script defer src="../app/docs-nav-v3.js"></script>
+<script src="https://polykit.xyz/app/js/polykit-v0-3.js"></script>
 
 <!-- FONTS -->
 <!--
diff --git a/includes/head.php b/includes/head.php
index 3ebce44..a157d35 100644
--- a/includes/head.php
+++ b/includes/head.php
@@ -4,8 +4,11 @@
 <meta property="og:type" content="website">
 <meta name="author"  content="The Polyfen Group LLC">
 
-<!-- CSS General -->
+<!-- POLYKIT -->
 <link rel="stylesheet" href="https://polykit.xyz/app/css/polykit-v0-3.css" type="text/css">
+<script src="https://polykit.xyz/app/js/polykit-v0-3.js"></script>
+
+<!-- CSS Custom -->
 <link rel="stylesheet" href="app/styles-new.css" type="text/css">
 
 <!-- FONTS -->

From 9a639bfc1bdcc96152c752378499aee532e23f94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Hrn=C4=8Di=C4=87?=
 <borishrncic@users.noreply.github.com>
Date: Sun, 30 Jun 2024 13:40:16 +0200
Subject: [PATCH 4/9] #

---
 business/index.php              |  2 ++
 includes/common-app-calling.php | 23 -----------------------
 includes/head.php               |  1 -
 includes/navbar.php             |  4 ++--
 4 files changed, 4 insertions(+), 26 deletions(-)

diff --git a/business/index.php b/business/index.php
index 81b429f..ef508ce 100644
--- a/business/index.php
+++ b/business/index.php
@@ -100,4 +100,6 @@
         
     </body>
 
+    <script src="https://polykit.xyz/app/js/polykit-v0-3.js"></script>
+
 </html>
\ No newline at end of file
diff --git a/includes/common-app-calling.php b/includes/common-app-calling.php
index 3dc61a9..d5d761f 100644
--- a/includes/common-app-calling.php
+++ b/includes/common-app-calling.php
@@ -1,29 +1,6 @@
 
 <!-- POLYKIT -->
 <link rel="stylesheet" href="https://polykit.xyz/app/css/polykit-v0-3.css" type="text/css">
-<script src="https://polykit.xyz/app/js/polykit-v0-3.js"></script>
 
 <!-- FONTS -->
-<!--
-/**
-* @license
-* MyFonts Webfont Build ID 568563
-*
-* The fonts listed in this notice are subject to the End User License
-* Agreement(s) entered into by the website owner. All other parties are
-* explicitly restricted from using the Licensed Webfonts(s).
-*
-* You may obtain a valid license from one of MyFonts official sites.
-* http://www.fonts.com
-* http://www.myfonts.com
-* http://www.linotype.com
-*
-*/
--->
-<link rel="stylesheet" type="text/css" href="app/fonts/Biotif.css">
-<link rel="stylesheet" type="text/css" href="app/fonts/Freight-Text-Pro.css">
-
-<!-- font-awesome -->
-<link rel="stylesheet" href="https://use.typekit.net/aba8ecz.css">
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
 
diff --git a/includes/head.php b/includes/head.php
index a157d35..5e0391c 100644
--- a/includes/head.php
+++ b/includes/head.php
@@ -6,7 +6,6 @@
 
 <!-- POLYKIT -->
 <link rel="stylesheet" href="https://polykit.xyz/app/css/polykit-v0-3.css" type="text/css">
-<script src="https://polykit.xyz/app/js/polykit-v0-3.js"></script>
 
 <!-- CSS Custom -->
 <link rel="stylesheet" href="app/styles-new.css" type="text/css">
diff --git a/includes/navbar.php b/includes/navbar.php
index d969fc4..e0d41ee 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -1,11 +1,11 @@
 <nav>
-    <div class="nav-links">
+    <div class="nav-links" id="nav-links">
         <a href="/">Home</a>
         <a href="/business/">Business Plan</a>
         <a href="/wiki/">Team Wiki</a>
         <a href="/brand/">Brand Guidelines</a>
     </div>
-    <div class="nav-buttons">
+    <div class="nav-buttons" id="nav-buttons">
         <button aria-label="Open/Close navbar" class="nav-hamburger">
             <img src="../imgs/icons/hamburger_icon.svg" alt="" height="30px" width="auto">
         </button>

From 574a087e0c69a9f949a3223ebdf76e1d5858669d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Hrn=C4=8Di=C4=87?=
 <borishrncic@users.noreply.github.com>
Date: Mon, 1 Jul 2024 07:49:49 +0200
Subject: [PATCH 5/9] #

---
 brand/index.php | 2 ++
 wiki/index.php  | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/brand/index.php b/brand/index.php
index f5f921a..ce5606c 100644
--- a/brand/index.php
+++ b/brand/index.php
@@ -152,5 +152,7 @@
             </main>
         <div>
 
+        <script src="https://polykit.xyz/app/js/polykit-v0-3.js"></script>
+
     </body>
 </html>
\ No newline at end of file
diff --git a/wiki/index.php b/wiki/index.php
index df652d1..59b2e4d 100644
--- a/wiki/index.php
+++ b/wiki/index.php
@@ -120,6 +120,8 @@
             </main>
         </div>
 
+        <script src="https://polykit.xyz/app/js/polykit-v0-3.js"></script>
+
     </body>
 
 </html>
\ No newline at end of file

From 73af645937f265209f218082356db1ea7ce444b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Hrn=C4=8Di=C4=87?=
 <borishrncic@users.noreply.github.com>
Date: Mon, 1 Jul 2024 19:56:58 +0200
Subject: [PATCH 6/9] #

---
 app/styles-new.css | 65 ++++++++++++++++++++++++++++++++++------------
 index.php          | 49 ++++++++++++++++++----------------
 2 files changed, 75 insertions(+), 39 deletions(-)

diff --git a/app/styles-new.css b/app/styles-new.css
index 1b4adc0..2da42fb 100644
--- a/app/styles-new.css
+++ b/app/styles-new.css
@@ -1,19 +1,3 @@
-:root {
-    --accent-color: #722FFF;
-    --accent-color-900: #070924;
-}
-
-.hellobar {
-    background: var(--accent-color-900);
-    border-bottom-color: var(--accent-color);
-    color: white;
-}
-
-.hellobar a {
-    color: white;
-}
-
-
 header {
     display: flex;
     flex-direction: column;
@@ -49,4 +33,53 @@ header {
     }
 }
 
+.home-cover {
+    background: white;;
+    margin-top: -200px;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    padding-left: 220px;
+}
+
+.home-cover h1 {
+    max-width: 900px;
+    margin-left: 0;
+}
+
+.home-cover p {
+    max-width: 490px;
+}
+
+.sub-brands {
+    margin-top: 80px;
+}
+
+.polyfen a span {
+    background: #ecf0f3 url(../imgs/sub-brands/polyfen-logo.svg) no-repeat left top;
+}
+
+.polyatlas a span {
+    background: #ecf0f3 url(../imgs/sub-brands/poly-atlas-logo.svg) no-repeat left top;
+}
+
+.polycookies a span {
+    background: #ecf0f3 url(../imgs/sub-brands/poly-cookies-logo.svg) no-repeat left top;
+}
+
+.polyforum a span {
+    background: #ecf0f3 url(../imgs/sub-brands/poly-forum-logo.svg) no-repeat left top;
+}
+
+.polyqwerty a span {
+    background: #ecf0f3 url(../imgs/sub-brands/poly-qwerty-logo.svg) no-repeat left top;
+}
+
+.polykit a span {
+    background: #ecf0f3 url(../imgs/sub-brands/polykit-logo.svg) no-repeat left top;
+}
+
+.polypress a span {
+    background: #ecf0f3 url(../imgs/sub-brands/polypress-logo.svg) no-repeat left top;
+}
+
 /* HOME END */
\ No newline at end of file
diff --git a/index.php b/index.php
index 087f3a5..a52fe7e 100644
--- a/index.php
+++ b/index.php
@@ -36,7 +36,7 @@
     <!-- End Google Tag Manager -->
 </head>
 
-<body class="home">
+<body class="light-mode polyfen-site home">
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PBRK5MR5" height="0" width="0"
             style="display:none; visibility:hidden"></iframe></noscript>
@@ -46,28 +46,31 @@
     <?php include 'includes/hellobar.php';?>
     <?php include 'includes/navbar.php';?>
     <!-- INCLUDE HELLO's end -->
-    <div class="home-container">
-        <header class="home">
-            <!-- <div class="logo-container"> -->
-                <img src="imgs/the-polyfen-group-ideogram.svg" id="tpg-ideogram" alt="">
-                <img src="imgs/the-polyfen-group-wordmark.svg" id="tpg-wordmark" alt="">
-            <!-- </div> -->
-        </header>
-        <main class="home">
-            <section id="home-cover">
-                <h1 class="title-1">We play with tech</h1>
-                <p>The Polyfen Group is a small company parent of multiple brands in the software development
-                    and
-                    the creative industries.</p>
-            </section>
-            <section class="sub-brands-container">
-                <h2 class="heading-1">Family of Brands</h2>
-                <hr>
-                <?php include './includes/family-of-brands.php'; ?>
-                <hr>
-            </section>
-        </main>
-    </div>
+
+    <header>
+        <!-- <div class="logo-container"> -->
+            <img src="imgs/the-polyfen-group-ideogram.svg" id="tpg-ideogram" alt="">
+            <img src="imgs/the-polyfen-group-wordmark.svg" id="tpg-wordmark" alt="">
+        <!-- </div> -->
+    </header>
+
+    <main>
+        <section class="home-cover">
+            <h1 class="title-1">We play with tech</h1>
+            <p>The Polyfen Group is a small company parent of multiple brands in the software development
+                and
+                the creative industries.</p>
+        </section>
+        <section class="container sub-brands">
+            <h2 class="heading-1">Family of Brands</h2>
+            <hr>
+            <?php include './includes/family-of-brands.php'; ?>
+            <hr>
+        </section>
+    </main>
+
+    <script src="https://polykit.xyz/app/js/polykit-v0-3.js"></script>
+
 </body>
 
 </html>
\ No newline at end of file

From c06fc9e34367f8134fe5e3d8baf8a0d7da73d026 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Hrn=C4=8Di=C4=87?=
 <borishrncic@users.noreply.github.com>
Date: Mon, 1 Jul 2024 22:33:14 +0200
Subject: [PATCH 7/9] #

---
 app/styles-new.css | 27 +++++++++++++++++++++++----
 index.php          | 30 ++++++++++++++++++++++++++----
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/app/styles-new.css b/app/styles-new.css
index 2da42fb..51c6dc1 100644
--- a/app/styles-new.css
+++ b/app/styles-new.css
@@ -29,13 +29,13 @@ header {
 
 @media (min-width: 768px) {
     .home header {
-        position: sticky;
+        position: fixed;
+        top: 60px;
     }
 }
 
 .home-cover {
-    background: white;;
-    margin-top: -200px;
+    background: white;
     padding-top: 40px;
     padding-bottom: 40px;
     padding-left: 220px;
@@ -82,4 +82,23 @@ header {
     background: #ecf0f3 url(../imgs/sub-brands/polypress-logo.svg) no-repeat left top;
 }
 
-/* HOME END */
\ No newline at end of file
+/* HOME END */
+
+.gradient-text {
+    background: linear-gradient(45deg,#722FFF,#4b00ae,#d12b94,#722FFF,#4b00ae);
+    background: -webkit-linear-gradient(45deg,#722FFF,#4b00ae,#d12b94,#722FFF,#4b00ae);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    background-size: 300% !important;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: animated_text 4s ease-in-out infinite;
+    -moz-animation: animated_text 4s ease-in-out infinite;
+    -webkit-animation: animated_text 4s ease-in-out infinite;
+}
+
+@keyframes animated_text {
+0% { background-position: 0px 50%; }
+50% { background-position: 100% 50%; }
+100% { background-position: 0px 50%; }} 
\ No newline at end of file
diff --git a/index.php b/index.php
index a52fe7e..325414f 100644
--- a/index.php
+++ b/index.php
@@ -56,10 +56,32 @@
 
     <main>
         <section class="home-cover">
-            <h1 class="title-1">We play with tech</h1>
-            <p>The Polyfen Group is a small company parent of multiple brands in the software development
-                and
-                the creative industries.</p>
+            <h1 class="title-1">We <span class="gradient-text">play</span><span class="gradient-text">build</span><span class="gradient-text">conquer</span><br>with tech</h1>
+            <style>
+                .gradient-text {
+                    display: none;
+                }
+
+                .gradient-text.active {
+                    display: inline;
+                }
+            </style>
+            <script>
+                var spans = document.getElementsByClassName('gradient-text');
+                var index = 0;
+
+                function showNextSpan() {
+                    for (var i = 0; i < spans.length; i++) {
+                        spans[i].classList.remove('active');
+                    }
+                    spans[index].classList.add('active');
+                    index = (index + 1) % spans.length;
+                }
+
+                setInterval(showNextSpan, 2000); // Change span every 2 seconds
+            </script>
+            <p>We own and operate multiple brands in the software
+                and creative industries.</p>
         </section>
         <section class="container sub-brands">
             <h2 class="heading-1">Family of Brands</h2>

From b4a74427ce58e7f3121cdd35a0ab2efc03aee0e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Hrn=C4=8Di=C4=87?=
 <borishrncic@users.noreply.github.com>
Date: Tue, 2 Jul 2024 00:19:58 +0200
Subject: [PATCH 8/9] #

---
 app/styles-new.css            | 87 +++++++++++++++++++++++++++++++++--
 includes/family-of-brands.php | 63 +++++++++----------------
 index.php                     |  2 +-
 3 files changed, 106 insertions(+), 46 deletions(-)

diff --git a/app/styles-new.css b/app/styles-new.css
index 51c6dc1..6a4c5ca 100644
--- a/app/styles-new.css
+++ b/app/styles-new.css
@@ -9,12 +9,13 @@ header {
 /* HOME START */
 
 .home header {
-    position: relative;
-    top: 0;
+    position: absolute;
+    top: 60px;
     display: flex;
     padding: 20px;
     grid-area: header;
     flex-direction: column;
+    z-index: 900;
 }
 
 .home header img {
@@ -36,8 +37,18 @@ header {
 
 .home-cover {
     background: white;
-    padding-top: 40px;
+    padding-top: 220px;
+    padding-left: 20px;
     padding-bottom: 40px;
+}
+
+.home-cover h1 {
+    margin-bottom: 1rem;
+}
+
+@media (min-width: 768px) {
+.home-cover {
+    padding-top: 40px;
     padding-left: 220px;
 }
 
@@ -49,11 +60,81 @@ header {
 .home-cover p {
     max-width: 490px;
 }
+}
+
+@media screen and (min-width: 1441px) {
+    .home-cover {
+        width: 100%;
+        padding-left: 0;
+    }
+    .home-cover h1, .home-cover p {
+        text-align: center;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .sub-brands h2 {
+        text-align: center;
+    }
+}
 
 .sub-brands {
     margin-top: 80px;
 }
 
+.sub-brand {
+    display: grid;
+    grid-template-areas:
+        'logos'
+        'screens'
+        'texts'
+        'links';
+    gap: 2rem 3rem;
+}
+
+.sub-brand p {
+    margin-bottom: -1.5rem;
+}
+
+@media (min-width: 768px) {
+    .sub-brand {
+        grid-template-areas:
+        'screens logos'
+        'screens texts'
+        'screens links';
+        justify-content: start;
+    }
+}
+
+a.screen {
+    width: unset;
+}
+
+.sub-brand .screen {
+    grid-area: screens;
+}
+
+@media (min-width: 768px) {
+    .sub-brand .screen {
+        margin-top: unset;
+        aspect-ratio: 4 / 3;
+        width: 100%;
+        width: 299px;
+    }
+}
+
+a.screen figure {
+    border-radius: 6px 6px 4px 4px;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transition: .2s ease-in-out;
+    transition: .2s ease-in-out;
+}
+
+img.window-frame {
+    min-width: calc(100%);
+}
+
+
 .polyfen a span {
     background: #ecf0f3 url(../imgs/sub-brands/polyfen-logo.svg) no-repeat left top;
 }
diff --git a/includes/family-of-brands.php b/includes/family-of-brands.php
index 7e529c0..1f3794b 100644
--- a/includes/family-of-brands.php
+++ b/includes/family-of-brands.php
@@ -5,18 +5,13 @@
             <img src="/imgs/sub-brands/polyfen-screen.webp" alt="Polyfen screenshot" class="web-screenshot">
         </figure>
     </a>
-    <h3 class="polyfen --sub-brand">
-        <a href="https://polyfen.com" target="_blank" class="web-url" rel="dofollow">Polyfen<span></span></a>
-    </h3>
+    <a href="https://polyfen.com" target="_blank" class="web-url"><img src="imgs/sub-brands/polyfen-logo.svg" alt="Polyfen" height="70px"></a>
     <p>Creative &amp; software boutique empowering US businesses with design, marketing, and engineering services since 2018.</p>
-    <a href="https://polyfen.com" target="_blank" class="links web-url" rel="dofollow"><img src="/imgs/icons/globe.svg"
-            class="web-icon" alt="">polyfen.com</a>
+    <a href="https://polyfen.com" target="_blank" class="button secondary-button web-url margin-right-auto">polyfen.com</a>
 </section>
 <hr>
 <section id="polyatlas" class="sub-brand">
-    <h3 class="polyatlas --sub-brand">
-        <a href="https://polyatlas.wiki" target="_blank" class="web-url" rel="dofollow">Polyatlas<span></span></a>
-    </h3>
+    <a href="https://polyatlas.wiki" target="_blank" class="web-url"><img src="imgs/sub-brands/poly-atlas-logo.svg" alt="Poly Atlas" height="70px"></a>
     <a class="screen" href="https://polyatlas.wiki" target="_blank" rel="dofollow" title="polyatlas.wiki">
         <figure>
             <img src="/imgs/window-frame-tide.svg" alt="" class="window-frame">
@@ -25,15 +20,12 @@ class="web-icon" alt="">polyfen.com</a>
     </a>
     <p>Open-source step-by-step guide to the Branding process, including practical tips, case studies,
         template files, and many other useful resources.</p>
-    <a href="https://polyatlas.wiki" target="_blank" class="links web-url" rel="dofollow"><img
-            src="/imgs/icons/globe.svg" class="web-icon" alt="">polyatlas.wiki</a>
+    <a href="https://polyatlas.wiki" target="_blank" class="button secondary-button web-url margin-right-auto">polyatlas.wiki</a>
 </section>
 <hr>
 <section id="polycookies" class="sub-brand">
-    <h3 class="polycookies --sub-brand">
-        <a href="https://polycookies.com" target="_blank" class="web-url" rel="dofollow">Polycookies<span></span></a>
-    </h3>
-    <a class="screen" href="https://polycookies.com" target="_blank" rel="dofollow" title="polycookies.com">
+    <a href="https://polycookies.com" target="_blank" class="web-url"><img src="imgs/sub-brands/poly-cookies-logo.svg" alt="Poly Cookies" height="70px" style="margin-bottom: 0;"></a>
+    <a class="screen" href="https://polycookies.com" target="_blank"  title="polycookies.com">
         <figure>
             <img src="/imgs/window-frame-tide.svg" alt="" class="window-frame">
             <img src="/imgs/sub-brands/polycookies-screen.webp" alt="Polycookies screenshot" class="web-screenshot">
@@ -41,15 +33,12 @@ class="web-icon" alt="">polyfen.com</a>
     </a>
     <p>Open-source solution to privacy policy implementing a cookie consent banner with Google Tag Manager.
     </p>
-    <a href="https://polycookies.com" target="_blank" class="links web-url" rel="dofollow"><img
-            src="/imgs/icons/globe.svg" class="web-icon" alt="">polycookies.com</a>
+    <a href="https://polycookies.com" target="_blank" class="button secondary-button web-url margin-right-auto">polycookies.com</a>
 </section>
 <hr>
 <section id="polyqwerty" class="sub-brand">
-    <h3 class="polyqwerty --sub-brand">
-        <a href="https://polyqwerty.com" target="_blank" class="web-url" rel="dofollow">polyqwerty<span></span></a>
-    </h3>
-    <a class="screen" href="https://polyqwerty.com" target="_blank" rel="dofollow" title="polyqwerty.com">
+    <a href="https://polyqwerty.com" target="_blank" class="web-url"><img src="imgs/sub-brands/poly-qwerty-logo.svg" alt="Poly Qwerty" height="70px" style="margin-bottom: 0;"></a>
+    <a class="screen" href="https://polyqwerty.com" target="_blank" title="polyqwerty.com">
         <figure>
             <img src="/imgs/window-frame-tide.svg" alt="" class="window-frame">
             <img src="/imgs/sub-brands/polyqwerty-screen.webp" alt="Polyqwerty screenshot" class="web-screenshot">
@@ -57,14 +46,11 @@ class="web-icon" alt="">polyfen.com</a>
     </a>
     <p>Your keyboard's assistant. Click on a character to copy it. Easily find the right emoji, punctuation signs, and
         other symbols.</p>
-    <a href="https://polyqwerty.com" target="_blank" class="links web-url" rel="dofollow"><img
-            src="/imgs/icons/globe.svg" class="web-icon" alt="">polyqwerty.com</a>
+    <a href="https://polyqwerty.com" target="_blank" class="button secondary-button web-url margin-right-auto">polyqwerty.com</a>
 </section>
 <hr>
 <section id="polykit" class="sub-brand">
-    <h3 class="polykit --sub-brand">
-        <a href="https://polykit.xyz" target="_blank" class="web-url" rel="dofollow">polykit<span></span></a>
-    </h3>
+    <a href="https://polykit.xyz" target="_blank" class="web-url"><img src="imgs/sub-brands/polykit-logo.svg" alt="Polykit" height="70px" style="margin-bottom: 0;"></a>
     <a class="screen" href="https://polykit.xyz" target="_blank" rel="dofollow" title="polykit.xyz">
         <figure>
             <img src="/imgs/window-frame-tide.svg" alt="" class="window-frame">
@@ -75,15 +61,12 @@ class="web-icon" alt="">polyfen.com</a>
         User Interfaces with CSS code for developers and Figma library for
         designers.
     </p>
-    <a href="https://polykit.xyz" target="_blank" class="links web-url" rel="dofollow"><img src="/imgs/icons/globe.svg"
-            class="web-icon" alt="">polykit.xyz</a>
+    <a href="https://polykit.xyz" target="_blank" class="button secondary-button web-url margin-right-auto">polykit.xyz</a>
 </section>
-<hr>
+<hr class="d-none">
 <!-- sub-brands with hidden -->
-<section id="polyforum" class="sub-brand">
-    <h3 class="polyforum --sub-brand">
-        <a href="https://polyforum.org/" target="_blank" class="web-url" rel="dofollow">polyforum<span></span></a>
-    </h3>
+<section id="polyforum" class="sub-brand d-none">
+    <a href="https://polyforum.org" target="_blank" class="web-url"><img src="imgs/sub-brands/poly-forum-logo.svg" alt="Poly Forum" height="70px" style="margin-bottom: 0;"></a>
     <a class="screen" href="https://polyforum.org/" target="_blank" rel="dofollow" title="polyforum.org">
         <figure>
             <img src="/imgs/window-frame-tide.svg" alt="" class="window-frame">
@@ -92,15 +75,12 @@ class="web-icon" alt="">polykit.xyz</a>
     </a>
     <p><small class="caption" style="opacity: 0.6;">// Work in Progress //</small><br><br>TBD
     </p>
-    <a href="https://polyforum.org/" target="_blank" class="links web-url" rel="dofollow"><img
-            src="/imgs/icons/globe.svg" class="web-icon" alt="">polyforum.org</a>
+    <a href="https://polyforum.org/" target="_blank" class="button secondary-button web-url margin-right-auto" data-button-icon="globe-net">polyforum.org</a>
 </section>
-<hr>
-<section id="polypress" class="sub-brand">
-    <h3 class="polypress --sub-brand">
-        <a href="https://polykit.xyz" target="_blank" class="web-url" rel="dofollow">polypress<span></span></a>
-    </h3>
-    <a class="screen" href="https://polypress.xyz" target="_blank" rel="dofollow" title="polypress.xyz">
+<hr class="d-none">
+<section id="polypress" class="sub-brand d-none">
+    <a href="https://polypress.xyz" target="_blank" class="web-url"><img src="imgs/sub-brands/polypress-logo.svg" alt="Poly Press" height="70px" style="margin-bottom: 0;"></a>
+    <a class="screen" href="https://polypress.xyz" target="_blank" title="polypress.xyz">
         <figure>
             <img src="/imgs/window-frame-tide.svg" alt="" class="window-frame">
             <img src="/imgs/sub-brands/polypress-screen.webp" alt="Polipress screenshot" class="web-screenshot">
@@ -108,6 +88,5 @@ class="web-icon" alt="">polykit.xyz</a>
     </a>
     <p><small class="caption" style="opacity: 0.6;">// Work in Progress //</small><br><br>TBD
     </p>
-    <a href="https://polypress.xyz" target="_blank" class="links web-url" rel="dofollow"><img
-            src="/imgs/icons/globe.svg" class="web-icon" alt="">polypress.xyz</a>
+    <a href="https://polypress.xyz" target="_blank" class="button secondary-button web-url margin-right-auto" data-button-icon="globe-net">polypress.xyz</a>
 </section>
\ No newline at end of file
diff --git a/index.php b/index.php
index 325414f..10dc5b4 100644
--- a/index.php
+++ b/index.php
@@ -80,7 +80,7 @@ function showNextSpan() {
 
                 setInterval(showNextSpan, 2000); // Change span every 2 seconds
             </script>
-            <p>We own and operate multiple brands in the software
+            <p>We own and operate multiple services and products in the software
                 and creative industries.</p>
         </section>
         <section class="container sub-brands">

From 39c41c51cd95b6f18867d08b56416ea45a388bda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Hrn=C4=8Di=C4=87?=
 <borishrncic@users.noreply.github.com>
Date: Tue, 2 Jul 2024 11:49:02 +0200
Subject: [PATCH 9/9] #

---
 app/scripts.js     | 32 ++++++++++++++++++++++++++++++++
 app/styles-new.css |  5 ++---
 index.php          |  3 ++-
 3 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 app/scripts.js

diff --git a/app/scripts.js b/app/scripts.js
new file mode 100644
index 0000000..91c1420
--- /dev/null
+++ b/app/scripts.js
@@ -0,0 +1,32 @@
+const header = document.querySelector('header');
+
+
+
+document.addEventListener("DOMContentLoaded", function () {
+    let header = document.querySelector('header');
+    if (header) {
+        let body = document.querySelector("body");
+        
+        window.addEventListener("scroll", function () {
+            let scroll = window.scrollY;
+    
+            if (window.innerWidth > 768) {
+                if (scroll >= 60) {
+                    header.classList.add("header-position-fixed");
+                } else {
+                    header.classList.remove("header-position-fixed");
+                }
+            }
+    
+            if (scroll >= 60) {
+                header.style.top = '0px';
+            } else {
+                if (body.classList.contains("landing-page")) {
+                    header.style.top = '0px';
+                } else {
+                    header.style.top = `${hellobarHeight + 0}px`;
+                }
+            }
+        });
+    }
+});
\ No newline at end of file
diff --git a/app/styles-new.css b/app/styles-new.css
index 6a4c5ca..6eedfd3 100644
--- a/app/styles-new.css
+++ b/app/styles-new.css
@@ -62,6 +62,7 @@ header {
 }
 }
 
+/*
 @media screen and (min-width: 1441px) {
     .home-cover {
         width: 100%;
@@ -72,10 +73,8 @@ header {
         margin-left: auto;
         margin-right: auto;
     }
-    .sub-brands h2 {
-        text-align: center;
-    }
 }
+    */
 
 .sub-brands {
     margin-top: 80px;
diff --git a/index.php b/index.php
index 10dc5b4..f3573dd 100644
--- a/index.php
+++ b/index.php
@@ -84,7 +84,7 @@ function showNextSpan() {
                 and creative industries.</p>
         </section>
         <section class="container sub-brands">
-            <h2 class="heading-1">Family of Brands</h2>
+            <h2 class="heading-1 align-center">Family of Brands</h2>
             <hr>
             <?php include './includes/family-of-brands.php'; ?>
             <hr>
@@ -92,6 +92,7 @@ function showNextSpan() {
     </main>
 
     <script src="https://polykit.xyz/app/js/polykit-v0-3.js"></script>
+    <script src="app/scripts.js"></script>
 
 </body>
 
