Merge pull request #120 from Vinoth-git-17/enhancement

Enhancement of Home UI by Changing fonts and adjusting layouts
namespacecomm · Oct 2, 2023 · 185ae71 · 185ae71
2 parents 8b76225 + 753829f
commit 185ae71
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 94 deletions.
diff --git a/public/index.html b/public/index.html
@@ -36,7 +36,8 @@
       * {
         padding: 0;
         margin: 0;
-        font-family: "Roboto", sans-serif;
+        font-family: 'Plus Jakarta Sans', sans-serif;
+        text-wrap: balance;
         scroll-snap-type: y mandatory;
         scroll-behavior: smooth;
       }

diff --git a/src/Sections/About/About.jsx b/src/Sections/About/About.jsx
@@ -43,9 +43,9 @@ const Left = styled.div`
 `;
 
 const Title = styled.h1`
-  font-size: 52px;
+font-size:40px;
   font-weight: bold;
-  font-style: italic;
+  border-bottom:3px solid #F5F5F5;
   margin: auto 10%;
   background: #3530cf;
   background: repeating-radial-gradient(
@@ -56,10 +56,10 @@ const Title = styled.h1`
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   @media only screen and (max-width: 768px) {
-    font-size: 52px;
+    font-size: 30px;
   }
   @media only screen and (max-width: 1030px) {
-    font-size: 70px;
+    font-size: 30px;
   }
 `;
 
@@ -76,7 +76,7 @@ const Right = styled.div`
 `;
 
 const Desc = styled.p`
-  font-size: 24px;
+  font-size: 22px;
   text-align: justify;
   color: lightgray;
   margin: auto 10%;

diff --git a/src/Sections/Contact/Contact.jsx b/src/Sections/Contact/Contact.jsx
@@ -41,8 +41,8 @@ const Left = styled.div`
 
 const Title = styled.h1`
   font-size: 50px;
-  font-weight: 200;
-  font-style: italic;
+  font-weight: 600;
+  
 `;
 
 const Form = styled.form`

diff --git a/src/Sections/Events/Events.jsx b/src/Sections/Events/Events.jsx
@@ -32,7 +32,7 @@ function Events() {
         <div className=" px-6 mx-auto">
           <section className="mb-3 text-center">
             <h2 className="text-5xl font-bold mb-12">
-              <span className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600 italic">
+              <span className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600">
                 <a href="/events">Our Timeline</a>
               </span>
             </h2>

diff --git a/src/Sections/Hero/Hero.jsx b/src/Sections/Hero/Hero.jsx
@@ -61,10 +61,10 @@ const Container = styled.div`
   scroll-snap-align: center;
   width: 1400px;
   display: flex;
-  padding-top: 100px;
-  justify-content: center;
-
-  @media only screen and (max-width: 768px) {
+  justify-content:space-between;
+  margin-top:100px;
+  padding:9% 14% ;
+  @media only screen and (max-width: 1030px) {
     width: 100%;
     height: 100vh;
     flex-direction: column;
@@ -78,109 +78,106 @@ const Left = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 20px;
-
   @media only screen and (max-width: 768px) {
     flex: 1;
-    align-items: center;
+    
   }
   @media only screen and (max-width: 1030px) {
     flex: 1;
-    align-items: center;
+    
   }
   @media only screen and (min-width: 1030px) and (max-width: 1400px) {
     flex: 1;
   }
 `;
 
 const Title = styled.h1`
-  font-size: 50px;
+  font-size: 40px;
+  font-weight:700;
+  
 
-  @media only screen and (max-width: 768px) {
-    text-align: center;
+  @media only screen and (max-width: 768px) {  
     font-size: 40px;
   }
   @media only screen and (max-width: 1030px) {
-    text-align: center;
-    font-size: 50px;
+    font-size: 60px;
   }
   @media only screen and (min-width: 1030px) and (max-width: 1400px) {
-    text-align: center;
-    font-size: 50px;
+    font-size: 60px;
   }
 `;
 
 const WhatWeDo = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  @media only screen and (min-width: 1030px) and (max-width: 1400px) {
-    text-align: center;
-    font-size: 50px;
-    justify-content: center;
-  }
+@media only screen and (min-width: 1030px) and (max-width: 1400px) {
+  font-size: 50px;
+}
 `;
 
 const Subtitle = styled.p`
-  font-size: 84px;
-  font-weight: bold;
-  background: #3530cf;
-  background: repeating-radial-gradient(
-    circle farthest-side at center center,
-    #3530cf 0%,
-    #44cfcf 100%
-  );
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  @media only screen and (max-width: 768px) {
-    display: flex;
-    font-size: 64px;
-    text-align: center;
-  }
-  @media only screen and (max-width: 1030px) {
-    font-size: 80px;
-  }
-  @media only screen and (min-width: 1030px) and (max-width: 1400px) {
-    text-align: center;
-    font-size: 50px;
-  }
+font-size: 84px;
+font-weight: bold;
+background: #3530cf;
+background: repeating-radial-gradient(
+  circle farthest-side at center center,
+  #3530cf 0%,
+  #44cfcf 100%
+);
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+@media only screen and (max-width: 768px) {
+  font-size: 40px;
+}
+}
+@media only screen and (max-width: 1030px) {
+  
+  font-size: 50px;
+  
+}
+@media only screen and (min-width: 1030px) and (max-width: 1400px) {
+  font-size: 50px;
+}
 `;
 
 const Desc = styled.p`
   font-size: 24px;
   color: lightgray;
