replicating ui, first try hopefully

src/App.css

@@ -1,10 +1,18 @@
 #root {
-  max-width: 1280px;
+  width: 100vw;
+  height: 100vh;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
 }
 
+.mainContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 100px;
+}
+
 .logo {
   height: 6em;
   padding: 1.5em;

src/App.tsx

@@ -1,34 +1,30 @@
 import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
+
 import './App.css'
+import { TopBar } from './Components/TopBar/TopBar'
+import { GWJBar } from './Components/IWJBar/GWJBar'
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState<number>(0)
+  const [message, setMessage] = useState<string>("")
 
   return (
-    <>
+    <div className='mainContainer'>
+        <TopBar></TopBar>
       <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <GWJBar></GWJBar>  
+        </div>
+        <div className="card">
+          <button onClick={() => setMessage("Pressed button")}>
+            Escanear
+          </button>
+          <p>
+            {message}
+          </p>
+        </div>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    </div>
   )
 }
 

src/Components/AssetConfig/AssetImg.tsx

@@ -0,0 +1,40 @@
+ import coin from './../../assets/Coin.png';
+ import gdg from './../../assets/gdg.jpg';
+ import firebase from './../../assets/firebase.png';
+ import angular from './../../assets/angular.png';
+ import tensorflow from './../../assets/tensorflow.png';
+
+export type ImageKeyType = keyof typeof images;
+export const images = {
+  coin,              
+  gdg,        
+  firebase,
+  angular,     
+  tensorflow,
+};
+export interface TripIconProps {
+  name: ImageKeyType;
+  isUrl?: boolean;
+  size?: number;
+  isWhite?: boolean;
+  onPress?: () => void;
+}
+
+function AssetImg({
+  name,
+  size = 24,
+  isWhite,
+  ...props
+}: TripIconProps) {
+  return (
+    <img
+      {...props}
+      //resizeMode={resizeMode}
+      src={images[name]}
+      style={{width: size, height: size, filter: isWhite ? 'grayscale(100%)' : ''}}
+      //style={[{width: size, height: size, tintColor: color}, style]}
+    />
+  );
+}
+
+export default AssetImg;

src/Components/IWJBar/GWJ.css

@@ -0,0 +1,15 @@
+.gwjBar {
+    height: 80%;
+    width: fit-content;
+    padding-left: 25px;
+    padding-right: 25px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-radius: 50px;
+    margin-right: 10px;
+    background-color: rgba(83, 150, 221, 1);
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+
+}

src/Components/IWJBar/GWJBar.tsx

@@ -0,0 +1,12 @@
+import './GWJ.css'
+import GLetter from './../../assets/Gletter.svg'
+import WLetter from './../../assets/Wletter.svg'
+import JLetter from './../../assets/Jletter.svg'
+
+export const GWJBar = () => {
+    return <div className="gwjBar"> 
+        <img src={WLetter}/>
+        <img src={GLetter}/>
+        <img src={JLetter}/>
+    </div>
+}

src/Components/IconsBar/IconsBar.css

@@ -0,0 +1,10 @@
+.iconsBar {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 80%;
+    width: 250px;
+    border-radius: 50px;
+    margin-right: 10px;
+    background-color: rgba(83, 150, 221, 1)
+}

src/Components/IconsBar/IconsBar.tsx

@@ -0,0 +1,10 @@
+import AssetImg from '../AssetConfig/AssetImg'
+import './IconsBar.css'
+
+export const IconsBar = () => {
+    return <div className="iconsBar"> 
+        <AssetImg isWhite= { true } name = "tensorflow" size = {40}/>
+        <AssetImg isWhite= { true } name = "angular" size = {40}/>
+        <AssetImg isWhite= { true } name = "firebase" size = {40}/>
+    </div>
+}

src/Components/PointsBar/PointsBar.css

@@ -0,0 +1,13 @@
+.pointsBar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    height: 80%;
+    width: 210px;
+    border-radius: 50px;
+    background-color: rgba(83, 150, 221, 1);
+
+    margin-left: 10px;
+    padding-right: 20px;
+}

src/Components/PointsBar/PointsBar.tsx

@@ -0,0 +1,9 @@
+import AssetImg from '../AssetConfig/AssetImg'
+import './PointsBar.css'
+
+export const PointsBar = () => {
+    return <div className="pointsBar"> 
+        <AssetImg isWhite= { false } name = "coin" size = {40}/>
+        <a style={{ fontSize: '25px', color: 'white' }}> 0 </a>
+    </div>
+}

src/Components/TopBar/TopBar.css

@@ -0,0 +1,24 @@
+
+.topBar {
+    width: 100%;
+    height: 75px;
+    border-radius: 37.5px;
+    background-color: white;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
+
+section {
+  --main-bg-color: brown;
+}
+
+
+.circle {
+    position: relative;
+    top: -60px;
+    background-color: white;
+    width: 120px;
+    height: 120px;
+    border-radius: 100%;
+}

src/Components/TopBar/TopBar.tsx

@@ -0,0 +1,20 @@
+import AssetImg from '../AssetConfig/AssetImg'
+import { IconsBar } from '../IconsBar/IconsBar'
+import { PointsBar } from '../PointsBar/PointsBar'
+
+import './TopBar.css'
+
+export const TopBar = () => {
+    return <div style={{ alignContent: 'center', width: '100%' }}>
+        <div className="topBar">
+            <PointsBar></PointsBar>
+            <IconsBar></IconsBar>
+        </div>
+
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <div className='circle' style={{ alignContent: 'center' }}>
+                <AssetImg size={85} name='gdg'></AssetImg>
+            </div>
+        </div>
+    </div>
+}

src/index.css

@@ -5,7 +5,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: rgba(72, 76, 201, 1);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -42,7 +42,7 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: rgba(83, 150, 221, 1);
   cursor: pointer;
   transition: border-color 0.25s;
 }