done

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bulma": "^0.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,25 +1,31 @@
-import logo from './logo.svg';
-import './App.css';
+
+import  "./App.css";
+import Navbar from "./components/Navbar.js";
+import FormField from "./components/FormField";
+import SignupForm from "./components/SignupForm.js";
+import Message from "./components/Message.js";
+import CoolButton from "./components/CoolButton.js";
+
+
+import  "bulma/css/bulma.css";
+
+
+
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+
+return  <div  className="App">
+  <SignupForm />
+  <Message isInfo title="Hello World">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        <strong>Pellentesque risus mi</strong>.
+  </Message>
+  <CoolButton  isSuccess  >Button 1</CoolButton>
+  <CoolButton> Button 2 </CoolButton>
+
+</div>;
+
 }
 
-export default App;
+export  default App;
+

src/components/CoolButton.js

@@ -0,0 +1,19 @@
+
+
+import React from 'react';
+
+function CoolButton({ isSuccess, children }) {
+  // Constructing className based on props
+  let className = 'button';
+  if (isSuccess) {
+    className += ' is-success';
+  }
+
+  return (
+    <button className={className}>
+      {children}
+    </button>
+  );
+}
+
+export default CoolButton;

src/components/FormField.css

@@ -0,0 +1,20 @@
+.field {
+    margin-bottom: 1rem;
+  }
+
+  .label {
+    color: #333;
+    font-weight: bold;
+  }
+
+  .input {
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 100%;
+  }
+
+  .control {
+    margin-top: 0.5rem;
+  }
+

src/components/FormField.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import './FormField.css';
+
+const FormField = ({ label, type, placeholder }) => {
+  return (
+    <div className="field">
+      <label className="label">{label}</label>
+      <div className="control">
+        <input className="input" type={type} placeholder={placeholder} />
+      </div>
+    </div>
+  );
+};
+
+export default FormField;

src/components/Message.js

@@ -0,0 +1,20 @@
+
+
+import React from 'react';
+
+function Message({ isInfo, title, children }) {
+  const classes = isInfo ? 'message is-info' : 'message';
+
+  return (
+    <div className={classes}>
+      <div className="message-header">
+        <p>{title}</p>
+      </div>
+      <div className="message-body">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Message;

src/components/Navbar.css

@@ -0,0 +1,41 @@
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #333;
+    padding: 10px 20px;
+  }
+
+  .navbar a {
+    text-decoration: none;
+    color: rgb(15, 49, 108);
+    margin-right: 20px;
+    margin-top: 10px;
+  }
+
+  .btn {
+    display: flex; /* Add */
+    align-items: center;
+    float: right;
+    margin-top:10px; /* Add */
+  }
+
+  .home-btn{
+    margin-bottom: 10px;
+    align-items: center;
+  }
+
+  .log-btn,
+  .sign-btn {
+    color: white;
+    background-color: #85144b;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-left: 20px;
+    margin-right:20px;
+
+
+  }
+

src/components/Navbar.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import "./Navbar.css"
+
+const Navbar = () => {
+  return (
+    <div>
+      <nav class="navbar" role="navigation" aria-label="main navigation" >
+  <div class="navbar-brand">
+    <a class="navbar-item" href="https://bulma.io">
+      <img src="https://bulma.io/images/bulma-logo.png" 
+      alt="Bulma: Free, open source, and modern CSS 
+      framework based on Flexbox" width="112" height="28" />
+    </a>
+
+
+      <a role="button" class="home-btn" href="#home">Home</a>
+      <div class="btn"> 
+        <button class="log-btn">Login</button>
+        <button class="sign-btn">Signup</button>
+      </div>
+
+
+  </div>
+</nav>
+
+
+    </div>
+  )
+}
+
+export default Navbar;

src/components/SignupForm.css

@@ -0,0 +1,20 @@
+.btn-submit{
+    background-color: rgb(104, 104, 237);
+    width:80px;
+    height:40px;
+    border-radius: 6px;
+    font-weight: 600;
+
+}
+
+.btn-submit:hover{
+    cursor:pointer;
+    background-color: rgb(11, 11, 236);
+    height:42px;
+    width: 80px;
+    border: 3px solid rgb(231, 146, 0);
+    border-radius: 5px;
+
+
+
+}

src/components/SignupForm.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Navbar from './Navbar';
+import FormField from './FormField';
+import "./SignupForm.css"
+
+const SignupForm = () => {
+  return (
+    <div>
+      <Navbar />
+      <form>
+        <FormField label="Name" type="text" placeholder="e.g Alex Smith" />
+        <FormField label="Email" type="email" placeholder="e.g. alexsmith@gmail.com" />
+        <FormField label="Password" type="password" placeholder="Enter your password" />
+        <button type="submit" class="btn-submit">Submit</button>
+      </form>
+    </div>
+  );
+};
+
+export default SignupForm;