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 87cace3. * 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 <[email protected]>
dscnitrourkela · Dec 2, 2023 · cf5e2f5 · cf5e2f5
1 parent 43d4e2b
commit cf5e2f5
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 62 deletions.
diff --git 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
@@ -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
@@ -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
@@ -9,22 +9,30 @@ 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`
   ${tw`
     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
@@ -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
@@ -0,0 +1 @@
+export { default as Footer } from './Footer';
diff --git a/src/components/marginals/Footer/styles.jsx → src/components/marginals/Footer/styles.js b/src/components/marginals/Footer/styles.jsx → 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
@@ -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
@@ -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
@@ -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%;
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as NavBar } from './Navbar/navbar';
		export { Footer } from './Footer/Footer';