feat: revamp landing page UI with modern branding and enhanced UX

src/common/components/Footer/Footer.module.css

@@ -23,27 +23,27 @@
   width: 33%;
 }
 
-.playerTwo > h4,
-.company > h4,
-.social > h4 {
+.playerTwo>h4,
+.company>h4,
+.social>h4 {
   font-size: 25px;
   font-family: poppins;
   color: #ffffff;
   cursor: pointer;
 }
 
-.playerTwo > p {
+.playerTwo>p {
   margin-top: 10px;
   line-height: 1.6;
   font-weight: 500;
   cursor: pointer;
 }
 
-.company > ul {
+.company>ul {
   list-style-type: none;
 }
 
-.company > ul > li {
+.company>ul>li {
   margin-top: 10px;
   font-weight: 600;
   cursor: pointer;
@@ -58,3 +58,23 @@
   width: 150%;
   cursor: pointer;
 }
+
+.footer__rights {
+  text-align: center;
+  margin-top: 10px;
+}
+
+.footer__attribution {
+  text-align: center;
+  margin-top: 5px;
+  padding-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer__attribution p {
+  color: #ddd;
+  font-size: 14px;
+  font-weight: 500;
+}

src/common/components/Footer/Footer.tsx

@@ -1,16 +1,16 @@
 import styles from './Footer.module.css';
-import {AiFillTwitterCircle, AiFillLinkedin} from 'react-icons/ai';
-import {BsInstagram, BsFacebook} from 'react-icons/bs';
+import { AiFillTwitterCircle, AiFillLinkedin } from 'react-icons/ai';
+import { BsInstagram, BsFacebook, BsLightningFill } from 'react-icons/bs';
 
 export default function Footer() {
   return (
     <div className={styles.footer}>
       <div className={styles.footer__footer}>
         <div className={styles.playerTwo}>
-          <h4> Canonforces </h4>
+          <h4> CanonForces </h4>
           <p>
             {' '}
-            A paltform where you can showcase your codeforces profile in a more elegant way. 
+            A platform where you can showcase your Codeforces profile in a more elegant way.
             You can compete with other coders in a 1v1 match and improve your profile.{' '}
           </p>
         </div>
@@ -32,9 +32,15 @@ export default function Footer() {
           </div>
         </div>
       </div>
-      <hr className='w-3/6'/>
+      <hr className='w-3/6' />
       <div className={styles.footer__rights}>
-        <h3> @2022 Canonforces Pvt. Ltd. All Rights Reserved </h3>
+        <h3> © 2025 CanonForces. All Rights Reserved </h3>
+      </div>
+      <div className={styles.footer__attribution}>
+        <p className="flex items-center gap-2 text-sm">
+          <BsLightningFill className="text-yellow-400" size="1em" />
+          Maintained by Aviral Saxena
+        </p>
       </div>
     </div>
   );

src/common/components/Header/Header.tsx

@@ -1,28 +1,23 @@
 import Head from "next/head";
 import Link from "next/link";
 import * as ROUTES from "../../../constants/routes";
-import NotificationBell from "../NotificationBell/NotificationBell";
 import styles from "./Header.module.css";
 
 export default function Header() {
   return (
     <>
       <div className={`flex w-10/12 p-5 fc-black font-light max-w-screen-2xl`}>
-        <nav className="flex flex-row w-full">
-          <div className="basis-1/4 flex items-center justify-center">
-            <ul className="flex-row flex w-full justify-around">
-              <li> <Link href={ROUTES.DASHBOARD}> Dashboard </Link> </li>
-              <li> <Link href={ROUTES.USERS}> Users </Link> </li>
-            </ul>
-          </div>
-          <div className="basis-1/2 flex items-center justify-center">
-            <ul className="flex-row flex w-full justify-around">
-              <li className="font-semibold text-xl"> <Link href={ROUTES.HOME}> CANONFORCES </Link> </li>
-            </ul>
+        <nav className="flex flex-row w-full items-center justify-between">
+          {/* Left side - Logo */}
+          <div className="flex items-center">
+            <Link href={ROUTES.HOME} className="font-semibold text-xl">
+              CANONFORCES
+            </Link>
           </div>
-          <div className="basis-1/4 flex items-center justify-center">
-            <ul className="flex-row flex w-full justify-around items-center">
-              <li> <NotificationBell /> </li>
+
+          {/* Right side - Signup, Login */}
+          <div className="flex items-center">
+            <ul className="flex-row flex gap-6 items-center">
               <li> <Link href={ROUTES.SIGNUP}> Signup </Link> </li>
               <li> <Link href={ROUTES.LOGIN}> Login </Link> </li>
             </ul>

src/pages/index.tsx

@@ -8,7 +8,8 @@ import {
   BsGraphUp,
   BsCalendar3,
   BsAward,
-  BsController
+  BsController,
+  BsGithub
 } from "react-icons/bs";
 import dynamic from "next/dynamic";
 import Loading from "../common/components/Loading/Loading";
@@ -27,55 +28,71 @@ export default function Home() {
       <DynamicHeader />
       <hr className="flex w-9/12 h-px fc-hr border-0" />
       <main className="flex flex-col w-full items-center p-0">
-        <h1 className={`f-100 font-bold fc-black ${styles.fs_big} tracking-tight`}>
-          LEARN & CODE
-        </h1>
-        <hr className="flex w-9/12 h-px fc-hr border-0" />
-
-        {/* Hero Section with Black Box and Image */}
-        <div className="flex flex-col lg:flex-row w-9/12 justify-center items-center gap-8 mt-8">
-          {/* Black Box Side Text */}
-          <div className="flex flex-col items-start bg-black bg-opacity-95 rounded-xl border border-gray-800 shadow-lg px-8 py-7 max-w-xl w-full mb-4 lg:mb-0">
-            <p className="text-white text-lg leading-relaxed mb-6">
-              A <span className="font-medium text-blue-300">coding platform</span> where you can compete with
-              fellow coders, friends and random people to learn and improve your coding skills.
-              You can showcase your Codeforces profile in an amazing dashboard powered by
-              <span className="font-medium text-yellow-300"> canonforces</span>.
-            </p>
-            <div className="flex flex-row gap-4 w-full">
-              {/* Explore Button (Blue) */}
-             <button className={`${styles.button_blue}`}>Explore</button>  
-
-              {/* Dashboard Button (Black) */}
-              <button className="bg-gray-900 hover:bg-gray-800 text-white font-semibold px-6 py-2 rounded-lg shadow transition-all duration-200 hover:scale-105 flex items-center gap-2 w-1/2">
-                Dashboard
-                <BsArrowRightCircle size={"1.3em"} className="transition-transform duration-200 hover:translate-x-1" />
-              </button>
-            </div>
-          </div>
-          {/* Image Section */}
-          <div className="flex justify-center items-center w-full lg:w-1/2">
+        {/* Hero Section - Centered */}
+        <div className="flex flex-col items-center justify-center w-full mt-12 mb-8">
+          {/* CanonForces Logo */}
+          <div className="mb-8">
             <Image
-              className="w-85 h-85 object-contain transition-transform duration-300 hover:scale-105"
-              src="/images/image.png"
-              width={420}
-              height={420}
-              alt="CanonForces Platform"
+              src="/images/logo.png"
+              width={120}
+              height={120}
+              alt="CanonForces Logo"
+              className="transition-transform duration-300 hover:scale-105"
               priority
             />
           </div>
+
+          {/* Main Heading */}
+          <h1 className={`font-bold fc-black ${styles.fs_big} tracking-tight text-center mb-4`}>
+            CanonForces
+          </h1>
+
+          {/* Tagline */}
+          <p className="text-2xl text-gray-600 font-medium mb-8">Learn and code.</p>
+
+          <hr className="flex w-9/12 h-px fc-hr border-0 mb-8" />
+
+          {/* Hero Content - Centered Layout */}
+          <div className="flex flex-col lg:flex-row w-9/12 justify-center items-center gap-8">
+            {/* Description Box */}
+            <div className="flex flex-col items-start bg-black bg-opacity-95 rounded-xl border border-gray-800 shadow-lg px-8 py-7 max-w-xl w-full">
+              <p className="text-white text-lg leading-relaxed">
+                A <span className="font-medium text-blue-300">coding platform</span> where you can compete with
+                fellow coders, friends and random people to learn and improve your coding skills.
+                You can showcase your Codeforces profile in an amazing dashboard powered by
+                <span className="font-medium text-yellow-300"> CanonForces</span>.
+              </p>
+            </div>
+
+            {/* Mascot Image */}
+            <div className="flex justify-center items-center w-full lg:w-1/2">
+              <Image
+                className="object-contain transition-transform duration-300 hover:scale-105"
+                src="/images/mascot.png"
+                width={420}
+                height={420}
+                alt="CanonForces Mascot"
+                priority
+              />
+            </div>
+          </div>
         </div>
       </main>
 
       {/* Features Section - moved up closer */}
       <div className="w-full mt-10 lg:mt-14 bg-gray-50 py-10 lg:py-12">
         <div className="w-9/12 mx-auto">
-          <h2 className="text-2xl lg:text-3xl font-bold text-center fc-black mb-8 lg:mb-12">
+          <h2 className="text-2xl lg:text-3xl font-bold text-center fc-black mb-3">
             Why Choose CanonForces?
           </h2>
+          {/* Thin divider below title */}
+          <div className="flex justify-center mb-8 lg:mb-12">
+            <div className="w-24 h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-full"></div>
+          </div>
+
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
-            {/* Feature Cards */}
-            <div className="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100">
+            {/* Feature Cards with enhanced animations */}
+            <div className={`${styles.feature_card} bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1`}>
               <div className="flex items-center gap-3 mb-4">
                 <div className="p-2 bg-blue-100 rounded-lg">
                   <BsController className="text-blue-600" size="1.5em" />
@@ -86,7 +103,8 @@ export default function Home() {
                 Challenge friends or random coders in real-time competitive programming battles.
               </p>
             </div>
-            <div className="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100">
+
+            <div className={`${styles.feature_card} bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1`}>
               <div className="flex items-center gap-3 mb-4">
                 <div className="p-2 bg-green-100 rounded-lg">
                   <BsGraphUp className="text-green-600" size="1.5em" />
@@ -97,7 +115,8 @@ export default function Home() {
                 Monitor your Codeforces progress with detailed analytics and beautiful visualizations.
               </p>
             </div>
-            <div className="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100">
+
+            <div className={`${styles.feature_card} bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1`}>
               <div className="flex items-center gap-3 mb-4">
                 <div className="p-2 bg-purple-100 rounded-lg">
                   <BsCalendar3 className="text-purple-600" size="1.5em" />
@@ -108,7 +127,8 @@ export default function Home() {
                 Solve curated problems every day to maintain your coding streak and skills.
               </p>
             </div>
-            <div className="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100">
+
+            <div className={`${styles.feature_card} bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1`}>
               <div className="flex items-center gap-3 mb-4">
                 <div className="p-2 bg-yellow-100 rounded-lg">
                   <BsTrophy className="text-yellow-600" size="1.5em" />
@@ -119,7 +139,8 @@ export default function Home() {
                 Compete for the top spots in monthly and weekly competitive programming rankings.
               </p>
             </div>
-            <div className="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100">
+
+            <div className={`${styles.feature_card} bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1`}>
               <div className="flex items-center gap-3 mb-4">
                 <div className="p-2 bg-red-100 rounded-lg">
                   <BsAward className="text-red-600" size="1.5em" />
@@ -130,7 +151,8 @@ export default function Home() {
                 Join topic-specific practice sessions with other coders to improve together.
               </p>
             </div>
-            <div className="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100">
+
+            <div className={`${styles.feature_card} bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1`}>
               <div className="flex items-center gap-3 mb-4">
                 <div className="p-2 bg-indigo-100 rounded-lg">
                   <BsGraphUp className="text-indigo-600" size="1.5em" />
@@ -142,21 +164,19 @@ export default function Home() {
               </p>
             </div>
           </div>
-        </div>
-      </div>
 
-      {/* Call to Action Buttons BELOW Features */}
-      <div className="w-full flex justify-center py-8 bg-white">
-        <div className="flex flex-col sm:flex-row gap-4">
-          {/* Start Competing Now Button (Blue) */}
-           <button className={`${styles.button_blue} hover:bg-blue-700 text-white font-semibold px-5 py-3 rounded-lg shadow transition-all duration-200 hover:scale-105`}>
-            Start Competing Now
-          </button>
-          {/* View Demo Button (Black) */}
-          <button className="bg-black hover:bg-gray-900 text-white font-semibold px-8 py-3 rounded-lg shadow transition-all duration-200 hover:scale-105 flex items-center gap-2">
-            View Demo
-            <BsArrowRightCircle size={"1.3em"} />
-          </button>
+          {/* GitHub Repository Link */}
+          <div className="flex justify-center mt-8">
+            <a
+              href="https://github.com/OpenLake/canonforces"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-3 bg-gray-900 hover:bg-gray-800 text-white font-semibold px-6 py-3 rounded-lg shadow-lg transition-all duration-300 hover:scale-105"
+            >
+              <BsGithub size="1.5em" />
+              <span>View on GitHub</span>
+            </a>
+          </div>
         </div>
       </div>