-  @media only screen and (max-width: 768px) {
-    padding: 20px;
-    text-align: center;
-  }
   @media only screen and (max-width: 1030px) {
-    padding: 20px;
-    text-align: center;
     font-size: 30px;
   }
   @media only screen and (min-width: 1030px) and (max-width: 1400px) {
-    text-align: center;
-    font-size: 50px;
+    font-size: 40px;
+  }
+`;
+const ShortDesc = styled.p`
+  font-size: 16px;
+  color: lightgray;
+  padding-top:4px;
+  
+  @media only screen and (max-width: 1030px) {
+    font-size: 16px;
+  }
+  @media only screen and (min-width: 1030px) and (max-width: 1400px) {
+    font-size: 24px;
   }
+ 
 `;
 
 const Right = styled.div`
   flex: 3;
   justify-content: center;
   position: relative;
   @media only screen and (max-width: 1030px) {
-    ${"" /* flex: 1; */}
-    display: none;
+    display:none;
   }
   @media only screen and (min-width: 1030px) and (max-width: 1400px) {
-    ${"" /* flex: 1; */}
-    display: none;
+      flex: 1; 
+      
   }
 `;
 
 const Img = styled.iframe`
-  width: 800px;
-  height: 600px;
+  width: 600px;
+  height: 500px;
   object-fit: contain;
   position: absolute;
   top: 0;
