Skip to content

Commit

Permalink
format all file
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akib-Ali
Akib-Ali committed Feb 3, 2023
1 parent 62af270 commit f2f3cce
Show file tree
Hide file tree
Showing 13 changed files with 236 additions and 234 deletions.
20 changes: 10 additions & 10 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,19 @@ import { WhatWedoSection } from './compoanents/whatwedosection'
import { WhyChooseUsSection } from './compoanents/whychooseUsSection'

function App() {


return (
<div className="App">
<Navbar/>
<HeroSection/>
<CompanyLogoSection/>
<Services/>
<WhyChooseUsSection/>
<OurSolution/>
<WhatWedoSection/>
<OurServices/>
<Navbar />
<HeroSection />
<CompanyLogoSection />
<Services />
<WhyChooseUsSection />
<OurSolution />
<WhatWedoSection />
<OurServices />

</div>
)
}
Expand Down
16 changes: 8 additions & 8 deletions src/compoanents/company_logo_section.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@ import perduntallogo from "./images/periduntallogo.png"
import slacklogo from "./images/slacklogo.png"
import slacktext from "./images/slacktext.png"
import zooverlogo from "./images/zooverlogo.png"
export const CompanyLogoSection=()=>{
export const CompanyLogoSection = () => {

const conpanylogo =["https://easydrawings.net/wp-content/uploads/2022/09/How-to-draw-Microsoft-Logo-step-by-step-for-beginners.png", perduntallogo, slacklogo, slacktext, zooverlogo]
const conpanylogo = ["https://easydrawings.net/wp-content/uploads/2022/09/How-to-draw-Microsoft-Logo-step-by-step-for-beginners.png", perduntallogo, slacklogo, slacktext, zooverlogo]


return(
<div style={{display:"flex",height:"140px", paddingLeft:"168px" , paddingTop:"52px" ,justifyContent:"space-around"}}>
{conpanylogo.map((elem,index)=>{
return (
<div style={{ display: "flex", height: "140px", paddingLeft: "168px", paddingTop: "52px", justifyContent: "space-around" }}>

{conpanylogo.map((elem, index) => {
return (
<div>
<img src={elem} height="50px width=50px"/>
</div>
<img src={elem} height="50px width=50px" />
</div>
)
})}
</div>
Expand Down
86 changes: 43 additions & 43 deletions src/compoanents/herosection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,74 +6,74 @@ 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=()=>{
export const HeroSection = () => {

return(
return (

<div style={{display:"flex", marginTop:"205px"}}>
<div style={{ display: "flex", marginTop: "205px" }}>

{/* left div */}
<div border="1px solid red">
{/* 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: "117px", color: "#F17216", height: '18px', width: "319px", fontSize: "16px", fontWeight: "400" }}>
Best Business Platform-World Record 2021</p>

<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>
<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>

<div style={{ display:"flex", gap:"12px", 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>

<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", 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>


</div>

</div>




{/* right div */}



<div style={{height:"576px", width:"416px" , border:"none", 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" >
{/* right div */}

<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 style={{ height: "576px", width: "416px", border: "none", 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>


<div className="rectangle_card" >

</div>
<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>
)
<div style={{ backgroundColor: "orange", padding: "2px", borderRadius: "50%", height: "18px", width: "18px", color: "white" }}>5k</div>
</div>

</div>



</div>



</div>
)



Expand Down
30 changes: 15 additions & 15 deletions src/compoanents/herosectionsection.css
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
.rectangle_card{
.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;
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{
.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; */
color: white;
border-color: #FF698D;
width: 210px;
height: 68px;
border-radius: 192px;
/* position:absolute; */
}
36 changes: 18 additions & 18 deletions src/compoanents/navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
export const Navbar=()=>{
export const Navbar = () => {


return(
<div style={{display:"flex", width:"100%"}}>
return (
<div style={{ display: "flex", 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={{ 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"}}>
<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>

<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>
)
}
51 changes: 26 additions & 25 deletions src/compoanents/ourServices.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import designthinking1 from "./images/designthinking1.png"
import setting1 from "./images/setting1.png"
import analysys from "./images/analysys.png"
import analysys from "./images/analysys.png"
import applicationdevelopment from "./images/applicationdevelopment.png"
import backkending from "./images/backkendimg.png"
import backofficesupport from "./images/backofficesupport.png"
Expand All @@ -10,44 +10,45 @@ import cloudserviceslogo from "./images/cloudserviceslogo.png"



export const OurServices=()=>{
export const OurServices = () => {


const ourservices =[
const ourservices = [

{title:"Design" , logo:designthinking1},
{title:"Front End Development" , logo: setting1},
{title:"Backend End Development" , logo: backkending},
{title:"Application Development" , logo: applicationdevelopment},
{title:"Analytics" , logo: analysys},
{title:"Q-A And Testing" , logo: qatesting},
{title:"Back office Support" , logo: backofficesupport},
{ title:"Analytics" , logo: analysys}
{ title: "Design", logo: designthinking1 },
{ title: "Front End Development", logo: setting1 },
{ title: "Backend End Development", logo: backkending },
{ title: "Application Development", logo: applicationdevelopment },
{ title: "Analytics", logo: analysys },
{ title: "Q-A And Testing", logo: qatesting },
{ title: "Back office Support", logo: backofficesupport },
{ title: "Analytics", logo: analysys }
]



return(
return (
<div className="ourservice_container">

{ourservices.map((elem,index)=>{
{ourservices.map((elem, index) => {

return (
<div className="ourservice_card" key={index}>
return (
<div className="ourservice_card" key={index}>

<div style={{width:"150px", margin:"auto", paddingTop:"25px"}}>
<img src={elem.logo} height="101px width=101px"/>
</div>
<div style={{ width: "150px", margin: "auto", paddingTop: "25px" }}>
<img src={elem.logo} height="101px width=101px" />
</div>

<h2 style={{textAlign:"center" , width:"179px", height:"78px", color:"#040404", fontWeight: "600", lineHeight: "39px"
<h2 style={{
textAlign: "center", width: "179px", height: "78px", color: "#040404", fontWeight: "600", lineHeight: "39px"

}}>{elem.title}</h2>

}}>{elem.title}</h2>


</div>
)
})}

</div>
)
})}



</div>
Expand Down
21 changes: 10 additions & 11 deletions src/compoanents/ourservices.css
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
.ourservice_container{
.ourservice_container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
/* border:2px solid grey; */
justify-content: space-around;
padding-left: 25px;
gap:20px;
margin-top:10px

gap: 20px;
margin-top: 10px
}



.ourservice_card{
height:272.2px;
width: 272.2px;
background: #FFFFFF;
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.12);
border-radius: 8.43641px;
.ourservice_card {
height: 272.2px;
width: 272.2px;
background: #FFFFFF;
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.12);
border-radius: 8.43641px;



}
8 changes: 4 additions & 4 deletions src/compoanents/oursolution.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import Besniklady from "./images/Besniklady.png"
export const OurSolution=()=>{
export const OurSolution = () => {


return(
return (

<div style={{display:"flex" , height:"630px", border:"none" , marginTop:"19px"}}>
<img src={Besniklady} height="90% width=90%"/>
<div style={{ display: "flex", height: "630px", border: "none", marginTop: "19px" }}>
<img src={Besniklady} height="90% width=90%" />
</div>
)

Expand Down
Loading

1 comment on commit f2f3cce

@vercel
Copy link

@vercel vercel bot commented on f2f3cce Feb 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

comany-task-convert-figma-to-react – ./

comany-task-convert-figma-to-react-git-master-akib7599-gmailcom.vercel.app
comany-task-convert-figma-to-react.vercel.app
comany-task-convert-figma-to-react-akib7599-gmailcom.vercel.app

Please sign in to comment.