feat: improved file structure and fix prettier issues

src/app/playground/page.js

@@ -5,7 +5,7 @@ import { PrimaryButton, SecondaryButton } from '@/components/shared/Typography/B
 import { NavbarLink } from '@/components/shared/Typography/Links';
 import { NavBar } from '@/components/NavBar/Nav';
 
-import { EventCarousalMain } from '@/components/eventsCaraousal/main';
+import { EventCarousalMain } from '@/components/eventsCarousel/layoutComponents/Main';
 
 const Page = () => {
   return (

src/components/NavBar/Nav.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { NavContainer, NavItem } from './styles';
 import { NavData } from '@/config/content/NavData';
-import { NavbarLink } from '@/components/shared/Typography/Links';
-import Link from 'next/link';
 
 export const NavBar = () => {
   return (

src/components/eventsCarousel/eventCardComponents/EventCard.jsx

@@ -0,0 +1,20 @@
+import { EventImage } from '../utils/Image';
+import { ParentEventCardComponent } from './Parent';
+// import { CarouselButton } from '../../shared/Typography/Buttons';
+
+import { CarouselButton, CarouselHead, CarouselParagraph } from './eventCard.style';
+
+export const EventCard = ({ head, url, desc }) => {
+  return (
+    <>
+      <ParentEventCardComponent>
+        <EventImage imgurl={url} alt={head} />
+        <CarouselHead>{head}</CarouselHead>
+        <CarouselParagraph>{desc}</CarouselParagraph>
+        <div className='flex justify-end mt-16'>
+          <CarouselButton>REGISTER</CarouselButton>
+        </div>
+      </ParentEventCardComponent>
+    </>
+  );
+};

src/components/eventsCaraousal/parent.jsx → src/components/eventsCarousel/eventCardComponents/Parent.jsx

@@ -1,4 +1,4 @@
-import { ChildContainer, GradientOverlay, InnerBackground, StyledParentCard } from './parent.Style';
+import { ChildContainer, GradientOverlay, InnerBackground, StyledParentCard } from './Parent.Style';
 
 export const ParentEventCardComponent = ({ children }) => {
   return (

src/components/eventsCarousel/eventCardComponents/eventCard.style.jsx

@@ -0,0 +1,17 @@
+import tw from 'twin.macro';
+import styled from 'styled-components';
+import { PrimaryButton } from '@/components/shared/Typography/Buttons';
+import { Heading2 } from '@/components/shared/Typography/Headings';
+import { SmallParagraph } from '@/components/shared/Typography/Paragraphs';
+
+export const CarouselButton = styled(PrimaryButton)`
+  ${tw`w-[125.89px] h-[42.94px] flex justify-center items-center text-black font-share_tech rounded-[7.59px]`}
+`;
+
+export const CarouselHead = styled(Heading2)`
+  ${tw`font-bold `}
+`;
+
+export const CarouselParagraph = styled(SmallParagraph)`
+  ${tw`max-w-[414.1px] h-[76px] font-montserrat text-[rgba(224, 229, 237, 0.75)]  mt-5 text-[12.66px] font-[400] leading-[18.99px] text-left flex text-wrap max-w-[500px]`}
+`;

src/components/eventsCaraousal/main.jsx → src/components/eventsCarousel/layoutComponents/Main.jsx

@@ -1,5 +1,5 @@
-import { Heading1 } from '../shared/Typography/Headings';
-import { SliderEventsWrapper } from './eventWrapper';
+import { Heading1 } from '../../shared/Typography/Headings';
+import { SliderEventsWrapper } from '../wrapperComponents/EventWrapper';
 
 export const EventCarousalMain = () => {
   return (

src/components/eventsCaraousal/image.jsx → src/components/eventsCarousel/utils/Image.jsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { StyledImageContainer } from './imageContainer.style';
+import { StyledImageContainer } from './ImageContainer.style';
 
 export const EventImage = ({ imgurl, alt }) => {
   return (

src/components/eventsCaraousal/paginationBullet.jsx → src/components/eventsCarousel/utils/PaginationBullet.jsx

@@ -1,6 +1,6 @@
 // import { sliderData } from '@/app/config/content/sliderData';
 
-import { SliderData } from '../../config/content/eventsCarauselData';
+import { SliderData } from '../../../config/content/eventsCarauselData';
 
 export const PaBullets = ({ currentindex }) => {
   return (

src/components/eventsCaraousal/sliderButtons.jsx → src/components/eventsCarousel/utils/SliderButtons.jsx

@@ -1,5 +1,5 @@
-import { SecondaryButton } from '../shared/Typography/Buttons';
-import { PaBullets } from './paginationBullet';
+import { SecondaryButton } from '../../shared/Typography/Buttons';
+import { PaBullets } from './PaginationBullet';
 
 export const SButtons = ({ fn1, fn2, currentindex }) => {
   return (

src/components/eventsCaraousal/caraouselMapping.jsx → src/components/eventsCarousel/wrapperComponents/CaraouselMapping.jsx

@@ -1,6 +1,6 @@
 import { SliderData } from '@/config/content/eventsCarauselData';
-import { EventCard } from './eventCard';
-import { motion, useAnimation } from 'framer-motion';
+import { EventCard } from '../eventCardComponents/EventCard';
+import { motion } from 'framer-motion';
 
 export const CarouselMapping = ({ currentIndex }) => {
   return (
@@ -55,7 +55,7 @@ export const CarouselMapping = ({ currentIndex }) => {
             }}
             transition={{
               type: 'tween',
-              duration: 0.5,
+              duration: 0.3,
               ease: [0.42, 0, 0.58, 1],
             }}
           >

src/components/eventsCaraousal/eventWrapper.jsx → src/components/eventsCarousel/wrapperComponents/EventWrapper.jsx

@@ -1,16 +1,16 @@
 'use client';
 import { useState, useEffect, useRef } from 'react';
 import { useAnimate } from 'framer-motion';
-import { SButtons } from './sliderButtons';
-import { CarouselMapping } from './caraouselMapping';
+import { SButtons } from '../utils/SliderButtons';
+import { CarouselMapping } from './CaraouselMapping';
 import { SliderData } from '@/config/content/eventsCarauselData';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import './swiper.css';
 import 'swiper/css/pagination';
 import { Pagination } from 'swiper/modules';
-import { EventCard } from './eventCard';
-import { SliderContainer, SwiperConatiner, Wrapper } from './eventWrapper.styles';
+import { EventCard } from '../eventCardComponents/EventCard';
+import { SliderContainer, SwiperConatiner, Wrapper } from './EventWrapper.styles';
 
 export const SliderEventsWrapper = () => {
   const [scope, animate] = useAnimate();

src/components/shared/Typography/Buttons.jsx

@@ -17,7 +17,3 @@ export const SecondaryButton = styled.button`
 
   ${tw`p-4 text-[#fff] text-[16px] rounded-full font-montserrat font-medium cursor-pointer border-[0.9px] border-[#ffffff66] hover:opacity-90 transition-all duration-300 bg-[#ffffff0d]`}
 `;
-
-export const CarouselButton = styled.div`
-  ${tw`flex justify-center items-center text-black font-share_tech bg-[rgba(255,61,127,1)] border-[0.76px] border-[rgba(137,137,137,1)] rounded-[7.59px] w-[125.89px] h-[42.94px] shadow-[inset_0px_2.28px_0.68px_0px_rgba(255,255,255,0.33),0px_3.03px_8.04px_0px_rgba(195,195,195,0.21),0px_0px_0.83px_3.32px_rgba(255,255,255,0.1),0px_10px_149.47px_0px_rgba(255,227,105,0.48),inset_0px_1.66px_0.83px_0px_rgba(255,255,255,0.25),inset_0px_-3.32px_1.66px_0px_rgba(0,0,0,0.25)]`}
-`;

src/components/shared/Typography/Headings.jsx

@@ -20,7 +20,3 @@ export const SubLogoText = styled.h1`
   -webkit-text-stroke: 2px #ffffffe6;
   text-shadow: none;
 `;
-
-export const EventHead = styled.h2`
-  ${tw`text-[48px] font-orbitron mb-3 font-bold text-[#00FFD1]`}
-`;

src/components/shared/Typography/Paragraphs.jsx

@@ -12,7 +12,3 @@ export const SubParagraph = styled.p`
 export const SmallParagraph = styled.p`
   ${tw`text-[12px] xsm:text-[14px] md:text-[16px] lg:text-[18px] mb-2 text-center text-white font-montserrat font-[400] leading-[150%]`}
 `;
-
-export const EventCaraouselParagraph = styled.p`
-  ${tw`max-w-[414.1px] h-[76px] font-montserrat text-[rgba(224, 229, 237, 0.75)]  mt-5 text-[12.66px] font-[400] leading-[18.99px] text-left flex text-wrap max-w-[500px]`}
-`;