Spaces:

dev-Rachitgarg
/

handspeak-ai-translator

Running

App Files Files Community

dev-Rachitgarg commited on Nov 4, 2025

Commit

20d3c9a

verified ·

1 Parent(s): 21acf71

add the nav bar and the pricing plans and header and footer add these

Browse files

Files changed (6) hide show

about.html +12 -4
components/footer.js +119 -0
components/navbar.js +84 -0
contact.html +11 -2
index.html +20 -5
pricing.html +12 -4

about.html CHANGED Viewed

@@ -11,8 +11,17 @@
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
-    <main class="flex-grow container mx-auto px-4 py-12">
         <div class="max-w-4xl mx-auto">
             <h1 class="text-4xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
                 About HandSpeak AI
@@ -58,8 +67,7 @@
             </div>
         </div>
     </main>
     <custom-footer></custom-footer>
-    <script src="script.js"></script>
 </body>
 </html>

 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
+    <header class="bg-gradient-to-r from-gray-900 to-gray-800 py-16">
+      <div class="container mx-auto px-4 text-center">
+        <h1 class="text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
+          About HandSpeak AI
+        </h1>
+        <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+          Our mission to bridge communication gaps through technology
+        </p>
+      </div>
+    </header>
+<main class="flex-grow container mx-auto px-4 py-12">
         <div class="max-w-4xl mx-auto">
             <h1 class="text-4xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
                 About HandSpeak AI
             </div>
         </div>
     </main>
     <custom-footer></custom-footer>
+<script src="script.js"></script>
 </body>
 </html>

components/footer.js ADDED Viewed

	@@ -0,0 +1,119 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #0f172a;
