diff --git a/assets/AI.png b/assets/AI.png new file mode 100644 index 0000000..cd90515 Binary files /dev/null and b/assets/AI.png differ diff --git a/assets/css/style.css b/assets/css/style.css index ebf7f69..414bb68 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -385,6 +385,19 @@ canvas { z-index: -1; } +.c-lerp-block_title { + display: inline-block; + font-size: 0; + line-height: 1.1; + margin-left: 1.25rem; + vertical-align: middle; +} + +.c-lerp-block_title span { + display: inline-block; + min-width: .3em; +} + .section-resource { justify-content: center; align-items: center; @@ -514,9 +527,9 @@ a-hole canvas { } .showcase-img { - box-shadow: 0px 39px 56px 0px rgba(154, 137, 255, 0.75); - -webkit-box-shadow: 0px 39px 56px 0px rgba(155, 137, 255, 0.459); - -moz-box-shadow: 0px 39px 56px 0px rgba(155, 137, 255, 0.274); + box-shadow: 0px 39px 156px 0px rgba(154, 137, 255, 0.75); + -webkit-box-shadow: 0px 39px 166px 0px rgba(155, 137, 255, 0.459); + -moz-box-shadow: 0px 39px 166px 0px rgba(155, 137, 255, 0.274); position: absolute; border-radius: 0.75rem; } @@ -548,6 +561,7 @@ a-hole canvas { .card-img { height: 100%; } + .card-img img { height: 100%; border-radius: 1rem; @@ -558,6 +572,7 @@ a-hole canvas { border: 1px solid #ff5050; box-shadow: 0 0 20px 5px #ff505083; } + .features .card.card-after { background-color: rgba(14, 85, 0, 0.589); border: 1px solid #5fff50; @@ -787,7 +802,7 @@ a-hole canvas { width: 100%; height: calc(1.35 * var(--sz)); max-width: calc(100vw - 24px); - overflow: hidden; + display: flex; justify-content: center; align-items: center; @@ -801,7 +816,7 @@ a-hole canvas { width: 86%; height: 86%; border: 1px solid #58519baa; - box-shadow: 0 0 20px 5px #58519baa; + box-shadow: 0 0 90px -5px #58519baa; border-radius: 22px; overflow: hidden; display: flex; @@ -829,9 +844,10 @@ a-hole canvas { border: 1px solid #fff3; border-radius: 1rem; color: #fff; - font-size: 0.8em; + font-size: 0.8em !important; font-size: calc(2 * var(--fz)); padding: 6px 10px; + font-family: "Boldonse"; } .feature-card h2 { @@ -846,7 +862,7 @@ a-hole canvas { margin: 0; margin: 0 0.75rem; margin-bottom: 1rem; - + } .feature-card:nth-child(odd) .card-img { @@ -854,11 +870,12 @@ a-hole canvas { } .feature-card:nth-child(odd) .tag { - margin: 0 0 2rem 0rem; - + margin: 0 0 2rem 0rem; + } + .feature-card:nth-child(even) .tag { - margin: 0 0 2rem 0rem; + margin: 0 0 2rem 0rem; margin-left: auto; } @@ -1079,6 +1096,7 @@ span { opacity: 0; } } + .pricing { display: flex; justify-content: center; @@ -1095,146 +1113,163 @@ span { margin-bottom: 2.5rem; font-size: 1.6rem; } + .pricing-title-main { font-size: 2.5rem; font-family: "Boldonse"; } + .pricing-title .highlight { text-decoration: none; } - .card-container { - position: relative; - width: 360px; - max-width: 90%; - transform-style: preserve-3d; - perspective: 1000px; - } - .card-pricing { - background-color: rgba(48, 20, 100, 0.7); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border-radius: 28px; - padding: 24px; - color: #E5E7EB; - box-shadow: 0 12px 35px rgba(0,0,0,0.55), 0 0 0 1px rgba(167, 120, 255, 0.2) inset; - position: relative; - z-index: 1; - overflow: hidden; - transform-style: preserve-3d; - font-family: Arial, Helvetica, sans-serif; - } - .card-title { - font-size: 1.775rem; - font-weight: 700; - color: #F9FAFB; - margin-bottom: 8px; - transform: translateZ(20px); - } - .card-price { - font-size: 3.25rem; - font-weight: 800; - color: #FFFFFF; - margin-bottom: 6px; - transform: translateZ(20px); - } - .card-price .currency { - font-size: 1.875rem; - font-weight: 500; - vertical-align: super; - margin-right: 4px; - color: #9274fd; - } - .card-price .period { - font-size: 1.875rem; - font-weight: 500; - text-decoration: line-through; - color: #D1D5DB; - } - .card-description { - font-size: 1.125rem; - color: #B0B6BF; - margin-bottom: 20px; - line-height: 1.6; - transform: translateZ(20px); - } - .features-list { - list-style: none; - padding: 0; - margin-bottom: 24px; - transform: translateZ(20px); - } - .features-list li { - display: flex; - align-items: center; - font-size: 1.1rem; - margin-bottom: 12px; - color: #D1D5DB; - } - - .rotating-disc-svg { - width: 20px; - height: 20px; - margin-right: 12px; - animation: spin 3s linear infinite; - } - .rotating-disc-svg circle { - stroke: #9d74fd; - stroke-width: 2; - stroke-dasharray: 10 5; - } - - @keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - - .cta-button { - background-color: rgba(133, 80, 255, 0.25); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - color: #FFFFFF; - font-weight: 600; - font-size: 1rem; - padding: 14px 0; - width: 100%; - border: 1px solid rgba(149, 120, 255, 0.3); - border-radius: 20px; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 5px 15px rgba(143, 45, 255, 0.25); - text-transform: uppercase; - letter-spacing: 0.5px; - transform: translateZ(20px); - } - .cta-button:hover { - background-color: rgba(153, 90, 255, 0.4); - border-color: rgba(184, 140, 255, 0.4); - transform: translateY(-2px) scale(1.02) translateZ(20px); - box-shadow: 0 7px 20px rgba(119, 0, 255, 0.35); - } - .cta-button:active { - transform: translateY(-1px) scale(0.98) translateZ(20px); - background-color: rgba(141, 70, 255, 0.45); - } - .highlight { - text-decoration: underline; - color: #5a1efe; - text-shadow: 0px 0px 15px rgba(176, 162, 255, 0.507); - } - - #energy-canvas { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 0; - pointer-events: none; - } - @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); + +.card-container { + position: relative; + width: 360px; + max-width: 90%; + transform-style: preserve-3d; + perspective: 1000px; +} + +.card-pricing { + background-color: rgba(48, 20, 100, 0.7); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-radius: 28px; + padding: 24px; + color: #E5E7EB; + box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(167, 120, 255, 0.2) inset; + position: relative; + z-index: 1; + overflow: hidden; + transform-style: preserve-3d; + font-family: Arial, Helvetica, sans-serif; +} + +.card-title { + font-size: 1.775rem; + font-weight: 700; + color: #F9FAFB; + margin-bottom: 8px; + transform: translateZ(20px); +} + +.card-price { + font-size: 3.25rem; + font-weight: 800; + color: #FFFFFF; + margin-bottom: 6px; + transform: translateZ(20px); +} + +.card-price .currency { + font-size: 1.875rem; + font-weight: 500; + vertical-align: super; + margin-right: 4px; + color: #9274fd; +} + +.card-price .period { + font-size: 1.875rem; + font-weight: 500; + text-decoration: line-through; + color: #D1D5DB; +} + +.card-description { + font-size: 1.125rem; + color: #B0B6BF; + margin-bottom: 20px; + line-height: 1.6; + transform: translateZ(20px); +} + +.features-list { + list-style: none; + padding: 0; + margin-bottom: 24px; + transform: translateZ(20px); +} + +.features-list li { + display: flex; + align-items: center; + font-size: 1.1rem; + margin-bottom: 12px; + color: #D1D5DB; +} + +.rotating-disc-svg { + width: 20px; + height: 20px; + margin-right: 12px; + animation: spin 3s linear infinite; +} + +.rotating-disc-svg circle { + stroke: #9d74fd; + stroke-width: 2; + stroke-dasharray: 10 5; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.cta-button { + background-color: rgba(133, 80, 255, 0.25); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + color: #FFFFFF; + font-weight: 600; + font-size: 1rem; + padding: 14px 0; + width: 100%; + border: 1px solid rgba(149, 120, 255, 0.3); + border-radius: 20px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 5px 15px rgba(143, 45, 255, 0.25); + text-transform: uppercase; + letter-spacing: 0.5px; + transform: translateZ(20px); +} + +.cta-button:hover { + background-color: rgba(153, 90, 255, 0.4); + border-color: rgba(184, 140, 255, 0.4); + transform: translateY(-2px) scale(1.02) translateZ(20px); + box-shadow: 0 7px 20px rgba(119, 0, 255, 0.35); +} + +.cta-button:active { + transform: translateY(-1px) scale(0.98) translateZ(20px); + background-color: rgba(141, 70, 255, 0.45); +} + +.highlight { + text-decoration: underline; + color: #5a1efe; + text-shadow: 0px 0px 15px rgba(176, 162, 255, 0.507); +} + +#energy-canvas { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 0; + pointer-events: none; +} + +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); .footer { height: 100vh; diff --git a/assets/highlight.png b/assets/highlight.png new file mode 100644 index 0000000..6fb35b9 Binary files /dev/null and b/assets/highlight.png differ diff --git a/assets/inbox.png b/assets/inbox.png new file mode 100644 index 0000000..a6ba544 Binary files /dev/null and b/assets/inbox.png differ diff --git a/assets/mail.png b/assets/mail.png new file mode 100644 index 0000000..a748fa7 Binary files /dev/null and b/assets/mail.png differ diff --git a/assets/marathon.png b/assets/marathon.png new file mode 100644 index 0000000..6939836 Binary files /dev/null and b/assets/marathon.png differ diff --git a/assets/progression.png b/assets/progression.png new file mode 100644 index 0000000..ee64968 Binary files /dev/null and b/assets/progression.png differ diff --git a/index.html b/index.html index 581219a..0057c83 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@
- +
@@ -157,13 +157,13 @@
- 01. + 01

AI powered
Client Inbox

Your chaotic inbox, reimagined.
Lets AI triage, respond and organise client comms so you never miss a beat.

- +
@@ -172,7 +172,7 @@

AI powered
Client Inbox

- +
02 @@ -188,13 +188,13 @@

Automatic Phase Detection &
Progression

- 03. + 03

Intelligence that gets Smarter with every task it handles

Our AI learns from every project, client message and edge case. Fewer Fumbles.. Sharper Suggestions. Always levelling up.

- +
@@ -203,10 +203,10 @@

Intelligence that gets Smarter with every task it handles

- +
- 04. + 04

No more scope
Marathons

Detect scope creep before it becomes a crisis. Digipod sets, defends and enforces boundaries - without the awkward convos.

@@ -225,7 +225,7 @@

Built to integrate,
Not isolate

rip and replace required.

- +
@@ -260,8 +260,8 @@

Be one of the first 100 to own the AI Back Office for your creative work

-->
-

Be one of the first 100
to own the AI - Back Office for your creative work

+

Be one of the first 100
+ to own the AI Back Office for your creative work

Be one of the first 100 to own the AI Back Office for your creative work