@@ -190,16 +187,16 @@ const Img = styled.iframe`
   margin: auto;
   ${"" /* animation: animate 2s infinite ease alternate; */}
 
-  @media only screen and (max-width: 768px) {
-    width: 300px;
-    height: 300px;
-  }
+  // @media only screen and (max-width: 768px) {
+  //   width: 300px;
+  //   height: 300px;
+  // }
 
-  @keyframes animate {
-    to {
-      transform: translateY(20px);
-    }
-  }
+  // @keyframes animate {
+  //   to {
+  //     transform: translateY(20px);
+  //   }
+  // }
 `;
 
 const Hero = () => {
@@ -214,7 +211,7 @@ const Hero = () => {
               <Subtitle>Coding Club</Subtitle>
             </WhatWeDo>
             <Desc>Bhagwan Parshuram Institute of Technology</Desc>
-            <Desc>GGSIPU, New Delhi, India</Desc>
+            <ShortDesc>GGSIPU, New Delhi, India</ShortDesc>
           </Left>
           <Right>
             {/* <Img src="./img/logo.png" /> */}

diff --git a/src/Sections/Teams/Teams.jsx b/src/Sections/Teams/Teams.jsx
@@ -132,7 +132,7 @@ function Teams() {
       <Container>
         <div className="px-6 mx-auto">
           <section className="mb-5 text-white text-center">
-            <h2 className="text-5xl sm:text-xl md:text-5xl font-bold mb-12 mt-12 italic">
+            <h2 className="text-5xl sm:text-xl md:text-5xl font-bold mb-12 mt-12">
               Meet the{" "}
               <span className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-800">
                 <a href="/team">Team</a>

diff --git a/src/Sections/Testimonials/Testimonials.jsx b/src/Sections/Testimonials/Testimonials.jsx
@@ -37,6 +37,7 @@ const Title = styled.h1`
   font-size: calc(1rem + 1.5vw);
   font-style: italic;
   margin-top: 1.5rem;
+  border-bottom:3px solid #F5F5F5;
   position: relative;
   &::before {
     content: "";

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -41,18 +41,24 @@ const NavbarInnerContainer = styled.div`
 
 const NavbarLinkContainer = styled.div`
   display: flex;
+ 
 `;
 
+
+const NavLinks = styled.div`
+  display: flex;
+  gap: 20px
+ `;
+
 const NavbarLink = styled(Link)`
   color: white;
   font-size: 20px;
-  font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
-  margin: 10px;
-
-  @media (max-width: 700px) {
+  @media (max-width: 900px) {
     display: none;
   }
+ 
+
 `;
 
 const NavbarLinkExtended = styled(Link)`
@@ -61,6 +67,7 @@ const NavbarLinkExtended = styled(Link)`
   font-family: Arial, Helvetica, sans-serif;
   text-decoration: none;
   margin: 10px;
+  
 `;
 
 const Logo = styled.img`
@@ -79,7 +86,7 @@ const OpenLinksButton = styled.button`
   font-size: 50px;
   cursor: pointer;
 
-  @media (min-width: 700px) {
+  @media (min-width: 900px) {
     display: none;
     align-self: center;
   }
@@ -104,7 +111,7 @@ const Button = styled.button`
   border: none;
   border-radius: 5px;
   cursor: pointer;
-  @media (max-width: 700px) {
+  @media (max-width: 900px) {
     display: none;
   }
 `;
@@ -118,13 +125,15 @@ function Navbar() {
         <LeftContainer>
           <Logo src="./img/logo2.png"></Logo>
           {/* <NavbarLink to="/">NSCC</NavbarLink> */}
-          <NavbarLink to="/"> Home</NavbarLink>
-          <NavbarLink to="/projects">Projects</NavbarLink>
-          <NavbarLink to="/events">Events</NavbarLink>
-          <NavbarLink to="/programs">Programs</NavbarLink>
-          <NavbarLink to="/team">Team</NavbarLink>
-          <NavbarLink to="/resources">Resources</NavbarLink>
-          <NavbarLink to="http://blog.nsccbpit.tech/">Blog</NavbarLink>
+          <NavLinks>
+            <NavbarLink to="/"> Home</NavbarLink>
+            <NavbarLink to="/projects">Projects</NavbarLink>
+            <NavbarLink to="/events">Events</NavbarLink>
+            <NavbarLink to="/programs">Programs</NavbarLink>
+            <NavbarLink to="/team">Team</NavbarLink>
+            <NavbarLink to="/resources">Resources</NavbarLink>
+            <NavbarLink to="http://blog.nsccbpit.tech/">Blog</NavbarLink>
+          </NavLinks>
         </LeftContainer>
         <RightContainer>
           <NavbarLinkContainer>

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/src/utils/ImageCrousel.jsx b/src/utils/ImageCrousel.jsx
@@ -4,8 +4,7 @@ import styled from 'styled-components';
 const ImageCarouselContainer = styled.div`
   position: relative;
   width: 100%;
-  overflow: hidden;
-
+  overflow: hidden; 
   @media screen and (min-width: 768px) {
     margin-bottom: 0;
   }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -21,6 +21,10 @@ module.exports = {
       boxShadow: {
         card: "0px 35px 120px -15px #211e35",
       },
+      fontFamily :{
+        Inter : ['Inter', 'sans-serif'],
+        Inter : ['Plus Jakarta Sans', 'sans-serif'],
+      },
       screens: {
         xs: "450px",
       },