Skip to content

Commit 1e8663f

Browse files
jency1jency1
committed
Instagram & shop by catagory updated
1 parent cd5a1fe commit 1e8663f

File tree

3 files changed

+153
-79
lines changed

3 files changed

+153
-79
lines changed

‎src/components/HomePage/FollowOnInstagram.jsx‎

Lines changed: 149 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,161 @@
1-
import styles from "./FollowOnInstagram.module.css";
1+
// ImageGrid Component
2+
const ImageGrid = ({ images }) => {
3+
return (
4+
<div className="grid grid-cols-2 gap-4 sm:grid-cols-2 lg:grid-cols-3 mt-3">
5+
{images.map((image, index) => (
6+
<div key={index} className="col-span-1">
7+
<img
8+
src={image}
9+
alt={`plant image ${index + 1}`}
10+
className="w-full h-full object-cover rounded transition-transform duration-300 transform hover:scale-105 hover:shadow-lg"
11+
/>
12+
</div>
13+
))}
14+
</div>
15+
);
16+
};
17+
18+
// LongImage Component
19+
const LongImage = ({ image, height }) => {
20+
return (
21+
<div className="mt-3 text-center" style={{ height }}>
22+
<img
23+
src={image}
24+
alt="plant image"
25+
className="w-full h-full object-cover rounded transition-transform duration-300 transform hover:scale-105 hover:shadow-lg"
26+
/>
27+
</div>
28+
);
29+
};
30+
31+
// FollowOnInstagram Component
32+
const FollowOnInstagram = () => {
33+
const images = [
34+
"/Shop By Category/image-1.jpg",
35+
"/Shop By Category/image-2.jpg",
36+
"/Shop By Category/image-3.jpg",
37+
"/Shop By Category/image-4.jpg",
38+
"/Shop By Category/image-5.jpg",
39+
"/Shop By Category/image-6.jpg",
40+
];
41+
42+
// Define the height of the long image to match two rows of small images
43+
const gridHeight = "480px"; // Adjust to match the height of two rows of images
244

3-
function FollowOnInstagram() {
445
return (
5-
<div className="d-flex flex-column align-items-center ">
6-
<div className="h1 mt-5 text-success text-center">
46+
<div className="flex flex-col items-center">
47+
<h1 className="text-success font-bold text-3xl mt-16 mb-4 text-center">
748
Follow us on Instagram
8-
</div>
9-
<div className={`${styles["main-container"]} container mt-2 mb-5`}>
10-
<div className="row">
11-
<div className="col-12 col-md-8 container p-8">
12-
<div className="row">
13-
<div className="col-6 text-center mt-3">
14-
<img
15-
src="/Shop By Category/image-1.jpg"
16-
alt=""
17-
className="w-100 h-100 img-fluid rounded"
18-
/>
19-
</div>
20-
<div className="col-6 text-center mt-3">
21-
<img
22-
src="/Shop By Category/image-2.jpg"
23-
alt=""
24-
className="w-100 h-100 img-fluid rounded"
25-
/>
26-
</div>
27-
</div>
28-
<div className="row">
29-
<div className="col-8 text-center mt-3">
30-
<img
31-
src="/Shop By Category/image-3.jpg"
32-
alt=""
33-
className="w-100 h-100 img-fluid rounded"
34-
/>
35-
</div>
36-
<div className="col-4 text-center mt-3">
37-
<img
38-
src="/Shop By Category/image-4.jpg"
39-
alt=""
40-
className="w-100 h-100 img-fluid rounded"
41-
/>
42-
</div>
43-
</div>
44-
<div className="row">
45-
<div className="col-6 text-center mt-3">
46-
<img
47-
src="/Shop By Category/image-5.jpg"
48-
alt=""
49-
className="w-100 h-100 img-fluid rounded"
50-
/>
51-
</div>
52-
<div className="col-6 text-center mt-3">
53-
<img
54-
src="/Shop By Category/image-6.jpg"
55-
alt=""
56-
className="w-100 h-100 img-fluid rounded"
57-
/>
58-
</div>
59-
</div>
49+
</h1>
50+
<div className="container mt-2 mb-5 px-16 sm:px-8 lg:px-24">
51+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
52+
{/* Image Grid Component */}
53+
<div className="col-span-2 sm:col-span-1 md:col-span-2">
54+
<ImageGrid images={images.slice(0, 6)} />
6055
</div>
61-
<div className={`${styles.longImage} col-4 text-center mt-2`}>
62-
<img
63-
src="/Shop By Category/long-image.jpg"
64-
alt=""
65-
className="h-100 w-100 img-fluid rounded "
56+
57+
{/* Long Image Component */}
58+
<div className="col-span-2 sm:col-span-1 lg:col-span-1 h-full flex justify-center items-center hidden sm:block">
59+
<LongImage
60+
image="/Shop By Category/long-image.jpg"
61+
height={gridHeight}
6662
/>
6763
</div>
6864
</div>
6965
</div>
7066
</div>
7167
);
72-
}
68+
};
7369

