-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from CL-Owais/FrontEnd
Front end ui
- Loading branch information
Showing
11 changed files
with
236 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters