From 184a2eb9444b7da8351fd76ec57fae7619281056 Mon Sep 17 00:00:00 2001 From: wheattoast11 Date: Wed, 20 Nov 2024 17:06:56 -0600 Subject: [PATCH] update content and styles --- index.html | 34 +++++++++++++++-- src/ui/CardEffects.js | 8 ++++ style.css | 89 ++++++++++++++++++++++++++++++++++++++----- 3 files changed, 119 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index bb74f8c..9fb995c 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Intuition Labs LLC - AI Research & Consulting + @@ -19,6 +20,9 @@

Our Vision

Transforming enterprises through cutting-edge AI solutions and polymathic expertise

+
+ Schedule a meeting +
Read Our Manifesto
@@ -29,16 +33,40 @@

Featured Solutions

Enterprise AI Strategy

Comprehensive AI implementation and transformation roadmaps

+
+
    +
  • Enterprise AI Implementation Strategy
    • +
  • LLM & Agent System Architecture
    • +
  • GTM Strategy Development
    • +
  • Complex System Integration
    • +
+
Learn More →

LLM Systems

Custom language model development and integration

+
+
    +
  • Custom AI Agent Development
    • +
  • Advanced Prompt Engineering
    • +
  • Multi-modal System Design
    • +
  • Process Automation & Optimization
    • +
+
Learn More →

AI Agents

Autonomous agent systems for process automation

+
+
    +
  • 30k+ hours annual productivity improvement
    • +
  • Enterprise systems architecture across industries
    • +
  • Performance management for mega-cap enterprises
    • +
  • Cloud-wide tech stack transformation
    • +
+
Learn More →
@@ -46,9 +74,9 @@

AI Agents

diff --git a/src/ui/CardEffects.js b/src/ui/CardEffects.js index 653e251..f7b851c 100644 --- a/src/ui/CardEffects.js +++ b/src/ui/CardEffects.js @@ -5,7 +5,9 @@ export class CardEffects { init() { const cards = document.querySelectorAll('.card'); + cards.forEach(card => { + // Mouse move effect for gradient card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 100; @@ -13,6 +15,12 @@ export class CardEffects { card.style.setProperty('--x', `${x}%`); card.style.setProperty('--y', `${y}%`); }); + + // Stagger animation for list items on hover + const listItems = card.querySelectorAll('.learn-more-content li'); + listItems.forEach((item, index) => { + item.style.transitionDelay = `${index * 50}ms`; + }); }); } } \ No newline at end of file diff --git a/style.css b/style.css index 9e568fc..fe9f10e 100644 --- a/style.css +++ b/style.css @@ -161,8 +161,8 @@ h2::before { backdrop-filter: blur(20px); padding: 2.5rem; border-radius: 2px; - border: 1px solid rgba(255, 255, 255, 0.03); - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); + border: 1px solid rgba(255, 255, 255, .03); + transition: all .6s cubic-bezier(.23, 1, .32, 1); position: relative; overflow: hidden; } @@ -183,16 +183,77 @@ h2::before { transition: opacity 0.3s ease; } -.card:hover { - transform: translateY(-3px); - background: var(--hover); - border-color: var(--glow); +.card:hover::before { + opacity: 1; } -.card:hover::before { +.learn-more-content { + max-height: 0; + opacity: 0; + overflow: hidden; + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + margin: 0; + padding: 0; +} + +.card:hover .learn-more-content { + max-height: 300px; + opacity: 1; + margin-top: 1.5rem; +} + +.learn-more-content ul { + list-style: none; + padding: 0; + margin: 0; +} + +.learn-more-content li { + position: relative; + padding-left: 1.5rem; + margin-bottom: 0.75rem; + font-size: 0.95rem; + opacity: 0.8; + transform: translateY(10px); + transition: all 0.3s ease; +} + +.learn-more-content li::before { + content: '/'; + position: absolute; + left: 0; + color: var(--glow); + opacity: 0.6; +} + +.card:hover .learn-more-content li { + transform: translateY(0); opacity: 1; } +.experience-list { + list-style: none; + padding: 0; + margin: 1.5rem 0 0 0; +} + +.experience-list li { + position: relative; + padding-left: 1.5rem; + margin-bottom: 1rem; + font-size: 0.95rem; + opacity: 0.8; + line-height: 1.5; +} + +.experience-list li::before { + content: '/'; + position: absolute; + left: 0; + color: var(--glow); + opacity: 0.6; +} + .card h3 { font-family: var(--font-display); color: var(--glow); @@ -228,9 +289,16 @@ h2::before { .cta-container { display: flex; - gap: 3rem; + flex-direction: column; + gap: 1rem; margin-top: 3rem; - align-items: center; + align-items: flex-start; +} + +.zcal-inline-widget { + margin: 2rem 0; + width: 100%; + max-width: 600px; } .cta-button { @@ -246,6 +314,9 @@ h2::before { letter-spacing: 0.02em; position: relative; overflow: hidden; + width: 100%; + max-width: 600px; + text-align: center; } .cta-button::before {