Spaces:

Mooshie
/

custom-ai-northwest-landing

Running

App Files Files Community

Mooshie commited on 29 days ago

Commit

9e19939

verified ·

1 Parent(s): 95c6494

Create a landing page for a company known as Custom AI Northwest that provides finetunes for LLMs and LoRAs to provide RAG services to the Local Washington Seattle area for Civil Engineering firms to respond to RFPs.

Browse files

Files changed (6) hide show

README.md +8 -5
components/footer.js +247 -0
components/header.js +206 -0
index.html +330 -19
script.js +46 -0
style.css +68 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Custom Ai Northwest Landing
-emoji: 🔥
-colorFrom: purple
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Custom AI Northwest Landing 🧠🏗️
+colorFrom: yellow
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,247 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+        footer {
+          background-color: #0f172a; /* gray-900 slightly darker */
+          border-top: 1px solid rgba(55, 65, 81, 0.5); /* gray-700 */
+          padding: 4rem 0 2rem;
+          color: #9ca3af; /* gray-400 */
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        .footer-grid {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 2rem;
+          margin-bottom: 3rem;
+        }
+        .footer-logo {
+          display: flex;
+          align-items: center;
+          margin-bottom: 1rem;
+        }
+        .logo-icon {
+          background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
+          width: 36px;
+          height: 36px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 10px;
+        }
+        .logo-text {
+          font-family: 'Space Grotesk', sans-serif;
+          font-weight: 700;
+          font-size: 1.25rem;
+          background: linear-gradient(to right, #eab308, #facc15);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        .footer-about p {
+          line-height: 1.6;
+          margin-bottom: 1.5rem;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+        }
+        .social-link {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.05);
+          color: #d1d5db;
+          transition: all 0.3s ease;
+        }
+        .social-link:hover {
+          background: #eab308;
+          color: #000;
+          transform: translateY(-3px);
+        }
+        .footer-heading {
+          font-family: 'Space Grotesk', sans-serif;
+          color: #f9fafb; /* gray-50 */
+          font-size: 1.25rem;
+          font-weight: 600;
+          margin-bottom: 1.5rem;
+        }
+        .footer-links {
+          list-style: none;
+        }
+        .footer-links li {
+          margin-bottom: 0.75rem;
+        }
+        .footer-links a {
+          color: #9ca3af;
+          text-decoration: none;
+          transition: color 0.3s ease;
+        }
+        .footer-links a:hover {
+          color: #eab308;
+        }
+        .contact-info {
+          list-style: none;
+        }
+        .contact-item {
+          display: flex;
+          margin-bottom: 1rem;
+        }
+        .contact-icon {
+          margin-right: 0.75rem;
+          color: #eab308;
+        }
+        .copyright {
+          border-top: 1px solid rgba(55, 65, 81, 0.3);
+          padding-top: 2rem;
+          text-align: center;
+          font-size: 0.875rem;
+        }
+        @media (max-width: 768px) {
+          .footer-grid {
+            grid-template-columns: 1fr 1fr;
+          }
+          .footer-about {
+            grid-column: span 2;
+          }
+        }
+        @media (max-width: 480px) {
+          .footer-grid {
+            grid-template-columns: 1fr;
+          }
+          .footer-about {
+            grid-column: span 1;
+          }
+        }
+      </style>
+      <footer>
+        <div class="container">
+          <div class="footer-grid">
+            <div class="footer-about">
+              <div class="footer-logo">
+                <div class="logo-icon">
+                  <i data-feather="cpu" class="text-black w-4 h-4"></i>
+                </div>
+                <div class="logo-text">Custom AI NW</div>
+              </div>
+              <p>
+                Specializing in AI solutions for civil engineering firms in the Pacific Northwest.
+                We help transform RFP processes with cutting-edge LLM and LoRA technologies.
+              </p>
+              <div class="social-links">
+                <a href="#" class="social-link">
+                  <i data-feather="linkedin" class="w-4 h-4"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="twitter" class="w-4 h-4"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="github" class="w-4 h-4"></i>
+                </a>
+              </div>
+            </div>
+            <div class="footer-section">
+              <h3 class="footer-heading">Services</h3>
+              <ul class="footer-links">
+                <li><a href="#">LLM Fine-Tuning</a></li>
+                <li><a href="#">LoRA Integration</a></li>
+                <li><a href="#">RAG Implementation</a></li>
+                <li><a href="#">Proposal Automation</a></li>
+                <li><a href="#">Technical Documentation</a></li>
+              </ul>
+            </div>
+            <div class="footer-section">
+              <h3 class="footer-heading">Company</h3>
+              <ul class="footer-links">
+                <li><a href="#">About Us</a></li>
+                <li><a href="#">Case Studies</a></li>
+                <li><a href="#">Careers</a></li>
+                <li><a href="#">Blog</a></li>
+                <li><a href="#">Contact</a></li>
+              </ul>
+            </div>
+            <div class="footer-section">
+              <h3 class="footer-heading">Contact</h3>
+              <ul class="contact-info">
+                <li class="contact-item">
+                  <div class="contact-icon">
+                    <i data-feather="map-pin" class="w-4 h-4"></i>
+                  </div>
+                  <span>Seattle, WA</span>
+                </li>
+                <li class="contact-item">
+                  <div class="contact-icon">
+                    <i data-feather="phone" class="w-4 h-4"></i>
+                  </div>
+                  <span>(206) 555-0123</span>
+                </li>
+                <li class="contact-item">
+                  <div class="contact-icon">
+                    <i data-feather="mail" class="w-4 h-4"></i>
+                  </div>
+                  <span>info@customainw.com</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="copyright">
+            <p>&copy; 2023 Custom AI Northwest. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    `;
+    // Initialize Feather icons after rendering
+    setTimeout(() => {
+      feather.replace();
+    }, 0);
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/header.js ADDED Viewed

	@@ -0,0 +1,206 @@

+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+        header {
+          background-color: rgba(17, 24, 39, 0.9); /* gray-900 with opacity */
+          backdrop-filter: blur(10px);
+          position: fixed;
+          width: 100%;
+          z-index: 1000;
+          border-bottom: 1px solid rgba(55, 65, 81, 0.5); /* gray-700 */
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        nav {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 1.5rem 0;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          text-decoration: none;
+        }
+        .logo-icon {
+          background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 12px;
+        }
+        .logo-text {
+          font-family: 'Space Grotesk', sans-serif;
+          font-weight: 700;
+          font-size: 1.5rem;
+          background: linear-gradient(to right, #eab308, #facc15);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        .nav-links {
+          display: flex;
+          list-style: none;
+        }
+        .nav-links li {
+          margin-left: 2rem;
+        }
+        .nav-links a {
+          color: #d1d5db; /* gray-300 */
+          text-decoration: none;
+          font-weight: 500;
+          font-size: 1rem;
+          transition: color 0.3s ease;
+          position: relative;
+        }
+        .nav-links a:hover {
+          color: #eab308; /* yellow-500 */
+        }
+        .nav-links a::after {
+          content: '';
+          position: absolute;
+          bottom: -5px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: #eab308;
+          transition: width 0.3s ease;
+        }
+        .nav-links a:hover::after {
+          width: 100%;
+        }
+        .cta-button {
+          background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
+          color: #000;
+          border: none;
+          padding: 0.75rem 1.5rem;
+          border-radius: 0.5rem;
+          font-weight: 600;
+          font-size: 1rem;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          text-decoration: none;
+          display: inline-block;
+        }
+        .cta-button:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 25px -5px rgba(234, 179, 8, 0.25);
+        }
+        .mobile-menu-button {
+          display: none;
+          background: none;
+          border: none;
+          color: #d1d5db;
+          cursor: pointer;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            background: rgba(17, 24, 39, 0.95);
+            flex-direction: column;
+            padding: 1rem 0;
+            border-top: 1px solid rgba(55, 65, 81, 0.5);
+          }
+          .nav-links.active {
+            display: flex;
+          }
+          .nav-links li {
+            margin: 0.5rem 0;
+            text-align: center;
+          }
+          .mobile-menu-button {
+            display: block;
+          }
+          .cta-button {
+            display: none;
+          }
+        }
+      </style>
+      <header>
+        <div class="container">
+          <nav>
+            <a href="/" class="logo">
+              <div class="logo-icon">
+                <i data-feather="cpu" class="text-black w-5 h-5"></i>
+              </div>
+              <div class="logo-text">Custom AI NW</div>
+            </a>
+            <button class="mobile-menu-button" id="mobileMenuButton">
+              <i data-feather="menu" class="w-6 h-6"></i>
+            </button>
+            <ul class="nav-links" id="navLinks">
+              <li><a href="#services">Services</a></li>
+              <li><a href="#">Case Studies</a></li>
+              <li><a href="#">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+              <li><a href="#" class="cta-button">Free Consultation</a></li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+    `;
+    // Mobile menu toggle
+    this.shadowRoot.addEventListener('click', (e) => {
+      if (e.target.closest('#mobileMenuButton')) {
+        const navLinks = this.shadowRoot.getElementById('navLinks');
+        navLinks.classList.toggle('active');
+        // Update icon
+        const menuIcon = this.shadowRoot.querySelector('[data-feather="menu"]');
+        if (navLinks.classList.contains('active')) {
+          menuIcon.setAttribute('data-feather', 'x');
+        } else {
+          menuIcon.setAttribute('data-feather', 'menu');
+        }
+        feather.replace();
+      }
+    });
+  }
+}
+customElements.define('custom-header', CustomHeader);

