Spaces:

AppliantRobotics
/

robochef-revolution

Running

App Files Files Community

AppliantRobotics commited on Nov 2, 2025

Commit

cef2253

verified ·

1 Parent(s): 48537a4

make the lihter so its easier to read

Browse files

Files changed (4) hide show

components/footer.js +14 -14
components/navbar.js +3 -3
index.html +16 -18
style.css +2 -2

components/footer.js CHANGED Viewed

@@ -5,11 +5,11 @@ class CustomFooter extends HTMLElement {
             <style>
                 :host {
                     display: block;
-                    background-color: #111827;
-                    color: #9CA3AF;
                     padding: 4rem 2rem;
-                    border-top: 1px solid rgba(255, 255, 255, 0.1);
-                }
                 .footer-container {
                     max-width: 1280px;
@@ -32,8 +32,8 @@ class CustomFooter extends HTMLElement {
                     font-weight: 700;
                     font-size: 1.25rem;
                     margin-bottom: 1.5rem;
-                    color: white;
-                }
                 .footer-logo-icon {
                     background: linear-gradient(135deg, #FF7B25, #FF9E53);
@@ -53,8 +53,8 @@ class CustomFooter extends HTMLElement {
                 }
                 .social-link {
-                    background-color: #1F2937;
-                    width: 2.5rem;
                     height: 2.5rem;
                     border-radius: 50%;
                     display: flex;
@@ -64,13 +64,13 @@ class CustomFooter extends HTMLElement {
                 }
                 .social-link:hover {
-                    background-color: #374151;
-                }
                 .footer-heading {
                     font-weight: 600;
-                    color: white;
-                    margin-bottom: 1.5rem;
                     font-size: 1.125rem;
                 }
@@ -85,8 +85,8 @@ class CustomFooter extends HTMLElement {
                 }
                 .footer-link:hover {
-                    color: white;
-                }
                 .footer-bottom {
                     max-width: 1280px;

             <style>
                 :host {
                     display: block;
+                    background-color: #f8f8f8;
+                    color: #555;
                     padding: 4rem 2rem;
+                    border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
                 .footer-container {
                     max-width: 1280px;
                     font-weight: 700;
                     font-size: 1.25rem;
                     margin-bottom: 1.5rem;
+                    color: #222;
+}
                 .footer-logo-icon {
                     background: linear-gradient(135deg, #FF7B25, #FF9E53);
                 }
                 .social-link {
+                    background-color: #e5e5e5;
+width: 2.5rem;
                     height: 2.5rem;
                     border-radius: 50%;
                     display: flex;
                 }
                 .social-link:hover {
+                    background-color: #d5d5d5;
+}
                 .footer-heading {
                     font-weight: 600;
+                    color: #222;
+margin-bottom: 1.5rem;
                     font-size: 1.125rem;
                 }
                 }
                 .footer-link:hover {
+                    color: #222;
+}
                 .footer-bottom {
                     max-width: 1280px;

components/navbar.js CHANGED Viewed

@@ -10,9 +10,9 @@ class CustomNavbar extends HTMLElement {
                     top: 0;
                     z-index: 50;
                     backdrop-filter: blur(10px);
-                    background-color: rgba(17, 24, 39, 0.8);
-                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-                }
                 nav {
                     max-width: 1280px;

                     top: 0;
                     z-index: 50;
                     backdrop-filter: blur(10px);
+                    background-color: rgba(255, 255, 255, 0.9);
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
                 nav {
                     max-width: 1280px;

index.html CHANGED Viewed

@@ -22,16 +22,16 @@
         }
     </script>
 </head>
-<body class="bg-gray-900 text-gray-100 min-h-screen">
-    <custom-navbar></custom-navbar>
     <main class="container mx-auto px-4 py-12">
         <!-- Hero Section -->
         <section class="flex flex-col lg:flex-row items-center gap-12 mb-24">
             <div class="lg:w-1/2">
                 <h1 class="text-5xl font-bold mb-6">Revolutionizing Kitchens with <span class="text-primary">AI Robotics</span></h1>
-                <p class="text-xl mb-8 text-gray-300">Appliant Robotics brings NVIDIA Jetson-powered robotic arms to your kitchen, automating cooking tasks with precision and intelligence.</p>
-                <div class="flex gap-4">
                     <a href="#contact" class="bg-primary hover:bg-orange-600 text-white font-semibold px-6 py-3 rounded-lg transition">Invest With Us</a>
                     <a href="#education" class="bg-gray-700 hover:bg-gray-600 text-white font-semibold px-6 py-3 rounded-lg transition">View Classes</a>
                 </div>
@@ -47,13 +47,13 @@
         <section class="mb-24">
             <h2 class="text-3xl font-bold mb-12 text-center">Our <span class="text-primary">Technology</span></h2>
             <div class="grid md:grid-cols-3 gap-8">
-                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
-                    <div class="bg-primary/10 p-3 rounded-lg inline-block mb-4">
                         <i data-feather="cpu" class="text-primary w-8 h-8"></i>
                     </div>
                     <h3 class="text-xl font-semibold mb-2">NVIDIA Jetson Powered</h3>
-                    <p class="text-gray-300">Utilizing the cutting-edge Orin Nano platform for real-time AI processing in compact kitchen spaces.</p>
-                </div>
                 <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
                     <div class="bg-primary/10 p-3 rounded-lg inline-block mb-4">
                         <i data-feather="activity" class="text-primary w-8 h-8"></i>
@@ -76,17 +76,16 @@
             <div class="flex flex-col lg:flex-row items-center gap-12">
                 <div class="lg:w-1/2 order-2 lg:order-1">
                     <h2 class="text-3xl font-bold mb-6">Robotics <span class="text-primary">Education</span></h2>
-                    <p class="text-xl mb-8 text-gray-300">We're passionate about inspiring the next generation of roboticists through our hands-on educational programs.</p>
-                    <div class="space-y-6">
                         <div class="flex items-start gap-4">
                             <div class="bg-primary/10 p-2 rounded-lg mt-1">
                                 <i data-feather="user" class="text-primary w-5 h-5"></i>
                             </div>
                             <div>
                                 <h3 class="font-semibold">Elementary School</h3>
-                                <p class="text-gray-400">Introduction to basic robotics concepts through fun, interactive projects.</p>
-                            </div>
                         </div>
                         <div class="flex items-start gap-4">
                             <div class="bg-primary/10 p-2 rounded-lg mt-1">
@@ -118,12 +117,11 @@
         <!-- Investors Section -->
         <section id="contact" class="mb-24">
-            <div class="bg-gray-800 rounded-2xl p-8 md:p-12">
-                <div class="max-w-2xl mx-auto text-center">
                     <h2 class="text-3xl font-bold mb-4">Join Our <span class="text-primary">Mission</span></h2>
-                    <p class="text-xl mb-8 text-gray-300">We're seeking visionary investors and talented engineers to help scale our technology and educational programs.</p>
-                    <form class="space-y-4">
                         <div class="grid md:grid-cols-2 gap-4">
                             <input type="text" placeholder="Name" class="bg-gray-700 px-4 py-3 rounded-lg focus:ring-2 focus:ring-primary outline-none">
                             <input type="email" placeholder="Email" class="bg-gray-700 px-4 py-3 rounded-lg focus:ring-2 focus:ring-primary outline-none">

         }
     </script>
 </head>
+<body class="bg-gray-50 text-gray-800 min-h-screen">
+<custom-navbar></custom-navbar>
     <main class="container mx-auto px-4 py-12">
         <!-- Hero Section -->
         <section class="flex flex-col lg:flex-row items-center gap-12 mb-24">
             <div class="lg:w-1/2">
                 <h1 class="text-5xl font-bold mb-6">Revolutionizing Kitchens with <span class="text-primary">AI Robotics</span></h1>
+                    <p class="text-xl mb-8 text-gray-600">Appliant Robotics brings NVIDIA Jetson-powered robotic arms to your kitchen, automating cooking tasks with precision and intelligence.</p>
+<div class="flex gap-4">
                     <a href="#contact" class="bg-primary hover:bg-orange-600 text-white font-semibold px-6 py-3 rounded-lg transition">Invest With Us</a>
                     <a href="#education" class="bg-gray-700 hover:bg-gray-600 text-white font-semibold px-6 py-3 rounded-lg transition">View Classes</a>
                 </div>
         <section class="mb-24">
             <h2 class="text-3xl font-bold mb-12 text-center">Our <span class="text-primary">Technology</span></h2>
             <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-white p-6 rounded-xl hover:bg-gray-100 transition shadow-md">
+<div class="bg-primary/10 p-3 rounded-lg inline-block mb-4">
                         <i data-feather="cpu" class="text-primary w-8 h-8"></i>
                     </div>
                     <h3 class="text-xl font-semibold mb-2">NVIDIA Jetson Powered</h3>
+                    <p class="text-gray-600">Utilizing the cutting-edge Orin Nano platform for real-time AI processing in compact kitchen spaces.</p>
+</div>
                 <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
                     <div class="bg-primary/10 p-3 rounded-lg inline-block mb-4">
                         <i data-feather="activity" class="text-primary w-8 h-8"></i>
             <div class="flex flex-col lg:flex-row items-center gap-12">
                 <div class="lg:w-1/2 order-2 lg:order-1">
                     <h2 class="text-3xl font-bold mb-6">Robotics <span class="text-primary">Education</span></h2>
+                    <p class="text-xl mb-8 text-gray-600">We're passionate about inspiring the next generation of roboticists through our hands-on educational programs.</p>
+<div class="space-y-6">
                         <div class="flex items-start gap-4">
                             <div class="bg-primary/10 p-2 rounded-lg mt-1">
                                 <i data-feather="user" class="text-primary w-5 h-5"></i>
                             </div>
                             <div>
                                 <h3 class="font-semibold">Elementary School</h3>
+                    <p class="text-gray-500">Introduction to basic robotics concepts through fun, interactive projects.</p>
+</div>
                         </div>
                         <div class="flex items-start gap-4">
                             <div class="bg-primary/10 p-2 rounded-lg mt-1">
         <!-- Investors Section -->
         <section id="contact" class="mb-24">
+            <div class="bg-white rounded-2xl p-8 md:p-12 shadow-md">
+<div class="max-w-2xl mx-auto text-center">
                     <h2 class="text-3xl font-bold mb-4">Join Our <span class="text-primary">Mission</span></h2>
+                    <p class="text-xl mb-8 text-gray-600">We're seeking visionary investors and talented engineers to help scale our technology and educational programs.</p>
+<form class="space-y-4">
                         <div class="grid md:grid-cols-2 gap-4">
                             <input type="text" placeholder="Name" class="bg-gray-700 px-4 py-3 rounded-lg focus:ring-2 focus:ring-primary outline-none">
                             <input type="email" placeholder="Email" class="bg-gray-700 px-4 py-3 rounded-lg focus:ring-2 focus:ring-primary outline-none">

style.css CHANGED Viewed

@@ -1,9 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
     font-family: 'Inter', sans-serif;
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
     font-family: 'Inter', sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;