Skip to content

Commit bf6d420

Browse files
joblessgodjoblessgod
committed
added slides
home pages slides auto play hover pause
1 parent 2a9eb21 commit bf6d420

19 files changed

+296
-15
lines changed

‎.eslintrc.cjs

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:react/recommended',
7+
'plugin:react/jsx-runtime',
8+
'plugin:react-hooks/recommended',
9+
],
10+
ignorePatterns: ['dist', '.eslintrc.cjs'],
11+
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12+
settings: { react: { version: '18.2' } },
13+
plugins: ['react-refresh'],
14+
rules: {
15+
'react/jsx-no-target-blank': 'off',
16+
'react-refresh/only-export-components': [
17+
'warn',
18+
{ allowConstantExport: true },
19+
],
20+
},
21+
}

‎package-lock.json

+67-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
"react": "^18.2.0",
1414
"react-dom": "^18.2.0",
1515
"react-icons": "^5.0.1",
16-
"react-router-dom": "^6.22.3"
16+
"react-router-dom": "^6.22.3",
17+
"react-slick": "^0.30.2",
18+
"slick-carousel": "^1.8.1"
1719
},
1820
"devDependencies": {
1921
"@types/react": "^18.2.66",
@@ -26,6 +28,6 @@
2628
"eslint-plugin-react-refresh": "^0.4.6",
2729
"postcss": "^8.4.38",
2830
"tailwindcss": "^3.4.3",
29-
"vite": "^5.2.8"
31+
"vite": "^5.2.0"
3032
}
3133
}

‎public/banner-1.png

1.85 MB
Loading

‎public/banner-2.png

15.1 MB
Loading

‎public/banner-3.png

11 MB
Loading

‎public/vite.svg

+1
Loading

‎src/App.jsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
import React from "react"
22
import { createBrowserRouter, RouterProvider, } from "react-router-dom";
3-
import RootElement from "./Components/RootElement";
3+
import Header from "./components/Header";
44

55
/* Pages Import */
6-
import Home from "./pages/Home";
7-
import Pages from "./pages/Pages";
8-
import Blogs from "./pages/Blogs";
9-
import Products from "./pages/Products";
10-
import Contact from "./pages/Contact";
11-
6+
import Login from "./pages/login/Login";
7+
import Home from "./pages/home/Home";
8+
import Products from "./pages/products/Products";
9+
import Blogs from "./pages/blogs/Blogs";
10+
import Contact from "./pages/contact/Contact";
1211

1312

1413
const router = createBrowserRouter([
1514
{
1615
path: "/",
17-
element: <RootElement x/>,
16+
element: <Header/>,
1817
children: [
1918
{
2019
path: "",
2120
element: <Home />,
2221
},
2322
{
2423
path: "pages",
25-
element: <Pages />
24+
element: (
25+
<h1>Pages</h1>
26+
)
2627
},
2728
{
2829
path: "products",
@@ -39,7 +40,7 @@ const router = createBrowserRouter([
3940
{
4041
path: "login",
4142
element: (
42-
<h1>Login</h1>
43+
<h1><Login/></h1>
4344
),
4445
}
4546
]

‎src/Components/Header.jsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react'
2+
import { Link, Outlet } from 'react-router-dom'
3+
4+
/* Icons & Banners*/
5+
import { IoMail } from "react-icons/io5";
6+
import { FaHeart } from "react-icons/fa";
7+
import { IoLogIn } from "react-icons/io5";
8+
import { IoSearch } from "react-icons/io5";
9+
import { FaAngleDown } from "react-icons/fa";
10+
import { FaCartArrowDown } from "react-icons/fa6";
11+
import { MdOutlinePhoneInTalk } from "react-icons/md";
12+
13+
14+
export default function RootElement() {
15+
return (
16+
<>
17+
<header>
18+
{/* upper Nav */}
19+
<div className=' bg-primary'>
20+
<nav className='container text-white flex justify-between gap-10 h-[44px] items-center'>
21+
22+
<div className='font-Josefin flex justify-between gap-10'>
23+
<a href="mailto:[email protected]"> <IoMail className='inline-block align-middle' /> [email protected]</a>
24+
<a href="mailto:[email protected]"> <MdOutlinePhoneInTalk className='inline-block align-middle' /> (12345)67890</a>
25+
</div>
26+
27+
<div className='flex gap-3 '>
28+
<span className='font-sans'>English<FaAngleDown className='inline-block' /></span>
29+
<span className='font-sans'>USD<FaAngleDown className='inline-block' /></span>
30+
<Link to="/login" className='font-sans'>Login <IoLogIn className='inline-block' /></Link>
31+
<span className='font-sans'>Wishlist <FaHeart className='inline-block' /></span>
32+
<span className='font-sans'><FaCartArrowDown className='inline-block' /></span>
33+
</div>
34+
35+
</nav>
36+
</div>
37+
38+
{/* Button Home Nav */}
39+
<nav className='flex justify-center gap-[227px] h-[40px] items-center' >
40+
<div className='gap-[90px] flex items-center'>
41+
42+
<div>
43+
<Link className='font-Josefin text-[34px] text-primary-dark leading-auto' to="/">Hekto</Link>
44+
</div>
45+
46+
<div className='flex justify-center gap-[35px] font-Lato'> {/* flex grow property */}
47+
<Link to="/" className='text-[#FB2E86]'>Home<FaAngleDown className='inline-block' /></Link>
48+
<Link to="/pages" id='hoverPage'>Pages</Link>
49+
<Link to="/products" id='hoverPage'>Products</Link>
50+
<Link to="/Blogs" id='hoverPage'>Blogs</Link>
51+
<Link to="/Contact" id='hoverPage'>Contact</Link>
52+
</div>
53+
54+
</div>
55+
56+
<form className='flex'>
57+
<input
58+
className='border-4 border-[#E7E6EF] rounded-sm px-2'
59+
type="text"
60+
placeholder='Search' />
61+
<button className=' bg-secondary px-2'><IoSearch className='inline-block' /></button>
62+
</form>
63+
</nav>
64+
65+
66+
</header>
67+
68+
<Outlet />
69+
70+
<footer>
71+
{/* Buttom Navigation */}
72+
<div>
73+
74+
</div>
75+
76+
{/* Copyright Claim */}
77+
<div>
78+
79+
</div>
80+
</footer>
81+
</>
82+
)
83+
}

‎src/index.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
@layer components{
88
.container{
9-
@apply mx-auto max-w-[1167px]
9+
@apply px-3 mx-auto max-w-[1167px]
1010
}
1111
.leading-auto{
1212
@apply leading-[normal]
@@ -16,4 +16,8 @@
1616

1717
#hoverPage:hover{
1818
color: #FB2E86;
19+
}
20+
21+
*{
22+
background-color: rgba(255 , 0,0, 0.03);
1923
}

‎src/pages/blogs/Blogs.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
export default function Blogs() {
4+
return (
5+
<div>Blogs</div>
6+
)
7+
}

‎src/pages/contact/Contact.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
export default function Contact() {
4+
return (
5+
<div>Contact</div>
6+
)
7+
}

‎src/pages/home/Home.jsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import Banners from './components/Banners'
3+
4+
5+
6+
7+
8+
export default function Home() {
9+
return (
10+
<>
11+
<div className='h-[63px]'></div>
12+
<Banners/>
13+
14+
15+
16+
{/* Body Part */}
17+
<div className='w-[#20px] h-[#20px] bg-[#313338] border-black '>
18+
19+
</div>
20+
21+
</>
22+
)
23+
}

0 commit comments

Comments
 (0)