7470
export default FollowOnInstagram;
71+
72+
// import styles from "./FollowOnInstagram.module.css";
73+
74+
// function FollowOnInstagram() {
75+
// return (
76+
// <div className="d-flex flex-column align-items-center ">
77+
// <div className="h1 mt-5 text-success text-center">
78+
// Follow us on Instagram
79+
// </div>
80+
// <div className={`${styles["main-container"]} container mt-2 mb-5`}>
81+
// <div className="row">
82+
// <div className="col-12 col-md-8 container p-8">
83+
// <div className="row">
84+
// <div className="col-6 text-center mt-3">
85+
// <img
86+
// src="/Shop By Category/image-1.jpg"
87+
// alt=""
88+
// className="w-100 h-100 img-fluid rounded"
89+
// />
90+
// </div>
91+
// <div className="col-6 text-center mt-3">
92+
// <img
93+
// src="/Shop By Category/image-2.jpg"
94+
// alt=""
95+
// className="w-100 h-100 img-fluid rounded"
96+
// />
97+
// </div>
98+
// </div>
99+
// <div className="row">
100+
// <div className="col-8 text-center mt-3">
101+
// <img
102+
// src="/Shop By Category/image-3.jpg"
103+
// alt=""
104+
// className="w-100 h-100 img-fluid rounded"
105+
// />
106+
// </div>
107+
// <div className="col-4 text-center mt-3">
108+
// <img
109+
// src="/Shop By Category/image-4.jpg"
110+
// alt=""
111+
// className="w-100 h-100 img-fluid rounded"
112+
// />
113+
// </div>
114+
// </div>
115+
// <div className="row">
116+
// <div className="col-6 text-center mt-3">
117+
// <img
118+
// src="/Shop By Category/image-5.jpg"
119+
// alt=""
120+
// className="w-100 h-100 img-fluid rounded"
121+
// />
122+
// </div>
123+
// <div className="col-6 text-center mt-3">
124+
// <img
125+
// src="/Shop By Category/image-6.jpg"
126+
// alt=""
127+
// className="w-100 h-100 img-fluid rounded"
128+
// />
129+
// </div>
130+
// </div>
131+
// </div>
132+
// <div className={`${styles.longImage} col-4 text-center mt-2`}>
133+
// <img
134+
// src="/Shop By Category/long-image.jpg"
135+
// alt=""
136+
// className="h-100 w-100 img-fluid rounded "
137+
// />
138+
// </div>
139+
// </div>
140+
// </div>
141+
// </div>
142+
// );
143+
// }
144+
145+
// export default FollowOnInstagram;
146+
147+
// Images - css file
148+
149+
// .main-container {
150+
// padding: 0 9rem 0 9rem;
151+
// }
152+
153+
// @media only screen and (max-width: 48em) {
154+
// .longImage {
155+
// height: 0;
156+
// }
157+
158+
// .main-container {
159+
// padding: 0 4rem 0 4rem;
160+
// }
161+
// }

‎src/components/HomePage/FollowOnInstagram.module.css‎

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

‎src/components/HomePage/ShopByCategory.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { FaLongArrowAltRight } from "react-icons/fa";
55
function ShopByCategory() {
66
return (
77
<div className="d-flex flex-column align-items-center ">
8-
<div className="h1 mt-3 text-success">Shop by Category</div>
9-
<div className="p-2 mt-2 w-50 mx-auto text-center">
8+
<div className="h1 mt-5 text-success">Shop by Category</div>
9+
<div className="p-2 mt-3 w-50 mx-auto text-center sm:text-lg">
1010
Discover our top trees, chosen for their beauty and resilience. Add
1111
color, fruit, or greenaery to your garden with these customer favorites.
1212
Bring {`nature's`} charm home today.
1313
</div>
1414
<div className="container">
15-
<div className="row">
15+
<div className="row mx-auto flex items-center pl-6">
1616
<div className="col-6 col-md-3 text-center mt-5">
1717
<img
1818
src="/Shop By Category/outdoor.png"
@@ -35,7 +35,7 @@ function ShopByCategory() {
3535
alt=""
3636
className="img-fluid rounded"
3737
/>
38-
<div className="h5 mt-3">Terrace & Balcony</div>
38+
<div className="h5 mt-3">Terrace</div>
3939
</div>
4040
<div className="col-6 col-md-3 text-center mt-5">
4141
<img

0 commit comments

Comments
 (0)