From d2af12f67fe59424fa3452db444a29bbf7769069 Mon Sep 17 00:00:00 2001
From: Ayush <99096397+ayush4345@users.noreply.github.com>
Date: Tue, 27 Feb 2024 19:53:04 +0530
Subject: [PATCH] major changes in styling

---
 src/app/blogs/Blogcard.js                     |  22 +++--
 src/app/blogs/Blogcard.module.css             |   8 +-
 src/app/blogs/[blogid]/page.js                |  66 +++++++++----
 src/app/blogs/page.js                         |  71 +++++---------
 src/app/events/Eventcard.module.css           |   8 +-
 src/app/events/[blogid]/page.js               |  63 -------------
 src/app/events/[eventid]/page.js              |  88 ++++++++++++++++++
 .../{[blogid] => [eventid]}/styleblog.css     |   0
 src/app/events/eventCard.js                   |  22 +++--
 src/app/events/page.js                        |  53 +++++------
 src/app/globals.css                           |   2 +-
 src/app/iet/page.js                           |   1 -
 src/app/layout.js                             |   2 +
 src/app/page.js                               |   1 -
 ...-avatar-clipart-illustration-free-png.webp | Bin
 src/app/{team => teams}/page.js               |   5 +-
 src/app/{team => teams}/styles.css            |   0
 src/app/{team => teams}/th.jpeg               | Bin
 src/components/Navbar/Navbar.js               |   7 +-
 src/components/Navbar/Navbar.module.css       |  38 ++++++--
 src/components/ProjectCard.js                 |  20 ++--
 src/components/ProjectsPage.js                |  33 ++++---
 src/components/about.js                       |   4 +-
 src/components/hero.js                        |   8 +-
 src/components/sig.js                         |   6 +-
 tailwind.config.js                            |   9 ++
 26 files changed, 315 insertions(+), 222 deletions(-)
 delete mode 100644 src/app/events/[blogid]/page.js
 create mode 100644 src/app/events/[eventid]/page.js
 rename src/app/events/{[blogid] => [eventid]}/styleblog.css (100%)
 rename src/app/{team => teams}/man-avatar-clipart-illustration-free-png.webp (100%)
 rename src/app/{team => teams}/page.js (98%)
 rename src/app/{team => teams}/styles.css (100%)
 rename src/app/{team => teams}/th.jpeg (100%)

diff --git a/src/app/blogs/Blogcard.js b/src/app/blogs/Blogcard.js
index ff13dba..70e2958 100644
--- a/src/app/blogs/Blogcard.js
+++ b/src/app/blogs/Blogcard.js
@@ -6,17 +6,19 @@ const BlogCard = ({ title, authors, img, description, slug, date }) => {
   // const truncatedDescription = description.length > 100 ? `${description.slice(0, 100)}...` : description;
 
   return (
-    <div className={styles.blogCard}>
-      <div className={styles.blogImage}>
-        <img className='w-full object-cover h-52' src={img} alt={title} />
+    <Link href={`/blogs/${slug}`} >
+      <div className={styles.blogCard} >
+        <div className={styles.blogImage}>
+          <img className='w-full object-cover h-52' src={img} alt={title} />
+        </div>
+        <div className={styles.blogDetails}>
+          <h2 className={`font-semibold ${styles.head}`}>{title}</h2>
+          <p className='font-medium text-xs mb-1'>{date}</p>
+          <p className={`font-medium mb-3 ${styles.para}`}>by {authors}</p>
+          <p className={styles.para}>{description.slice(0, 150) + "... see more"}</p>
+        </div>
       </div>
-      <div className={styles.blogDetails}>
-        <h2 className={`font-semibold ${styles.head}`}>{title}</h2>
-        <p className='font-medium text-xs mb-1'>{date}</p>
-        <p className={`font-medium mb-3 ${styles.para}`}>by {authors}</p>
-        <p className={styles.para}>{description.slice(0, 150) + "... see more"}</p>
-      </div>
-    </div>
+    </Link>
   );
 };
 
diff --git a/src/app/blogs/Blogcard.module.css b/src/app/blogs/Blogcard.module.css
index 008fa8f..ab2bbfc 100644
--- a/src/app/blogs/Blogcard.module.css
+++ b/src/app/blogs/Blogcard.module.css
@@ -16,7 +16,7 @@
 }
 
 .blogCard {
-  width: 350px;
+  width: 320px;
   height: fit-content;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
@@ -29,6 +29,12 @@
   height: 100%;
 }
 
