From cf5e2f54d88259cd8764baac10720fe1eddbfa3e Mon Sep 17 00:00:00 2001
From: Srishty Mangutte <68679980+Srish-ty@users.noreply.github.com>
Date: Sat, 2 Dec 2023 20:37:01 +0530
Subject: [PATCH] fix: styling changes (#272)

* feat: initial commit for footer

* fix: fixed isssues

* fix: fixed isssues

* fix: fixed isssues

* fix: fixed isssues

* fix: resolved issues

* Revert "fix: resolved issues"

This reverts commit 87cace308b332a59c32c7aad62761ccfa86b3a51.

* feat: added logo and content

* fix: resolve issues

* feat: text color

* feat: text color

* fix: text color

* fix: text color

* fix: text color

* fix: text color

* feat: added pendulum and index in images

* feat: added terms conditions and credits.

* fix: created separate file for credits

* fix: separated initial abut section

* fix: resolved formatting issue  using prettier

* feat: added content in config

* feat: added content in config

* fix: prettier check

* feat: added cradle files

* fix: converted to styled comps

* fix: converted to styled comps

* fix: formatted files

* fix: deleted css files

* feat: added social logos

* fix: separated styles in styles.jsx

* fix: formatted using pretter

* fix: converted css to tailwind

* feat: made responsive

* feat: added colour gradient

* fix: moved images to cloudinary

* fix: changed mobile view layout

* fix: changed mobile view layout

* fix: formatted Herosection using prettire

* fix: formatted Herosection using prettire

* fix: changed mobile view layout

* fix: changed aboutsection layout

* feat: created links array and mapped

* fix: used absolute imports

* feat: added gradient animation while moving

* added animation for desktop. fixed layout for tab

* feat: added pointer to links

* fix: ghaction changes

* fix: foramtted navbar files

* fix: animatio on hover

* fix: prettier

* fix: footer padding

* fix: merged dev

* fix: removed irrelevant imports

* fix:text overflow in aboutUs

* fix: fixed carousel slides

* feat: responsive

* fix: carousel speed

* fix:added tailwind

* fix: sponsorlogos

* fix: terms and conditions text

* fix: animation pausing

---------

Co-authored-by: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com>
---
 src/components/AboutUs/Carousel.jsx           |  4 +-
 src/components/AboutUs/styles.js              | 37 ++++++++++++-------
 src/components/Sponsor/Sponsor.jsx            |  8 ++--
 src/components/Sponsor/styles.js              | 18 ++++++++-
 src/components/marginals/Footer/Cradle.jsx    |  6 +--
 src/components/marginals/Footer/index.js      |  1 +
 .../Footer/{styles.jsx => styles.js}          | 23 ++++++++----
 src/components/marginals/index.js             |  1 +
 src/pages/playground.js                       | 18 +--------
 src/styles/carouselstyles.css                 | 36 +++++++++++-------
 10 files changed, 90 insertions(+), 62 deletions(-)
 create mode 100644 src/components/marginals/Footer/index.js
 rename src/components/marginals/Footer/{styles.jsx => styles.js} (96%)

diff --git a/src/components/AboutUs/Carousel.jsx b/src/components/AboutUs/Carousel.jsx
index 2ea5cc6..fc366c8 100644
--- a/src/components/AboutUs/Carousel.jsx
+++ b/src/components/AboutUs/Carousel.jsx
@@ -56,7 +56,7 @@ function Carousel() {
     slidesToShow: 3,
     slidesToScroll: 1,
     autoplay: true,
-    autoplaySpeed: 1000,
+    autoplaySpeed: 1800,
     beforeChange: (current, next) => setSlideIndex(next),
     responsive: [
       {
@@ -87,7 +87,7 @@ function Carousel() {
         >
           {AboutUs.carouselImages.map((imgUrl, index) => (
             <div className={index === slideIndex ? 'slide slide-active' : 'slide'} key={imgUrl}>
-              <img src={imgUrl} alt={`Alt ${index}`} />
+              <img className='carousel-img' src={imgUrl} alt={`Alt ${index}`} />
             </div>
           ))}
         </Slider>
diff --git a/src/components/AboutUs/styles.js b/src/components/AboutUs/styles.js
index c6c01dc..ee6ca05 100644
--- a/src/components/AboutUs/styles.js
+++ b/src/components/AboutUs/styles.js
@@ -1,23 +1,32 @@
 import styled from 'styled-components';
+import tw from 'twin.macro';
 import { Body1, Heading1 } from '../shared';
 
 export const AboutContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  margin-top: 0px;
-  overflow-y: hidden;
-  width: 100%;
-  margin-bottom: 50px;
+  ${tw`
+    flex 
+    flex-col 
+    items-center 
+    text-center 
+    mt-0 
+    overflow-y-hidden 
+    w-full 
+    mb-12
+    `}
 `;
 export const AboutContent = styled(Body1)`
-  margin-top: 20px;
-  margin-bottom: 50px;
-  width: 80%;
-  font-size: 16px;
-  line-height: 24px;
+  ${tw`
+    mt-5
+    mb-12
+    w-[80%]
+    text-base	 
+    `}
+  @media (max-width: 800px) {
+    text-align: justify;
+  }
 `;
 export const Heading = styled(Heading1)`
-  font-weight: 700;
+  ${tw`
+    font-bold	
+  `}
 `;
diff --git a/src/components/Sponsor/Sponsor.jsx b/src/components/Sponsor/Sponsor.jsx
index d46d901..7e57a99 100644
--- a/src/components/Sponsor/Sponsor.jsx
+++ b/src/components/Sponsor/Sponsor.jsx
@@ -20,6 +20,8 @@ import {
   DeltaLogoSecond,
   DeltaContainer,
   DeltaSponsors,
+  AlphaLogoImg,
+  DeltaLogoImg,
 } from './styles';
 import { SectionContainer } from '../shared';
 
@@ -40,7 +42,7 @@ function SponsorSection() {
             {alphaSponsors.map(({ src, alt, link }) => (
               <SponsorLogo key={src}>
                 <a href={link} target='_blank' rel='noopener noreferrer'>
-                  <img src={src} alt={alt} />
+                  <AlphaLogoImg src={src} alt={alt} />
                 </a>
               </SponsorLogo>
             ))}
@@ -84,7 +86,7 @@ function SponsorSection() {
                 {deltaSponsorsFirst.map(({ src, alt, link }) => (
                   <SponsorLogo key={src}>
                     <a href={link} target='_blank' rel='noopener noreferrer'>
-                      <img src={src} alt={alt} />
+                      <DeltaLogoImg src={src} alt={alt} />
                     </a>
                   </SponsorLogo>
                 ))}
@@ -93,7 +95,7 @@ function SponsorSection() {
                 {deltaSponsorsSecond.map(({ src, alt, link, width }) => (
                   <SponsorLogo key={src}>
                     <a href={link} target='_blank' rel='noopener noreferrer'>
-                      <img src={src} alt={alt} width={width} />
+                      <DeltaLogoImg src={src} alt={alt} width={width} />
                     </a>
                   </SponsorLogo>
                 ))}
diff --git a/src/components/Sponsor/styles.js b/src/components/Sponsor/styles.js
index 38769f9..cb1428d 100644
--- a/src/components/Sponsor/styles.js
+++ b/src/components/Sponsor/styles.js
@@ -9,15 +9,22 @@ export const SponsorLogo = styled.div`
     justify-center
     `}
 `;
-
+export const AlphaLogoImg = styled.img`
+  ${tw`
+    h-[41.288px]
+    `}
+`;
 export const AlphaLogoContainer = styled.div`
   ${tw`
     grid
-    md:grid-cols-3
+    md:grid-cols-3 
     grid-cols-1
     md:gap-[120px]
     gap-[24px]
     `}
+  @media (max-width: 545px) {
+    width: 85%;
+  }
 `;
 
 export const AlphaContainer = styled.div`
@@ -25,6 +32,7 @@ export const AlphaContainer = styled.div`
     flex
     flex-col
     text-center
+    items-center
     md:gap-[48px]
     gap-[32px]
     `}
@@ -288,6 +296,12 @@ export const DeltaContainer = styled.div`
       `}
 `;
 
+export const DeltaLogoImg = styled.img`
+  ${tw`
+    h-[16px]
+    `}
+`;
+
 export const DeltaSponsors = styled.div`
   padding: 16px 32px;
   width: 90%;
diff --git a/src/components/marginals/Footer/Cradle.jsx b/src/components/marginals/Footer/Cradle.jsx
index ad244b3..51f5e1c 100644
--- a/src/components/marginals/Footer/Cradle.jsx
+++ b/src/components/marginals/Footer/Cradle.jsx
@@ -5,19 +5,19 @@ const Cradle = ({ socials, text }) => (
   <SocialsCont>
     <CradleContainer>
       <a href='https://facebook.com/hacknitr'>
-        <Ball1>
+        <Ball1 className='ball'>
           <SocialLogo src={socials[0].imgLink} />
         </Ball1>
       </a>
       {socials.slice(1, -1).map((s) => (
         <a key={socials.indexOf(s)} href={s.link}>
-          <Ball>
+          <Ball className='ball'>
             <SocialLogo src={s.imgLink} />
           </Ball>
         </a>
       ))}
       <a href='https://twitter.com/hacknitr'>
-        <Ball5>
+        <Ball5 className='ball'>
           <SocialLogo src={socials[socials.length - 1].imgLink} />
         </Ball5>
       </a>
diff --git a/src/components/marginals/Footer/index.js b/src/components/marginals/Footer/index.js
new file mode 100644
index 0000000..da94c29
--- /dev/null
+++ b/src/components/marginals/Footer/index.js
@@ -0,0 +1 @@
+export { default as Footer } from './Footer';
diff --git a/src/components/marginals/Footer/styles.jsx b/src/components/marginals/Footer/styles.js
similarity index 96%
rename from src/components/marginals/Footer/styles.jsx
rename to src/components/marginals/Footer/styles.js
index da1c80a..b63719f 100644
--- a/src/components/marginals/Footer/styles.jsx
+++ b/src/components/marginals/Footer/styles.js
@@ -9,6 +9,7 @@ export const FooterContainer = styled(Body1)`
   justify-between
   text-white
   p-4
+  pb-8
   bg-[#060616]
 `}
   @media (max-width: 800px) {
@@ -44,6 +45,8 @@ export const SecondPendulumContainer = styled.div`
   flex
   flex-col
   items-center
+  justify-between
+  w-[500px]
   text-white
   p-4
   `}
@@ -59,8 +62,7 @@ export const SecondPendulumContainer = styled.div`
 export const SocialText = styled.div`
   ${tw`
   absolute
-  bottom-8
-  sm:bottom-4
+  bottom-12
   left-0.5
   text-neutral-white-700
   text-lg
@@ -73,8 +75,7 @@ export const SocialsCont = styled.div`
   ${tw`
   flex
   flex-col
-  items-center
-  m-auto
+  justify-between
   `}
 `;
 export const CradleContainer = styled.div`
@@ -97,6 +98,9 @@ export const CradleContainer = styled.div`
     pt-[0px]
     `}
   }
+  &:hover .ball {
+    animation: none;
+  }
 `;
 
 export const Ball = styled.div`
@@ -223,6 +227,9 @@ export const Ball1 = styled(Ball)`
   @media (max-width: 600px) {
     animation: ${ball1Mob} 1s ease-out infinite alternate;
   }
+  &:hover {
+    animation: none;
+  }
 `;
 
 export const Ball5 = styled(Ball)`
@@ -231,6 +238,9 @@ export const Ball5 = styled(Ball)`
   @media (max-width: 600px) {
     animation: ${ball5Mob} 1s ease-out 1s infinite alternate;
   }
+  &:hover {
+    animation: none;
+  }
 `;
 
 export const ImgCont = styled.img`
@@ -390,12 +400,10 @@ export const Terms = styled.div`
     flex-col
     items-baseline
     `}
-  }
 `;
 
 export const ConditionItems = styled.a`
   ${tw`
-  text-xl
   px-4
   py-6
 `}
@@ -404,7 +412,6 @@ export const ConditionItems = styled.a`
     px-1
     py-4
     `}
-  }
 `;
 
 export const Credits = styled.div`
@@ -418,5 +425,7 @@ export const Credits = styled.div`
     px-2
     py-6
     `}
+`;
+`}
   }
 `;
diff --git a/src/components/marginals/index.js b/src/components/marginals/index.js
index b613ca1..8477d83 100644
--- a/src/components/marginals/index.js
+++ b/src/components/marginals/index.js
@@ -1 +1,2 @@
 export { default as NavBar } from './Navbar/navbar';
+export { Footer } from './Footer/Footer';
diff --git a/src/pages/playground.js b/src/pages/playground.js
index 07d9746..b169dc4 100644
--- a/src/pages/playground.js
+++ b/src/pages/playground.js
@@ -10,7 +10,7 @@ import AboutSection from '../components/AboutUs/About';
 import SponsorSection from '../components/Sponsor/Sponsor';
 import FAQ from '../components/Faq/Faq';
 import TimelineSection from '../components/TimelineSection/Timeline';
-import { Footer } from '../components/marginals/Footer/Footer';
+import { Footer } from '../components/marginals';
 import Prizes from '../components/Prizes/Prizes';
 
 const Homepage = ({ location }) => {
@@ -64,19 +64,3 @@ const Homepage = ({ location }) => {
   );
 };
 export default Homepage;
-
-// import React, { useState } from 'react';
-// import NavBar from '../components/marginals/Navbar/navbar';
-// import { MenuContext } from '../components/marginals/Navbar/MenuContext';
-
-// export default function Playground() {
-//   const [menuOpen, setMenuOpen] = useState(false);
-//   const toggleMenuOpen = () => (menuOpen ? setMenuOpen(false) : setMenuOpen(true));
-//   return (
-//     <>
-//       <MenuContext.Provider value={{ menuOpen, toggleMenuOpen }}>
-//         <NavBar />
-//       </MenuContext.Provider>
-//     </>
-//   );
-// }
diff --git a/src/styles/carouselstyles.css b/src/styles/carouselstyles.css
index 9e0ee19..971cb15 100644
--- a/src/styles/carouselstyles.css
+++ b/src/styles/carouselstyles.css
@@ -1,6 +1,7 @@
 @import '~slick-carousel/slick/slick.css';
 @import '~slick-carousel/slick/slick-theme.css';
 .slider {
+  min-height: 400px;
 }
 .header {
   margin: 50px auto;
@@ -14,14 +15,16 @@
   aspect-ratio: 4/3;
 }
 .slide {
+  margin: 50px 0px;
   transform: scale(0.7);
-  transition: 0.5s;
+  transition: 0.6s;
   border-radius: 12px;
 }
 .slide-active {
   filter: blur(0);
   opacity: 1;
   transform: scale(1.1);
+  transition: 0.8s;
   border-radius: 20px;
 }
 .container {
@@ -33,14 +36,23 @@
 .slick-next:before {
   display: none;
 }
+
+@media screen and (max-width: 996px) {
+  .slide,
+  .slide img {
+    height: 300px;
+    width: 450px;
+    border-radius: 5px;
+  }
+}
 @media screen and (max-width: 768px) {
   .header {
     font-size: 7vw;
   }
   .slide,
   .slide img {
-    width: 288px;
-    height: 180px;
+    width: 300px;
+    height: 200px;
     border-radius: 5px;
   }
   .arrow {
@@ -63,27 +75,23 @@
     justify-content: flex-end;
   }
 }
-@media screen and (max-width: 996px) {
-  .slide,
-  .slide img {
-    height: 280px;
-    border-radius: 5px;
-  }
-}
 @media screen and (max-width: 554px) {
+  .slider {
+    height: 300px;
+  }
   .slide,
   .slide img {
     height: 200px;
-    border-radius: 5px;
+    border-radius: 20px;
   }
 }
 @media screen and (max-width: 491px) {
   .slide,
   .slide img {
-    height: 280px;
-    border-radius: 5px;
+    height: 200px;
+    border-radius: 20px;
     width: 300px;
     position: relative;
-    left: 5%;
+    left: 2.4%;
   }
 }