Merge pull request #204 from neharika-garg-20/main

Ribbon responsiveness added
ecelliitbhu · Nov 27, 2024 · 57bec22 · 57bec22
2 parents c00de70 + eb3d8c4
commit 57bec22
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 25 deletions.
diff --git a/components/forms/StartupJunctionForm.jsx b/components/forms/StartupJunctionForm.jsx
@@ -125,8 +125,8 @@ export default function StartupJunctionForm() {
               {...register("city", { required: true })}
             >
               <option>Open this select preferred city</option>
-              <option value="Delhi/NCR">Delhi/NCR</option>
-              <option value="Bengaluru">Bengaluru</option>
+              <option value="Pune">Pune</option>
+              <option value="Banglore">Banglore</option>
 
             </Form.Select>
             {errors.city && (

diff --git a/components/ribbons.js b/components/ribbons.js
@@ -6,35 +6,35 @@ const Ribbon = () => {
   const frames = [
     {
       imageSrc: "https://s3.ap-south-1.amazonaws.com/townscript-production/images/ST1722320782225STENDf3691766-15cd-4630-a786-0edfbeba48cd.jpg",
-      text: "20<sup>th</sup> TO 22<sup>nd</sup> SEPT 2024"
+
     },
     {
       imageSrc: "https://s3.ap-south-1.amazonaws.com/townscript-production/images/ST1722320782225STENDf3691766-15cd-4630-a786-0edfbeba48cd.jpg",
-      text: "20<sup>th</sup> TO 22<sup>nd</sup> SEPT 2024"
+
     },
     {
       imageSrc: "https://s3.ap-south-1.amazonaws.com/townscript-production/images/ST1722320782225STENDf3691766-15cd-4630-a786-0edfbeba48cd.jpg",
-      text: "20<sup>th</sup> TO 22<sup>nd</sup> SEPT 2024"
+
     },
     {
       imageSrc: "https://s3.ap-south-1.amazonaws.com/townscript-production/images/ST1722320782225STENDf3691766-15cd-4630-a786-0edfbeba48cd.jpg",
-      text: "20<sup>th</sup> TO 22<sup>nd</sup> SEPT 2024"
+
     },
     {
       imageSrc: "https://s3.ap-south-1.amazonaws.com/townscript-production/images/ST1722320782225STENDf3691766-15cd-4630-a786-0edfbeba48cd.jpg",
-      text: "20<sup>th</sup> TO 22<sup>nd</sup> SEPT 2024"
+
     },
     {
       imageSrc: "https://s3.ap-south-1.amazonaws.com/townscript-production/images/ST1722320782225STENDf3691766-15cd-4630-a786-0edfbeba48cd.jpg",
-      text: "20<sup>th</sup> TO 22<sup>nd</sup> SEPT 2024"
+
     }
   ];
 
 
   const repeatedFrames = [...frames, ...frames];
 
   return (
-    <div className="overflow-hidden bg-white shadow-md relative">
+    <div className="overflow-hidden bg-white shadow-md relative mb-16">
       <style>
         {`
           @keyframes moveRibbon {
@@ -44,11 +44,11 @@ const Ribbon = () => {
           .animate-ribbon {
             display: flex;
             animation: moveRibbon 30s linear infinite; 
-            width: calc(100%);
+            width: 100vw
           }
           .frame {
             flex: none;
-            width: calc(200% / ${frames.length});  
+            width: calc(200vw / ${frames.length});  
             white-space: nowrap; 
            
            
@@ -58,26 +58,34 @@ const Ribbon = () => {
          
           }
           .text-container {
-            display: flex; /* Flexbox for horizontal alignment */
-            align-items: center; /* Center vertically */
+            display: flex; 
+            align-items: center; 
+            flex-wrap:wrap;
           }
              .text-shadow {
-            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); /* Add your desired shadow here */
-            font-weight: bold; /* Make text bold */
-            font-size: 1.5rem;
+            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); 
+            font-weight: bold; 
+           
           }
         `}
       </style>
       <div className="flex animate-ribbon">
         {repeatedFrames.map((frame, index) => (
           <div key={index} className="frame bg-white shadow-md flex items-center justify-center py-2">
-            <div className="text-container mx-2 text-sm sm:text-base font-bold">
+            <div className="text-container flex flex-wrap justify-center items-center mx-2 text-sm sm:text-base font-bold">
               <img 
                 src={frame.imageSrc} 
                 alt="Event" 
-                className="h-15 sm:h-16 mr-2" 
+                className="h-12 sm:h-10 md:h-11 lg:h-12 xl:h-14 mr-2" 
               />
-              <span className="text-gray-700  text-shadow" dangerouslySetInnerHTML={{ __html: frame.text }} />
+              <div className="text-gray-700 justify-center  items-center flex flex-wrap text-shadow" />
+
+              <div className="ml-2 mr-2">20<sup>th</sup></div>
+              <div className="mr-2">TO</div>
+              <div className="mr-2">22<sup>nd</sup></div>
+              <div className="mr-2">SEPT</div>
+              <div className="mr-2">2024</div>
+
             </div>
           </div>
         ))}
@@ -87,3 +95,4 @@ const Ribbon = () => {
 };
 
 export default Ribbon;
+
diff --git a/pages/index.js b/pages/index.js
@@ -10,7 +10,9 @@ import "../styles/globals.scss";
 import React from "react";
 import Summit from "../public/summit.png";
 import Ribbon from "../components/ribbons"
+
 export default function Home() {
+
   return (
     <>
       <Head>
@@ -48,10 +50,21 @@ export default function Home() {
           cardType: "summary_large_image",
         }}
       />
+
+
       <Nav />
-      <Ribbon></Ribbon>
+
+
+
+
+
       <div>
+      <Row>
+  <Ribbon></Ribbon>
+</Row>
+
         <Container fluid className="body">
+
 {/*           
           <section className={styles.sectionHero}>
             <div className={styles.hero}>
@@ -195,9 +208,23 @@ export default function Home() {
 </section> */}
 
 
+          <Row className="header" >
 
-          <Row className="header">
             <Col className="info">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
               <h1>E-Cell IIT BHU</h1>
               <h2>
                 {"Accelerate Your"}

diff --git a/pages/startup_junction/index.tsx b/pages/startup_junction/index.tsx
@@ -30,13 +30,13 @@ const StartupJunction: FunctionComponent<Props> = () => {
                 <div className={styles.venue}>
                   <div>
                     <CalendarDays />
-                    <span className={styles.heroDate}> 15th December 2023</span>
+                    <span className={styles.heroDate}> 13th December 2024</span>
                   </div>
                   <div>
                     <MapPin />
                     <span className={styles.heroDate}>
                       {" "}
-                      Delhi/NCR and Bengaluru
+                      Pune and Banglore
                     </span>
                   </div>
                 </div>
@@ -49,13 +49,18 @@ const StartupJunction: FunctionComponent<Props> = () => {
                   propel your startup forward.
                 </p>
 
+
                 <Link
-                  href="https://forms.gle/LZhuEfNJ1Qhkc4cy7"
-                  target={"_blank"}
+                  href="/forms/startup_junction"
+                  target="_blank"
+                  rel="noopener noreferrer"
                   className={`${styles.btn} ${styles.btnFill} ${styles.marginRightBtn}`}
                 >
                   Register
                 </Link>
+
+
+
                 <Link
                   href={"/startup_junction#about"}
                   className={`${styles.btn} ${styles.btnOutline} ${styles.marginRightBtn}`}

diff --git a/styles/globals.scss b/styles/globals.scss
@@ -592,6 +592,7 @@ ul {
   }
 }
 @media only screen and (max-width: 1015px) and (min-width: 991px) {
+
   .dropdown-item div h4 {
     font-size: 1rem;
   }
@@ -609,9 +610,12 @@ ul {
     margin-left: 1em;
     width: 65px;
   }
+
 }
 
 @media (max-width: 991px) {
+
+
   .notification {
     display: none;
   }
@@ -727,6 +731,7 @@ ul {
   .nav-item:hover {
     box-shadow: none;
   }
+
 
   button {
     display: inline;
@@ -837,6 +842,8 @@ ul {
 .body {
   max-width: 1390px;
   margin: auto;
+
+
 }
 .header {
   /* max-width: 1480px; */
@@ -901,11 +908,15 @@ ul {
   color: grey;
 }
 @media (max-width: 991px) {
+  .body{
+    margin-top:200px;
+  }
   .header {
     height: 100%;
     display: grid;
     grid-template-columns: 1fr;
     margin-top: 100px;
+
   }
   .info {
     padding-left: 0px;