Skip to content

Commit

Permalink
fsdfds
Browse files Browse the repository at this point in the history
  • Loading branch information
@nishant-k1
nishant-k1 committed Nov 4, 2024
1 parent 88859df commit 257f739
Show file tree
Hide file tree
Showing 5 changed files with 236 additions and 24 deletions.
165 changes: 165 additions & 0 deletions src/components/Gallery/galleryImages.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
import { s3assets } from "@/constants";

export const galleryImages = [
{
id: "1",
url: `${s3assets}/assets/gallery/img-1.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 1",
width: 800, // Replace with actual width
height: 600, // Replace with actual height
},
{
id: "2",
url: `${s3assets}/assets/gallery/img-2.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 2",
width: 800,
height: 600,
},
{
id: "3",
url: `${s3assets}/assets/gallery/img-3.webp`,
alt: "FlushJohn Portable Toilet Rental Service - Image 3",
width: 800,
height: 600,
},
{
id: "4",
url: `${s3assets}/assets/gallery/img-4.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 4",
width: 800,
height: 600,
},
{
id: "5",
url: `${s3assets}/assets/gallery/img-5.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 5",
width: 800,
height: 600,
},
{
id: "6",
url: `${s3assets}/assets/gallery/img-6.jpeg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 6",
width: 800,
height: 600,
},
{
id: "7",
url: `${s3assets}/assets/gallery/img-7.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 7",
width: 800,
height: 600,
},
{
id: "8",
url: `${s3assets}/assets/gallery/img-8.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 8",
width: 800,
height: 600,
},
{
id: "9",
url: `${s3assets}/assets/gallery/img-9.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 9",
width: 800,
height: 600,
},
{
id: "10",
url: `${s3assets}/assets/gallery/img-10.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 10",
width: 800,
height: 600,
},
{
id: "11",
url: `${s3assets}/assets/gallery/img-11.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 11",
width: 800,
height: 600,
},
{
id: "12",
url: `${s3assets}/assets/gallery/img-12.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 12",
width: 800,
height: 600,
},
{
id: "13",
url: `${s3assets}/assets/gallery/img-13.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 13",
width: 800,
height: 600,
},
{
id: "14",
url: `${s3assets}/assets/gallery/img-14.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 14",
width: 800,
height: 600,
},
{
id: "15",
url: `${s3assets}/assets/gallery/img-15.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 15",
width: 800,
height: 600,
},
{
id: "16",
url: `${s3assets}/assets/gallery/img-16.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 16",
width: 800,
height: 600,
},
{
id: "17",
url: `${s3assets}/assets/gallery/img-17.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 17",
width: 800,
height: 600,
},
{
id: "18",
url: `${s3assets}/assets/gallery/img-18.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 18",
width: 800,
height: 600,
},
{
id: "19",
url: `${s3assets}/assets/gallery/img-19.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 19",
width: 800,
height: 600,
},
{
id: "20",
url: `${s3assets}/assets/gallery/img-20.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 20",
width: 800,
height: 600,
},
{
id: "21",
url: `${s3assets}/assets/gallery/img-21.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 21",
width: 800,
height: 600,
},
{
id: "22",
url: `${s3assets}/assets/gallery/img-22.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 22",
width: 800,
height: 600,
},
{
id: "23",
url: `${s3assets}/assets/gallery/img-23.jpg`,
alt: "FlushJohn Portable Toilet Rental Service - Image 23",
width: 800,
height: 600,
},
];
17 changes: 16 additions & 1 deletion src/components/Gallery/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@
import React from "react";
import styles from "./styles.module.css";
import Breadcrumbs from "../Breadcrumbs";
import Image from "next/image";
import { galleryImages } from "./galleryImages";

const Gallery = () => {
return (
<React.Fragment>
<div className={styles.gallery}>
<div className={styles.container}>
<Breadcrumbs path={""} />
<div className={styles.disclaimerWrapper}></div>
<div className={styles.imagesWrapper}>
{galleryImages.map(({ url, alt, id, height, width }) => {
return (
<div key={id}>
<Image
src={url}
alt={alt}
height={height}
width={width}
/>
</div>
);
})}
</div>
</div>
</div>
</React.Fragment>
Expand Down
67 changes: 51 additions & 16 deletions src/components/Gallery/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,68 @@
.disclaimer {
.gallery {
background-color: var(--tertiary-bg-color);
/* background-image: url("https://cdn.flushjohn.com/assets/hero_bg.svg"); */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 54px 32px;
background-image: url("https://cdn.flushjohn.com/assets/hero_bg.svg");
}

.container {
max-width: 1100px;
margin: 0 auto;
}
.disclaimerWrapper {

.imagesWrapper {
padding-top: 108px;
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(250px, 1fr)
); /* Responsive grid layout */
gap: 16px; /* Space between images */
}

.imagesWrapper div {
position: relative;
overflow: hidden; /* Crop images for a clean look */
border-radius: 12px; /* Rounded corners */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
transition: box-shadow 0.3s ease; /* Smooth shadow effect */
}

.imagesWrapper div::after {
content: "";
position: absolute;
top: 0;
left: -100%; /* Start off-screen to the left */
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(3 47 109 / 0.5),
rgba(3 58 102 / 0.5)
); /* Bluish tint */
transition: left 0.5s ease; /* Smooth slide transition */
z-index: 1; /* Overlay above the image */
}

.imagesWrapper div:hover::after {
left: 0; /* Move the tint overlay to cover the image */
}

.imagesWrapper div:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}

.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6,
.container p,
.container li {
color: var(--secondary-text-color);
padding-bottom: 1rem;
text-transform: capitalize;
.imagesWrapper img {
border-radius: 12px; /* Ensure images match the border radius */
object-fit: cover; /* Maintain aspect ratio while covering area */
width: 100%; /* Make images responsive */
height: auto; /* Keep aspect ratio */
z-index: 0; /* Ensure the image is below the overlay */
transition: transform 0.3s ease; /* Keep image transformation on hover */
}

.container ul {
padding-left: 36px;
.imagesWrapper div:hover img {
transform: scale(1.05); /* Slightly enlarge the image on hover */
}
7 changes: 2 additions & 5 deletions src/components/Home/Hero/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,9 @@
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(3 12 19 / 0.7), rgba(2, 18, 30, 0.7)),
background-image: linear-gradient(rgba(5 49 83 / 0.5), rgba(5 55 93 / 0.5)),
url("https://cdn.flushjohn.com/assets/home/hero/hero-img-16-9.jpeg");
/* background-image: linear-gradient(
rgba(33 104 158 / 0.33),
rgba(29 110 171 / 0.36)
),
/* background-image: linear-gradient(rgba(5 18 28 / 0.33), rgba(2 10 16 / 0.36)),
url("https://cdn.flushjohn.com/assets/home/hero/hero-img-16-9.jpeg"); */
background-size: cover;
background-position: center;
Expand Down
4 changes: 2 additions & 2 deletions src/components/Navbar/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@

.navLinks a {
color: var(--btn-text-color);
font-size: 16px;
font-weight: 200;
font-size: large;
font-weight: 400;
transition: 0.3s;
}
.navLinks a:hover {
Expand Down

0 comments on commit 257f739

Please sign in to comment.