From e93502b6b74ead3c41614bb1d1f3d24153d5584a Mon Sep 17 00:00:00 2001 From: anuragnegi000 Date: Sat, 6 Jul 2024 15:55:41 +0530 Subject: [PATCH 1/2] fixes #342 --- components/Form/subscription.js | 21 ++++++++++----------- pages/index.js | 2 +- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/components/Form/subscription.js b/components/Form/subscription.js index 11223969..bfa1aeb6 100644 --- a/components/Form/subscription.js +++ b/components/Form/subscription.js @@ -1,25 +1,24 @@ import React from 'react'; import Button from '../Buttons/button'; -function Subcription() { +function Subscription() { return ( -
-
+
+

Subscribe for AACoT’24 updates!

- - +
); } -export default Subcription; +export default Subscription; diff --git a/pages/index.js b/pages/index.js index 2eb8d1a0..69708c90 100644 --- a/pages/index.js +++ b/pages/index.js @@ -176,7 +176,7 @@ export default function Home() {
-
+
From ca141a05b092e301cdabd2c72da8d4ec0ff8e4d1 Mon Sep 17 00:00:00 2001 From: anuragnegi000 Date: Thu, 22 Aug 2024 22:26:43 +0530 Subject: [PATCH 2/2] added event gallery --- components/Gallery/gallery.js | 55 +++++++++++++++++++++++++++ components/Gallery/gallery.module.css | 9 +++++ package-lock.json | 8 ++-- pages/index.js | 4 ++ styles/globals.css | 45 +++++++++++++++++++++- 5 files changed, 116 insertions(+), 5 deletions(-) create mode 100644 components/Gallery/gallery.js create mode 100644 components/Gallery/gallery.module.css diff --git a/components/Gallery/gallery.js b/components/Gallery/gallery.js new file mode 100644 index 00000000..4f9b493f --- /dev/null +++ b/components/Gallery/gallery.js @@ -0,0 +1,55 @@ +import React from "react"; +import Image from 'next/image'; +import Link from "next/link"; +import "./gallery.module.css"; + +function Gallery() { + const images = [ + { + id:1, + src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + }, + { + id:2, + src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + }, + { + id:3, + src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + }, + { + id:4, + src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + }, + { + id:5, + src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + }, + { + id:6, + src:"https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" + }, + ]; + return ( +
+

OUR EVENT GALLERY

+
+ {images.map((image, index) => { + return ( +
+ +
+ ) + })} +
+ + +
+ ); +} + +export default Gallery; diff --git a/components/Gallery/gallery.module.css b/components/Gallery/gallery.module.css new file mode 100644 index 00000000..3336c179 --- /dev/null +++ b/components/Gallery/gallery.module.css @@ -0,0 +1,9 @@ +.gallery{ + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; + -webkit-column-width: 33%; + -moz-column-width: 33%; + column-width: 33%; + padding: 0 12px; +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8a024407..760de8f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -786,12 +786,12 @@ "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==" }, "node_modules/@types/react": { - "version": "18.2.37", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz", - "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==", + "version": "17.0.80", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.80.tgz", + "integrity": "sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==", "dependencies": { "@types/prop-types": "*", - "@types/scheduler": "*", + "@types/scheduler": "^0.16", "csstype": "^3.0.2" } }, diff --git a/pages/index.js b/pages/index.js index 69708c90..c1cb2b4c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -16,6 +16,7 @@ import speakers from '../config/speakers.json'; import Link from 'next/link'; import Button from '../components/Buttons/button'; import Dropdown from '../components/Dropdown/dropdown'; +import Gallery from '../components/Gallery/gallery'; export default function Home() { const isTablet = useMediaQuery({ maxWidth: '1118px' }); @@ -176,6 +177,9 @@ export default function Home() {
+
+ +
diff --git a/styles/globals.css b/styles/globals.css index 6d1d8e73..60c39670 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -207,4 +207,47 @@ mix-blend-mode: lighten; .hoverEffect:hover { transform: scale(1.1); /* Scale the image by 10% on hover */ -} \ No newline at end of file +} + + + + +.gallery { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} + +.pics { + overflow: hidden; + position: relative; +} + +.pics img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.pics:hover img { + transform: scale(1.1); +} + +.pics.large { + grid-column: span 2; + grid-row: span 2; +} + +.text-white { + color: white; +} + +@media (max-width: 768px) { +.gallery { + padding: 20px; + grid-template-columns: repeat(1, 1fr); + grid-gap: 10px; +} +} +