Skip to content

Commit d943e77

Browse files
vikasswebdevvikasswebdev
committed
creating slider banner
1 parent 0652bf2 commit d943e77

File tree

9 files changed

+533
-341
lines changed

9 files changed

+533
-341
lines changed

‎frontend/components/Footer.js

+29-23
Original file line numberDiff line numberDiff line change
@@ -26,78 +26,84 @@ const Footer = () => {
2626
</div>
2727
<div className="flex-grow flex flex-wrap md:pr-20 -mb-10 md:text-left text-center order-first">
2828
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
29-
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
30-
CATEGORIES
29+
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3 uppercase">
30+
who are we
3131
</h2>
3232
<nav className="list-none mb-10">
3333
<li>
34-
<a className="text-gray-600 hover:text-gray-800">First Link</a>
34+
<a className="text-gray-600 hover:text-gray-800">About us</a>
3535
</li>
3636
<li>
37-
<a className="text-gray-600 hover:text-gray-800">Second Link</a>
37+
<a className="text-gray-600 hover:text-gray-800">Contact us</a>
3838
</li>
39-
<li>
39+
{/* <li>
4040
<a className="text-gray-600 hover:text-gray-800">Third Link</a>
4141
</li>
4242
<li>
4343
<a className="text-gray-600 hover:text-gray-800">Fourth Link</a>
44-
</li>
44+
</li> */}
4545
</nav>
4646
</div>
4747
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
48-
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
49-
CATEGORIES
48+
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3 uppercase">
49+
help
5050
</h2>
5151
<nav className="list-none mb-10">
5252
<li>
53-
<a className="text-gray-600 hover:text-gray-800">First Link</a>
53+
<a className="text-gray-600 hover:text-gray-800">
54+
Shipping & Return Policy
55+
</a>
5456
</li>
5557
<li>
56-
<a className="text-gray-600 hover:text-gray-800">Second Link</a>
58+
<a className="text-gray-600 hover:text-gray-800">Help Center</a>
5759
</li>
5860
<li>
59-
<a className="text-gray-600 hover:text-gray-800">Third Link</a>
61+
<a className="text-gray-600 hover:text-gray-800">
62+
Terms & Conditions
63+
</a>
6064
</li>
6165
<li>
62-
<a className="text-gray-600 hover:text-gray-800">Fourth Link</a>
66+
<a className="text-gray-600 hover:text-gray-800">
67+
Privacy Policy
68+
</a>
6369
</li>
6470
</nav>
6571
</div>
6672
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
67-
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
68-
CATEGORIES
73+
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3 uppercase">
74+
QUICKLINKS
6975
</h2>
7076
<nav className="list-none mb-10">
7177
<li>
72-
<a className="text-gray-600 hover:text-gray-800">First Link</a>
78+
<a className="text-gray-600 hover:text-gray-800">Offers</a>
7379
</li>
74-
<li>
80+
{/* <li>
7581
<a className="text-gray-600 hover:text-gray-800">Second Link</a>
7682
</li>
7783
<li>
7884
<a className="text-gray-600 hover:text-gray-800">Third Link</a>
7985
</li>
8086
<li>
8187
<a className="text-gray-600 hover:text-gray-800">Fourth Link</a>
82-
</li>
88+
</li> */}
8389
</nav>
8490
</div>
8591
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
86-
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
87-
CATEGORIES
92+
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3 uppercase">
93+
Categories
8894
</h2>
8995
<nav className="list-none mb-10">
9096
<li>
91-
<a className="text-gray-600 hover:text-gray-800">First Link</a>
97+
<a className="text-gray-600 hover:text-gray-800">Women</a>
9298
</li>
9399
<li>
94-
<a className="text-gray-600 hover:text-gray-800">Second Link</a>
100+
<a className="text-gray-600 hover:text-gray-800">Men</a>
95101
</li>
96102
<li>
97-
<a className="text-gray-600 hover:text-gray-800">Third Link</a>
103+
<a className="text-gray-600 hover:text-gray-800">Kids</a>
98104
</li>
99105
<li>
100-
<a className="text-gray-600 hover:text-gray-800">Fourth Link</a>
106+
<a className="text-gray-600 hover:text-gray-800">Tech</a>
101107
</li>
102108
</nav>
103109
</div>

‎frontend/components/Grid.js

+16-4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,22 @@ const Grid = ({ myhtml }) => {
66
}
77

88
return (
9-
<div
10-
className="text-gray-600 body-font"
11-
dangerouslySetInnerHTML={createMarkup(myhtml.data.attributes.source)}
12-
/>
9+
<>
10+
<div className="py-10">
11+
<div class="flex flex-col text-center w-full mb-10">
12+
<h1 class="sm:text-3xl text-2xl font-medium title-font text-gray-900 mb-1">
13+
Category!
14+
</h1>
15+
<h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font ">
16+
shop by our Categories!
17+
</h2>
18+
</div>
19+
<div
20+
className="text-gray-600 body-font"
21+
dangerouslySetInnerHTML={createMarkup(myhtml.data.attributes.source)}
22+
/>
23+
</div>
24+
</>
1325
);
1426
};
1527

‎frontend/components/Navbar.js