+@media screen and (max-width: 350px) {
+  .blogCard {
+    width: 100%;
+  }
+}
+
 .blogCcard:hover {
   transform: scale(1.02);
 }
diff --git a/src/app/blogs/[blogid]/page.js b/src/app/blogs/[blogid]/page.js
index ff4d631..ad85483 100644
--- a/src/app/blogs/[blogid]/page.js
+++ b/src/app/blogs/[blogid]/page.js
@@ -21,13 +21,13 @@ const BlogId = ({ params }) => {
         // Fetch data from the API
         const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=blog.BlogPage&fields=*');
         const data = await response.json();
-        console.log("check",data);
+        console.log("check", data);
         // Find the blog post with the matching id
-        const matchingBlog = data.items.find(blog => blog.id === parseInt(params.blogid));
-        
+        const matchingBlog = data.items.find(blog => blog?.meta.slug === params.blogid);
+        console.log("matchingBlog", data.items[0]);
         // Update the state with the matching blog data
         setBlogData(matchingBlog);
-        console.log("blog :",matchingBlog.blog_img_url)
+        console.log("blog :", matchingBlog.blog_img_url)
 
       } catch (error) {
         console.error('Error fetching data:', error);
@@ -36,26 +36,54 @@ const BlogId = ({ params }) => {
 
     // Call the fetchData function
     fetchData();
-  }, [params.id]); // Include params.id in the dependency array to refetch data when id changes
+  }, [params.blogid]); // Include params.id in the dependency array to refetch data when id changes
+  console.log(blogData?.blog_tags.split(","))
+
+  let inputDate = blogData?.published_on;
+  let dateObj = new Date(inputDate);
+  let day = dateObj.getDate();
+  let month = dateObj.toLocaleString('default', { month: 'short' });
+  let year = dateObj.getFullYear();
+
+  let formattedDate = `${day} ${month} ${year}`;
 
   // Render the component
   return (
     <>
-  
-    <div className="min-h-screen bg-rose-100 flex items-center justify-center">
-    
-      <div className="max-w-4xl w-full">
-        {blogData ? (
-          <div>
-            <h2 className=" mb-2 text-center blogstyle">{blogData.title}</h2>
-          <ReactMarkdown className="prose pt-3  text-black blogbody p-8 rounded-md shadow-xl z-10">{blogData.blog_body}</ReactMarkdown>
-          </div>
-        ) : (
-          <p>Loading...</p>
-        )}
+
+      <div className="mt-14 pb-10 min-h-screen flex items-center justify-center">
+        <div className="w-full">
+          {blogData ? (
+            <div >
+              <section className="w-full bg-[#461461] mb-10">
+                <div className=" flex flex-col text-white py-6 mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg lg:pt-16">
+                  <div className="flex flex-wrap gap-2">
+                    {blogData?.blog_tags.split(",").map((data, index) => {
+                      return (
+                        <span key={index} className="px-2 py-1 bg-purple-600/40 rounded-full">{data}</span>
+                      )
+                    }
+                    )}
+                  </div>
+                  <div className="text-xl text-white font-bold font-sans mt-4">
+                    {blogData.title}
+                  </div>
+                  <div className="text-xl text-gray-300 font-thin font-sans mt-2">
+                    {blogData.blog_description}
+                  </div>
+                  <div className="text-xl text-purple-200/90 font-medium font-sans mt-6 flex justify-between items-center">
+                    <span>{blogData.blog_authors}</span><span className=" border-l-4 pl-2 border-purple-200/90">{formattedDate}</span>
+                  </div>
+                </div>
+              </section>
+              <ReactMarkdown className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{blogData.blog_body}</ReactMarkdown>
+            </div>
+          ) : (
+            <p>Loading...</p>
+          )}
+        </div>
       </div>
-    </div>
-    <Footer /></>
+    </>
   );
 };
 