index.html CHANGED Viewed

@@ -1,19 +1,330 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom AI Northwest - AI Solutions for Civil Engineers</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body class="bg-gray-900 text-white font-sans">
+    <!-- Header/Web Component -->
+    <script src="components/header.js"></script>
+    <custom-header></custom-header>
+    <!-- Hero Section -->
+    <section class="relative py-20 md:py-32 overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-black opacity-90"></div>
+        <div class="container mx-auto px-4 relative z-10">
+            <div class="max-w-3xl mx-auto text-center">
+                <span class="inline-block px-4 py-1 bg-yellow-500/10 text-yellow-400 rounded-full text-sm font-medium mb-6">Seattle-Based AI Solutions</span>
+                <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
+                    Transform Your RFP Responses with <span class="text-yellow-400">AI-Powered Precision</span>
+                </h1>
+                <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
+                    Custom AI Northwest specializes in fine-tuned LLMs and LoRAs for civil engineering firms in the Pacific Northwest. Automate your RFP responses with cutting-edge Retrieval-Augmented Generation technology.
+                </p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="#services" class="px-8 py-4 bg-yellow-500 hover:bg-yellow-400 text-black font-bold rounded-lg transition duration-300 transform hover:-translate-y-1 text-center">
+                        Explore Our Services
+                    </a>
+                    <a href="#contact" class="px-8 py-4 bg-transparent border-2 border-yellow-500 text-yellow-400 hover:bg-yellow-500/10 font-bold rounded-lg transition duration-300 text-center">
+                        Schedule Consultation
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Stats Section -->
+    <section class="py-16 bg-gray-800/50">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+                <div class="p-6">
+                    <div class="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">85%</div>
+                    <div class="text-gray-400">Faster RFP Response Times</div>
+                </div>
+                <div class="p-6">
+                    <div class="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">300+</div>
+                    <div class="text-gray-400">Successful Proposals</div>
+                </div>
+                <div class="p-6">
+                    <div class="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">24/7</div>
+                    <div class="text-gray-400">AI Assistance Available</div>
+                </div>
+                <div class="p-6">
+                    <div class="text-4xl md:text-5xl font-bold text-yellow-400 mb-2">99.9%</div>
+                    <div class="text-gray-400">Data Security Guarantee</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="py-20">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Specialized Services</h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                    Tailored AI solutions designed specifically for civil engineering firms in the Seattle area
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-10">
+                <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700 hover:border-yellow-500/30 transition-all duration-300 group">
+                    <div class="w-16 h-16 rounded-full bg-yellow-500/10 flex items-center justify-center mb-6 group-hover:bg-yellow-500/20 transition-colors">
+                        <i data-feather="cpu" class="text-yellow-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">LLM Fine-Tuning</h3>
+                    <p class="text-gray-400 mb-6">
+                        We specialize in creating custom Large Language Models trained on your firm's historical RFP responses and technical documentation to generate precise, context-aware proposals.
+                    </p>
+                    <ul class="space-y-3">
+                        <li class="flex items-center">
+                            <i data-feather="check-circle" class="text-yellow-400 mr-2 w-5 h-5"></i>
+                            <span>Industry-specific training data</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i data-feather="check-circle" class="text-yellow-400 mr-2 w-5 h-5"></i>
+                            <span>Continuous model improvement</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i data-feather="check-circle" class="text-yellow-400 mr-2 w-5 h-5"></i>
+                            <span>Compliance-focused outputs</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700 hover:border-yellow-500/30 transition-all duration-300 group">
+                    <div class="w-16 h-16 rounded-full bg-yellow-500/10 flex items-center justify-center mb-6 group-hover:bg-yellow-500/20 transition-colors">
+                        <i data-feather="layers" class="text-yellow-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">LoRA Integration</h3>
+                    <p class="text-gray-400 mb-6">
+                        Low-Rank Adaptation modules seamlessly integrated into existing workflows to enhance proposal generation without disrupting current processes.
+                    </p>
+                    <ul class="space-y-3">
+                        <li class="flex items-center">
+                            <i data-feather="check-circle" class="text-yellow-400 mr-2 w-5 h-5"></i>
+                            <span>Minimal computational overhead</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i data-feather="check-circle" class="text-yellow-400 mr-2 w-5 h-5"></i>
+                            <span>Rapid deployment capabilities</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i data-feather="check-circle" class="text-yellow-400 mr-2 w-5 h-5"></i>
+                            <span>Seamless system integration</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700 hover:border-yellow-500/30 transition-all duration-300 group">
+                    <div class="w-16 h-16 rounded-full bg-yellow-500/10 flex items-center justify-center mb-6 group-hover:bg-yellow-500/20 transition-colors">
+                        <i data-feather="database" class="text-yellow-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold mb-4">RAG Implementation</h3>
+                    <p class="text-gray-400 mb-6">
+                        Retrieval-Augmented Generation systems that pull relevant information from your knowledge base to create accurate, comprehensive RFP responses.
+                    </p>
+                    <ul class="space-y-3">
+                        <li class="flex items-center">
+                            <i data-feather="check-circle" class="text-yellow-400 mr-2 w-5 h-5"></i>
+                            <span>Real-time document retrieval</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i data-feather="check-circle" class="text-yellow-400 mr-2 w-5 h-5"></i>
+                            <span>Contextual response generation</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i data-feather="check-circle" class="text-yellow-400 mr-2 w-5 h-5"></i>
+                            <span>Source citation tracking</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- How It Works -->
+    <section class="py-20 bg-gray-800/30">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">How Our Process Works</h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                    Streamlined implementation tailored to your firm's specific needs
+                </p>
+            </div>
+            <div class="max-w-4xl mx-auto">
+                <div class="flex flex-col md:flex-row items-center mb-16">
+                    <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
+                        <div class="w-24 h-24 rounded-full bg-yellow-500/10 flex items-center justify-center">
+                            <span class="text-4xl font-bold text-yellow-400">1</span>
+                        </div>
+                    </div>
+                    <div class="md:w-2/3 md:pl-12">
+                        <h3 class="text-2xl font-bold mb-4">Discovery & Assessment</h3>
+                        <p class="text-gray-400">
+                            We analyze your current RFP process, review historical documents, and identify optimization opportunities. Our team works closely with your staff to understand workflow requirements.
+                        </p>
+                    </div>
+                </div>
+                <div class="flex flex-col md:flex-row items-center mb-16">
+                    <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
+                        <div class="w-24 h-24 rounded-full bg-yellow-500/10 flex items-center justify-center">
+                            <span class="text-4xl font-bold text-yellow-400">2</span>
+                        </div>
+                    </div>
+                    <div class="md:w-2/3 md:pl-12">
+                        <h3 class="text-2xl font-bold mb-4">Model Development</h3>
+                        <p class="text-gray-400">
+                            Our engineers develop custom models using your proprietary data while ensuring compliance with industry standards. We implement robust security measures throughout the development cycle.
+                        </p>
+                    </div>
+                </div>
+                <div class="flex flex-col md:flex-row items-center mb-16">
+                    <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
+                        <div class="w-24 h-24 rounded-full bg-yellow-500/10 flex items-center justify-center">
+                            <span class="text-4xl font-bold text-yellow-400">3</span>
+                        </div>
+                    </div>
+                    <div class="md:w-2/3 md:pl-12">
+                        <h3 class="text-2xl font-bold mb-4">Integration & Training</h3>
+                        <p class="text-gray-400">
+                            We seamlessly integrate our solution into your existing systems and provide comprehensive training to your team. Ongoing support ensures smooth adoption and maximum ROI.
+                        </p>
+                    </div>
+                </div>
+                <div class="flex flex-col md:flex-row items-center">
+                    <div class="md:w-1/3 mb-8 md:mb-0 flex justify-center">
+                        <div class="w-24 h-24 rounded-full bg-yellow-500/10 flex items-center justify-center">
+                            <span class="text-4xl font-bold text-yellow-400">4</span>
+                        </div>
+                    </div>
+                    <div class="md:w-2/3 md:pl-12">
+                        <h3 class="text-2xl font-bold mb-4">Optimization & Growth</h3>
+                        <p class="text-gray-400">
+                            Continuous monitoring and model refinement ensure performance improvements over time. We adapt to changing requirements and evolving industry standards.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-20">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted by Seattle's Leading Firms</h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                    Hear from civil engineering professionals who have transformed their RFP process
+                </p>
+            </div>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700">
+                    <div class="flex items-center mb-6">
+                        <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div>
+                        <div>
+                            <h4 class="font-bold">Michael Rodriguez</h4>
+                            <p class="text-gray-400 text-sm">Senior Project Manager, Cascade Engineers</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic mb-6">
+                        "Custom AI Northwest reduced our RFP drafting time by 70% while improving accuracy. Their understanding of civil engineering requirements is unmatched."
+                    </p>
+                    <div class="flex text-yellow-400">
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                    </div>
+                </div>
+                <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700">
+                    <div class="flex items-center mb-6">
+                        <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div>
+                        <div>
+                            <h4 class="font-bold">Sarah Johnson</h4>
+                            <p class="text-gray-400 text-sm">Director of Proposals, Puget Sound Consultants</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic mb-6">
+                        "The RAG implementation identified technical specifications we'd missed for years. Our win rate has increased significantly since partnering with Custom AI NW."
+                    </p>
+                    <div class="flex text-yellow-400">
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                    </div>
+                </div>
+                <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700 md:col-span-2 lg:col-span-1 lg:row-span-2">
+                    <div class="flex items-center mb-6">
+                        <div class="w-12 h-12 rounded-full bg-gray-700 mr-4"></div>
+                        <div>
+                            <h4 class="font-bold">David Chen</h4>
+                            <p class="text-gray-400 text-sm">CTO, Emerald Infrastructure Group</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic mb-6">
+                        "Implementing their LoRA solution was seamless. Our team now generates draft responses in hours instead of days. The customization to our technical vocabulary was impressive."
+                    </p>
+                    <div class="flex text-yellow-400 mb-6">
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                    </div>
+                    <blockquote class="border-l-4 border-yellow-500 pl-4 text-gray-400">
+                        "We've seen a 40% increase in successful bids since implementing their solution. The quality of our proposals has improved dramatically."
+                    </blockquote>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section id="contact" class="py-20 bg-gradient-to-r from-yellow-500/10 to-black">
+        <div class="container mx-auto px-4">
+            <div class="max-w-3xl mx-auto text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your RFP Process?</h2>
+                <p class="text-xl text-gray-300 mb-10">
+                    Schedule a free consultation with our AI specialists to see how we can customize solutions for your firm.
+                </p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="#" class="px-8 py-4 bg-yellow-500 hover:bg-yellow-400 text-black font-bold rounded-lg transition duration-300 transform hover:-translate-y-1 text-center">
+                        Book Free Consultation
+                    </a>
+                    <a href="#" class="px-8 py-4 bg-transparent border-2 border-yellow-500 text-yellow-400 hover:bg-yellow-500/10 font-bold rounded-lg transition duration-300 text-center">
+                        Download Case Study
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer/Web Component -->
+    <script src="components/footer.js"></script>
+    <custom-footer></custom-footer>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,46 @@

