Added Fade In to Blogs Cover Poster, Some Fixes

src/app/blogs/components/blogCard.jsx

@@ -44,7 +44,7 @@ export default function BlogCard(props) {
                     </Link>
                     <div className={`blogs-data ${montserratFont.className}`}>
                         <hr />
-                        <div className="flex items-center justify-between mt-2">
+                        <div className="flex items-center justify-between gap-2 mt-2">
                             <div className="flex items-center gap-2 ml-4">
                                 <Avatar className="h-8 w-8">
                                     <AvatarImage src="/placeholder-user.jpg" />

src/app/blogs/components/blogCoverPoster.jsx

@@ -3,8 +3,12 @@ import Image from 'next/image';
 export default function Blogs() {
     const blogCoverImage = "/blog_cover_poster.png";
     return(
-        <div className='lg:100vh w-full'>
-            <img src={blogCoverImage} className='lg:100vh w-full' alt="Blog cover poster" />
+        <div className='w-full'>
+            <img src={blogCoverImage} 
+            style={
+                {animation: "pulse-poster 0.5s  cubic-bezier(0.4, 0, 0.6, 1) 1"}
+            }
+            className='w-full' alt="Blog cover poster" />
         </div>
     )
 }

src/app/blogs/page.jsx

@@ -82,8 +82,8 @@ export default function Blogs() {
 
     return (
         <>
-        <div className='flex flex-col items-center'>
-            <BlogPosterCover />      
+        <div className='flex flex-col items-center '>
+            <BlogPosterCover/>      
             <div className="blogs-search-div">
                 <input type="text" value={searchInputValue} className={`${montserratFont.className} blogs-search-input`}
                 placeholder='Search...'

src/components/footer.jsx

@@ -25,7 +25,7 @@ function Footer() {
                 <hr className="col-span-1 lg:col-span-12 footer-divider-1"/>
                 <div className="col-span-1 lg:col-span-4">
                     <div className="footer-cc-logo">
-                        <Image className="footer-cc-logo-img " src="/cc-logo.png" width={512} height={512} alt="IIITV Logo"/>
+                        <Image className="footer-cc-logo-img " src="/iiitv-logo.svg" width={512} height={512} alt="IIITV Logo"/>
                         <div>
                             <p className="footer-cc-logo-title">Coding Club</p> 
                             <p className="footer-cc-logo-subtitle">Community</p>
@@ -80,16 +80,18 @@ function Footer() {
             <div className={`${montserratFont.className} footer-container-2`}>
                 <div className="footer-dot-container">
                     <p>Designed by DOT</p>
-                    <div className="dot-icon">
-                        <div /><div /><div /><div /><div /><div /><div /><div /><div />
-                    </div>
+                    <Image
+                        className="dot-logo"
+                        src="/dot-logo.svg"
+                        alt="IIITV Logo" width={512} height={512}
+                    />
                 </div>
                 <hr className="footer-container-2-divider"></hr>
                 <div className="footer-cc-container">
                     <p>Developed by Coding Club</p>
                     <Image
                         className="footer-cc-logo-img-2"
-                        src="/cc-logo.png"
+                        src="/iiitv-logo.svg"
                         alt="IIITV Logo" width={512} height={512}
                     />
                 </div>

src/components/navbar.jsx

@@ -3,6 +3,9 @@ import React, { use, useState } from "react";
 import "@/styles/navbar.css";   
 import Link from "next/link";
 import Image from "next/image";
+import { Noto_Sans } from "next/font/google";
+
+const notoSansFont = Noto_Sans({ weight: ["300","400"], subsets: ["latin"] });
 
 function Navbar() {
     const [hiddenMenu,setHiddenMenu] = useState(true);
@@ -11,28 +14,28 @@ function Navbar() {
     }
 
     const eventsLink = "/events";
-    const projectsLink = "/projects";
+    const blogsLink = "/blogs";
     const membersLink = "/members";
     const contactUsLink = "/contact_us";
 
     return (
         <>
             <div id="pseudo"></div>
             <div className="navbar">
-                <Link href="/" className="logo-container" prefetch={false}>
-                    <Image className="logo-img"  src="/cc-logo.png" alt="IIITV Logo" height={512} width={512}/>
+                <Link href="/" className={`logo-container ${notoSansFont.className}`} prefetch={false}>
+                    <Image className="logo-img"  src="/iiitv-logo.svg" alt="IIITV Logo" height={512} width={512}/>
                     <div className="logo-title-container">
                         <p className="logo-title">Coding Club</p>
                         <p className="logo-subtitle">Community</p>
                     </div>
                 </Link>
-                <div className="menu-container">
+                <div className={`menu-container ${notoSansFont.className}`}>
                     <Link href={eventsLink} className="text-primary" prefetch={false}>Events</Link>
-                    <Link href={projectsLink} className="text-primary" prefetch={false} >Projects</Link>
+                    <Link href={blogsLink} className="text-primary" prefetch={false} >Blogs</Link>
                     <Link href={membersLink} className="text-primary" prefetch={false}>Members</Link>
                     <Link href={contactUsLink} className="text-primary" prefetch={false}>Contact Us</Link>
                 </div>
-                <div className="mobile-menu">
+                <div className={`mobile-menu ${notoSansFont.className}`}>
                     <div className="menu-icon">
                         <input type="checkbox" id="hi"  hidden onChange={MenuToggle} value={!hiddenMenu} />
                         <label className="menu" htmlFor="hi">
@@ -46,7 +49,7 @@ function Navbar() {
                     <div className="mobile-menu-container" style={{display : (hiddenMenu ? "none" : "") }}>
                         <div className="mobile-menu-container2">
                             <p><Link href={eventsLink} className="text-primary" prefetch={false}>Events </Link></p>
-                            <p><Link href={projectsLink} className="text-primary" prefetch={false}>Projects </Link></p>
+                            <p><Link href={blogsLink} className="text-primary" prefetch={false}>Blogs </Link></p>
                             <p><Link href={membersLink} className="text-primary" prefetch={false}>Members </Link></p>
                             <p><Link href={contactUsLink} className="text-primary" prefetch={false}>Contact Us </Link></p>
                         </div>

src/styles/blogs.css

@@ -1,4 +1,11 @@
-
+@keyframes pulse-poster{
+    0% {
+        filter: saturate(0%) brightness(0%);
+    }
+    100%{
+         filter: saturate(100%) brightness(100%);
+    }
+}
 .blogs-div{
     width: 100%;
     display: flex;
@@ -8,7 +15,6 @@
 .blogs-container{
     width: 95%;
 }
-
 .blogs-search-div{
     position: relative;
     width: max-content;
@@ -119,11 +125,12 @@
 .show-more-button{
 
     box-sizing: border-box;
-    width: 400px;
-    height: 60px;
+    width: 300px;
+    height: 45px;
 
-    background-color : color-mix(in srgb, var(--primary) 10%, transparent);
-    box-shadow: #291f24 1px 1px 15px;
+    background-color : color-mix(in srgb, var(--primary) 5%, transparent);
+    box-shadow:  color-mix(in srgb, #fff 5%, transparent) 1px 1px 15px;
+    border: solid color-mix(in srgb, var(--primary) 20%, transparent) 1px;
     border-radius: 43px;
 
     transition: 0.5s;
@@ -147,6 +154,5 @@
 
         box-sizing: border-box;
         width: 200px;
-        height: 50px;
     }
 }

src/styles/footer.css

@@ -3,9 +3,9 @@
 }
 .footer-divider-1{  
     width: 90%;
-    height: 2.5px;
+    height: 1px;
     border: none;
-    background-color:  #A49D9D;
+    background-color:  var(--muted-foreground);
     justify-self: center;
     box-shadow: 0px 3.34204px 3.34204px rgba(0, 0, 0, 0.25);
     margin: 25px 0;
@@ -39,7 +39,6 @@
     align-self: flex-end;
     font-weight: 100;
     font-size: 16px;
-    color: #E9E9E9;
     margin: 0 3px;
 }
 
@@ -108,7 +107,8 @@
     font-weight: 300;
     justify-content: center;
     align-items: center;
-    background: linear-gradient(90deg, #201F31 27.6%, #282739 50.91%, #201F31 72.19%);
+    background-color: var(--background);
+    background: linear-gradient(90deg, var(--background) 27.6%, color-mix(in srgb, var(--muted-foreground) 10%, transparent) 50.91%, var(--background) 72.19%);
 
     margin-top: 50px;
 }
@@ -129,15 +129,9 @@
     gap: 5px;
 }
 
-.dot-icon{
-    display: grid;
-    grid-template-columns: repeat(3,6px);
-    grid-template-rows: repeat(3,6px);
-    gap: 2.5px;
-}
-.dot-icon>*{
-    background-color: #E9E9E9;
-    border-radius: 100%;
+.dot-logo{
+    height: 25px;
+    width: 25px;
 }
 .footer-cc-logo-img-2{
     height: 35px;
@@ -231,11 +225,17 @@
         transition: 0.5s ease;
         transform: scale(1.0);
     }
-
+    .footer-container-2>*{
+        font-size: 16px;
+    }
 }
 
 /* Footer Container 2 Divider Responsiveness */
-@media screen and (max-width : 580px){
+@media screen and (max-width : 478px){
+    .footer-container-2{
+        flex-direction: column;
+        padding-top: 5px;
+    }
     .footer-container-2-divider{
         width: 60%;
         height: 2px;
@@ -247,5 +247,15 @@
     .footer-container-2>div>p{
         text-align: center;
     }
+    .footer-container-2>div{
+        margin: 0;
+        padding: 0;
+    }
+    .footer-cc-logo-img-2{
+        height: 25px;
+    }
+    .dot-logo{
+        height: 20px;
+    }
 
 }

src/styles/navbar.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital@0;1&display=swap');
-
 #pseudo{
 	width: 100%;
 	height: 65px;
@@ -49,7 +47,6 @@
 	gap: 0px;
 }
 .logo-title{
-	font-family: "Noto Sans", sans-serif;
 	font-size: 30px;
 	letter-spacing: -0.05em;
 	line-height: 0.9;
@@ -65,7 +62,6 @@
 	display: flex;
 	justify-content: space-evenly;
 	gap: 50px;
-	font-family: "Noto Sans", sans-serif;
 	font-size: 18px;
 }
 
@@ -78,7 +74,8 @@
 	right: 10px;
 	width: 200px;
 	height: 250px;
-	background: var(--secondary);
+	background-color : color-mix(in srgb, var(--background)80%, transparent);
+	backdrop-filter: blur(10px);
 	box-shadow: 5px 5px 4.5px rgba(0, 0, 0, 0.25);
 	border: #ffbade solid 1px;
 	border-radius: 10px;