hero square done

src/App.css

@@ -0,0 +1,7 @@
+main {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/App.jsx

@@ -1,9 +1,19 @@
-import React from 'react'
+import React from "react";
+import Layout from "./layout/Layout";
+import { Route, Routes } from "react-router-dom";
+import Home from "./components/Home";
+import "./App.css";
 
 const App = () => {
   return (
-    <div>App</div>
+    <main>
-  )
+      {/* <Layout> */}
-}
+      <Routes>
+        <Route path="/" element={<Home />} />
+      </Routes>
+      {/* </Layout> */}
+    </main>
+  );
+};
 
-export default App
+export default App;

src/components/Home.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Hero from "./subComponents/Hero";
+import "../css/Home.css";
+
+const Home = () => {
+  return (
+    <div className="gridContainer">
+      <Hero />
+    </div>
+  );
+};
+
+export default Home;

src/components/subComponents/Hero.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import "../../css/Hero.css";
+
+const Hero = () => {
+  return (
+    <div className="hero">
+      <p>
+        <span>
+          Hi, I'm Yousif. <br />
+        </span>{" "}
+        I'm a Full-Stack Developer from Germany.
+      </p>
+    </div>
+  );
+};
+
+export default Hero;

src/css/Hero.css

@@ -0,0 +1,17 @@
+.hero {
+  grid-area: 1 / 1 / 5 / 5;
+  background-color: #28272a;
+  padding: 2rem;
+  border-radius: 1rem;
+  border: 0.5px solid rgb(73, 73, 73);
+}
+
+.hero p span {
+  color: white;
+  font-weight: bold;
+}
+
+.hero p {
+  font-size: 2rem;
+  color: rgb(151, 151, 151);
+}

src/css/Home.css

@@ -0,0 +1,8 @@
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-template-rows: repeat(9, 1fr);
+  gap: 10px;
+  width: 50%;
+}
+

src/css/fonts.css

@@ -0,0 +1,146 @@
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Thin.otf") format("opentype");
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-ThinItalic.otf") format("opentype");
+    font-weight: 100;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Light.otf") format("opentype");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-LightItalic.otf") format("opentype");
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Regular.otf") format("opentype");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-RegularItalic.otf") format("opentype");
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Medium.otf") format("opentype");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-MediumItalic.otf") format("opentype");
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Semibold.otf") format("opentype");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-SemiboldItalic.otf") format("opentype");
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Bold.otf") format("opentype");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-BoldItalic.otf") format("opentype");
+    font-weight: 700;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Black.otf") format("opentype");
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-BlackItalic.otf") format("opentype");
+    font-weight: 900;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Light.otf") format("opentype");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Regular.otf") format("opentype");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Medium.otf") format("opentype");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Semibold.otf") format("opentype");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Bold.otf") format("opentype");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Heavy.otf") format("opentype");
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "SF Pro Display Rounded";
+    src: url("../assets/fonts/San-Francisco-Pro-Fonts/SF-Pro-Rounded-Black.otf") format("opentype");
+    font-weight: 900;
+    font-style: normal;
+}

src/index.css

@@ -0,0 +1,10 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "SF Pro Display", sans-serif;
+  background-color: black;
+}

src/layout/Footer.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <div>Footer</div>
+  )
+}
+
+export default Footer

src/layout/Header.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Header = () => {
+  return (
+    <div>Header</div>
+  )
+}
+
+export default Header

src/layout/Layout.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Header from "./Header";
+import Footer from "./Footer";
+
+const Layout = ({ children }) => {
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;

src/main.jsx

@@ -1,10 +1,11 @@
-import { StrictMode } from 'react'
+import { createRoot } from "react-dom/client";
-import { createRoot } from 'react-dom/client'
+import "./index.css";
-import './index.css'
+import App from "./App.jsx";
-import App from './App.jsx'
+import { BrowserRouter } from "react-router-dom";
+import "./css/fonts.css";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
-  <StrictMode>
+  <BrowserRouter>
     <App />
-  </StrictMode>,
+  </BrowserRouter>
-)
+);