navbar plus hero section done

Akib-Ali · Feb 2, 2023 · 033dbf1 · 033dbf1
commit 033dbf1
Show file tree

Hide file tree

Showing 21 changed files with 2,507 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "company_assignment_figma_to_react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.4.9",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "framer-motion": "^9.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "vite": "^4.1.0"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,5 @@
+body{
+  margin: 2px;
+  padding: 0px;
+
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,18 @@
+
+import './App.css'
+import { HeroSection } from './compoanents/herosection'
+import { Navbar } from './compoanents/navbar'
+
+function App() {
+
+
+  return (
+    <div className="App">
+    <Navbar/>
+    <HeroSection/>
+
+    </div>
+  )
+}
+
+export default App
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/compoanents/herosection.jsx b/src/compoanents/herosection.jsx
@@ -0,0 +1,80 @@
+import girlpicture from "./images/girlpicture.png"
+import Vector from "./images/Vector.png"
+import Vectoriind from "./images/Vectoriind.png"
+import Rectangle1 from "./images/Rectangle 1.png"
+import Rectangle2 from "./images/Rectangle 2.png"
+import Rectangle3 from "./images/Rectangle 3.png"
+import Reactangle4 from "./images/Rectangle 4.png"
+import "./herosectionsection.css"
+export const HeroSection=()=>{
+
+ return(
+
+    <div style={{display:"flex", marginTop:"205px"}}>
+
+     {/* left div */}
+     <div border="1px solid red">
+
+     <p style={{ marginLeft:"117px", color:"#F17216", height:'18px', width:"319px" , fontSize:"16px", fontWeight:"400"}}>
+     Best Business  Platform-World Record 2021</p>
+
+     <h1 style={{marginLeft:"115px" , marginTop:"26px" , width:"646px", height:"160px", fontWeight:"700", fontSize:"58px", lineHeight:"80px", letterSpacing:"2%" , color:"#282C4B"}}>Reach Your Business Goals in Record Time</h1>
+
+     <p style={{marginLeft:"115px",marginTop:"25px",  width:"561px", height:"108px", fontWeight:"400", fontSize:"20px", lineHeight:"36px", color:"#747582"}}>
+     Support small business and join the nationwide movement to encourage commercial support for the millions of miniority owned business helping world economy.
+    </p>
+
+    <div style={{ display:"flex", gap:"12px", border:"2px solid blue", height:"150px", width:"500px", marginLeft:"115px"}}>
+    <button className="getstartedbtn">Get Started</button>
+    <p style={{width:"254px" , height:"21px", fontWeight:"500" , fontSize:"18px", letterSpacing:"2%"}}>Book a 30 Min Quick Meeting</p>
+
+
+
+    </div>
+
+     </div>
+
+
+
+
+
+
+
+     {/* right div */}
+
+
+
+    <div style={{height:"576px", width:"416px" , border:"1px solid red" , marginRight:"135px"}}>
+    <div style={{marginTop:"40px" , position:"relative"}}> <img src={Vector}/></div>
+    <div style={{marginTop:"-150px", position:"relative"}}> <img src={girlpicture}/></div>
+    <div style={{marginTop:"-200px", marginLeft:"280px", position:"relative"}}><img src={Vectoriind }/></div>
+
+    <div className="rectangle_card" >
+
+    <div >
+     <h1 style={{color:"black", position :"relative", paddingLeft:"20px" , width:"42px", height:"34px", fontSize:"30px"}}>4.9</h1>
+    </div>
+
+    <div style={{display:"flex" , gap:"1x" ,position:"relative"}}>
+        <img src={Rectangle1} height="45px" width="45px"/>
+        <img src={Rectangle2 } height="45px" width="45px"/>
+        <img src ={Rectangle3} height="45px" width="45px"/>
+        <img src={Reactangle4} height="45px" width="45px"/>
+
+        <div style={{backgroundColor:"orange" ,padding:"2px", borderRadius:"50%", height:"18px", width:"18px", color:"white"}}>5k</div>
+    </div>
+
+    </div>
+
+
+
+    </div>
+
+
+
+    </div>
+ )
+
+
+
+}
diff --git a/src/compoanents/herosectionsection.css b/src/compoanents/herosectionsection.css
@@ -0,0 +1,23 @@
+.rectangle_card{
+    border:1px solid red;
+    height:136px;
+    width:229px ;
+   margin-left:270px;
+   box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
+   0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
+   position:absolute;
+   background-color: white;
+
+}
+
+.getstartedbtn{
+    background: linear-gradient(97.32deg, #FF698D -3.47%, #FB3F6C 108.43%);
+    box-shadow: 0px 30px 50px rgba(168, 22, 75, 0.15);
+
+     color:white;
+     border-color:#FF698D;
+      width:210px;
+       height:68px; 
+      border-radius:192px;
+       /* position:absolute; */
+}
diff --git a/src/compoanents/images/Rectangle 1.png b/src/compoanents/images/Rectangle 1.png
diff --git a/src/compoanents/images/Rectangle 2.png b/src/compoanents/images/Rectangle 2.png
diff --git a/src/compoanents/images/Rectangle 3.png b/src/compoanents/images/Rectangle 3.png
diff --git a/src/compoanents/images/Rectangle 4.png b/src/compoanents/images/Rectangle 4.png
diff --git a/src/compoanents/images/Vector.png b/src/compoanents/images/Vector.png
diff --git a/src/compoanents/images/Vectoriind.png b/src/compoanents/images/Vectoriind.png
diff --git a/src/compoanents/images/girlpicture.png b/src/compoanents/images/girlpicture.png
diff --git a/src/compoanents/navbar.jsx b/src/compoanents/navbar.jsx
@@ -0,0 +1,26 @@
+export const Navbar=()=>{
+
+
+    return(
+        <div style={{display:"flex", border:"1px solid red", width:"100%"}}>
+
+         <div style={{marginLeft:"115px", marginTop:"49px"}}>
+             <h1 style={{fontSize:"26px", fontWeight:"700", fontStyle:"italic", color:"#FB3F6C" , width:"254px", height:"36px"}}>Webure Technologies</h1>
+         </div>
+
+         <div style={{display:"flex" , marginTop:"59px"}}>
+
+          <ul style={{display:"flex", gap:"41px" , listStyle:"none"}}>
+            <li>About Us</li>
+            <li>Services</li>
+            <li>Carrers</li>
+            <li>ROIStories</li>
+            <li>Blog</li>
+            <li>Contact Us</li>
+           </ul>
+           <button style={{marginLeft:"41px", width:"143px", heigth:"55px", border:"0.5px solid grey", borderRadius:"30px", color:"#282C4B", fontWeight:"700", fontSize:"14px"}}>Let's Talk</button>
+         </div>
+
+        </div>
+    )
+}
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,4 @@
+#root{
+  margin-top: 0px;
+  padding-top: 0px;
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})