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/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