Skip to content

Commit 5ee1dc4

Browse files
MohanadOOMohanadOO
committed
Initial Commit
1 parent c9f06e6 commit 5ee1dc4

49 files changed

Lines changed: 537 additions & 135 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package-lock.json‎

Lines changed: 58 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^13.5.0",
99
"react": "^17.0.2",
1010
"react-dom": "^17.0.2",
11+
"react-router-dom": "^6.2.2",
1112
"react-scripts": "5.0.0",
1213
"web-vitals": "^2.1.2"
1314
},

‎postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎public/index.html‎

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,34 +10,10 @@
1010
content="Web site created using create-react-app"
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
1713
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React App</title>
14+
<title>Monogram Console Shop</title>
2815
</head>
2916
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
3117
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4218
</body>
4319
</html>

‎src/App.css‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/App.js‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
1-
import logo from './logo.svg';
2-
import './App.css';
1+
import Navbar from './Component/Navbar.jsx'
2+
import Header from './Component/Header'
3+
import MainContent from './Component/MainContent'
4+
import Footer from './Component/Footer'
35

46
function App() {
57
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
8+
<div>
9+
<Navbar />
10+
<Header />
11+
<MainContent />
12+
<Footer />
2113
</div>
22-
);
14+
)
2315
}
2416

25-
export default App;
17+
export default App

‎src/App.test.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/Component/Console.jsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useState } from 'react'
2+
3+
export default function Console(props) {
4+
const [visible, setVisible] = useState(true)
5+
return (
6+
<div
7+
onMouseEnter={() => setVisible(false)}
8+
onMouseLeave={() => setVisible(true)}
9+
className='grid cursor-pointer mb-10 relative '
10+
>
11+
<div>
12+
{visible ? (
13+
<img src={props.enter} alt='#' className='mx-auto' />
14+
) : (
15+
<img src={props.leave} alt='#' className='mx-auto' />
16+
)}
17+
</div>
18+
<p className='uppercase font-bold text-sm bg-color14 text-white py-1 px-6 absolute right-0 mt-5'>
19+
In Stock
20+
</p>
21+
22+
<div className='flex mt-3'>
23+
<div>
24+
<h2 className='font-semibold text-xl text-color3 tracking-widest uppercase'>
25+
{props.item}
26+
</h2>
27+
<p className='font-light text-xs tracking-wider mt-1'>
28+
{props.description}
29+
</p>
30+
</div>
31+
{visible && (
32+
<div>
33+
{props.oldPrice ? (
34+
<p className='absolute right-0 mt-1 text-color12 font-normal'>
35+
${props.newPrice}
36+
<span className='line-through text-color14 ml-2'>
37+
${props.oldPrice}
38+
</span>
39+
</p>
40+
) : (
41+
<p className='text-color14 absolute right-0 mt-1 font-light'>
42+
${props.newPrice}
43+
</p>
44+
)}
45+
</div>
46+
)}
47+
{!visible && (
48+
<button className='absolute right-0 text-sm bg-color14 text-white mt-2 py-2 px-6 rounded-full font-bold'>
49+
Shop Now
50+
</button>
51+
)}
52+
</div>
53+
</div>
54+
)
55+
}

‎src/Component/Footer.jsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react'
2+
3+
export default function Footer() {
4+
return (
5+
<footer className='bg-color14 pt-12 pb-20 text-color8 font-thin flex flex-col px-10 md:flex-row md:px-8 justify-evenly gap-[5rem] overflow-hidden'>
6+
<div className='flex flex-col gap-2 text-sm w-24 leading-5'>
7+
<p className='mb-3 capitalize font-bold'>Monogram</p>
8+
<p>305 King St. W. Suite 502 Kitchener, ON Canada</p>
9+
</div>
10+
11+
<div className='flex flex-col gap-2 text-sm'>
12+
<p className='mb-3 capitalize font-bold'>Quick Links</p>
13+
<a href='#' className='hover:text-color10 hover:underline '>
14+
Home
15+
</a>
16+
<a href='#' className='hover:text-color10 hover:underline '>
17+
How it Works
18+
</a>
19+
<a href='#' className='hover:text-color10 hover:underline '>
20+
Shop
21+
</a>
22+
<a href='#' className='hover:text-color10 hover:underline '>
23+
Download
24+
</a>
25+
</div>
26+
27+
<div className='flex flex-col gap-2 text-sm'>
28+
<p className='mb-3 capitalize font-bold'>Help</p>
29+
<a href='#' className='hover:text-color10 hover:underline '>
30+
FAQs
31+
</a>
32+
<a href='#' className='hover:text-color10 hover:underline '>
33+
Support Center
34+
</a>
35+
<a href='#' className='hover:text-color10 hover:underline '>
36+
Shipping and Sales
37+
</a>
38+
<a href='#' className='hover:text-color10 hover:underline '>
39+
Palette Support
40+
</a>
41+
</div>
42+
43+
<div className='flex flex-col gap-2 text-sm'>
44+
<p className='mb-3 capitalize font-bold'>Information</p>
45+
<a href='#' className='hover:text-color10 hover:underline '>
46+
About Us
47+
</a>
48+
<a href='#' className='hover:text-color10 hover:underline '>
49+
Work with us
50+
</a>
51+
<a href='#' className='hover:text-color10 hover:underline '>
52+
Privacy Policy
53+
</a>
54+
<a href='#' className='hover:text-color10 hover:underline '>
55+
Terms of Use
56+
</a>
57+
<a href='#' className='hover:text-color10 hover:underline '>
58+
Terms of sale
59+
</a>
60+
<a href='#' className='hover:text-color10 hover:underline '>
61+
Press Kit
62+
</a>
63+
</div>
64+
65+
<div className='flex flex-col gap-2 text-sm w-[22rem] leading-5'>
66+
<p className='capitalize font-bold'>SUBSCRIBE TO MONOGRAM</p>
67+
<p>
68+
Master productivity with Creative Console and get all the latest
69+
Monogram news.
70+
</p>
71+
<div className='flex gap-5 mt-4'>
72+
<input
73+
className='bg-color14 border-2 border-color8 p-1 px-2'
74+
placeholder='Email Address'
75+
type='email'
76+
></input>
77+
<button className='bg-color8 text-black p-1 px-5 rounded-md'>
78+
Submit
79+
</button>
80+
</div>
81+
<button></button>
82+
<p>© Monogram 2022</p>
83+
</div>
84+
</footer>
85+
)
86+
}

‎src/Component/Header.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import { backgroundLarge } from './images'
3+
4+
function Header() {
5+
return (
6+
<header className='relative'>
7+
<div>
8+
<img className='w-screen' src={backgroundLarge} alt='#' />
9+
</div>
10+
<div className='absolute md:top-[48%] md:left-[60%] top-[40%] left-[60%] mx-7'>
11+
<h1 className='md:text-4xl text-xl text-color14 font-bold tracking-widest'>
12+
A CONSOLE FOR EVERY WORKFLOW
13+
</h1>
14+
<br />
15+
<p className='text-color14 font-normal md:text-lg text-sm '>
16+
Discover the perfect console for yours.
17+
</p>
18+
</div>
19+
</header>
20+
)
21+
}
22+
23+
export default Header

0 commit comments

Comments
 (0)