diff --git a/src/app/blogs/page.js b/src/app/blogs/page.js
index d021ced..f403677 100644
--- a/src/app/blogs/page.js
+++ b/src/app/blogs/page.js
@@ -1,35 +1,3 @@
-/*import BlogCard from './Blogcard';
-import Navbar from "@/components/Navbar/Navbar";
-
-const BlogList = () => {
-  return (
-    <div>
-     <Navbar />
-     <BlogCard 
-       title="React Blogging App"
-       blogger="John Doe"
-       Img="./blog.png"
-       blogLink="https://example.com/blog-post"
-       description="A simple React.js app for creating and managing blog posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-     />
-     <BlogCard 
-       title="React Blogging App"
-       blogger="John Doe"
-       blogLink="https://example.com/blog-post"
-       description="A simple React.js app for creating and managing blog posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-     />
-     <BlogCard 
-       title="React Blogging App"
-       blogger="John Doe"
-       blogLink="https://example.com/blog-post"
-       description="A simple React.js app for creating and managing blog posts. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-     />
-     </div>
-  );
-};
-
-export default BlogList;*/
-
 "use client"
 import React, { useEffect, useState } from 'react';
 import BlogCard from './Blogcard';
@@ -75,22 +43,29 @@ const BlogList = () => {
 
   return (
     <>
-      <div className='mt-4 py-4 p-5 md:p-10 md:py-4 grid gap-5 grid-cols-1 md:grid-cols-2 xl:p-20 xl:py-4 lg:grid-cols-3 2xl:grid-cols-4'>
-        {blogs.map((blog, index) => {
-          return (
-            <>
-              <BlogCard
-                key={index}
-                title={blog.blog_title}
-                authors={blog.blog_authors}
-                img={blog.blog_img_url}
-                description={blog.blog_description}
-                slug={blog.blog_slug}
-                date={blog.published_on}
-              />
-            </>
-          )
-        })}
+      <div className='mt-14 min-h-[90vh]'>
+        <section className="w-full bg-[#461461]">
+          <div className=" text-4xl py-16 flex justify-center text-white mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg">
+            Blog
+          </div>
+        </section>
+        <section className='py-6 p-5 md:p-8 grid justify-items-center gap-5 grid-cols-1 md:grid-cols-2 xl:px-20 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-max'>
+          {blogs.map((blog, index) => {
+            return (
+              <>
+                <BlogCard
+                  key={index}
+                  title={blog.blog_title}
+                  authors={blog.blog_authors}
+                  img={blog.blog_img_url}
+                  description={blog.blog_description}
+                  slug={blog.meta.slug}
+                  date={blog.published_on}
+                />
+              </>
+            )
+          })}
+        </section>
       </div>
     </>
   );
diff --git a/src/app/events/Eventcard.module.css b/src/app/events/Eventcard.module.css
index 008fa8f..ab2bbfc 100644
--- a/src/app/events/Eventcard.module.css
+++ b/src/app/events/Eventcard.module.css
@@ -16,7 +16,7 @@
 }
 
 .blogCard {
-  width: 350px;
+  width: 320px;
   height: fit-content;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
@@ -29,6 +29,12 @@
   height: 100%;
 }
 
+@media screen and (max-width: 350px) {
+  .blogCard {
+    width: 100%;
+  }
+}
+
 .blogCcard:hover {
   transform: scale(1.02);
 }
