Skip to content

Commit

Permalink
Merge pull request #14 from CL-Owais/FrontEnd
Browse files Browse the repository at this point in the history
Front end ui
  • Loading branch information
Aakash-bhardwaj-cirruslabs authored Jul 12, 2024
2 parents 73c323d + 37cd3fb commit ff9df51
Show file tree
Hide file tree
Showing 11 changed files with 236 additions and 60 deletions.
24 changes: 10 additions & 14 deletions apps/humanoid-ai-ui/index.html
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HumanoidAiUi</title>
<base href="/" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href="/src/styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cirrus Labs</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
9 changes: 9 additions & 0 deletions apps/humanoid-ai-ui/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.App {
text-align: center;
}
18 changes: 18 additions & 0 deletions apps/humanoid-ai-ui/src/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import './App.css';

function App() {
return (
<Router>
<div className="App">
<Switch>
<Route path="/" component={Home} />
</Switch>
</div>
</Router>
);
}

export default App;
9 changes: 9 additions & 0 deletions apps/humanoid-ai-ui/src/app/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.App {
text-align: center;
}
51 changes: 7 additions & 44 deletions apps/humanoid-ai-ui/src/app/app.tsx
Original file line number Diff line number Diff line change
@@ -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;
127 changes: 127 additions & 0 deletions apps/humanoid-ai-ui/src/components/Home.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
.navbar {
display: flex;
justify-content: space-between;
padding: 10px 20px;
background-color: #001f3f;
color: white;
}

.navbar-brand {
font-size: 1.5em;
}

.navbar-nav {
display: flex;
list-style: none;
}

.navbar-nav li {
margin: 0 10px;
}

.navbar-nav a {
color: white;
text-decoration: none;
}

.navbar-contact {
font-size: 0.9em;
}

.hero {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 20px;
background: linear-gradient(to right, #1c92d2, #f2fcfe);
position: relative;
}

.hero-content {
max-width: 600px;
text-align: left;
}

.hero h1 {
font-size: 2.5em;
margin: 0;
}

.highlight {
color: #f4c542;
}

.learn-more-btn {
background-color: #ff4136;
color: white;
padding: 10px 20px;
border: none;
font-size: 1em;
cursor: pointer;
margin-top: 20px;
}

.hero-image img {
max-width: 100%;
height: auto;
}

.chat-button {
position: fixed;
bottom: 20px;
right: 20px;
}

.chat-button button {
background-color: #ff4136;
color: white;
padding: 10px 20px;
border: none;
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;
}
55 changes: 55 additions & 0 deletions apps/humanoid-ai-ui/src/components/Home.jsx
Original file line number Diff line number Diff line change
@@ -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;
Binary file added apps/humanoid-ai-ui/src/components/chatwomen.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/humanoid-ai-ui/src/components/expert.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/humanoid-ai-ui/src/components/who.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions apps/humanoid-ai-ui/src/main.tsx
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -13,4 +12,4 @@ root.render(
<App />
</BrowserRouter>
</StrictMode>
);
);

0 comments on commit ff9df51

Please sign in to comment.