+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        const targetId = this.getAttribute('href');
+        if(targetId === '#') return;
+        const targetElement = document.querySelector(targetId);
+        if(targetElement) {
+            window.scrollTo({
+                top: targetElement.offsetTop - 80,
+                behavior: 'smooth'
+            });
+        }
+    });
+});
+// Intersection Observer for fade-in animations
+const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1
+};
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if(entry.isIntersecting) {
+            entry.target.classList.add('fade-in-up');
+            observer.unobserve(entry.target);
+        }
+    });
+}, observerOptions);
+// Observe elements with fade-in-up class
+document.addEventListener('DOMContentLoaded', () => {
+    const fadeElements = document.querySelectorAll('.fade-in-up');
+    fadeElements.forEach(el => {
+        observer.observe(el);
+    });
+    // Initialize Feather icons
+    if(typeof feather !== 'undefined') {
+        feather.replace();
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,78 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  --primary-color: #eab308; /* yellow-500 */
+  --secondary-color: #000000; /* black */
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 body {
+  font-family: 'Inter', sans-serif;
+  background-color: #111827; /* gray-900 */
+  color: #f9fafb; /* gray-50 */
+}
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Space Grotesk', sans-serif;
+}
+/* Custom animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
+.fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
 }
+/* Feather icons styling */
+.feather {
+  width: 1em;
+  height: 1em;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
 }
+/* Custom button hover effect */
+.btn-primary:hover {
+  box-shadow: 0 10px 25px -5px rgba(234, 179, 8, 0.25);
 }
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .hero-content {
+    padding-top: 2rem;
+  }
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
+/* Scroll behavior */
+html {
+  scroll-behavior: smooth;
+}
+/* Focus styles for accessibility */
+a:focus, button:focus {
+  outline: 2px dashed var(--primary-color);
+  outline-offset: 2px;
+}