diff --git a/src/app/events/[blogid]/page.js b/src/app/events/[blogid]/page.js
deleted file mode 100644
index ff4d631..0000000
--- a/src/app/events/[blogid]/page.js
+++ /dev/null
@@ -1,63 +0,0 @@
-// Import necessary modules
-"use client"
-import { useEffect, useState } from "react";
-import Navbar from "@/components/Navbar/Navbar";
-import Footer from "@/components/footer";
-import ReactMarkdown from "react-markdown";
-import './styleblog.css'
-// Import Tailwind CSS classes
-import 'tailwindcss/tailwind.css';
-
-// Component definition
-const BlogId = ({ params }) => {
-  console.log(params.blogid)
-  // State to store the fetched data
-  const [blogData, setBlogData] = useState(null);
-
-  // Effect to fetch data when the component mounts
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        // Fetch data from the API
-        const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=blog.BlogPage&fields=*');
-        const data = await response.json();
-        console.log("check",data);
-        // Find the blog post with the matching id
-        const matchingBlog = data.items.find(blog => blog.id === parseInt(params.blogid));
-        
-        // Update the state with the matching blog data
-        setBlogData(matchingBlog);
-        console.log("blog :",matchingBlog.blog_img_url)
-
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      }
-    };
-
-    // Call the fetchData function
-    fetchData();
-  }, [params.id]); // Include params.id in the dependency array to refetch data when id changes
-
-  // Render the component
-  return (
-    <>
-  
-    <div className="min-h-screen bg-rose-100 flex items-center justify-center">
-    
-      <div className="max-w-4xl w-full">
-        {blogData ? (
-          <div>
-            <h2 className=" mb-2 text-center blogstyle">{blogData.title}</h2>
-          <ReactMarkdown className="prose pt-3  text-black blogbody p-8 rounded-md shadow-xl z-10">{blogData.blog_body}</ReactMarkdown>
-          </div>
-        ) : (
-          <p>Loading...</p>
-        )}
-      </div>
-    </div>
-    <Footer /></>
-  );
-};
-
-// Export the component
-export default BlogId;
diff --git a/src/app/events/[eventid]/page.js b/src/app/events/[eventid]/page.js
new file mode 100644
index 0000000..910d194
--- /dev/null
+++ b/src/app/events/[eventid]/page.js
@@ -0,0 +1,88 @@
+// Import necessary modules
+"use client"
+import { useEffect, useState } from "react";
+import Navbar from "@/components/Navbar/Navbar";
+import Footer from "@/components/footer";
+import ReactMarkdown from "react-markdown";
+import './styleblog.css'
+// Import Tailwind CSS classes
+import 'tailwindcss/tailwind.css';
+
+// Component definition
+const BlogId = ({ params }) => {
+  console.log(params.blogid)
+  // State to store the fetched data
+  const [eventData, setEventData] = useState(null);
+
+  // Effect to fetch data when the component mounts
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Fetch data from the API
+        const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=events.EventsPage&fields=*');
+        const data = await response.json();
+        // Find the blog post with the matching id
+        const matchingBlog = data.items.find(blog => blog?.meta.slug === params.eventid);
+        // Update the state with the matching blog data
+        setEventData(matchingBlog);
+
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    // Call the fetchData function
+    fetchData();
+  }, [params.blogid]); // Include params.id in the dependency array to refetch data when id changes
+  console.log(eventData?.event_tags.split(","))
+
+  let inputDate = eventData?.event_date;
+  let dateObj = new Date(inputDate);
+  let day = dateObj.getDate();
+  let month = dateObj.toLocaleString('default', { month: 'short' });
+  let year = dateObj.getFullYear();
+
+  let formattedDate = `${day} ${month} ${year}`;
+
+  // Render the component
+  return (
+    <>
+
+      <div className="mt-14 pb-10 min-h-screen flex items-center justify-center">
+        <div className="w-full">
+          {eventData ? (
+            <div >
+              <section className="w-full bg-[#461461] mb-10">
+                <div className=" flex flex-col text-white py-6 mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg lg:pt-10">
+                  <div className="flex flex-wrap gap-2">
+                    {eventData?.event_tags.split(",").map((data, index) => {
+                      return (
+                        <span key={index} className="px-2 py-1 bg-purple-600/40 rounded-full">{data}</span>
+                      )
+                    }
+                    )}
+                  </div>
+                  <div className="text-xl text-white font-bold font-sans mt-4">
+                    {eventData.title}
+                  </div>
+                  <div className="rounded-lg overflow-hidden w-[100%] mx-auto mt-6">
+                    <img src={eventData.event_img_url}/>
+                  </div>
+                  <div className="text-xl text-purple-200/90 font-medium font-sans mt-6 flex justify-between items-center">
+                    <span>{eventData.event_organizer}</span><span className=" border-l-4 pl-2 border-purple-200/90">{formattedDate}</span>
+                  </div>
+                </div>
+              </section>
+              <ReactMarkdown className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{eventData.event_body}</ReactMarkdown>
+            </div>
+          ) : (
+            <p>Loading...</p>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+// Export the component
+export default BlogId;
diff --git a/src/app/events/[blogid]/styleblog.css b/src/app/events/[eventid]/styleblog.css
similarity index 100%
rename from src/app/events/[blogid]/styleblog.css
rename to src/app/events/[eventid]/styleblog.css
diff --git a/src/app/events/eventCard.js b/src/app/events/eventCard.js
index 6627fac..fa0b2d7 100644
--- a/src/app/events/eventCard.js
+++ b/src/app/events/eventCard.js
@@ -10,17 +10,19 @@ const BlogCard = ({ title, img, description, slug, date }) => {
   // const truncatedDescription = description.length > 100 ? `${description.slice(0, 100)}...` : description;
 
   return (
-    <div className={styles.blogCard}>
-      <div className={styles.blogImage}>
-        <img className='w-full object-cover h-52' src={img} alt={title} />
+    <Link href={`/events/${slug}`} >
+      <div className={styles.blogCard}>
+        <div className={styles.blogImage}>
+          <img className='w-full object-cover h-52' src={img} alt={title} />
+        </div>
+        <div className={styles.blogDetails}>
+          <h2 className={`font-semibold ${styles.head}`}>{title}</h2>
+          <p className='font-medium text-sm mb-1 flex gap-2 items-center'><CiCalendar /> {" "} <span>{date}</span></p>
+          <p className='font-medium text-sm mb-1 flex gap-2 items-center'><IoLocationOutline /> {" "} <span>SJA</span></p>
+          <p className={styles.para}>{description.slice(0, 150) + "... see more"}</p>
+        </div>
       </div>
-      <div className={styles.blogDetails}>
-        <h2 className={`font-semibold ${styles.head}`}>{title}</h2>
-        <p className='font-medium text-sm mb-1 flex gap-2 items-center'><CiCalendar /> {" "} <span>{date}</span></p>
-        <p className='font-medium text-sm mb-1 flex gap-2 items-center'><IoLocationOutline /> {" "} <span>SJA</span></p>
-        <p className={styles.para}>{description.slice(0, 150) + "... see more"}</p>
-      </div>
-    </div>
+    </Link>
   );
 };
 
diff --git a/src/app/events/page.js b/src/app/events/page.js
index b634039..b9dfc1f 100644
--- a/src/app/events/page.js
+++ b/src/app/events/page.js
@@ -1,18 +1,8 @@
 "use client"
 import React, { useEffect, useState } from 'react';
 import BlogCard from './eventCard';
-import Footer from '@/components/footer';
-import Navbar from "@/components/Navbar/Navbar";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
 
-const BlogList = () => {
+const EventList = () => {
   const [blogs, setBlogs] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
   const blogsPerPage = 6;
@@ -43,25 +33,32 @@ const BlogList = () => {
 
   return (
     <>
-      <div className='mt-4 py-4 p-5 md:p-10 md:py-4 grid gap-5 grid-cols-1 md:grid-cols-2 xl:p-20 xl:py-4 lg:grid-cols-3 2xl:grid-cols-4'>
-        {blogs.map((blog, index) => {
-          return (
-            <>
-              <BlogCard
-                key={index}
-                title={blog.title}
-                organizer={blog.event_organizer}
-                img="https://images.unsplash.com/photo-1549451371-64aa98a6f660?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                description="A fun-filled event to bring out the gamer in you and compete to be the best gamer out there. Register in teams of 5 or individually and showcase your gaming talent! Individual registrants will be teamed up with other individual registrants to form teams of 5."
-                slug={blog.event_slug}
-                date={blog.event_date}
-              />
-            </>
-          )
-        })}
+      <div className='mt-14 min-h-[90vh]'>
+        <section className="w-full bg-[#461461]">
+          <div className=" text-4xl py-16 flex justify-center text-white mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg">
+            Events
+          </div>
+        </section>
+        <section className='py-6 p-5 md:p-8 grid justify-items-center gap-5 grid-cols-1 md:grid-cols-2 xl:px-20 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-max'>
+          {blogs.map((blog, index) => {
+            return (
+              <>
+                <BlogCard
+                  key={index}
+                  title={blog.title}
+                  organizer={blog.event_organizer}
+                  img="https://images.unsplash.com/photo-1549451371-64aa98a6f660?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                  description="A fun-filled event to bring out the gamer in you and compete to be the best gamer out there. Register in teams of 5 or individually and showcase your gaming talent! Individual registrants will be teamed up with other individual registrants to form teams of 5."
+                  slug={blog.meta.slug}
+                  date={blog.event_date}
+                />
+              </>
+            )
+          })}
+        </section>
       </div>
     </>
   );
 };
 
-export default BlogList;
+export default EventList;
diff --git a/src/app/globals.css b/src/app/globals.css
index 61c7511..e717c0e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,7 +7,7 @@
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
   --header-height: 1rem;
-  --first-color: hsl(28, 88%, 62%);
+  --first-color: hsl(4, 50%, 21%);
   --title-color: hsl(290, 66%, 39%);
   --text-color: hsl(291, 52%, 37%);
   --body-color: hsl(0, 0%, 6%);
diff --git a/src/app/iet/page.js b/src/app/iet/page.js
index d4aa1e5..b4dc40b 100644
--- a/src/app/iet/page.js
+++ b/src/app/iet/page.js
@@ -15,7 +15,6 @@ export default function Home() {
             <Hero />
             <About />
             <SIG />
-            <Footer />
         </>
     )
 }
\ No newline at end of file
diff --git a/src/app/layout.js b/src/app/layout.js
index 6605fbb..eb232af 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,6 +1,7 @@
 import Navbar from '@/components/Navbar/Navbar'
 import './globals.css'
 import { Inter } from 'next/font/google'
+import Footer from '@/components/footer'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -16,6 +17,7 @@ export default function RootLayout({ children }) {
       <body className={inter.className}>
         <Navbar />
         {children}
+        <Footer/>
       </body>
     </html>
   )
diff --git a/src/app/page.js b/src/app/page.js
index 9e78d30..fb83e87 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -13,7 +13,6 @@ export default function Home() {
             <Hero />
             <About />
             <SIG />
-            <Footer />
         </>
     )
 }
\ No newline at end of file
diff --git a/src/app/team/man-avatar-clipart-illustration-free-png.webp b/src/app/teams/man-avatar-clipart-illustration-free-png.webp
similarity index 100%
rename from src/app/team/man-avatar-clipart-illustration-free-png.webp
rename to src/app/teams/man-avatar-clipart-illustration-free-png.webp
diff --git a/src/app/team/page.js b/src/app/teams/page.js
similarity index 98%
rename from src/app/team/page.js
rename to src/app/teams/page.js
index 5e893fb..a36ecd4 100644
--- a/src/app/team/page.js
+++ b/src/app/teams/page.js
@@ -107,7 +107,7 @@ const Home = () => {
 
   return (
     <>
-      <div className="p-0 m-0 box-border font-Poppins">
+      <div className="p-0 mt-14 m-0 box-border font-Poppins">
         <br></br>
         <h1 className='text-center mb-4 text-3xl font-semibold'>Our Team</h1>
         <div className="bg-b5179e-700 flex min-h-[70vh] justify-center">
@@ -152,7 +152,8 @@ const Home = () => {
             ))}
           </div>
         </div>
-      </div><Footer /></>
+      </div>
+      </>
   );
 };
 
diff --git a/src/app/team/styles.css b/src/app/teams/styles.css
similarity index 100%
rename from src/app/team/styles.css
rename to src/app/teams/styles.css
diff --git a/src/app/team/th.jpeg b/src/app/teams/th.jpeg
similarity index 100%
rename from src/app/team/th.jpeg
rename to src/app/teams/th.jpeg
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
index 3360744..ee5bfc3 100644
--- a/src/components/Navbar/Navbar.js
+++ b/src/components/Navbar/Navbar.js
@@ -77,12 +77,17 @@ const Navbar = () => {
                         </div>
                     </div>
                 ) : (
-                    <ul className={`${isMobile ? styles.nav__list : styles.nav__list__web}`}>
+                    <ul className={` ${isMobile ? styles.nav__list : styles.nav__list__web}`}>
                         <li className={styles.nav__item}>
                             <Link href="/" className={styles.nav__link} onClick={closeMobileMenu}>
                                 Home
                             </Link>
                         </li>
+                        <li className={styles.nav__item}>
+                            <Link href="/teams" className={styles.nav__link} onClick={closeMobileMenu}>
+                                Team
+                            </Link>
+                        </li>
                         <li className={styles.nav__item}>
                             <Link href="/blogs" className={styles.nav__link} onClick={closeMobileMenu}>
                                 Blog
diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css
index e869f15..62ff2a9 100644
--- a/src/components/Navbar/Navbar.module.css
+++ b/src/components/Navbar/Navbar.module.css
@@ -7,14 +7,21 @@
   z-index: var(--z-fixed);
 }
 
+@media screen and (min-width: 1150px) {
+  .header {
+    background-color: transparent;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+}
+
 .nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   height: var(--header-height);
-  margin: 1rem;
-  margin-top: 1.5rem;
+  margin: 2rem 3rem;
 }
 
 .nav__logo {
@@ -53,8 +60,27 @@
   transition: color 0.4s;
 }
 
-.nav__link:hover {
-  color: var(--first-color);
+.nav__link {
+  display: inline-block;
+  position: relative;
+}
+
+.nav__link:hover::after {
+  transform-origin: bottom left;
+  transform: scaleX(1);
+}
+
+.nav__link::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--first-color);
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
 }
 
 .nav__close {
@@ -83,9 +109,9 @@
     background-color: hsla(0, 0%, 6%, 0.2);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
-    width: 150px;
+    width: 200px;
     height: 100%;
     padding: 6rem 3rem 0;
     transition: right 0.4s;
   }
