add footer

dist/output.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: 'Open Sauce';
 
-  src: url('/src/fonts/OpenSauceOne-Regular.ttf') format('truetype');
+  src: url('/fonts/OpenSauceOne-Regular.ttf') format('truetype');
 
   font-weight: 400;
 
@@ -11,7 +11,7 @@
 @font-face {
   font-family: 'Open Sauce';
 
-  src: url('/src/fonts/OpenSauceOne-Light.ttf') format('truetype');
+  src: url('/fonts/OpenSauceOne-Light.ttf') format('truetype');
 
   font-weight: 300;
 
@@ -21,7 +21,7 @@
 @font-face {
   font-family: 'Open Sauce';
 
-  src: url('/src/fonts/OpenSauceOne-Medium.ttf') format('truetype');
+  src: url('/fonts/OpenSauceOne-Medium.ttf') format('truetype');
 
   font-weight: 500;
 
@@ -31,7 +31,7 @@
 @font-face {
   font-family: 'Open Sauce';
 
-  src: url('/src/fonts/OpenSauceOne-Bold.ttf') format('truetype');
+  src: url('/fonts/OpenSauceOne-Bold.ttf') format('truetype');
 
   font-weight: 700;
 
@@ -747,7 +747,7 @@ body:is(.dark *) {
   border-radius: 9999px;
   border-width: 1px;
   --tw-border-opacity: 1;
-  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
   padding-left: 1rem;
@@ -770,7 +770,7 @@ body:is(.dark *) {
   z-index: -1;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
   opacity: 0.2;
   --tw-blur: blur(16px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -782,7 +782,7 @@ body:is(.dark *) {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  --tw-shadow-color: rgb(234 179 8 / 0.7);
+  --tw-shadow-color: rgb(107 114 128 / 0.7);
   --tw-shadow: var(--tw-shadow-colored);
 }
 
@@ -831,10 +831,10 @@ body:is(.dark *) {
 }
 
 .pill-button {
-  box-shadow: 0 0 60px rgba(234, 179, 8, 0.8),
+  box-shadow: 0 0 60px rgba(198, 198, 196, 0.4),
-                0 0 120px rgba(234, 179, 8, 0.6),
+                0 0 120px rgba(116, 116, 115, 0.2),
-                0 0 180px rgba(234, 179, 8, 0.4);
+                0 0 180px rgba(70, 69, 68, 0.1);
-  border: 2px solid rgba(234, 179, 8, 0.9);
+  border: 2px solid rgba(152, 151, 149, 0.9);
 }
 
 .circular-layout {
@@ -961,6 +961,10 @@ body:is(.dark *) {
   top: 50%;
 }
 
+.isolate {
+  isolation: isolate;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -992,6 +996,10 @@ body:is(.dark *) {
   margin-bottom: 1rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1000,14 +1008,38 @@ body:is(.dark *) {
   margin-right: 1rem;
 }
 
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .mt-12 {
   margin-top: 3rem;
 }
 
+.mt-16 {
+  margin-top: 4rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -1028,6 +1060,10 @@ body:is(.dark *) {
   height: 1.5rem;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
 .h-\[600px\] {
   height: 600px;
 }
@@ -1060,6 +1096,10 @@ body:is(.dark *) {
   width: 0.75rem;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
 .w-auto {
   width: auto;
 }
@@ -1072,6 +1112,10 @@ body:is(.dark *) {
   width: 100vw;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -1080,6 +1124,14 @@ body:is(.dark *) {
   max-width: 56rem;
 }
 
+.max-w-5xl {
+  max-width: 64rem;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+}
+
 .max-w-md {
   max-width: 28rem;
 }
@@ -1092,6 +1144,10 @@ body:is(.dark *) {
   max-width: 36rem;
 }
 
+.flex-none {
+  flex: none;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1118,6 +1174,10 @@ body:is(.dark *) {
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -1134,12 +1194,33 @@ body:is(.dark *) {
   gap: 2rem;
 }
 
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
+
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1150,6 +1231,14 @@ body:is(.dark *) {
   overflow: hidden;
 }
 
+.text-pretty {
+  text-wrap: pretty;
+}
+
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1158,16 +1247,33 @@ body:is(.dark *) {
   border-radius: 0.5rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.bg-white\/10 {
+  background-color: rgb(255 255 255 / 0.1);
+}
+
+.bg-white\/5 {
+  background-color: rgb(255 255 255 / 0.05);
+}
+
 .bg-opacity-0 {
   --tw-bg-opacity: 0;
 }
@@ -1231,6 +1337,20 @@ body:is(.dark *) {
      object-fit: cover;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1241,11 +1361,26 @@ body:is(.dark *) {
   padding-right: 1.5rem;
 }
 
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-24 {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+}
+
 .py-48 {
   padding-top: 12rem;
   padding-bottom: 12rem;
@@ -1269,10 +1404,39 @@ body:is(.dark *) {
   line-height: 2.5rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-lg\/8 {
+  font-size: 1.125rem;
+  line-height: 2rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-sm\/6 {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.text-xs\/5 {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
+.font-extralight {
+  font-weight: 200;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -1281,6 +1445,15 @@ body:is(.dark *) {
   font-weight: 600;
 }
 
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
@@ -1315,6 +1488,27 @@ body:is(.dark *) {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-2 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-gray-400 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1));
+}
+
+.ring-white\/10 {
+  --tw-ring-color: rgb(255 255 255 / 0.1);
+}
+
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1337,10 +1531,58 @@ body:is(.dark *) {
   transition-delay: 200ms;
 }
 
+.duration-1000 {
+  transition-duration: 1000ms;
+}
+
 .duration-500 {
   transition-duration: 500ms;
 }
 
+.pricing-card {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+}
+
+.pricing-card:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  background-color: rgb(255 255 255 / 0.05);
+}
+
+.pricing-card {
+  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
+}
+
+.pricing-card:hover {
+  box-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
+}
+
+.pricing-card.popular {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+}
+
+.pricing-card.popular:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  background-color: rgb(255 255 255 / 0.15);
+}
+
+.pricing-card.popular {
+  box-shadow: 0 0 30px rgba(107, 114, 128, 0.3);
+  border: 1px solid transparent;
+}
+
+.pricing-card.popular:hover {
+  box-shadow: 0 0 100px rgba(107, 114, 128, 0.5);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 .fade-up {
   opacity: 0;
   transform: translateY(30px);
@@ -1382,27 +1624,121 @@ body:is(.dark *) {
 
 .connector-text {
   margin-bottom: 1rem;
-  font-size: 1.125rem;
+  font-size: 1rem;
-  line-height: 1.75rem;
+  line-height: 1.5rem;
   font-weight: 500;
   letter-spacing: 0.05em;
   --tw-text-opacity: 1;
-  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
 @media (min-width: 768px) {
   .connector-text {
-    font-size: 1.25rem;
+    font-size: 1.125rem;
     line-height: 1.75rem;
   }
 }
 
+.toggle-switch {
+  position: relative;
+  display: inline-flex;
+  height: 40px;
+  width: 240px;
+  cursor: pointer;
+  border-radius: 9999px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+  background-color: rgb(31 41 55 / 0.5);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.toggle-switch[data-state="checked"] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
+
+.toggle-switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  height: 36px;
+  width: 118px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.toggle-switch[data-state="checked"] .toggle-switch-thumb {
+  transform: translateX(118px);
+}
+
+.toggle-switch-label {
+  position: absolute;
+  inset: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+}
+
+.toggle-switch-label span {
+  z-index: 10;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.toggle-switch[data-state="checked"] .toggle-switch-label span:first-child {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
+.toggle-switch[data-state="checked"] .toggle-switch-label span:last-child {
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
+.toggle-switch[data-state="unchecked"] .toggle-switch-label span:first-child {
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
+.toggle-switch[data-state="unchecked"] .toggle-switch-label span:last-child {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:bg-gray-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-white\/20:hover {
+  background-color: rgb(255 255 255 / 0.2);
+}
+
 .hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
@@ -1413,6 +1749,34 @@ body:is(.dark *) {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.focus-visible\:outline-2:focus-visible {
+  outline-width: 2px;
+}
+
+.focus-visible\:outline-offset-2:focus-visible {
+  outline-offset: 2px;
+}
+
+.focus-visible\:outline-gray-500:focus-visible {
+  outline-color: #6b7280;
+}
+
+.focus-visible\:outline-white:focus-visible {
+  outline-color: #fff;
+}
+
+@media (min-width: 640px) {
+  .sm\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
+  .sm\:text-xl\/8 {
+    font-size: 1.25rem;
+    line-height: 2rem;
+  }
+}
+
 @media (min-width: 768px) {
   .md\:block {
     display: block;
@@ -1432,6 +1796,11 @@ body:is(.dark *) {
 }
 
 @media (min-width: 1024px) {
+  .lg\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
   .lg\:mt-4 {
     margin-top: 1rem;
   }
@@ -1439,4 +1808,31 @@ body:is(.dark *) {
   .lg\:h-6 {
     height: 1.5rem;
   }
+
+  .lg\:max-w-none {
+    max-width: none;
+  }
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .lg\:pt-12 {
+    padding-top: 3rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
+  .xl\:p-10 {
+    padding: 2.5rem;
+  }
 }

package-lock.json

@@ -9,10 +9,10 @@
       "version": "1.0.0",
       "license": "ISC",
       "devDependencies": {
-        "autoprefixer": "^10.4.14",
+        "autoprefixer": "^10.4.21",
         "http-server": "^14.1.1",
-        "postcss": "^8.4.23",
+        "postcss": "^8.5.3",
-        "tailwindcss": "^3.3.2"
+        "tailwindcss": "^3.4.17"
       }
     },
     "node_modules/@alloc/quick-lru": {

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css",
+    "build": "tailwindcss -i ./src/input.css -o ./src/output.css",
-    "watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
+    "watch": "tailwindcss -i ./src/input.css -o ./src/output.css --watch",
-    "serve": "http-server . -p 3000 -c-1",
+    "serve": "http-server src -p 3000 -c-1",
     "dev": "npm run build && (npm run watch & npm run serve)"
   },
   "repository": {
@@ -17,9 +17,9 @@
   "license": "ISC",
   "description": "",
   "devDependencies": {
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.21",
     "http-server": "^14.1.1",
-    "postcss": "^8.4.23",
+    "postcss": "^8.5.3",
-    "tailwindcss": "^3.3.2"
+    "tailwindcss": "^3.4.17"
   }
 }

src/Open Sauce One OFL.txt

@@ -0,0 +1 @@
+fonts/Open Sauce One OFL.txt

src/Open Sauce Sans OFL.txt

@@ -0,0 +1 @@
+fonts/Open Sauce Sans OFL.txt

src/Open Sauce Two OFL.txt

@@ -0,0 +1 @@
+fonts/Open Sauce Two OFL.txt

src/OpenSauceOne-Black.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-Black.ttf

src/OpenSauceOne-BlackItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-BlackItalic.ttf

src/OpenSauceOne-Bold.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-Bold.ttf

src/OpenSauceOne-BoldItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-BoldItalic.ttf

src/OpenSauceOne-ExtraBold.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-ExtraBold.ttf

src/OpenSauceOne-ExtraBoldItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-ExtraBoldItalic.ttf

src/OpenSauceOne-Italic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-Italic.ttf

src/OpenSauceOne-Light.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-Light.ttf

src/OpenSauceOne-LightItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-LightItalic.ttf

src/OpenSauceOne-Medium.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-Medium.ttf

src/OpenSauceOne-MediumItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-MediumItalic.ttf

src/OpenSauceOne-Regular.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-Regular.ttf

src/OpenSauceOne-SemiBold.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-SemiBold.ttf

src/OpenSauceOne-SemiBoldItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceOne-SemiBoldItalic.ttf

src/OpenSauceSans-Black.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-Black.ttf

src/OpenSauceSans-BlackItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-BlackItalic.ttf

src/OpenSauceSans-Bold.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-Bold.ttf

src/OpenSauceSans-BoldItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-BoldItalic.ttf

src/OpenSauceSans-ExtraBold.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-ExtraBold.ttf

src/OpenSauceSans-ExtraBoldItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-ExtraBoldItalic.ttf

src/OpenSauceSans-Italic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-Italic.ttf

src/OpenSauceSans-Light.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-Light.ttf

src/OpenSauceSans-LightItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-LightItalic.ttf

src/OpenSauceSans-Medium.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-Medium.ttf

src/OpenSauceSans-MediumItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-MediumItalic.ttf

src/OpenSauceSans-Regular.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-Regular.ttf

src/OpenSauceSans-SemiBold.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-SemiBold.ttf

src/OpenSauceSans-SemiBoldItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceSans-SemiBoldItalic.ttf

src/OpenSauceTwo-Black.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-Black.ttf

src/OpenSauceTwo-BlackItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-BlackItalic.ttf

src/OpenSauceTwo-Bold.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-Bold.ttf

src/OpenSauceTwo-BoldItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-BoldItalic.ttf

src/OpenSauceTwo-ExtraBold.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-ExtraBold.ttf

src/OpenSauceTwo-ExtraBoldItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-ExtraBoldItalic.ttf

src/OpenSauceTwo-Italic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-Italic.ttf

src/OpenSauceTwo-Light.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-Light.ttf

src/OpenSauceTwo-LightItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-LightItalic.ttf

src/OpenSauceTwo-Medium.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-Medium.ttf

src/OpenSauceTwo-MediumItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-MediumItalic.ttf

src/OpenSauceTwo-Regular.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-Regular.ttf

src/OpenSauceTwo-SemiBold.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-SemiBold.ttf

src/OpenSauceTwo-SemiBoldItalic.ttf

@@ -0,0 +1 @@
+fonts/OpenSauceTwo-SemiBoldItalic.ttf

src/about.html

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>About - Dark Mode Website</title>
+    <title>About - Circl</title>
     <link href="../dist/output.css" rel="stylesheet">
 </head>
 <body class="min-h-screen bg-black">
     <div class="container mx-auto px-4 py-8">
         <nav class="flex items-center justify-between mb-8">
             <div class="flex items-center">
-                <img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
+                <img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
             </div>
             <ul class="flex space-x-6 text-white">
                 <li><a href="index.html" class="hover:text-gray-300">Home</a></li>

src/assets/logos/logo_lightmode2.svg

@@ -0,0 +1,61 @@
+<svg width="134" height="33" viewBox="0 0 134 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_162_3831)">
+<mask id="mask0_162_3831" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="134" height="33">
+<path d="M134 0H0V33H134V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_162_3831)">
+<mask id="mask1_162_3831" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="33" height="22">
+<path d="M0.694336 0.363708H33.0005V21.3623H0.694336V0.363708Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_162_3831)">
+<path d="M33.0005 16.3929C33.0005 16.9235 32.9767 17.4416 32.9277 17.9485C32.8186 19.0931 32.5764 20.214 32.2364 21.2739H1.45839C0.961567 19.732 0.694336 18.093 0.694336 16.3929C0.694336 15.947 0.718173 15.5011 0.754557 15.0677C0.83987 13.9107 1.05817 12.8022 1.38563 11.7286C1.56754 11.1382 1.7871 10.5603 2.02924 10.0061C2.63647 8.60748 3.43817 7.31717 4.39669 6.17259C7.35881 2.61677 11.8265 0.363708 16.8412 0.363708C22.6563 0.363708 27.7562 3.41262 30.5967 7.98101C31.0584 8.71584 31.4586 9.49924 31.7873 10.3075C32.4911 11.9827 32.9039 13.7899 32.9767 15.6942C33.0005 15.9233 33.0005 16.1637 33.0005 16.3929Z" fill="#F7F7F7"/>
+</g>
+<mask id="mask2_162_3831" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="6" width="33" height="23">
+<path d="M0.694336 6.05798H33.0005V28.3768H0.694336V6.05798Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_162_3831)">
+<path d="M33.0005 16.3929C33.0005 16.9235 32.9767 17.4416 32.9277 17.9485C32.8186 19.0931 32.5764 20.214 32.2364 21.2739C32.0294 21.9377 31.7747 22.5879 31.4837 23.2031C30.7184 24.8061 29.6984 26.2645 28.4726 27.5175C28.2054 27.8064 27.9143 28.0841 27.6107 28.3494H6.07284C5.22222 27.6022 4.45816 26.759 3.78946 25.8298C3.07307 24.8659 2.4671 23.806 1.99286 22.685C1.7871 22.2267 1.60393 21.7572 1.45839 21.2739C0.961567 19.732 0.694336 18.093 0.694336 16.3929C0.694336 15.947 0.718173 15.5012 0.754557 15.0677C0.83987 13.9107 1.05817 12.8022 1.38563 11.7286C1.56754 11.1383 1.7871 10.5604 2.02924 10.0061C2.63647 8.6075 3.43817 7.31719 4.39669 6.17261C6.26605 6.40177 8.0639 6.72684 9.76264 7.16151C11.0386 7.47412 12.2882 7.78798 13.5026 8.08939C19.7067 9.55904 25.5582 10.584 31.7873 10.3075C32.4911 11.9827 32.9039 13.7899 32.9767 15.6942C33.0005 15.9234 33.0005 16.1637 33.0005 16.3929Z" fill="#EDEBE2"/>
+</g>
+<mask id="mask3_162_3831" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="6" width="33" height="27">
+<path d="M0.694336 6.05798H33.0005V32.4346H0.694336V6.05798Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_162_3831)">
+<path d="M33.0005 16.3929C33.0005 16.9235 32.9767 17.4416 32.9277 17.9485C32.8186 19.0931 32.5764 20.214 32.2364 21.2739C32.0294 21.9377 31.7747 22.5879 31.4837 23.2031C30.7184 24.806 29.6984 26.2645 28.4726 27.5174C28.2054 27.8064 27.9143 28.0841 27.6107 28.3494C24.7452 30.8927 20.9688 32.4346 16.8412 32.4346C12.7135 32.4346 8.93711 30.8927 6.07284 28.3494C5.22222 27.6021 4.45816 26.7589 3.78946 25.8298C3.07307 24.8658 2.4671 23.8059 1.99286 22.685C1.7871 22.2267 1.60393 21.7571 1.45839 21.2739C0.961567 19.732 0.694336 18.093 0.694336 16.3929C0.694336 15.947 0.718173 15.5011 0.754557 15.0677C0.83987 13.9107 1.05817 12.8022 1.38563 11.7286C3.55861 11.2952 5.79306 10.7048 7.79667 10.102C10.1754 9.3784 12.2518 8.64357 13.5026 8.08934C13.5754 8.04076 13.6607 8.0171 13.7573 7.96852C19.245 5.41406 25.0124 6.31703 30.5967 7.98098C31.0584 8.71581 31.4586 9.49921 31.7873 10.3075C32.4911 11.9827 32.9039 13.7899 32.9767 15.6942C33.0005 15.9233 33.0005 16.1637 33.0005 16.3929Z" fill="#D4D2C9"/>
+</g>
+<mask id="mask4_162_3831" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="9" width="33" height="24">
+<path d="M0.694336 9.88403H33.0005V32.4346H0.694336V9.88403Z" fill="white"/>
+</mask>
+<g mask="url(#mask4_162_3831)">
+<path d="M33.0005 16.3929C33.0005 16.9235 32.9767 17.4416 32.9277 17.9485C32.8186 19.0931 32.5764 20.214 32.2364 21.2739C32.0294 21.9377 31.7747 22.5879 31.4837 23.2031C30.7184 24.806 29.6984 26.2645 28.4726 27.5174C28.2054 27.8064 27.9143 28.0841 27.6107 28.3494C24.7452 30.8927 20.9688 32.4346 16.8412 32.4346C12.7135 32.4346 8.93711 30.8927 6.07284 28.3494C5.22222 27.6021 4.45816 26.7589 3.78946 25.8298C3.07307 24.8658 2.4671 23.8059 1.99286 22.685C1.7871 22.2267 1.60393 21.7571 1.45839 21.2739C0.961567 19.732 0.694336 18.093 0.694336 16.3929C0.694336 15.947 0.718173 15.5011 0.754557 15.0677C0.83987 13.9107 1.05817 12.8022 1.38563 11.7286C1.56754 11.1382 1.7871 10.5603 2.02924 10.0061C3.94754 9.94505 5.86583 9.98118 7.79667 10.102C12.5316 10.4146 17.2539 11.2466 21.7943 12.3675C26.0073 13.405 29.5767 14.6455 32.9767 15.6942C33.0005 15.9233 33.0005 16.1637 33.0005 16.3929Z" fill="#BBBBBB"/>
+</g>
+<mask id="mask5_162_3831" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="14" width="33" height="19">
+<path d="M0.694336 14.9855H33.0005V32.4346H0.694336V14.9855Z" fill="white"/>
+</mask>
+<g mask="url(#mask5_162_3831)">
+<path d="M32.9277 17.9485C32.8186 19.0931 32.5764 20.214 32.2364 21.2739C32.0294 21.9377 31.7747 22.5879 31.4837 23.2031C30.7184 24.806 29.6984 26.2645 28.4726 27.5174C28.2054 27.8064 27.9143 28.0841 27.6107 28.3494C24.7452 30.8927 20.9688 32.4346 16.8412 32.4346C12.7135 32.4346 8.93711 30.8927 6.07284 28.3494C5.22222 27.6021 4.45816 26.7589 3.78946 25.8298C3.07307 24.8658 2.4671 23.8059 1.99286 22.685C1.7871 22.2267 1.60393 21.7571 1.45839 21.2739C0.961567 19.732 0.694336 18.093 0.694336 16.3929C0.694336 15.947 0.718173 15.5011 0.754557 15.0677C5.2586 15.0067 9.76264 15.465 13.7209 16.5137C20.0705 18.2013 26.4816 18.4903 32.9277 17.9485Z" fill="#858480"/>
+</g>
+<mask id="mask6_162_3831" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="1" y="19" width="31" height="14">
+<path d="M1.86523 19.1304H31.735V32.4346H1.86523V19.1304Z" fill="white"/>
+</mask>
+<g mask="url(#mask6_162_3831)">
+<path d="M31.484 23.2031C30.7187 24.806 29.6987 26.2645 28.4729 27.5174C28.2057 27.8064 27.9146 28.0841 27.611 28.3494C24.7455 30.8927 20.9691 32.4346 16.8415 32.4346C12.7138 32.4346 8.93741 30.8927 6.07314 28.3494C5.22252 27.6021 4.45846 26.7589 3.78976 25.8298C3.07337 24.8658 2.4674 23.8059 1.99316 22.685C3.63293 22.1781 5.0406 21.6849 6.0606 21.2739C6.2789 21.2017 6.47336 21.1058 6.64273 21.0211C12.7991 18.3221 19.2704 19.443 25.4857 21.2739C27.5132 21.8767 29.5168 22.5517 31.484 23.2031Z" fill="#585858"/>
+</g>
+<mask id="mask7_162_3831" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="24" width="26" height="9">
+<path d="M3.4707 24.5507H28.5227V32.4346H3.4707V24.5507Z" fill="white"/>
+</mask>
+<g mask="url(#mask7_162_3831)">
+<path d="M28.4732 27.5174C28.206 27.8064 27.9149 28.0841 27.6113 28.3494C24.7458 30.8927 20.9694 32.4345 16.8417 32.4345C12.7141 32.4345 8.9377 30.8927 6.07343 28.3494C5.2228 27.6021 4.45875 26.7589 3.79004 25.8298C10.5047 24.3602 18.4326 24.3602 24.7821 26.3853C26.0443 26.7826 27.2713 27.1687 28.4732 27.5174Z" fill="#3B3A38"/>
+</g>
+<path d="M57.7695 32.3058C55.2389 32.3058 53.0487 31.8723 51.1976 31.0055C49.349 30.1386 47.8199 28.9617 46.6091 27.4733C45.4008 25.9862 44.496 24.2737 43.8962 22.337C43.2987 20.4016 43 18.364 43 16.2242C43 14.0858 43.2987 12.0494 43.8962 10.1165C44.496 8.18099 45.4008 6.46847 46.6091 4.98013C47.8199 3.4893 49.349 2.31856 51.1976 1.46791C53.0487 0.614758 55.2389 0.187561 57.7695 0.187561C60.2694 0.187561 62.4376 0.620985 64.2727 1.48783C66.1104 2.35219 67.5746 3.55531 68.6654 5.0997C69.755 6.64408 70.4344 8.43133 70.7026 10.4602H64.4343C64.1662 8.80996 63.4133 7.55826 62.1768 6.70387C60.9391 5.85072 59.4161 5.42352 57.6079 5.42352C55.747 5.42352 54.1763 5.87687 52.8969 6.78358C51.62 7.69028 50.6492 8.95568 49.9832 10.5798C49.3196 12.2039 48.9891 14.0858 48.9891 16.2242C48.9891 18.364 49.3196 20.2533 49.9832 21.8936C50.6492 23.5314 51.62 24.803 52.8969 25.7098C54.1763 26.6165 55.747 27.0698 57.6079 27.0698C59.4161 27.0698 60.933 26.6239 62.1572 25.7297C63.3815 24.8367 64.1405 23.4828 64.4343 21.6694H70.7026C70.4344 23.8054 69.755 25.6724 68.6654 27.2691C67.5746 28.867 66.1104 30.1063 64.2727 30.9856C62.4376 31.8649 60.2694 32.3058 57.7695 32.3058Z" fill="white"/>
+<path d="M77.204 6.43983C76.2992 6.43983 75.5206 6.15586 74.8681 5.58792C74.218 5.01999 73.8936 4.2615 73.8936 3.3112C73.8936 2.39204 74.218 1.64103 74.8681 1.05939C75.5206 0.479001 76.2992 0.187561 77.204 0.187561C78.1111 0.187561 78.8898 0.479001 79.5399 1.05939C80.1924 1.64103 80.5193 2.39204 80.5193 3.3112C80.5193 4.2615 80.1924 5.01999 79.5399 5.58792C78.8898 6.15586 78.1111 6.43983 77.204 6.43983ZM79.8826 31.7378H74.491V8.95568H79.8826V31.7378Z" fill="white"/>
+<path d="M90.1807 31.7378H84.7891V8.95569H90.1807V11.6758C91.0291 10.4876 91.9792 9.65565 93.0308 9.17988C94.0812 8.70535 95.2602 8.46747 96.5665 8.46747H97.2031V13.7482H95.9641C95.0594 13.7482 94.2808 13.8715 93.6282 14.1169C92.9781 14.3598 92.426 14.6973 91.973 15.1282C91.3878 15.726 90.9422 16.5057 90.6361 17.4647C90.3325 18.425 90.1807 19.6642 90.1807 21.1812V31.7378Z" fill="white"/>
+<path d="M110.855 32.1862C108.618 32.1862 106.641 31.6855 104.925 30.6817C103.211 29.6791 101.874 28.2779 100.914 26.4769C99.957 24.6772 99.4795 22.5861 99.4795 20.2048C99.4795 17.9031 99.957 15.8743 100.914 14.1169C101.874 12.357 103.203 10.9758 104.905 9.972C106.609 8.96939 108.592 8.46747 110.855 8.46747C113.541 8.46747 115.822 9.1724 117.696 10.5798C119.573 11.9884 120.791 13.8703 121.349 16.2242H115.483C114.79 14.0322 113.247 12.9362 110.855 12.9362C109.124 12.9362 107.713 13.6013 106.624 14.9289C105.533 16.2541 104.988 18.0127 104.988 20.2048C104.988 22.4802 105.533 24.3024 106.624 25.6699C107.713 27.0349 109.124 27.7174 110.855 27.7174C112.157 27.7174 113.207 27.3936 114.004 26.746C114.803 26.0958 115.337 25.2003 115.605 24.0607H121.432C121.086 25.7683 120.42 27.2317 119.434 28.4498C118.451 29.6691 117.221 30.597 115.742 31.2346C114.266 31.8686 112.637 32.1862 110.855 32.1862Z" fill="white"/>
+<path d="M133.767 31.7378H130.295C128.642 31.7378 127.364 31.3468 126.461 30.5621C125.556 29.775 125.104 28.5021 125.104 26.741V0.755493H130.491V25.1169C130.491 25.8779 130.629 26.4147 130.907 26.7261C131.187 27.0349 131.661 27.1894 132.327 27.1894H133.767V31.7378Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_162_3831">
+<rect width="134" height="33" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/base.html

@@ -11,7 +11,7 @@
         <!-- START: Navigation -->
         <nav class="flex items-center justify-between mb-8">
             <div class="flex items-center">
-                <img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
+                <img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-8 mr-4">
             </div>
             <ul class="flex space-x-6 text-white">
                 <li><a href="index.html" class="hover:text-gray-300">Home</a></li>
@@ -30,9 +30,7 @@
 
         <!-- START: Footer -->
         <footer class="mt-12 text-center text-gray-400">
-            <p>&copy; 2025 Dark Mode Website. All rights reserved.</p>
+            <p>&copy; 2025 Circl. All rights reserved.</p>
         </footer>
         <!-- END: Footer -->
     </div>
-</body>
-</html>

src/circle.png

@@ -0,0 +1 @@
+fonts/circle.png

src/contact.html

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contact - Dark Mode Website</title>
+    <title>Contact - Circl</title>
     <link href="../dist/output.css" rel="stylesheet">
 </head>
 <body class="min-h-screen bg-black">
     <div class="container mx-auto px-4 py-8">
         <nav class="flex items-center justify-between mb-8">
             <div class="flex items-center">
-                <img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
+                <img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
             </div>
             <ul class="flex space-x-6 text-white">
                 <li><a href="index.html" class="hover:text-gray-300">Home</a></li>

src/features.html

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Features - Dark Mode Website</title>
+    <title>Features - Circl</title>
     <link href="../dist/output.css" rel="stylesheet">
 </head>
 <body class="min-h-screen bg-black">
     <div class="container mx-auto px-4 py-8">
         <nav class="flex items-center justify-between mb-8">
             <div class="flex items-center">
-                <img src="assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
+                <img src="assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
             </div>
             <ul class="flex space-x-6 text-white">
                 <li><a href="index.html" class="hover:text-gray-300">Home</a></li>

src/index.html

@@ -4,20 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dark Mode Tailwind Website</title>
-    <link href="../dist/output.css" rel="stylesheet">
+    <link href="/output.css" rel="stylesheet">
     
     <!-- Favicon -->
-    <link rel="icon" type="image/png" sizes="16x16" href="../src/assets/favicon/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="../src/assets/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="../src/assets/favicon/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="../src/assets/favicon/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-chrome-192x192.png">
-    <link rel="icon" type="image/png" sizes="512x512" href="../src/assets/favicon/android-chrome-512x512.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon/android-chrome-512x512.png">
 </head>
 <body class="min-h-screen bg-black">
     <div class="container mx-auto px-4 py-8">
         <nav class="flex items-center justify-between mb-8">
             <div class="flex items-center">
-                <img src="../src/assets/logos/logo_lightmode.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
+                <img src="/assets/logos/logo_lightmode2.svg" alt="Logo" class="h-6 md:h-5 lg:h-6 w-auto mr-4">
             </div>
             <ul class="flex space-x-6 text-white">
                 <li><a href="index.html" class="hover:text-gray-300">Home</a></li>
@@ -28,8 +28,8 @@
         </nav>
 
         <!-- Home Section 1 -->
-        <header class="mb-12 relative min-h-[500px] flex items-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg.webp');">
+        <header class="mb-12 relative min-h-[500px] flex items-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/home_bg.webp');">
-            <div class="absolute inset-0 bg-black bg-opacity-30"></div>
+            <div class="absolute inset-0 bg-black bg-opacity-50"></div>
             <div class="relative z-10 w-full py-48">
                 <div class="container mx-auto px-4 mb-4">
                     <div class="max-w-3xl">
@@ -46,10 +46,10 @@
         <main>
             <!-- Home Section 2 -->
             <div class="container mx-auto px-4">
-            <section class="grid grid-cols-1 md:grid-cols-2 gap-8 relative min-h-[400px] bg-cover bg-center mb-12" style="background-image: url('../src/home/img/backgrounds/home_bg2.webp');">
+            <section class="grid grid-cols-1 md:grid-cols-2 gap-8 relative min-h-[400px] bg-cover bg-center mb-12" style="background-image: url('/home/img/backgrounds/home_bg2.webp');">
                 <div class="absolute inset-0 bg-black bg-opacity-0"></div>
                 <div class="relative z-10 flex items-center justify-center">
-                    <img src="../src/home/img/homescreen.webp" alt="Homescreen" class="w-full h-auto rounded-lg shadow-xl fade-up">
+                    <img src="/home/img/homescreen.webp" alt="Homescreen" class="w-full h-auto rounded-lg shadow-xl fade-up">
                 </div>
                 <div class="relative z-10 flex flex-col justify-center">
                     <h1 class="hero-heading-2 text-left fade-up delay-200">Replace the chaos of multiple tools with one collaborative system — shared workspaces for teams, projects, and even your personal life.</h1>
@@ -62,32 +62,32 @@
             <section class="relative w-screen h-[600px]  overflow-hidden -mx-[50vw] left-[50%] right-[50%] relative">
                 <div class="carousel relative w-full h-[600px]">
                     <div class="carousel-slides absolute inset-0">
-                        <div class="carousel-slide absolute inset-0 opacity-95 transition-opacity duration-3000">
+                        <div class="carousel-slide absolute inset-0 opacity-95 transition-opacity duration-1000">
-                            <img src="../src/home/img/carousell/data.webp" alt="Data" class="w-full h-[600px] object-cover">
+                            <img src="/home/img/carousell/own2.webp" alt="Data" class="w-full h-[600px] object-cover">
                         </div>
                         <div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
-                            <img src="../src/home/img/carousell/human.webp" alt="Human" class="w-full h-[600px] object-cover">
+                            <img src="/home/img/carousell/human2.webp" alt="Human" class="w-full h-[600px] object-cover">
                         </div>
                         <div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
-                            <img src="../src/home/img/carousell/one.webp" alt="One" class="w-full h-[600px] object-cover">
+                            <img src="/home/img/carousell/one2.webp" alt="One" class="w-full h-[600px] object-cover">
                         </div>
                         <div class="carousel-slide absolute inset-0 opacity-0 transition-opacity duration-3000">
-                            <img src="../src/home/img/carousell/WEB4.webp" alt="Web4" class="w-full h-[600px] object-cover">
+                            <img src="/home/img/carousell/WEB42.webp" alt="Web4" class="w-full h-[600px] object-cover">
                         </div>
                     </div>
                     <div class="absolute inset-0 bg-black bg-opacity-50 z-10"></div>
                     <div class="carousel-text absolute inset-0 flex items-center justify-center z-20">
                         <div class="carousel-text-slides relative w-full">
-                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-95 transition-opacity duration-2000">
+                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-95 transition-opacity duration-1000">
                                 <h2 class="hero-heading text-center max-w-4xl px-4">Own Your Data</h2>
                             </div>
-                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
+                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-1000">
                                 <h2 class="hero-heading text-center max-w-4xl px-4">Human-centered</h2>
                             </div>
-                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
+                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-1000">
                                 <h2 class="hero-heading text-center max-w-4xl px-4">All in One</h2>
                             </div>
-                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-2000">
+                            <div class="carousel-text-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-1000">
                                 <h2 class="hero-heading text-center max-w-4xl px-4">Built on Web4</h2>
                             </div>
                         </div>
@@ -102,7 +102,7 @@
             </section>
 
             <!-- Home Section 4 (Responsive) -->
-            <section class="relative w-screen min-h-[800px] py-12 overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg4_1.webp');">
+            <section class="relative w-screen min-h-[800px] py-12 overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/home_bg41.webp');">
                 <div class="absolute inset-0 bg-gradient-to-b from-black/80 via-black/70 to-black/80"></div>
                 
                 <!-- Desktop Layout -->
@@ -111,28 +111,19 @@
                         <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
                             <h1 class="hero-heading-2 text-center fade-up max-w-xl">Everything You Need in One <span class="font-semibold">Circl.</span></h1>
                         </div>
-                        <!-- Top -->
-                        <div class="circular-button" style="top: -10%; left: 50%; transform: translate(-50%, -50%);">
-                            <button class="pill-button" style="animation-delay: 0ms;">File Drive</button>
-                        </div>
                         
                         <!-- Top Right -->
                         <div class="circular-button" style="top: 10%; right: -5%; transform: translate(50%, -50%);">
-                            <button class="pill-button" style="animation-delay: 200ms;">Circle Docs</button>
+                            <button class="pill-button" style="animation-delay: 200ms;">Circl Docs</button>
                         </div>
                         
                         <!-- Right -->
                         <div class="circular-button" style="top: 50%; right: -20%; transform: translate(50%, -50%);">
-                            <button class="pill-button" style="animation-delay: 400ms;">Secure VPN</button>
+                            <button class="pill-button" style="animation-delay: 400ms;">Circl Chat</button>
-                        </div>
-                        
-                        <!-- Bottom Right -->
-                        <div class="circular-button" style="bottom: 10%; right: -10%; transform: translate(50%, 50%);">
-                            <button class="pill-button" style="animation-delay: 600ms;">Video Call</button>
                         </div>
                         
                         <!-- Bottom -->
-                        <div class="circular-button" style="bottom: -10%; left: 50%; transform: translate(-50%, 50%);">
+                        <div class="circular-button" style="bottom: 10%; right: -30%; transform: translate(-50%, 50%);">
                             <button class="pill-button" style="animation-delay: 800ms;">Circl Mail</button>
                         </div>
                         
@@ -148,7 +139,7 @@
                         
                         <!-- upper left -->
                         <div class="circular-button" style="top: 10%; left: -10%; transform: translate(-50%, -50%);">
-                            <button class="pill-button" style="animation-delay: 1200ms;">Project Board</button>
+                            <button class="pill-button" style="animation-delay: 1200ms;">Video Call</button>
                         </div>
                     </div>
                 </div>
@@ -165,9 +156,6 @@
                         <div class="w-full">
                             <button class="pill-button w-full" style="animation-delay: 200ms;">Circle Docs</button>
                         </div>
-                        <div class="w-full">
-                            <button class="pill-button w-full" style="animation-delay: 400ms;">Secure VPN</button>
-                        </div>
                         <div class="w-full">
                             <button class="pill-button w-full" style="animation-delay: 600ms;">Video Call</button>
                         </div>
@@ -180,15 +168,12 @@
                         <div class="w-full">
                             <button class="pill-button w-full" style="animation-delay: 1200ms;">AI Assistant</button>
                         </div>
-                        <div class="w-full">
-                            <button class="pill-button w-full" style="animation-delay: 1400ms;">Project Board</button>
-                        </div>
                     </div>
                 </div>
             </section>
 
             <!-- Home Section 7 -->
-            <section class="lg:pt-12 relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg7.webp');">
+            <section class="lg:pt-12 relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/home_bg71.webp');">
                 <div class="absolute inset-0 bg-gradient-to-r from-black/20 via-black/10 to-transparent"></div>
                 <div class="container mx-auto px-4 relative z-10">
                     <div class="flex flex-col items-center text-center max-w-4xl mx-auto">
@@ -196,7 +181,7 @@
                         <h2 class="hero-heading-2 mb-6">Your Private World<br>Organized and Alive.</h2>
                         <a href="#" class="hero-paragraph hover:text-white transition-colors mb-12">→ <u>Learn More</u></a>
                         <div class="w-full fade-up">
-                            <img src="../src/home/img/creators2.png" alt="Creators Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
+                            <img src="/home/img/creators2.png" alt="Creators Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
                         </div>
                     </div>
                 </div>
@@ -204,7 +189,7 @@
 
            
             <!-- Home Section 6 -->
-            <section class="relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg6.webp');">
+            <section class="relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/home_bg61.webp');">
                 <div class="absolute inset-0 bg-gradient-to-r from-black/20 via-black/10 to-transparent"></div>
                 <div class="container mx-auto px-4 relative z-10">
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
@@ -214,14 +199,14 @@
                             <a href="#" class="hero-paragraph hover:text-white transition-colors">→ <u>Learn More</u></a>
                         </div>
                         <div class="relative fade-up delay-200">
-                            <img src="../src/home/img/chat.png" alt="Chat Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
+                            <img src="/home/img/chat.png" alt="Chat Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
                         </div>
                     </div>
                 </div>
             </section>
-            
+
             <!-- Home Section 8 -->
-            <section class="py-24 relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('../src/home/img/backgrounds/home_bg8.webp');">
+            <section class="py-24 relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/home_bg8.webp');">
                 <div class="absolute inset-0 bg-black bg-opacity-30"></div>
                 <div class="container mx-auto px-4 relative z-10">
                     <div class="flex flex-col items-center text-center max-w-3xl mx-auto">
@@ -229,23 +214,333 @@
                         <h2 class="hero-heading-2 mb-6">Lead, Plan, and Make Things Happen.</h2>
                         <a href="#" class="hero-paragraph hover:text-white transition-colors mb-12">→ <u>Learn More</u></a>
                         <div class="w-full fade-up">
-                            <img src="../src/home/img/circle.png" alt="Creators Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
+                            <img src="/home/img/circle.png" alt="Creators Interface" class="w-full h-auto rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-500">
                         </div>
                     </div>
                 </div>
             </section>
 
+             <!-- Home Section 9 -->
+             <div class="bg-BLACK py-24 sm:py-32">
+                <div class="mx-auto max-w-7xl px-6 lg:px-8">
+                  <div class="mx-auto max-w-5xl text-center">
+                    <h2 class="connector-text">PRICING</h2>
+                    <p class="hero-heading-2 fade-up">Choose the Perfect Plan for Your Needs</p>
+                  </div>
+                  <p class="mx-auto mt-6 max-w-2xl text-center text-lg font-extralight fade-up text-pretty text-gray-400 sm:text-xl/8">Choose an affordable plan that’s packed with the best features for engaging your audience and needs.</p>
+                  <div class="mt-16 flex justify-center">
+                    <button type="button" class="toggle-switch" data-state="unchecked" id="billing-toggle" aria-label="Toggle billing frequency">
+                      <div class="toggle-switch-thumb"></div>
+                      <div class="toggle-switch-label">
+                        <span>Monthly</span>
+                        <span>Annually</span>
+                      </div>
+                    </button>
+                  </div>
+                  <div class="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+                    <div class="pricing-card rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
+                      <div class="flex items-center justify-between gap-x-4">
+                        <h3 id="tier-freelancer" class="text-lg/8 font-semibold text-white">For Teams</h3>
+                      </div>
+                      <p class="mt-4 text-sm/6 text-gray-300">The essentials to provide your best work for your team.</p>
+                      <p class="mt-6 flex items-baseline gap-x-1">
+                        <!-- Price, update based on frequency toggle state -->
+                        <span class="text-4xl font-semibold tracking-tight text-white">$7.99</span>
+                        <!-- Payment frequency, update based on frequency toggle state -->
+                        <span class="text-sm/6 font-semibold text-gray-300">/ user</span>
+                      </p>
+                      <a href="#" aria-describedby="tier-freelancer" class="mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
+                      <ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Unlimited circls
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Up to 20 collaborators per circl
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          200GB decentralized storage 
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Custom domain integration
+                        </li>
+                        <li class="flex gap-x-3">
+                            <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                            </svg>
+                            Shared inboxes / project workspace
+                          </li>
+                      </ul>
+                    </div>
+                    <div class="pricing-card popular rounded-3xl bg-white/5 p-8 ring-2 ring-gray-400 xl:p-10">
+                      <div class="flex items-center justify-between gap-x-4">
+                        <h3 id="tier-startup" class="text-lg/8 font-semibold text-white">For Companies</h3>
+                        <p class="rounded-full bg-gray-500 px-2.5 py-1 text-xs/5 font-semibold text-white">Most popular</p>
+                      </div>
+                      <p class="mt-4 text-sm/6 text-gray-300">A plan that scales with your rapidly growing business.</p>
+                      <p class="mt-6 flex items-baseline gap-x-1">
+                        <!-- Price, update based on frequency toggle state -->
+                        <span class="text-4xl font-semibold tracking-tight text-white">$12.99</span>
+                        <!-- Payment frequency, update based on frequency toggle state -->
+                        <span class="text-sm/6 font-semibold text-gray-300">/ user</span>
+                      </p>
+                      <a href="#" aria-describedby="tier-startup" class="mt-6 block rounded-md bg-gray-500 px-3 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">Buy plan</a>
+                      <ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Unlimited Circls
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Up to 50 collaborators per circl
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          500GB decentralized storage 
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Custom domain integration
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Shared inboxes / project workspace
+                        </li>
+                      </ul>
+                    </div>
+                    <div class="pricing-card rounded-3xl p-8 ring-1 ring-white/10 xl:p-10">
+                      <div class="flex items-center justify-between gap-x-4">
+                        <h3 id="tier-enterprise" class="text-lg/8 font-semibold text-white">For Businesses</h3>
+                      </div>
+                      <p class="mt-4 text-sm/6 text-gray-300">Dedicated infrastructure for your business with FreeZone access included.</p>
+                      <p class="mt-6 flex items-baseline gap-x-1">
+                        <!-- Price, update based on frequency toggle state -->
+                        <span class="text-4xl font-semibold tracking-tight text-white">$24.99</span>
+                        <!-- Payment frequency, update based on frequency toggle state -->
+                        <span class="text-sm/6 font-semibold text-gray-300">/ user</span>
+                      </p>
+                      <a href="#" aria-describedby="tier-enterprise" class="mt-6 block rounded-md bg-white/10 px-3 py-2 text-center text-sm/6 font-semibold text-white hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Buy plan</a>
+                      <ul role="list" class="mt-8 space-y-3 text-sm/6 text-gray-300 xl:mt-10">
+                        <li class="flex gap-x-3">
+                            <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                            </svg>
+                            Digital FreeZone Access
+                          </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Unlimited Circls
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Up to 100 collaborators per Circl
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          1TB decentralized storage 
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Custom domain integration
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Shared inboxes / project workspace
+                        </li>
+                        <li class="flex gap-x-3">
+                          <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                          </svg>
+                          Integrated Financial System
+                        </li>
+                        <li class="flex gap-x-3">
+                            <svg class="h-6 w-5 flex-none text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
+                            </svg>
+                            Legal Recognition for Digital Organizations
+                          </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+        </section>
 
-            
+        <!-- Home Section 10 -->
-
+        <section class="relative w-screen min-h-[600px] overflow-hidden -mx-[50vw] left-[50%] right-[50%] flex items-center justify-center bg-cover bg-center" style="background-image: url('/home/img/backgrounds/cta.webp');">
+          <div class="absolute inset-0 bg-black bg-opacity-30"></div>
+          <div class="container mx-auto px-4 relative z-10">
+            <div class="flex flex-col items-center text-center max-w-4xl mx-auto">
+              <h2 class="hero-heading-2 mb-8">Simplify. Collaborate. Own.<br>Join The Circl.</h2>
+              <button class="main-button">Join the waitlist</button>
+            </div>
+          </div>
+        </section>
+        </div>
         </main>
 
-        <div class="container mx-auto px-4">
+
-            <footer class="mt-12 text-center text-gray-400">
+         <!-- footer -->
-            <p class="fade-up">&copy; 2025 Dark Mode Website. All rights reserved.</p>
+         <footer class="bg-black/50 backdrop-blur-sm border-t border-white/10">
-            </footer>
+          <div class="mx-auto max-w-7xl px-6 py-12 sm:py-16 lg:px-8 lg:py-20">
-        </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8">
+              <!-- Logo Column -->
+              <div class="flex flex-col items-center md:items-start">
+                <img src="/assets/logos/logo_lightmode2.svg" alt="Logo" class="h-8 w-auto mb-6">
+                <p class="text-sm leading-5 text-gray-400 text-center md:text-left">&copy; 2025 Circl. All rights reserved.</p>
+              </div>
+              
+              <!-- Solutions Column -->
+              <div>
+                <h3 class="text-sm/6 font-semibold text-white">Solutions</h3>
+                <ul role="list" class="mt-6 space-y-4">
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Marketing</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Analytics</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Automation</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Commerce</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Insights</a>
+                  </li>
+                </ul>
+              </div>
+
+              <!-- Support Column -->
+              <div>
+                <h3 class="text-sm/6 font-semibold text-white">Support</h3>
+                <ul role="list" class="mt-6 space-y-4">
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Submit ticket</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Documentation</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Guides</a>
+                  </li>
+                </ul>
+              </div>
+
+              <!-- Company Column -->
+              <div>
+                <h3 class="text-sm/6 font-semibold text-white">Company</h3>
+                <ul role="list" class="mt-6 space-y-4">
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">About</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Blog</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Jobs</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Press</a>
+                  </li>
+                </ul>
+              </div>
+
+              <!-- Legal Column -->
+              <div>
+                <h3 class="text-sm/6 font-semibold text-white">Legal</h3>
+                <ul role="list" class="mt-6 space-y-4">
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Terms of service</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Privacy policy</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">License</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+        
     <script>
+        // Pricing toggle functionality
+        const billingToggle = document.getElementById('billing-toggle');
+        const priceElements = document.querySelectorAll('.pricing-card .text-4xl');
+        const frequencyElements = document.querySelectorAll('.pricing-card [class*="text-sm"]');
+
+        billingToggle.addEventListener('click', () => {
+            const currentState = billingToggle.getAttribute('data-state');
+            const isChangingToAnnual = currentState === 'unchecked';
+            billingToggle.setAttribute('data-state', isChangingToAnnual ? 'checked' : 'unchecked');
+            
+            const monthlyPrices = {
+                teams: 7.99,
+                companies: 12.99,
+                businesses: 24.99
+            };
+            
+            const prices = isChangingToAnnual ? {
+                teams: `$${(monthlyPrices.teams * 12 * 0.8).toFixed(2)}`,
+                companies: `$${(monthlyPrices.companies * 12 * 0.8).toFixed(2)}`,
+                businesses: `$${(monthlyPrices.businesses * 12 * 0.8).toFixed(2)}`
+            } : {
+                teams: `$${monthlyPrices.teams.toFixed(2)}`,
+                companies: `$${monthlyPrices.companies.toFixed(2)}`,
+                businesses: `$${monthlyPrices.businesses.toFixed(2)}`
+            };
+            
+            // Update prices and frequency text using parent elements
+            const cards = {
+                teams: document.querySelector('#tier-freelancer').closest('.pricing-card'),
+                companies: document.querySelector('#tier-startup').closest('.pricing-card'),
+                businesses: document.querySelector('#tier-enterprise').closest('.pricing-card')
+            };
+            
+            // Update each card's price and frequency
+            Object.entries(cards).forEach(([type, card]) => {
+                const priceElement = card.querySelector('.text-4xl');
+                const frequencyElement = card.querySelector('.text-sm\\/6.font-semibold.text-gray-300');
+                
+                priceElement.textContent = prices[type];
+                frequencyElement.textContent = '/ user';
+            });
+        });
+
         const observerOptions = {
             root: null,
             rootMargin: '0px',

src/input.css

@@ -1,27 +1,27 @@
 @font-face {
   font-family: 'Open Sauce';
-  src: url('/src/fonts/OpenSauceOne-Regular.ttf') format('truetype');
+  src: url('/fonts/OpenSauceOne-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Open Sauce';
-  src: url('/src/fonts/OpenSauceOne-Light.ttf') format('truetype');
+  src: url('/fonts/OpenSauceOne-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Open Sauce';
-  src: url('/src/fonts/OpenSauceOne-Medium.ttf') format('truetype');
+  src: url('/fonts/OpenSauceOne-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Open Sauce';
-  src: url('/src/fonts/OpenSauceOne-Bold.ttf') format('truetype');
+  src: url('/fonts/OpenSauceOne-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
 }
@@ -59,7 +59,7 @@
   }
 
   .main-button {
-    @apply relative px-4 py-2 md:px-6 md:py-3 text-white text-base md:text-lg font-medium rounded-full bg-black border border-yellow-500 transition-all duration-300 before:absolute before:inset-0 before:rounded-full before:blur-lg before:bg-yellow-500 before:opacity-20 before:content-[''] before:z-[-1] hover:before:opacity-40 hover:before:blur-xl hover:scale-105 hover:shadow-yellow-500/70;
+    @apply relative px-4 py-2 md:px-6 md:py-3 text-white text-base md:text-lg font-medium rounded-full bg-black border border-gray-300 transition-all duration-300 before:absolute before:inset-0 before:rounded-full before:blur-lg before:bg-gray-500 before:opacity-20 before:content-[''] before:z-[-1] hover:before:opacity-40 hover:before:blur-xl hover:scale-105 hover:shadow-gray-500/70;
   }
 
   .starry-bg {
@@ -71,10 +71,10 @@
 
   .pill-button {
     @apply px-5 py-2.5 rounded-[50px] bg-black text-white font-bold relative transition-all duration-500 transform hover:scale-105 text-base;
-    box-shadow: 0 0 60px rgba(234, 179, 8, 0.8),
+    box-shadow: 0 0 60px rgba(198, 198, 196, 0.4),
-                0 0 120px rgba(234, 179, 8, 0.6),
+                0 0 120px rgba(116, 116, 115, 0.2),
-                0 0 180px rgba(234, 179, 8, 0.4);
+                0 0 180px rgba(70, 69, 68, 0.1);
-    border: 2px solid rgba(234, 179, 8, 0.9);
+    border: 2px solid rgba(152, 151, 149, 0.9);
   }
 
   .circular-layout {
@@ -135,6 +135,26 @@
 }
 
 @layer utilities {
+  .pricing-card {
+    @apply transition-all duration-500 hover:scale-105 hover:bg-white/5;
+    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
+  }
+
+  .pricing-card:hover {
+    box-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
+  }
+
+  .pricing-card.popular {
+    @apply transition-all duration-500 hover:scale-105 hover:bg-white/15;
+    box-shadow: 0 0 30px rgba(107, 114, 128, 0.3);
+    border: 1px solid transparent;
+  }
+
+  .pricing-card.popular:hover {
+    box-shadow: 0 0 100px rgba(107, 114, 128, 0.5);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
   .fade-up {
     opacity: 0;
     transform: translateY(30px);
@@ -190,6 +210,46 @@
   }
 
   .connector-text {
-    @apply text-yellow-500 text-lg md:text-xl font-medium tracking-wider mb-4;
+    @apply text-white text-base md:text-lg font-medium tracking-wider mb-4;
+  }
+
+  .toggle-switch {
+    @apply relative inline-flex cursor-pointer rounded-full bg-gray-800/50 transition-all duration-300 w-[240px] h-[40px] border border-gray-700;
+  }
+
+  .toggle-switch[data-state="checked"] {
+    @apply bg-gray-700;
+  }
+
+  .toggle-switch-thumb {
+    @apply absolute top-[2px] left-[2px] h-[36px] w-[118px] rounded-full bg-white transition-transform duration-300 transform shadow-lg;
+  }
+
+  .toggle-switch[data-state="checked"] .toggle-switch-thumb {
+    transform: translateX(118px);
+  }
+
+  .toggle-switch-label {
+    @apply absolute inset-0 flex items-center justify-between px-8 text-sm font-medium;
+  }
+
+  .toggle-switch-label span {
+    @apply z-10 transition-colors duration-300;
+  }
+
+  .toggle-switch[data-state="checked"] .toggle-switch-label span:first-child {
+    @apply text-gray-400;
+  }
+
+  .toggle-switch[data-state="checked"] .toggle-switch-label span:last-child {
+    @apply text-black font-semibold;
+  }
+
+  .toggle-switch[data-state="unchecked"] .toggle-switch-label span:first-child {
+    @apply text-black font-semibold;
+  }
+
+  .toggle-switch[data-state="unchecked"] .toggle-switch-label span:last-child {
+    @apply text-gray-400;
   }
 }

src/open-sauce.zip

@@ -0,0 +1 @@
+fonts/open-sauce.zip