About page

frontend/public/index.html

@@ -9,13 +9,15 @@
     />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#156c84" />
+    <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;500;600;700&display=swap%22">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&display=swap%22">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

frontend/src/components/cards/Homepage-Slider.js

@@ -30,7 +30,7 @@ const HeadingWithControl = tw.div`flex flex-col items-center sm:items-stretch sm
 const Heading = tw(SectionHeading)``;
 const Controls = tw.div`flex items-center`;
 const ControlButton = styled(PrimaryButtonBase)`
-  ${tw`mt-4 sm:mt-0 first:ml-0 ml-6 rounded-full p-2`}
+  ${tw`mt-4 sm:mt-0 first:ml-0 ml-6 rounded-full p-2 bg-black `}
   svg {
     ${tw`w-6 h-6`}
   }
@@ -54,7 +54,7 @@ const CardImage = styled.div(props => [
 ]);
 
 const TextInfo = tw.div`py-6 flex-1 flex flex-col justify-between sm:px-10 sm:py-6`;
-const TitleReviewContainer = tw.div`flex flex-col sm:flex-row sm:justify-between sm:items-center`;
+const TitleReviewContainer = tw.div`flex flex-col sm:flex-row sm:justify-between sm:items-center text-black font-Philosopher`;
 const Title = tw.h5`text-2xl font-bold`;
 
 const RatingsInfo = styled.div`
@@ -72,14 +72,14 @@ const Rating = tw.span`ml-2 font-bold`;
 const SecondaryInfoContainer = tw.div`flex flex-col sm:flex-row mt-2 sm:mt-4`;
 const IconWithText = tw.div`flex items-center mr-6 my-2 sm:my-0`;
 const IconContainer = styled.div`