- }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/ProjectCard.js b/src/components/ProjectCard.js
index 78bf72f..135de51 100644
--- a/src/components/ProjectCard.js
+++ b/src/components/ProjectCard.js
@@ -4,13 +4,19 @@ import Link from 'next/link'
 
 const ProjectCard = ({ project }) => {
   return (
-    <div className="w-[350px] flex justify-between flex-col h-full mx-auto p-6 bg-gray-50 border border-gray-200 rounded-lg shadow relative hover:bg-gray-100 transition duration-300">
-      <Link href={`/projects/${project.id}`} className='h-full'>
-        <h6 className="mb-2 text-md font-semibold text-fuchsia-900">{project.project_sig}</h6>
-        <h5 className="mb-2 text-2xl font-semibold tracking-tight text-black">{project.title}</h5>
-        <p className="mb-3 font-normal text-gray-700">({project.project_description.slice(0, 150) + "... see more"})</p>
-      </Link>
-      <a href={project.github_url} className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-teal-600 rounded-lg hover:bg-teal-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+    <div className="w-full xs:w-[320px] overflow-hidden flex justify-between flex-col h-full mx-auto bg-gray-50 rounded-lg shadow relative hover:bg-gray-100 transition duration-300">
+      <div className="rounded-t-4">
+        <img className='w-full object-cover h-52' src={project.project_img_url} alt={project.title} />
+      </div>
+      <div className='p-6 pb-0'>
+        <Link href={`/projects/${project.id}`} className='h-full'>
+          <h6 className="mb-2 text-md font-semibold text-fuchsia-900">{project.project_sig}</h6>
+          <h5 className="mb-2 text-2xl font-semibold tracking-tight text-black">{project.title}</h5>
+          <p className="mb-3 font-normal text-gray-700">({project.project_description.slice(0, 150) + "... see more"})</p>
+        </Link>
+        
+      </div>
+      <a href={project.github_url} className="inline-flex items-center px-3 py-2 mb-3 mx-3 text-sm font-medium text-center text-white bg-teal-600 rounded-lg hover:bg-teal-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-github mr-2" viewBox="0 0 16 16">
           <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
         </svg> Repository URL
diff --git a/src/components/ProjectsPage.js b/src/components/ProjectsPage.js
index 2c74427..6faf24c 100644
--- a/src/components/ProjectsPage.js
+++ b/src/components/ProjectsPage.js
@@ -17,21 +17,26 @@ const ProjectsPage = ({ projects }) => {
   const currentProjects = projects.slice(indexOfFirstProject, indexOfLastProject);
 
   return (
-
-
-    <div className='mt-4 py-4 p-5 md:p-10 md:py-4 grid gap-5 grid-cols-1 md:grid-cols-2 xl:p-20 xl:py-4 lg:grid-cols-3 2xl:grid-cols-4' >
-      {currentProjects.map((project) => {
-        return (
-          <>
-            <div className="row h-full" key={project.id}>
-              <div className="col-md-12 h-full">
-                <ProjectCard project={project} />
+    <main className='mt-14 min-h-[90vh]'>
+      <section className="w-full bg-[#461461]">
+        <div className=" text-4xl py-16 flex justify-center text-white mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg">
+          Events
+        </div>
+      </section>
+      <div className='py-6 p-5 md:p-8 grid justify-items-center gap-5 grid-cols-1 md:grid-cols-2 xl:px-20 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-max' >
+        {currentProjects.map((project) => {
+          return (
+            <>
+              <div className="row h-full" key={project.id}>
+                <div className="col-md-12 h-full">
+                  <ProjectCard project={project} />
+                </div>
               </div>
-            </div>
-          </>
-        )
-      })}
-    </div>
+            </>
+          )
+        })}
+      </div>
+    </main>
   );
 };
 
diff --git a/src/components/about.js b/src/components/about.js
index 50e535e..543b6b7 100644
--- a/src/components/about.js
+++ b/src/components/about.js
@@ -1,9 +1,9 @@
 export default function About() {
     return (
         <main className="flex flex-col w-full">
-            <section className="bg-[#faf3fd] py-3 flex gap-5 items-center justify-center bg-no-repeat">
+            {/* <section className="bg-[#faf3fd] py-3 flex gap-5 items-center justify-center bg-no-repeat">
                 <span>IET</span> <span>CodeBuddy</span>
-            </section>
+            </section> */}
             <section className="bg-[#280c33] bg-[url('/bg.png')] bg-cover h-full p-12">
                 <div className="flex flex-col items-center justify-center mt-2">
                     <h1 className=" text-white flex items-center gap-3 text-3xl font-bold"><span className="bg-[white] w-8 h-1 block">{" "}</span> ABOUT US<span className="bg-[white] w-8 h-1 block">{" "}</span></h1>
diff --git a/src/components/hero.js b/src/components/hero.js
index 08af428..da50f0a 100644
--- a/src/components/hero.js
+++ b/src/components/hero.js
@@ -4,10 +4,10 @@ import Typewriter from 'typewriter-effect';
 export default function Hero() {
     return (
         <>
-            <main className=" flex justify-center items-center min-h-[50vh] sm:min-h-[80vh] mt-14 sm:mt-0 bg-white flex-col">
+            <main className=" flex justify-center items-center min-h-[80vh] md:min-h-[90vh] mt-14 sm:mt-0 flex-col ">
                 {/* <ReactCanvasNest className='canvasNest' config={{ pointColor: ' 86, 12, 125 ', count: 111 }} style={{ zIndex: 99 }} /> */}
-                <div className="flex items-center sm:justify-between w-full px-10 flex-col-reverse sm:flex-row">
-                    <div className="flex flex-col flex-auto w-full sm:w-1/2 justify-center">
+                <div className="flex items-center sm:justify-between w-full px-10 flex-col-reverse md:flex-row">
+                    <div className="flex flex-col flex-auto w-full md:w-1/2 justify-center">
                         <h1 className="text-black text-4xl md:text-5xl font-bold">Your potential.<br /> Our passion.<br />
                         </h1>
                         <h1 className=' text-[#631c6f] text-4xl md:text-5xl font-bold mb-4'>
@@ -22,7 +22,7 @@ export default function Hero() {
                         <h2 className=" text-2xl text-[#484848] mb-12 ">We are a team of motivated students pledged to promote technological growth accross the globe.
                         </h2>
                     </div>
-                    <div className="hidden sm:flex flex-col w-1/2 justify-center">
+                    <div className="hidden md:flex w-1/2 justify-center">
                         <img src="/iet-logo.png" alt="iet-logo" className="h-auto mb-4" />
                     </div>
                 </div>
diff --git a/src/components/sig.js b/src/components/sig.js
index 8e982de..8ac69ac 100644
--- a/src/components/sig.js
+++ b/src/components/sig.js
@@ -1,11 +1,11 @@
 export default function SIG() {
     return (
-        <main className="bg-[#fdf7fe] p-12">
+        <main className="bg-[#fdf7fe] p-14 px-4 sm:px-14">
             <div className="flex flex-col items-center justify-center">
                 <h1 className="text-3xl flex gap-3 items-center font-bold text-[#222222]"><span className="bg-[#631c6f] w-8 h-1 block">{" "}</span>Our SIGs<span className="bg-[#631c6f] w-8 h-1 block">{" "}</span></h1>
-                <p className="mt-3 text-[#222222]"> IET NITK consists of six different Special Interest Groups</p>
+                <p className="mt-3 text-[#222222] text-center"> IET NITK consists of six different Special Interest Groups</p>
             </div>
-            <div className=" grid grid-cols-3 grid-rows-2 place-items-center gap-6 w-3/4 m-auto mt-14">
+            <div className=" grid grid-cols-2 sm:grid-cols-3 grid-rows-2 place-items-center gap-6 w-full sm:w-3/4 m-auto mt-14">
                 <div className="flex flex-col items-center justify-center">
                     <img src="/cipher.webp" alt="cipher" className="h-[100px] mb-4" />
                     <p className=" text-center text-[#222222]">Cipher SIG brings together people interested in Computer Science and Information Technology. </p>
diff --git a/tailwind.config.js b/tailwind.config.js
index 5a6e6d0..876c611 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,15 @@ module.exports = {
   ],
   prefix: "",
   theme: {
+    screens: {
+      "2xl": "1400px",
+      "xs": "450px",
+      "sm": "640px",
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px'
+    },
     container: {
       center: true,
       padding: "2rem",