+36-35
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Navbar = () => {
2727
<>
2828
<div
2929
ref={cartRef}
30-
className={`cart fixed right-0 h-screen md:w-1/2 w-full border-l-2 p-3 bg-white transform z-50 transition-transform ${
30+
className={`cart fixed right-0 h-screen md:w-1/2 w-full border-l-2 p-3 bg-white transform z-40 transition-transform ${
3131
state.isCartOpen ? "translate-x-0" : "translate-x-full"
3232
}`}
3333
>
@@ -92,45 +92,46 @@ const Navbar = () => {
9292
)}
9393
</div>
9494
</div>
95-
<header className="text-gray-600 border-b-2 border-gray-200 sticky top-0 bg-slate-200 body-font">
96-
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
97-
<a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
98-
<svg
99-
xmlns="http://www.w3.org/2000/svg"
100-
fill="none"
101-
stroke="currentColor"
102-
strokeLinecap="round"
103-
strokeLinejoin="round"
104-
strokeWidth="2"
105-
className="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full"
106-
viewBox="0 0 24 24"
107-
>
108-
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
109-
</svg>
110-
<span className="ml-3 text-xl">MY SHOP</span>
111-
</a>
112-
<nav className="md:ml-auto flex flex-wrap items-center text-base justify-center">
113-
<Link href="/">
114-
<a className="mr-5 hover:text-gray-900">Home</a>
115-
</Link>
116-
<Link href="/about">
117-
<a className="mr-5 hover:text-gray-900">About</a>
118-
</Link>
119-
<Link href="/products">
120-
<a className="mr-5 hover:text-gray-900">Products</a>
121-
</Link>
122-
<Link href="/contact">
123-
<a className="mr-5 hover:text-gray-900">Contact Us</a>
124-
</Link>
95+
<header className="text-gray-600 border-b-2 z-10 border-gray-200 sticky top-0 bg-white body-font">
96+
<div className="flex flex-wrap px-5 py-3 flex-col md:flex-row items-center">
97+
<div className="flex flex-wrap flex-col md:flex-row items-center">
98+
<a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
99+
<svg
100+
xmlns="http://www.w3.org/2000/svg"
101+
fill="none"
102+
stroke="currentColor"
103+
strokeLinecap="round"
104+
strokeLinejoin="round"
105+
strokeWidth="2"
106+
className="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full"
107+
viewBox="0 0 24 24"
108+
>
109+
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
110+
</svg>
111+
<span className="ml-3 text-xl">MY SHOP</span>
112+
</a>
113+
<nav className="flex flex-wrap items-center ml-10 text-base justify-center">
114+
<Link href="/">
115+
<a className="mr-5 hover:text-gray-900">Women</a>
116+
</Link>
117+
<Link href="/products">
118+
<a className="mr-5 hover:text-gray-900">Men</a>
119+
</Link>
120+
<Link href="/about">
121+
<a className="mr-5 hover:text-gray-900">Kids</a>
122+
</Link>
123+
<Link href="/contact">
124+
<a className="mr-5 hover:text-gray-900">Tech</a>
125+
</Link>
126+
</nav>
127+
</div>
128+
<div className="md:ml-auto flex flex-wrap items-center text-base justify-center">
125129
<button onClick={toggleCart}>
126130
<div className="mr-5 hover:text-gray-900">
127131
<p className="text-gray-900">Cart</p>
128132
</div>
129133
</button>
130-
</nav>
131-
{/* <button className="inline-flex items-center text-white bg-purple-500 border-0 py-1 px-3 focus:outline-none hover:bg-purple-300 rounded text-base mt-4 md:mt-0">
132-
Login
133-
</button> */}
134+
</div>
134135
</div>
135136
</header>
136137
</>

‎frontend/components/atom/SlideBanner.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from "react";
2+
import { Swiper, SwiperSlide } from "swiper/react";
3+
import { Autoplay, Navigation } from "swiper";
4+
import "swiper/css";
5+
import "swiper/css/navigation";
6+
import Link from "next/link";
7+
8+
const SlideBanner = () => {
9+
return (
10+
<Swiper
11+
navigation={true}
12+
modules={[Navigation, Autoplay]}
13+
autoplay={{
14+
delay: 3000,
15+
disableOnInteraction: false,
16+
}}
17+
className="mySwiper"
18+
>
19+
<SwiperSlide>
20+
<Link href="/products">
21+
<a className="w-full select-none">
22+
<img
23+
className="object-contain object-fill bg-gray-300 w-[100vw] h-[50vh]"
24+
src="https://images.freekaamaal.com/store_desc_images/1516103172.jpg"
25+
alt=""
26+
/>
27+
</a>
28+
</Link>
29+
</SwiperSlide>
30+
<SwiperSlide>
31+
<Link href="/products">
32+
<a className="w-full select-none">
33+
<img
34+
className="object-contain object-fill bg-gray-300 w-[100vw] h-[50vh]"
35+
src="https://images.freekaamaal.com/store_desc_images/1516103172.jpg"
36+
alt=""
37+
/>
38+
</a>
39+
</Link>
40+
</SwiperSlide>
41+
<SwiperSlide>
42+
<Link href="/products">
43+
<a className="w-full select-none">
44+
<img
45+
className="object-contain object-fill bg-gray-300 w-[100vw] h-[50vh]"
46+
src="https://images.freekaamaal.com/store_desc_images/1516103172.jpg"
47+
alt=""
48+
/>
49+
</a>
50+
</Link>
51+
</SwiperSlide>
52+
</Swiper>
53+
);
54+
};
55+
56+
export default SlideBanner;

0 commit comments

Comments
 (0)