Photo Gallery updated

Components/Gallary.js

@@ -1,4 +1,6 @@
 import styles from "../styles/Gallary.module.css";
+import Link from "next/link";
+import Photos from "../pages/Photos";
 
 const Gallary = () => {
   return (
@@ -110,6 +112,8 @@ const Gallary = () => {
             />
           </div> */}
         </div>
+        <Link href="/Photos"><p className={styles.view}>View More</p>
+              </Link>
         <section className={styles.social_media}>
           <hr />
           <p>Follow us on social media</p>

Components/Tagline.js

@@ -6,7 +6,7 @@ const Tagline = () => {
             <section className={styles.tagline} id='tagline'>
                 <div className={styles.tagline_text}>
                     <h3>
-                        We&apos;re Architects of Change: Building Community Which Actually Creates Impact
+                        We&apos;re Architects of Change: Building a community that actually creates an impact
                     </h3>
                 </div>
 

Components/Team.js

@@ -37,7 +37,7 @@ const Team = () => {
                 <section className={styles.community_button}>
 
                     <section>
-                        <h2>We Encourage Creative Minds</h2>
+                        <h2 className={styles.tagline}>We Encourage Creative Minds</h2>
                         <div>
                             <a href='https://chat.whatsapp.com/CbZ618g7HCOCMOgRoV4W8m' target='_blank'><button>
                                 Join Our Community

pages/Photos.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import styles from "../styles/Photos.module.css"; // Import the styles
+
+const Photos = () => {
+    return (
+        <div className={styles.body}>
+            <p className={styles.text}>Our Gallery</p>
+            <div id="photos" className={styles.photo_section} >
+                <img src="/Images/team_img.jpeg" alt="team" className={styles.image1} />
+            </div>
+            <div className={styles.grid_wrapper}>
+                <div className={styles.tall}>
+                    <img src="/Images/img1.jpeg" alt="team" className={styles.image} />
+                </div>
+                <div>
+                    <img src="/Images/img2.jpeg" alt="team" className={styles.image} />
+                </div>
+                <div className={styles.tall}>
+                    <img src="/Images/img3.jpeg" alt="team" className={styles.image} />
+                </div>
+
+            </div>
+            <div className={styles.grid_wrapper}>
+                <div className={styles.wide}>
+                    <img src="/Images/img4.jpeg" alt="team" className={styles.wide_image} />
+                </div>
+                <div className={styles.wide}>
+                    <img src="/Images/img5.jpeg" alt="team" className={styles.wide_image} />
+                </div>
+
+            </div>
+            <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />  <br />
+            <div className={styles.grid_wrapper}>
+                <div className={styles.tall}>
+                    <img src="/Images/img6.jpeg" alt="team" className={styles.tall_image} />
+                </div>
+                <div>
+                    <img src="/Images/img7.jpeg" alt="team" className={styles.image} />
+                </div>
+                <div className={styles.tall}>
+                    <img src="/Images/img8.jpeg" alt="team" className={styles.image} />
+                </div>
+
+            </div>
+            <div className={styles.grid_wrapper}>
+                <div className={styles.wide}>
+                    <img src="/Images/img9.png" alt="team" className={styles.wide_image} />
+                </div>
+                <div className={styles.wide}>
+                    <img src="/Images/img10.jpg" alt="team" className={styles.wide_image} />
+                </div>
+
+            </div>
+            <br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br />
+
+            <p className={styles.text}> OUR EVENTS</p>
+            <div id="event 1" className={styles.event_container}>
+                <p className={styles.event_name}> Introductory Session 2023</p>
+                <p className={styles.event_desc}>On the illustrious day of August 18, 2023, a significant milestone was achieved as the curtains rose on the introductory session of ENCODE. With immense pride and joy, we celebrated not only the commencement of the 2023 edition but also the remarkable feat of completing a glorious decade. ENCODE, the esteemed Computer Science club of PDPU, marked its 10th anniversary in an event that resonated with success, enthusiasm, and a commitment to further excellence. This introductory session not only unveiled the exciting prospects that await but also served as a testament to the journey of innovation and knowledge that ENCODE has embarked upon over the years.</p>
+                <div className={styles.grid_wrapper}>
+                    <div className={styles.tall}>
+                        <img src="/Images/img12.jpg" alt="team" className={styles.image} />
+                    </div>
+                    <div>
+                        <img src="/Images/img13.jpg" alt="team" className={styles.image} />
+                    </div>
+                    <div className={styles.tall}>
+                        <img src="/Images/img14.jpg" alt="team" className={styles.image} />
+                    </div>
+                </div>
+                <div className={styles.grid_wrapper}>
+                    <div className={styles.wide}>
+                        <img src="/Images/img15.jpg" alt="team" className={styles.wide_image} />
+                    </div>
+                    <div className={styles.wide}>
+                        <img src="/Images/img16.jpg" alt="team" className={styles.wide_image} />
+                    </div>
+                </div>
+            </div>
+            <br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br />
+            <div id="event 2" className={styles.event_container}>
+                <p className={styles.event_name}>CODEWAR</p>
+                <p className={styles.event_desc}>Codewar 2023, Encode's premier event for the Tesseract community, concluded as a remarkable journey into competitive programming. Spanning a dynamic 3-hour coding marathon, participants showcased their problem-solving skills and coding finesse. Challenges emphasized both coding acumen and quick thinking. Codewar 2023 exemplified growth and the thrill of pressure situations, celebrating dedication to coding. As Codewar's virtual battlefield closed, it reiterated that each keystroke, algorithm, and strategy shapes coding excellence's future. Until the next edition, keep coding, pushing boundaries, and evolving in this dynamic technological landscape.</p>
+                <div className={styles.grid_wrapper}>
+                    <div className={styles.tall}>
+                        <img src="/Images/img20.jpg" alt="team" className={styles.image} />
+                    </div>
+                    <div>
+                        <img src="/Images/img21.jpg" alt="team" className={styles.image} />
+                    </div>
+                    <div className={styles.tall}>
+                        <img src="/Images/img22.jpg" alt="team" className={styles.image} />
+                    </div>
+                </div>
+                <div className={styles.grid_wrapper}>
+                    <div className={styles.wide}>
+                        <img src="/Images/img19.jpg" alt="team" className={styles.wide_image} />
+                    </div>
+                    <div className={styles.wide}>
+                        <img src="/Images/img18.jpg" alt="team" className={styles.wide_image} />
+                    </div>
+                </div>
+
+            </div>
+            <br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br />
+            <div id="event 1" className={styles.event_container}>
+                <p className={styles.event_name}>IDEATHON</p>
+                <p className={styles.event_desc}> Space exploration had sparked a multitude of inquiries demanding innovative resolutions. Challenges encompassing the management of space debris, the redefinition of launch techniques for practicality, and the safeguarding of astronauts against cosmic radiations had stirred interest and curiosity. ENCODE had extended an invitation to enthusiasts to rise to the occasion and become integral to the solutions through their dynamic event, IDEATHON. This platform functioned as a catalyst for inventive concepts. Teams had been assembled, thoughts had been pooled, and brainstorming sessions had delved profoundly into the core of space-related predicaments. Participants had seized the opportunity to contribute to the constantly evolving realm of space exploration while potentially garnering acknowledgment for their imaginative pursuits. The stage had been set to mold the future, and participants had engaged in ENCODE's IDEATHON, allowing their innovations to radiate brilliantly.</p>
+                <div className={styles.grid_wrapper}>
+                    <div className={styles.tall}>
+                        <img src="/Images/img25.jpg" alt="team" className={styles.image} />
+                    </div>
+                    <div>
+                        <img src="/Images/img24.jpg" alt="team" className={styles.image} />
+                    </div>
+                    <div className={styles.tall}>
+                        <img src="/Images/img23.jpg" alt="team" className={styles.image} />
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Photos;

public/Data/Team.json

@@ -1,6 +1,6 @@
 [
     {
-        "name": "Vedansh Khamdar",
+        "name": "Vedansh Kamdar",
         "img": "../Images/Vedansh.jpeg",
         "designation" : "President"
     },

styles/Gallary.module.css

@@ -67,6 +67,22 @@
 .social a{
     font-size: 1.3rem;
 }
+.link a{
+    font-size:large;
+    color:white;
+    text-align: center;
+    justify-content: center;
+
+}
+.view{
+    font-size: large;
+    align-items:center ;
+    text-align: center;
+    margin-top: 4px;
+    text-decoration: underline;
+    text-shadow: 2px;
+}
+
 @media (max-width: 860px) {
     .social_media h1{
         font-size: 7vw;

styles/Photos.module.css

@@ -0,0 +1,106 @@
+.body{
+    margin: 15px;
+}
+.text {
+    text-align: center;
+    font-size: xx-large;
+    font-weight: 600;
+    margin-top: 15px;
+}
+
+.event_name{
+    text-align: left;
+    margin-left: 20px;
+    margin-top: 25px;
+    font-weight: 400;
+    font-size:xx-large;
+}
+.event_desc{
+    text-align: left;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 20px;
+    font-weight:100;
+    font-size:x-large;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.event_container{
+    display: block;
+}
+
+.event_container :hover .grid_wrapper {
+    display: grid;
+}
+
+
+
+.image1{
+    width: 100%;
+    height:auto;
+    border-radius:2px;
+    padding: 6px;
+
+}
+
+.image2{
+    width: 600px;
+	height: 500px;
+	border-radius: 2px;
+    padding: 4px;
+
+}
+.image{
+    width: 400px;
+	height: 300px;
+	border-radius: 5px;
+    padding: 4px;
+}
+.image3{
+    width: 500px;
+	height: 500px;
+	border-radius: 2px;
+    padding: 4px;
+} 
+.grid_wrapper {
+	display: grid;
+	grid-gap: 10px;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	grid-auto-rows: 200px;
+	grid-auto-flow: dense;
+}
+
+.grid_wrapper .wide {
+	grid-column: span 2;
+}
+.grid_wrapper .tall {
+	grid-row: span 2;
+}
+.grid_wrapper .big {
+	grid-column: span 2;
+	grid-row: span 2;
+}
+
+.photo_section{
+    padding: 4px;
+}
+
+.grid{
+    display:flex;
+    flex-direction: row;
+
+}
+
+.second_row{
+    display: flex;
+    flex-direction:row;
+}
+
+.wide_image{
+    width:600px;
+    height: 400px
+}
+
+.tall_image{
+    width: 400px;
+    height:auto;
+}

styles/Team.module.css

@@ -116,6 +116,12 @@ filter: grayscale(24%);
   }
 }
 
+.tagline{
+  text-align: center;
+  align-items:center;
+  justify-content: center;
+}
+
 @media (max-width: 550px) {
   .team_section{
     margin: 30px;