Frontend is now working

Fixed the path issues and made a home page
CirrusLabs-NPD · Jul 5, 2024 · 37cd3fb · 37cd3fb
1 parent f9b3036
commit 37cd3fb
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 84 deletions.
diff --git a/apps/humanoid-ai-ui/index.html b/apps/humanoid-ai-ui/index.html
@@ -7,5 +7,6 @@
 </head>
 <body>
   <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
 </body>
-</html>
+</html>
diff --git a/apps/humanoid-ai-ui/src/app/app.css b/apps/humanoid-ai-ui/src/app/app.css
@@ -0,0 +1,9 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.App {
+  text-align: center;
+}
diff --git a/apps/humanoid-ai-ui/src/app/app.tsx b/apps/humanoid-ai-ui/src/app/app.tsx
@@ -1,50 +1,13 @@
-import NxWelcome from './nx-welcome';
+import React from 'react';
+import Home from '../components/Home';
+import './app.css';
 
-import { Route, Routes, Link } from 'react-router-dom';
-
-export function App() {
+function App() {
   return (
-    <div>
-      <NxWelcome title="humanoid-ai-ui" />
-
-      {/* START: routes */}
-      {/* These routes and navigation have been generated for you */}
-      {/* Feel free to move and update them to fit your needs */}
-      <br />
-      <hr />
-      <br />
-      <div role="navigation">
-        <ul>
-          <li>
-            <Link to="/">Home</Link>
-          </li>
-          <li>
-            <Link to="/page-2">Page 2</Link>
-          </li>
-        </ul>
-      </div>
-      <Routes>
-        <Route
-          path="/"
-          element={
-            <div>
-              This is the generated root route.{' '}
-              <Link to="/page-2">Click here for page 2.</Link>
-            </div>
-          }
-        />
-        <Route
-          path="/page-2"
-          element={
-            <div>
-              <Link to="/">Click here to go back to root page.</Link>
-            </div>
-          }
-        />
-      </Routes>
-      {/* END: routes */}
+    <div className="App">
+      <Home />
     </div>
   );
 }
 
-export default App;
+export default App;
diff --git a/apps/humanoid-ai-ui/src/components/Home.css b/apps/humanoid-ai-ui/src/components/Home.css
@@ -1,4 +1,4 @@
- .navbar {
+.navbar {
   display: flex;
   justify-content: space-between;
   padding: 10px 20px;
@@ -34,6 +34,7 @@
   align-items: center;
   padding: 50px 20px;
   background: linear-gradient(to right, #1c92d2, #f2fcfe);
+  position: relative;
 }
 
 .hero-content {
@@ -43,6 +44,7 @@
 
 .hero h1 {
   font-size: 2.5em;
+  margin: 0;
 }
 
 .highlight {
@@ -56,6 +58,7 @@
   border: none;
   font-size: 1em;
   cursor: pointer;
+  margin-top: 20px;
 }
 
 .hero-image img {
@@ -77,3 +80,48 @@
   font-size: 1em;
   cursor: pointer;
 }
+
+.contact-us-btn {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background-color: #ff4136;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  font-size: 1em;
+  cursor: pointer;
+  border-radius: 50px;
+}
+
+.info-section, .solutions-section {
+  padding: 50px 20px;
+  background: #f8f9fa;
+  text-align: center;
+}
+
+.info-section h2, .solutions-section h2 {
+  font-size: 2em;
+  margin-bottom: 20px;
+}
+
+.info-section p, .solutions-section p {
+  font-size: 1.2em;
+  max-width: 800px;
+  margin: 0 auto 20px auto;
+}
+
+.info-section .learn-more-btn, .solutions-section .learn-more-btn {
+  margin-bottom: 20px;
+}
+
+.info-media, .solutions-media {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.info-media img, .solutions-media img {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+}
diff --git a/apps/humanoid-ai-ui/src/components/Home.js b/apps/humanoid-ai-ui/src/components/Home.js
diff --git a/apps/humanoid-ai-ui/src/components/Home.jsx b/apps/humanoid-ai-ui/src/components/Home.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import './Home.css';
+
+function Home() {
+  return (
+    <div className="home">
+      <nav className="navbar">
+        <div className="navbar-brand">cirruslabs</div>
+        <ul className="navbar-nav">
+          <li><a href="/">Solutions</a></li>
+          <li><a href="/">Services</a></li>
+          <li><a href="/">Resources</a></li>
+          <li><a href="/">Company</a></li>
+        </ul>
+        <div className="navbar-contact">
+          <span>CALL US: (877)431-0767 | INDIA | CANADA | MIDDLE EAST | USA</span>
+        </div>
+      </nav>
+      <header className="hero">
+        <div className="hero-content">
+          <h1>Digital Transformation, <span className="highlight">Simplified</span></h1>
+          <p>Are you ready to step into a world of transformation? Let's embark on a journey that's as human as it is inspiring. Your journey is our journey.</p>
+          <button className="learn-more-btn">Learn more</button>
+        </div>
+        <div className="hero-image">
+          <img src="/src/components/chatwomen.png" alt="Hero" />  {/* Update with correct image path */}
+        </div>
+        <button className="contact-us-btn">Contact us</button>
+      </header>
+
+      <section className="info-section">
+        <h2>Who is CirrusLabs?</h2>
+        <p>Our tagline, "Digital Transformation Simplified," isn't just a phrase; it's our commitment to making complex processes easy to understand and implement. Your journey is our journey, and together, we'll navigate the digital landscape, breaking down barriers and delivering results.</p>
+        <button className="learn-more-btn">Learn more</button>
+        <div className="info-media">
+          <img src="/src/components/who.png" alt="Who is CirrusLabs?" />  {/* Update with correct image path */}
+        </div>
+      </section>
+
+      <section className="solutions-section">
+        <h2>Explore Our Solutions</h2>
+        <p>Our expertise spans advanced AI applications to sophisticated SAP integrations to efficient GRC platforms and more. To fully understand how our solutions can benefit your business, we encourage you to watch our video overview. Dive deeper into our solutions and discover ways to accelerate your success.</p>
+        <div className="solutions-media">
+          <img src="/src/components/expert.png" alt="Explore Our Solutions" />  {/* Update with correct image path */}
+        </div>
+      </section>
+
+      <div className="chat-button">
+        <button>Chat with Sonya</button>
+      </div>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/apps/humanoid-ai-ui/src/components/chatwomen.png b/apps/humanoid-ai-ui/src/components/chatwomen.png
diff --git a/apps/humanoid-ai-ui/src/components/expert.png b/apps/humanoid-ai-ui/src/components/expert.png
diff --git a/apps/humanoid-ai-ui/src/components/who.png b/apps/humanoid-ai-ui/src/components/who.png
diff --git a/apps/humanoid-ai-ui/src/main.tsx b/apps/humanoid-ai-ui/src/main.tsx
@@ -1,7 +1,6 @@
 import { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-
 import App from './app/app';
 
 const root = ReactDOM.createRoot(
@@ -13,4 +12,4 @@ root.render(
       <App />
     </BrowserRouter>
   </StrictMode>
-);
+);
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,5 +7,6 @@ @@
     </head>
     <body>
       <div id="root"></div>
+      <script type="module" src="/src/main.tsx"></script>
     </body>
-    </html>
+    </html>