+          color: #94a3b8;
+          padding: 3rem 0;
+          margin-top: auto;
+        }
+        .footer-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 2rem;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 2rem;
+        }
+        .footer-logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+          margin-bottom: 1rem;
+          background: linear-gradient(to right, #2dd4bf, #3b82f6);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+        .footer-links h3 {
+          color: #e2e8f0;
+          font-size: 1.1rem;
+          margin-bottom: 1rem;
+        }
+        .footer-links ul {
+          list-style: none;
+          padding: 0;
+        }
+        .footer-links li {
+          margin-bottom: 0.5rem;
+        }
+        .footer-links a {
+          color: #94a3b8;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-links a:hover {
+          color: #2dd4bf;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        .social-links a {
+          color: #94a3b8;
+          transition: color 0.2s;
+        }
+        .social-links a:hover {
+          color: #2dd4bf;
+        }
+        .copyright {
+          text-align: center;
+          margin-top: 3rem;
+          padding-top: 1.5rem;
+          border-top: 1px solid #1e293b;
+        }
+        @media (max-width: 768px) {
+          .footer-container {
+            grid-template-columns: 1fr;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-container">
+          <div class="footer-about">
+            <div class="footer-logo">HandSpeak AI</div>
+            <p>Breaking communication barriers with AI-powered sign language recognition.</p>
+            <div class="social-links">
+              <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a>
+              <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
+              <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a>
+            </div>
+          </div>
+          <div class="footer-links">
+            <h3>Product</h3>
+            <ul>
+              <li><a href="/">Features</a></li>
+              <li><a href="/pricing.html">Pricing</a></li>
+              <li><a href="#">API</a></li>
+              <li><a href="#">Documentation</a></li>
+            </ul>
+          </div>
+          <div class="footer-links">
+            <h3>Company</h3>
+            <ul>
+              <li><a href="/about.html">About</a></li>
+              <li><a href="#">Blog</a></li>
+              <li><a href="#">Careers</a></li>
+              <li><a href="#">Press</a></li>
+            </ul>
+          </div>
+          <div class="footer-links">
+            <h3>Support</h3>
+            <ul>
+              <li><a href="/contact.html">Contact</a></li>
+              <li><a href="#">Help Center</a></li>
+              <li><a href="#">Privacy Policy</a></li>
+              <li><a href="#">Terms of Service</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="copyright">
+          &copy; ${new Date().getFullYear()} HandSpeak AI. All rights reserved.
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,84 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(15, 23, 42, 0.8);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .nav-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+          background: linear-gradient(to right, #2dd4bf, #3b82f6);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+        .nav-links {
+          display: flex;
+          gap: 1.5rem;
+        }
+        .nav-links a {
+          color: #e2e8f0;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.2s;
+          padding: 0.5rem 0;
+          position: relative;
+        }
+        .nav-links a:hover {
+          color: #2dd4bf;
+        }
+        .nav-links a.active::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background: linear-gradient(to right, #2dd4bf, #3b82f6);
+        }
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: white;
+          cursor: pointer;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      <nav>
+        <div class="nav-container">
+          <a href="/" class="logo">HandSpeak AI</a>
+          <div class="nav-links">
+            <a href="/" class="active">Home</a>
+            <a href="/about.html">About</a>
+            <a href="/pricing.html">Pricing</a>
+            <a href="/contact.html">Contact</a>
+          </div>
+          <button class="mobile-menu-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+          </button>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

contact.html CHANGED Viewed

@@ -12,8 +12,17 @@
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
-    <main class="flex-grow container mx-auto px-4 py-12">
         <div class="max-w-4xl mx-auto">
             <h1 class="text-4xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
                 Contact Us

 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
+    <header class="bg-gradient-to-r from-gray-900 to-gray-800 py-16">
+      <div class="container mx-auto px-4 text-center">
+        <h1 class="text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
+          Contact Us
+        </h1>
+        <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+          We'd love to hear from you
+        </p>
+      </div>
+    </header>
+<main class="flex-grow container mx-auto px-4 py-12">
         <div class="max-w-4xl mx-auto">
             <h1 class="text-4xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
                 Contact Us

index.html CHANGED Viewed

@@ -13,8 +13,25 @@
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
-    <main class="flex-grow container mx-auto px-4 py-8">
         <div class="max-w-6xl mx-auto">
             <div class="text-center mb-12">
                 <h1 class="text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
@@ -104,10 +121,8 @@
             </div>
         </div>
     </main>
     <custom-footer></custom-footer>
-    <!-- Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>

 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
+    <header class="bg-gradient-to-r from-gray-900 to-gray-800 py-20">
+      <div class="container mx-auto px-4 text-center">
+        <h1 class="text-5xl md:text-6xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
+          HandSpeak AI Translator
+        </h1>
+        <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-8">
+          Real-time sign language recognition powered by AI and computer vision
+        </p>
+        <div class="flex flex-wrap justify-center gap-4">
+          <a href="/pricing.html" class="bg-teal-600 hover:bg-teal-500 text-white px-8 py-3 rounded-lg font-medium transition text-lg">
+            View Pricing
+          </a>
+          <a href="/about.html" class="bg-gray-700 hover:bg-gray-600 text-white px-8 py-3 rounded-lg font-medium transition text-lg">
+            Learn More
+          </a>
+        </div>
+      </div>
+    </header>
+<main class="flex-grow container mx-auto px-4 py-8">
         <div class="max-w-6xl mx-auto">
             <div class="text-center mb-12">
                 <h1 class="text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
             </div>
         </div>
     </main>
     <custom-footer></custom-footer>
+<!-- Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>

pricing.html CHANGED Viewed

@@ -11,8 +11,17 @@
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
-    <main class="flex-grow container mx-auto px-4 py-12">
         <div class="max-w-6xl mx-auto">
             <h1 class="text-4xl font-bold mb-4 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
                 Simple, Transparent Pricing
@@ -130,8 +139,7 @@
             </div>
         </div>
     </main>
     <custom-footer></custom-footer>
-    <script src="script.js"></script>
 </body>
 </html>

 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
+    <header class="bg-gradient-to-r from-gray-900 to-gray-800 py-16">
+      <div class="container mx-auto px-4 text-center">
+        <h1 class="text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
+          Pricing Plans
+        </h1>
+        <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+          Choose the plan that fits your needs
+        </p>
+      </div>
+    </header>
+<main class="flex-grow container mx-auto px-4 py-12">
         <div class="max-w-6xl mx-auto">
             <h1 class="text-4xl font-bold mb-4 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
                 Simple, Transparent Pricing
             </div>
         </div>
     </main>
     <custom-footer></custom-footer>
+<script src="script.js"></script>
 </body>
 </html>