-  ${tw`inline-block rounded-full p-2 bg-gray-700 text-gray-100`}
+  ${tw`inline-block rounded-full p-2 bg-black text-gray-100`}
   svg {
     ${tw`w-3 h-3`}
   }
 `;
-const Text = tw.div`ml-2 text-sm font-semibold text-gray-800`;
+const Text = tw.div`ml-2 text-sm font-semibold text-black font-Philosopher `;
 
-const PrimaryButton = tw(PrimaryButtonBase)`mt-auto sm:text-lg rounded-none w-full rounded sm:rounded-none sm:rounded-br-4xl py-3 sm:py-6`;
+const PrimaryButton = tw(PrimaryButtonBase)`mt-auto sm:text-lg rounded-none w-full rounded sm:rounded-none sm:rounded-br-4xl py-3 sm:py-6 bg-black font-Philosopher hocus:bg-white`;
 export default () => {
   // useState is used instead of useRef below because we want to re-render when sliderRef becomes available (not null)
   const [sliderRef, setSliderRef] = useState(null);

frontend/src/components/features/Homepage-Sponsors-Preview.js

@@ -42,7 +42,7 @@ const Card = styled.div`
   }
 
   .title {
-    ${tw`mt-2 font-bold text-xl leading-none text-primary-500`}
+    ${tw`mt-2 font-bold text-xl leading-none text-black`}
   }
 
 `;
@@ -77,7 +77,7 @@ export default () => {
   return (
     <Container>
       <ThreeColumnContainer>
-        <Heading>Our Prime <span tw="text-primary-500">Sponsors</span></Heading>
+        <Heading>Our Prime <span tw="text-black">Sponsors</span></Heading>
         {cards.map((card, i) => (
           <Column key={i}>
             <Card>

frontend/src/components/features/SponsersCard.js

@@ -41,7 +41,7 @@ const Card = styled.div`
   }
 
   .title {
-    ${tw`mt-2 font-bold text-xl leading-none text-primary-500`}
+    ${tw`mt-2 font-Philosopher text-xl leading-none text-black`}
   }
 
   .description {
@@ -79,7 +79,7 @@ export default () => {
     <Container>
       <ThreeColumnContainer>
         <Heading>
-          <span tw="text-secondary-500">TITLE SPONSORS</span>
+          <span tw="text-black">PAST TITLE SPONSORS</span>
         </Heading>
         {cards[0].map((card, i) => (
           <Column key={i}>
@@ -95,7 +95,7 @@ export default () => {
         ))}
 
         <Heading tw="mt-10">
-          <span tw="text-secondary-500">ASSOCIATE SPONSORS</span>
+          <span tw="text-black">PAST ASSOCIATE SPONSORS</span>
         </Heading>
         {cards[1].map((card, i) => (
           <Column key={i}>

frontend/src/components/features/VerticalWithAlternateImageAndText-About.js

@@ -11,7 +11,7 @@ const Container = tw.div`relative`;
 const SingleColumn = tw.div`max-w-screen-xl mx-auto py-20 lg:py-24`;
 
 const HeadingInfoContainer = tw.div`flex flex-col items-center`;
-const HeadingDescription = tw.p`mt-4 font-medium text-gray-600 text-center max-w-sm`;
+const HeadingDescription = tw.p`mt-4 font-medium text-gray-900 text-center max-w-sm`;
 
 const Content = tw.div`mt-16`;
 
@@ -21,13 +21,20 @@ const Card = styled.div(props => [
 ]);
 const Image = styled.div(props => [
   `background-image: url("${props.imageSrc}");`,
-  tw`rounded md:w-1/2 lg:w-5/12 xl:w-1/3 flex-shrink-0 h-80 bg-no-repeat md:bg-contain bg-center mx-4 sm:mx-8 md:mx-4 lg:mx-8`
+  tw`md:w-1/2 lg:w-5/12 xl:w-1/3 flex-shrink-0 h-[calc(20rem/1.2)] bg-no-repeat bg-cover bg-center mx-4 sm:mx-8 md:mx-4 lg:mx-8`, // Add bg-cover
+  // Set a fixed border-radius for all images
+  {
+    borderRadius: props.aspectRatio ? `calc(${props.aspectRatio} * 20px)` : "20px",
+    overflow: "hidden",
+    border: "3px solid black", 
+  },
 ]);
+
 const Details = tw.div`mt-4 md:mt-0 md:max-w-md mx-4 sm:mx-8 md:mx-4 lg:mx-8`;
 const Subtitle = tw.div`font-bold tracking-wide text-secondary-100`;
-const Title = tw.h4`text-3xl font-bold text-gray-900`;
-const Description = tw.p`mt-2 text-sm leading-loose`;
-const LinkAbout = tw.a`inline-block mt-4 text-sm text-primary-500 font-bold cursor-pointer transition duration-300 border-b-2 border-transparent hover:border-primary-500`;
+const Title = tw.h4`text-xl font-bold text-gray-900`;
+const Description = tw.p`mt-2 text-lg leading-loose text-black font-Philosopher`;
+const LinkAbout = tw.a`inline-block mt-4 text-sm text-primary-500 font-bold cursor-pointer transition duration-300 border-b-2 border-transparent hover:border-black text-black`;
 
 const SvgDotPattern1 = tw(
   SvgDotPatternIcon
@@ -45,26 +52,26 @@ const SvgDotPattern4 = tw(
 export default () => {
   const cards = [
     {
-      imageSrc: "https://www.neh.gov/sites/default/files/styles/medium/public/2020-06/Open-Book.jpg?itok=wMg1EBM-",
+      imageSrc: "https://www.pixelstalk.net/wp-content/uploads/2016/06/Book-HD-Wallpapers-download.jpeg",
       // subtitle: "Basic Intro",
       // title: "Brief Introduction",
       description:
-      "Aaftaab, the annual literary festival conducted by IIT Jodhpur, is back, after two long years. It is a celebration of the splendour, diversity, and inclusiveness of literature. It provides for a melting pot of students from different colleges, cultures, and backgrounds and ensures that they will be left spellbound by the mesmerising poets, inspiring authors, enthralling literary discussions, and fun-filled activities, including open mics, book launches, quizzes, and live music performances.",
+      "Aaftaab, IIT Jodhpur's annual literary festival, epitomizes the richness and inclusivity of literature. Bringing together students from diverse colleges and backgrounds, it promises an enchanting experience with captivating poets, motivational authors, engaging literary discussions, and lively events such as open mics, quizzes, and vibrant music performances.",
       // url: "https://timerse.com"
     },
 
     {
-      imageSrc: "https://i.pinimg.com/originals/ea/59/2c/ea592c610178fde4900757153581fe2e.jpg",
-      // subtitle: "what it's all about?",
+      imageSrc: "https://i.pinimg.com/originals/01/b9/a2/01b9a2bc3b729a8ff95c8918270c18b8.jpg",
+      // subtitle: "what it's all about?"
       // title: "Theme",
       description:
-      "The theme of this year’s Aaftaab is Kaleidoscopes: Limitless Iridescence Telestic. It is a marvellous representation of the limitless reach of the festival, which brings together brilliant minds from all around the country and allows them to express themselves, explore the diverse genres and partake in the magnificent celebration of literature.", 
+      "This year's Aaftaab theme, Mosaic, underscores the literary festival's dynamic nature. It depicts literature as a vibrant tapestry, evolving with each participant's contribution, fostering diversity, and creating a living space for literary transformation.",
 
       // url: "https://timerse.com"
     },
 
     {
-      imageSrc: "https://us.123rf.com/450wm/tomertu/tomertu2010/tomertu201000252/157378249-old-feather-quill-ink-pen-with-inkwell-and-old-books-over-wooden-desk-in-front-of-black-wall-backgro.jpg?ver=6",
+      imageSrc: "https://tse4.explicit.bing.net/th?id=OIP.0UDoSnkKZpsROcgnUF9v8gHaDt&pid=Api&P=0&h=220 ",
       // subtitle: "Lit is Hit",
       // title: "Why Lit?",
       description:
@@ -79,7 +86,7 @@ export default () => {
         <HeadingInfoContainer>
           <HeadingTitle>About Aaftaab</HeadingTitle>
           <HeadingDescription>
-            Let's dive into the details of aaftaab 2022.
+            Let's dive into the details of aaftaab 2024.
           </HeadingDescription>
         </HeadingInfoContainer>
 
@@ -92,7 +99,7 @@ export default () => {
                 <Title>{card.title}</Title>
                 <Description>{card.description}</Description>
                 {(i === 2) && <Link to="/events">
-                  <LinkAbout>See Event Details</LinkAbout>
+                  <LinkAbout>See Event Details --&gt; </LinkAbout>
                 </Link>}
               </Details>
             </Card>

frontend/src/components/footers/Home-Footer.js

@@ -12,8 +12,8 @@ import { ReactComponent as DiscordIcon } from "../../images/discord-icon.svg";
 
 import { Link } from "react-router-dom";
 
-const Container = tw(ContainerBase)`bg-gray-900 text-gray-100 -mx-8 -mb-8`
-const Content = tw.div`max-w-screen-xl mx-auto py-20 lg:py-24`;
+const Container = tw(ContainerBase)`bg-black text-gray-100 -mx-8 -mb-8`
+const Content = tw.div`max-w-screen-xl mx-auto py-20 lg:py-24 font-Philosopher`;
 
 const Row = tw.div`flex items-center justify-center flex-col px-8`
 
@@ -32,7 +32,7 @@ const SocialLink = styled.a`
   }
 `;
 
-const CopyrightText = tw.p`text-center mt-10 font-medium tracking-wide text-sm text-gray-600`
+const CopyrightText = tw.p`text-center mt-10 font-Philosopher tracking-wide text-sm text-gray-600`
 export default () => {
   return (
     <Container>
@@ -71,7 +71,7 @@ export default () => {
             </SocialLink>
           </SocialLinksContainer>
           <CopyrightText>
-            &copy; Copyright 2022, IITJ. All Rights Reserved.
+            &copy; Copyright 2024, IITJ. All Rights Reserved.
           </CopyrightText>
         </Row>
       </Content>

frontend/src/components/headers/light.js

@@ -13,6 +13,8 @@ import { userContext } from "App.js";
 const Header = tw.header`
   flex justify-between items-center
   max-w-screen-xl mx-auto
+  font-Philosopher
+  text-black
 `;
 export const NavLinks = tw.div`inline-block`;
 
@@ -22,14 +24,47 @@ export const NavLinks = tw.div`inline-block`;
 export const NavLink = tw.a`
   text-lg my-2 lg:text-sm lg:mx-6 lg:my-0
   font-semibold tracking-wide transition duration-300
-  pb-1 border-b-2 border-transparent hover:border-primary-500 hocus:text-primary-500
+  pb-1 border-b-2 border-transparent hover:border-black hocus:text-black
 `;
 
-export const PrimaryLink = tw(NavLink)`
-  lg:mx-0 lg:px-8 lg:py-3
-  px-4 py-1 rounded bg-primary-500 text-gray-100
-  hocus:bg-primary-700 hocus:text-gray-200 focus:shadow-outline
-  border-b-0
+export const PrimaryLink = styled(NavLink)`
+  ${tw`
+    lg:mx-0 lg:px-8 lg:py-3
+    px-4 py-1 rounded text-black
+    hocus:bg-black hocus:text-black
+    focus:shadow-outline
+    border-b-0
+    relative
+  `}
+
+  background: ${({ loggedIn }) => (loggedIn ? 'linear-gradient(180deg, #000, #000)' : 'linear-gradient(180deg, #000, #000)')};
+  color: ${({ loggedIn }) => (loggedIn ? '#fff' : '#fff')};
+  border: 3px solid transparent; /* Initial border */
+  transition: background 0.3s, color 0.3s;
+
+  &:hover {
+    background: linear-gradient(180deg, #fff, #fff);
+    color: #000;
+    border-color: #000;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(180deg, transparent, #fff);
+      animation: waveAnimation 1s infinite alternate;
+      z-index: -1;
+    }
+  }
+
+  @keyframes waveAnimation {
+    to {
+      transform: scaleY(1.2);
+    }
+  }
 `;
 
 export const LogoLink = styled(NavLink)`
@@ -79,19 +114,19 @@ export default ({
   const defaultLinks = [
     <NavLinks key={1}>
       <Link to="/about">
-        <NavLink>About</NavLink>
+        <NavLink style = {{ color: 'black', fontFamily: 'Philosopher'}}>About</NavLink>
       </Link>
       <Link to="/events">
-        <NavLink>Events</NavLink>
+        <NavLink style = {{ color: 'black', fontFamily: 'Philosopher'}}>Events</NavLink>
       </Link>
       <Link to="/sponsors">
-        <NavLink>Sponsors</NavLink>
+        <NavLink style = {{ color: 'black', fontFamily: 'Philosopher'}}>Sponsors</NavLink>
       </Link>
       <Link to="/team">
-        <NavLink>Team</NavLink>
+        <NavLink style = {{ color: 'black', fontFamily: 'Philosopher'}}>Team</NavLink>
       </Link>
       <Link to="/register">
-        <NavLink>Register</NavLink>
+        <NavLink style = {{ color: 'black', fontFamily: 'Philosopher'}}>Register</NavLink>
       </Link>
 
      {!loggedIn?<Link to="/login">

frontend/src/components/hero/Hero-Section-Homepage.js

@@ -28,18 +28,18 @@ const TwoColumn = tw.div`flex flex-col-reverse lg:flex-row md:items-center max-w
 const LeftColumn = tw.div`relative lg:w-6/12 lg:pr-12 flex-shrink-0 text-center lg:text-left`;
 const RightColumn = tw.div`relative mt-0 mb-12 lg:mt-0 lg:mb-0 flex flex-col justify-center`;
 
-const Heading = tw.h1`font-black text-3xl md:text-5xl leading-snug max-w-3xl`;
-const Paragraph = tw.p`my-5 lg:my-8 text-sm lg:text-base font-semibold text-secondary-600 max-w-lg mx-auto lg:mx-0`;
+const Heading = tw.h1`font-Philosopher text-black md:text-5xl leading-snug max-w-3xl font-medium `;
+const Paragraph = tw.p`my-5 lg:my-8 text-sm lg:text-base font-Philosopher text-black max-w-lg mx-auto lg:mx-0`;
 
 const Actions = tw.div`flex flex-col items-center sm:flex-row justify-center lg:justify-start mt-8`;
-const PrimaryButton = tw.button`font-bold px-8 lg:px-10 py-3 rounded bg-primary-500 text-gray-100 hocus:bg-primary-700 focus:shadow-outline focus:outline-none transition duration-300`;
+const PrimaryButton = tw.button`font-bold px-8 lg:px-10 py-3 rounded bg-black text-gray-100 hocus:bg-gray-700 focus:shadow-outline focus:outline-none transition duration-300`;
 const WatchVideoButton = styled.button`
-  ${tw`mt-4 sm:mt-0 sm:ml-8 flex items-center text-secondary-300 transition duration-300 hocus:text-primary-400 focus:outline-none`}
+  ${tw`mt-4 sm:mt-0 sm:ml-8 flex items-center text-black transition duration-300 hocus:text-gray-700 focus:outline-none`}
   .playIcon {
-    ${tw`stroke-1 w-12 h-12`}
+    ${tw`stroke-1 w-16 h-16`}
   }
   .playText {
-    ${tw`ml-2 font-medium`}
+    ${tw`ml-2 font-medium font-Philosopher text-black text-xl`}
   }
 `;
 

frontend/src/components/misc/Buttons.js

@@ -1,2 +1,2 @@
 import tw from "twin.macro";
-export const PrimaryButton = tw.button`px-8 py-3 font-bold rounded bg-primary-500 text-gray-100 hocus:bg-primary-700 hocus:text-gray-200 focus:shadow-outline focus:outline-none transition duration-300`;
+export const PrimaryButton = tw.button`px-8 py-3 font-bold rounded bg-primary-500 text-gray-100 hocus:bg-black hocus:text-gray-200 focus:shadow-outline focus:outline-none transition duration-300`;

frontend/src/components/misc/Headings.js

@@ -1,4 +1,5 @@
 import tw from "twin.macro";
 
-export const SectionHeading = tw.h2`text-4xl sm:text-5xl font-black tracking-wide text-center`
+export const SectionHeading = tw.h2`
+  text-4xl sm:text-5xl font-black tracking-wide text-center text-black font-Philosopher`;
 export const Subheading = tw.h5`font-bold text-primary-500`

frontend/src/helpers/AnimationRevealPage.js

@@ -6,7 +6,7 @@ import tw from "twin.macro";
 import { motion } from "framer-motion";
 import useInView from "@owaiswiz/use-in-view";
 
-const StyledDiv = tw.div`font-display min-h-screen text-secondary-500 px-1 py-8 sm:px-4 lg:px-8 bg-img1 overflow-hidden`;
+const StyledDiv = tw.div`font-display min-h-screen text-secondary-500 px-1 py-8 sm:px-4 lg:px-8 bg-[#ffffff] overflow-hidden`;
 function AnimationReveal({ disabled, children }) {
   if (disabled) {
     return <>{children}</>;

frontend/src/tailwind.config.js

@@ -203,7 +203,7 @@ module.exports = {
     },
     borderColor: theme => ({
       ...theme('colors'),
-      DEFAULT: theme('colors.gray.300', 'currentColor'),
+      DEFAULT: theme('colors.black', 'currentColor'),
     }),
     borderRadius: {
       none: '0',
@@ -269,6 +269,7 @@ module.exports = {
       DEFAULT: '1',
     },
     fontFamily: {
+      'Philosopher': ['Philosopher', 'sans-serif'],
       display: ['Inter', 'system-ui'],
       sans: [
         'system-ui',
@@ -287,7 +288,9 @@ module.exports = {
       ],
       serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
       mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
-    },
+    },
+
+
     fontSize: {
       xs: '0.75rem',
       sm: '0.875rem',

frontend/src/website/homepage.js

@@ -7,7 +7,7 @@ import Footer from "components/footers/Home-Footer";
 import tw from "twin.macro";
 import imgLogo from "../images/old-logo.png";
 function Home() {
-    const HighlightedText = tw.span`bg-primary-500 text-gray-100 px-4 transform -skew-x-12 inline-block`;
+    const HighlightedText = tw.span`bg-black text-gray-100 px-4 transform -skew-x-12 inline-block`;
     return (
         <AnimationRevealPage>
             <Hero