fix: about and swiper (#19)

* fix: many fixes

* wip: swiper and aboutsPage

* fix: aboutCard

* fix: aboutCard Image

* fix: navref

src/app/about/page.tsx

@@ -87,17 +87,19 @@ const About = () => {
             onTouchMove={scrollAllowed ? handleTouchMove : undefined}
             onTouchEnd={scrollAllowed ? handleTouchEnd : undefined}
         >
-            {/* <div className="flex w-full relative z-10"> */}
             <NavBar NavRef={navBarRef} />
-            {/* </div> */}
             <motion.div
                 z-index={-1}
                 className="flex flex-col justify-center items-center absolute w-screen top-0 left-0 -translate-x-[50%] -translate-y-[50%]"
                 initial={{ y: '-100%' }}
                 animate={{ y: '-40%' }}
                 transition={{ duration: 1.5 }}
             >
-                <Image src={bigmascot} alt="bigmascot" className="xl:scale-90 scale-50" />
+                <Image
+                    src={bigmascot}
+                    alt="bigmascot"
+                    className="xl:scale-75 scale-[35%] md:scale-[50%]"
+                />
             </motion.div>
             <div className="flex flex-col md:justify-center max-md:mt-7 items-center h-full w-full m-0">
                 <div className="font-ROG xl:text-8xl lg:text-7xl md:text-6xl sm:text-4xl text-2xl">

src/app/events/[clusterId]/[name]/[eventId]/page.tsx

@@ -7,6 +7,7 @@ import Carousel from '@/components/Carousel/carousel';
 import styles from '../../../carousel.module.css';
 
 const events = ({ params }: { params: { clusterId: number; name: string; eventId: number } }) => {
+    console.log(params.clusterId, params.name, params.eventId);
     return (
         <div className={`min-h-screen w-full text-center lg:p-7 p-5 event + ${styles.event}`}>
             <NavBar />

src/app/globals.css

@@ -18,8 +18,8 @@
 }
 
 @font-face {
-    font-family: 'Nunito';
-    src: url('../assets/fonts/Nunito-VariableFont_wght.ttf');
+    font-family: 'Nunito' !important;
+    src: url('../assets/fonts/Nunito-Regular.ttf');
 }
 
 @font-face {
@@ -91,6 +91,16 @@ body {
     -o-animation: fadeout 1.5s;
 }
 
+@keyframes fadeout {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
 .blue-scroll {
     animation: blue-glow 0.5s;
     -moz-animation: blue-glow 1.5s;
@@ -103,17 +113,9 @@ body {
     from {
         background-color: initial;
     }
-    to {
-        background-color: #000;
-    }
-}
 
-@keyframes fadeout {
-    from {
-        opacity: 1;
-    }
     to {
-        opacity: 0;
+        background-color: #000;
     }
 }
 
@@ -125,10 +127,11 @@ body {
 }
 
 @keyframes fadein {
-    from {
+    0% {
         opacity: 0;
     }
-    to {
+
+    50% {
         opacity: 1;
     }
 }
@@ -158,6 +161,7 @@ body {
         background-position: center;
         background-repeat: no-repeat;
     }
+
     .AboutCard {
         background: url('../assets/images/aboutCardMOB.png');
         background-repeat: no-repeat;
@@ -173,9 +177,11 @@ body {
 .rings {
     animation: rings 0.7s;
 }
+
 .rings2 {
     animation: rings2 0.7s;
 }
+
 .fullrings {
     animation: fullrings 0.7s;
 }
@@ -184,6 +190,7 @@ body {
     0% {
         opacity: 0.6;
     }
+
     100% {
         opacity: 1;
     }
@@ -193,6 +200,7 @@ body {
     0% {
         transform: translateY(-30vh);
     }
+
     90% {
         transform: translateY(20vh);
     }
@@ -212,9 +220,11 @@ body {
     0% {
         opacity: 0;
     }
+
     90% {
         opacity: 0;
     }
+
     100% {
         opacity: 1;
     }
@@ -225,13 +235,16 @@ body {
         mask-image: radial-gradient(circle, #000 90%, transparent 90%);
         mask-position: 0% 0%;
     }
+
     80% {
         mask-position: 0% 800px;
     }
+
     81% {
         mask-image: none;
         opacity: 0.4;
     }
+
     100% {
         opacity: 1;
     }
@@ -263,7 +276,7 @@ body {
     filter: hue-rotate(137deg) drop-shadow(0 0 20px #23a347) brightness(120%);
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1024px) {
     .about {
         min-height: max(100vh, 742px);
     }
@@ -273,4 +286,26 @@ body {
     .about {
         min-height: max(100vh, 860px);
     }
-}
+}
+
+.markdown>* {
+    all: revert;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgb(170, 168, 168);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(126, 251, 254, 1);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(126, 251, 254, 1);
+}

src/app/home/page.tsx

@@ -112,8 +112,8 @@ export default function Home() {
                     draggable={false}
                     className="wingman lg:w-48 w-32 absolute inset-0 m-auto bottom-1/3"
                 />
-                <p className="font-ROG lg:text-5xl md:text-4xl sm:text-3xl text-xl">
-                    A TIMELESS ODYSSEY
+                <p className="font-ROG lg:text-5xl md:text-4xl sm:text-3xl text-xl tracking-wider">
+                    THE SAGA OF TIME
                 </p>
             </div>
             <SideBar content={'The Future'} number={'01'} />

src/app/layout.tsx

@@ -1,12 +1,9 @@
 import Footer from '@/components/Footer/Footer';
 import './globals.css';
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 import { content } from '@/components/AboutCard/AboutContent.json';
 import Toast from '@/components/Toast/Toast';
 
-const inter = Inter({ subsets: ['latin'] });
-
 export const metadata: Metadata = {
     title: "Pragyan '24 | Let's Celebrate Technology",
     description: content,
@@ -15,7 +12,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <html lang="en">
-            <body className={inter.className + ' ' + 'bg-[#070B12]'}>
+            <body className={'bg-[#070B12]'}>
                 <div className="w-full min-h-screen bg-[#070B12]">{children}</div>
                 <Footer />
                 <Toast />

src/components/AboutCard/AboutCard.module.css

@@ -47,6 +47,14 @@
     border-radius: 2px;
 }
 
+@media screen and ((width > 600px) and (width < 1000px)) {
+    .parent {
+        width: 30rem;
+        height: 75%;
+    }
+
+}
+
 /* .topWedge {
     width: 70px;
     height: 6.9px;

src/components/AboutCard/AboutCard.tsx

@@ -4,11 +4,8 @@ import AboutContent from './AboutContent.json';
 const AboutCard: React.FC<AboutCardProps> = ({ cardRef }) => {
     const content = AboutContent.content;
     return (
-        <div className="AboutCard max-md:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[70%] md:h-[65%] lg:w-[60%] lg:h-[70%] xl:w-[45%] xl:h-[55%] flex justify-center items-center p-10 ">
-            <p
-                ref={cardRef}
-                className="pt-3 max-lg:text-base text-lg font-Nunito md:h-[80%] lg:h-[85%] overflow-auto"
-            >
+        <div className="AboutCard max-lg:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[50rem] md:h-[60%] flex justify-center items-center pt-20 p-11 ">
+            <p ref={cardRef} className="font-Nunito text-xl h-[90%] w-[88.5%] overflow-auto p-1">
                 {content}
             </p>
         </div>

src/components/AboutCard/AboutCardMob.tsx

@@ -9,15 +9,21 @@ const AboutCardMob: React.FC<AboutCardProps> = ({ cardRef }) => {
             className={
                 styles.parent +
                 ' ' +
-                'md:hidden flex justify-center items-center p-4 py-10 text-center AboutCardContent z-0'
+                'lg:hidden flex justify-center items-center p-4 py-10 text-center AboutCardContent z-0'
             }
             ref={cardRef}
         >
             <div className={styles.topLeft + ' ' + styles.edge}></div>
             <div className={styles.topRight + ' ' + styles.edge}></div>
             <div className={styles.bottomLeft + ' ' + styles.edge}></div>
             <div className={styles.bottomRight + ' ' + styles.edge}></div>
-            <div className={styles.content + ' ' + 'w-full h-full p-3 overflow-y-scroll relative'}>
+            <div
+                className={
+                    styles.content +
+                    ' ' +
+                    'w-full h-full p-3 relative font-Nunito overflow-y-auto z-10'
+                }
+            >
                 {content}
             </div>
         </div>

src/components/Carousel/carousel.tsx

@@ -16,13 +16,13 @@ SwiperCore.use([Navigation, Keyboard]);
 
 const Carousel = ({ id, eventId }: { id: number; eventId: number }) => {
     const [details, setDetails] = useState([]);
-    const [initialSlide, setInitialSlide] = useState(0);
+    const [initialSlideNumber, setInitialSlideNumber] = useState<number | null>(null);
     const getDetails = async () => {
         const res = await getClusterDetails(id);
         setDetails(res);
-        res.forEach((data: { ind: number }, ind: number) => {
-            if (data.ind == eventId) {
-                setInitialSlide(ind);
+        res.forEach((data: { id: number }, ind: number) => {
+            if (data.id == eventId) {
+                setInitialSlideNumber(ind);
             }
         });
     };
@@ -31,15 +31,15 @@ const Carousel = ({ id, eventId }: { id: number; eventId: number }) => {
         getDetails();
     }, []);
 
-    return (
+    return initialSlideNumber !== null ? (
         <Swiper
             spaceBetween={50}
             slidesPerView={1}
             navigation={{
                 nextEl: `.${styles.rightArrow}`,
                 prevEl: `.${styles.leftArrow}`,
             }}
-            initialSlide={initialSlide}
+            initialSlide={initialSlideNumber}
             keyboard={{ enabled: true }}
             className="w-full h-full flex justify-center"
         >
@@ -52,6 +52,8 @@ const Carousel = ({ id, eventId }: { id: number; eventId: number }) => {
             <div className={`${styles.rightArrow}`}></div>
             <div className={`${styles.leftArrow}`}></div>
         </Swiper>
+    ) : (
+        <p>Oombu</p>
     );
 };
 

src/components/Carousel/slideData.tsx

@@ -173,7 +173,7 @@ const SlideData: React.FC<SlideDataProps> = ({ details }) => {
                             <div
                                 className={`w-full h-4/5 font-Nunito 2xl:text-base xl:text-sm lg:text-sm sm:text-xs text-sm p-3 ${styles.content}`}
                             >
-                                <Markdown className={styles.markdown}>{data}</Markdown>
+                                <Markdown className={styles.markdown + ' markdown'}>{data}</Markdown>
                             </div>
                         </div>
                     </div>