Dev

components/button/Button.module.css

@@ -1,7 +1,10 @@
 .rippleButton {
-  @apply text-lg inline-block overflow-hidden relative rounded-full px-10 py-[13px] cursor-pointer;
+  /* @apply text-lg inline-block overflow-hidden relative rounded-full px-10 py-[13px] cursor-pointer; */
+  @apply text-lg inline-block overflow-hidden relative  px-10 py-[13px] cursor-pointer;
   border: 1px solid rgba(255, 255, 255, 0.2);
   transition: border-color 0.4s;
+  border-radius: 10px;
+  /* background: linear-gradient(90.28deg, #ffed79 1.18%, #ffa776 98.69%); */
 }
 
 .rippleButton::before {
@@ -14,12 +17,9 @@
   height: 0;
   border-radius: 50%;
   background: rgb(51, 121, 238);
-  background: radial-gradient(
-    circle,
-    rgba(51, 121, 238, 1) 0%,
-    rgba(36, 172, 255, 1) 100%
-  );
+  background: radial-gradient(circle, #ffed79 1.18%, #ffa776 98.69%);
   transition: width 0.5s, height 0.5s;
+  /* background: linear-gradient(90.28deg, #ffed79 1.18%, #ffa776 98.69%); */
 }
 
 .rippleButton:hover {

components/navbar/Navbar.js

@@ -4,7 +4,9 @@ import { HiMenuAlt4 } from 'react-icons/hi';
 import Image from 'next/image';
 import Link from 'next/link';
 import styles from './Navbar.module.css';
-import Logo from '../../assets/hncc-logo.png';
+// import Logo from '../../assets/hncc-logo.png';
+// this is the logo for the current theme
+import Logo from '../../assets/christmas_theme/christmas-theme-logo.png';
 import Button from '../button/Button';
 import Sidebar from './Sidebar';
 

components/navbar/Navbar.module.css

@@ -5,8 +5,8 @@
   @apply sm:px-6;
   @apply xs:px-3;
   background-color: rgba(24, 30, 35, 0.45);
+  /* background-color: transparent; */
   backdrop-filter: blur(8px);
-  overflow-x: hidden;
 }
 
 .navTitle {
@@ -28,7 +28,7 @@
   width: fit-content;
 }
 .navbarList > .navLink:hover {
-  @apply text-blue font-medium;
+  @apply text-golden font-medium;
 }
 
 .humburgerMenu {

components/socialsbar/SocialsBar.module.css

@@ -12,5 +12,8 @@
 }
 .socialsBarIcons:hover {
   @apply text-blue-light;
-  fill: rgb(56, 200, 236) !important;
+  fill: rgb(255, 237, 121) !important;
+
+  /* background: radial-gradient(circle, #ffed79 1.18%, #ffa776 98.69%);
+  overflow: hidden; */
 }

components/video/Video.js

@@ -85,6 +85,7 @@ function Video() {
           </video>
         </div>
       )}
+
       <div className={styles.content}>
         {documentWidth >= 600 ? (
           <>

components/video/Video.module.css

@@ -2,6 +2,16 @@
   @apply relative;
   height: 90vh;
   @apply sm:h-auto;
+  background: url(../../assets/christmas_theme/background3.png);
+  background-size: cover;
+}
+
+.GRADIENT {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 1) 90%
+  );
 }
 
 .designVideoContainer {
@@ -56,6 +66,9 @@
   @apply my-8 mx-4 text-7xl z-30 font-extrabold relative;
   @apply md:text-5xl;
   @apply sm:my-4;
+  background: linear-gradient(90.28deg, #ffed79 1.18%, #ffa776 98.69%);
+  -webkit-background-clip: text;
+  color: transparent;
 }
 
 .content > h1::before,

pages/index.js

@@ -23,6 +23,8 @@ export default function Home() {
           name="keywords"
           content="HTML, CSS, JavaScript, ReactJS, NextJS, TailwindCSS, HnCC, Hackathon & Coding Club, BIT Sindri, Dhanbad"
         />
+
+        <script src="https://app.embed.im/snow.js" defer />
       </Head>
       <Video />
       <HomeAbout />

styles/global.css

@@ -18,6 +18,22 @@ body {
   background-color: #000;
 }
 
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  background: #6d6d6d;
+}
+
 .scroll-lock {
   @apply relative h-full overflow-hidden;
 }

tailwind.config.js

@@ -12,6 +12,10 @@ module.exports = {
         DEFAULT: "#24ACFF",
         light: "#98e8fc",
       },
+      golden: {
+        DEFAULT: "#FFED79",
+        light: "#FFA776",
+      },
     },
 		screens: {
       'm2xl': { min: '1500px' },