feat: 3

technical-council-nitt · Sep 27, 2023 · 5f7105b · 5f7105b
1 parent ed338b1
commit 5f7105b
Show file tree

Hide file tree

Showing 17 changed files with 229 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
+    "react-vertical-timeline-component": "^3.6.0",
     "vercel": "^32.3.1"
   },
   "devDependencies": {

diff --git a/src/Components/AboutUs/index.jsx b/src/Components/AboutUs/index.jsx
@@ -37,24 +37,19 @@ const AboutUs = () => {
     <div className="aboutPage" id="aboutus">
       <div className="inBox">
         <div className="Box">
-          <motion.div className="text-wrapper" initial = {{opacity : 0}} whileInView={{opacity : 1}} transition={{duration : 1}} >About Us</motion.div>
-          <motion.p initial = {{opacity : 0}} whileInView={{opacity : 1}} transition={{duration : 1}} className="div">
-            The department lays prime focus on academics interspersed with
-            co-curricular and extra-curricular activities that bring the
-            versatility of its students to the fore and gives them a sound sense
-            of perspective. The faculty comprises of experienced and dedicated
-            teachers who with their expert inputs encourage students to explore
-            new avenues. The computer society “Websters” was started with the
-            aim to foster interest in the world of computers and technology. It
-            provides a platform for like-minded brains to communicate with each
-            other and expand their horizons.
+          <motion.div className="text-wrapper" viewport={{once : true}} initial = {{opacity : 0}} whileInView={{opacity : 1}} transition={{duration : 1}} >About Us</motion.div>
+          <motion.p initial = {{opacity : 0}} viewport={{once : true}} whileInView={{opacity : 1}} transition={{duration : 1}} className="div">
+          Welcome to TransfiNITTe, the pinnacle of innovation and technology hosted by the Technical Council of the National Institute of Technology, Tiruchirappalli, in collaboration with SCIENT, the Student Centre for Innovation in Engineering and Technology-NITT. Our journey began with a vision to foster creativity, push boundaries, and redefine possibilities. As we gear up for our fifth edition, TransfiNITTe'23 promises to be an electrifying experience like never before. TransfiNITTe'22 was a testament to the unyielding spirit of innovation. With over 50 teams and 300+ brilliant minds from NIT Trichy, it was a 42-hour marathon of coding, ideation, and relentless problem-solving. Together, we tackled challenges spanning a diverse array of software and hardware domains. TransfiNITTe'23 aspires to raise the bar even higher. With a goal of hosting 100+ teams and 500+ participants, we are set to create history once again. For us, this event is not just about innovation; it's about forging meaningful partnerships, driving change, and celebrating the magic that happens when brilliant minds unite.
           </motion.p>
+          <motion.div initial = {{ opacity : 0}} viewport={{once : true}} whileInView={{ opacity : 1}} transition={{duration : 1}}>
           <Carousel sx={{ maxWidth : "30rem", marginTop : "2rem", marginBottom : "2rem"}} mx="auto"  loop auto plugins={[autoplay.current]}
       onMouseEnter={autoplay.current.stop}
       onMouseLeave={autoplay.current.reset}
       classNames={classes}>
             {slides}
           </Carousel>
+          </motion.div>
+
         </div>
       </div>
     </div>

diff --git a/src/Components/Contact/contact.css b/src/Components/Contact/contact.css
@@ -1,6 +1,54 @@
+
+
+.transfinitte-footer{
+    width : 20vw;
+    display : inline-block;
+    text-align : right;
+}
+
+.footer-d1{
+    width: 30vw;
+    display: inline-block;
+}
+
+.footer-d2{
+    width: 30vw;
+    display: inline-block;
+}
+
+.mainc{
+   width : 80vw;
+    margin-left : auto;
+    margin-right : auto;
+    padding : 0rem 6rem;
+}
+
 @media only screen and (max-width: 600px) {
     .mainc{
-        text-align: center;
+        text-align: left;
         line-height: 2;
+        padding : 1rem;
+    }
+    .footer-d1{
+        width: 50%;
+        display: inline-block;
+    }
+
+    .footer-d2{
+        width: 50%;
+        display: inline-block;
+    }
+    .transfinitte-footer{
+        margin-top: 3rem;
+        width: 100%;
+        display: block;
+        text-align: center;
     }
-  }
+  }
+
+.mainc a{
+    color: white;
+}
+.mainc a:hover{
+    color: #f5bffb;
+}
diff --git a/src/Components/Contact/index.jsx b/src/Components/Contact/index.jsx
@@ -6,28 +6,28 @@ const Contact = () => {
 
     return (
         <>
-            <section id="footer" style={{background : "linear-gradient(180deg, rgb(11, 2, 33) 0%, rgb(11, 1, 33) 100%)", padding : "2rem", lineHeight : 1.5,}}>
-                <div style={{ width : "fit-content", marginLeft : "auto", marginRight : "auto"}} className="mainc">
-                    <div style={{width : "15rem", display : "inline-block"}}>
+            <section id="contact" style={{background : "linear-gradient(180deg, rgb(11, 2, 33) 0%, rgb(11, 1, 33) 100%)", padding : "2rem", lineHeight : 1.5,}}>
+                <div  className="mainc">
+                    <div className="footer-d1">
                         <h3 style={{marginBottom : "0.5rem", marginTop : "0.5rem"}}>Contact</h3>
                         <p>Phone No : 123456789</p>
                         <p>Email : [email protected]</p>
                         <h3 style={{marginBottom : "0.5rem", marginTop : "0.5rem"}}>Problem Statements</h3>
-                        <a style={{color : "white", cursor : "pointer"}}>2022 archive</a> <br/>
-                        <a style={{color : "white", cursor : "pointer"}}>2021 archive</a> <br/>
-                        <a style={{color : "white", cursor : "pointer"}}>2020 archive</a>
+                        <a style={{cursor : "pointer"}}>2022 archive</a> <br/>
+                        <a style={{cursor : "pointer"}}>2021 archive</a> <br/>
+                        <a style={{cursor : "pointer"}}>2020 archive</a>
                     </div>
-                    <div style={{width : "15rem", display : "inline-block"}}>
+                    <div className="footer-d2">
                     <h3 style={{marginBottom : "0.5rem", marginTop : "0.5rem"}}>Address</h3>
                         <p>Orion, Lecture Hall</p>
                         <p>NIT Trichy</p>
                         <h3 style={{marginBottom : "0.5rem", marginTop : "0.5rem"}}>Social</h3>
-                        <a style={{color : "white", cursor : "pointer"}}>Twitter</a> <br/>
-                        <a style={{color : "white", cursor : "pointer"}}>Instagram</a> <br/>
-                        <a style={{color : "white", cursor : "pointer"}}>LinkedIn</a> <br/>
+                        <a style={{ cursor : "pointer"}}>Twitter</a> <br/>
+                        <a style={{ cursor : "pointer"}}>Instagram</a> <br/>
+                        <a style={{ cursor : "pointer"}}>LinkedIn</a> <br/>
 
                     </div>
-                    <div style={{width : "10rem", display : "inline-block"}}>
+                    <div  className="transfinitte-footer">
                         <img src = {logo} />
                         TRANSFINITTE
                     </div>

diff --git a/src/Components/FaQs/index.jsx b/src/Components/FaQs/index.jsx
@@ -45,7 +45,7 @@ const FaQs = () => {
   return (
     <div className="aboutPage" id="faqs">
       <div className="inBox">
-        <motion.div className="Box" initial = {{opacity : 0}} whileInView={{opacity : 1}} transition={{duration : 1}}>
+        <motion.div viewport={{once : true}} className="Box" initial = {{opacity : 0}} whileInView={{opacity : 1}} transition={{duration : 1, delay : 0.5}}>
           <div className="text-wrapper">FAQs</div>
           <Accordion       sx={{ width : "100%", marginTop : "4rem" }}
       mx="auto"

diff --git a/src/Components/Judges/index.jsx b/src/Components/Judges/index.jsx
@@ -5,12 +5,12 @@ import {motion} from "framer-motion";
 
 const Judges = () => {
   return (
-    <div className="judgesPage">
+    <div className="judgesPage" id="judges">
       <div className="Inbox">
         <div className="judges-speakers">Judges &amp; Speakers</div>
         <div className="box">
           <div className="inlineBlock">
-            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.2}}>
+            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} viewport={{once : true}}  whileInView={{transform : "scale(1)"}} transition={{delay : 0.2}}>
               <div className="info">
                 <div className="designation">SOFTWARE</div>
                 <div className="title">TECHNICAL COUNCIL</div>
@@ -20,7 +20,7 @@ const Judges = () => {
             </motion.div>
           </div>
           <div className="inlineBlock">
-            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.3}}>
+            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} viewport={{once : true}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.3}}>
               <div className="info">
                 <div className="designation">SOFTWARE</div>
                 <div className="title">TECHNICAL COUNCIL</div>
@@ -29,7 +29,7 @@ const Judges = () => {
               <img src={logo} alt="logo" />
             </motion.div>
           </div><div className="inlineBlock">
-            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.4}}>
+            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} viewport={{once : true}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.4}}>
               <div className="info">
                 <div className="designation">SOFTWARE</div>
                 <div className="title">TECHNICAL COUNCIL</div>
@@ -38,7 +38,7 @@ const Judges = () => {
               <img src={logo} alt="logo" />
             </motion.div>
           </div><div className="inlineBlock">
-            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.5}}>
+            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} viewport={{once : true}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.5}}>
               <div className="info">
                 <div className="designation">SOFTWARE</div>
                 <div className="title">TECHNICAL COUNCIL</div>
@@ -47,7 +47,7 @@ const Judges = () => {
               <img src={logo} alt="logo" />
             </motion.div>
           </div><div className="inlineBlock">
-            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.6}}>
+            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} viewport={{once : true}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.6}}>
               <div className="info">
                 <div className="designation">SOFTWARE</div>
                 <div className="title">TECHNICAL COUNCIL</div>
@@ -56,7 +56,7 @@ const Judges = () => {
               <img src={logo} alt="logo" />
             </motion.div>
           </div><div className="inlineBlock">
-            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.7}}>
+            <motion.div className="judge" initial = {{transform : "scale(0.5)"}} viewport={{once : true}} whileInView={{transform : "scale(1)"}} transition={{delay : 0.7}}>
               <div className="info">
                 <div className="designation">SOFTWARE</div>
                 <div className="title">TECHNICAL COUNCIL</div>

diff --git a/src/Components/Landing/landing.css b/src/Components/Landing/landing.css
@@ -110,6 +110,7 @@
   background-repeat: no-repeat;
   background-position: center;
   height: 90vh;
+
 }
 
 #regbtn {

diff --git a/src/Components/NavBar/index.jsx b/src/Components/NavBar/index.jsx
@@ -95,7 +95,8 @@ const NavBar = () => {
 	{'label' : "Contact", url : "#contact"},
 	{'label' : "Sponsors", url : "#sponsors"},
 	{'label' : "Timeline", url : "#timeline"},
-	{'label' : "FaQs", url : "#faqs"}];
+	{'label' : "FaQs", url : "#faqs"},
+	{'label' : "Judges", url : "#judges"}];
 
 	const [opened, { toggle, close }] = useDisclosure(false);
 	const [active, setActive] = useState(links[0].link);

diff --git a/src/Components/Sponsors/index.jsx b/src/Components/Sponsors/index.jsx
@@ -14,16 +14,16 @@ const Sponsors = () => {
         <div className="Box">
           <div className="text-wrapper">Sponsors</div>
           <div className="imageHolder">
-            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5}}></motion.img>
-            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.1}}></motion.img>
-            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.2}}></motion.img>
-            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.3}}></motion.img>
-            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.4}}></motion.img>
-            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.5}}></motion.img>
-            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.6}}></motion.img>
-            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.7}}></motion.img>
-            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.8}}></motion.img>
-            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.9}}></motion.img>
+            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} viewport={{once : true}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5}}></motion.img>
+            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} viewport={{once : true}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.1}}></motion.img>
+            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} viewport={{once : true}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.2}}></motion.img>
+            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} viewport={{once : true}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.3}}></motion.img>
+            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} viewport={{once : true}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.4}}></motion.img>
+            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} viewport={{once : true}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.5}}></motion.img>
+            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} viewport={{once : true}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.6}}></motion.img>
+            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} viewport={{once : true}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.7}}></motion.img>
+            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} viewport={{once : true}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.8}}></motion.img>
+            <motion.img src={logo} initial = {{transform : "rotateZ(90deg)"}} viewport={{once : true}} whileInView = {{transform : "rotateX(0)"}} transition={{duration : 0.5, delay : 0.9}}></motion.img>
 
 
           </div>

diff --git a/src/Components/Timeline/index.jsx b/src/Components/Timeline/index.jsx
@@ -1,13 +1,66 @@
 
+import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
+import 'react-vertical-timeline-component/style.min.css';
+import "./timeline.css";
 
 
 const TimeLine = () => {
 
     return (
-        <>
-            <h1>Time Line </h1>
-        </>
-    )
+        <section className='bg'id='timeline' > 
+        <h1>TimeLine</h1>
+    <VerticalTimeline>
+  <VerticalTimelineElement
+    className="vertical-timeline-element--work test"
+    contentStyle={{ background: 'rgba(255,255,255,0.05)', color: '#fff', boxShadow : "0 3px 0 #f5bffb" }}
+    contentArrowStyle={{ borderRight: '7px solid  rgba(255,255,255,0.05)' }}
+    iconStyle={{ background: '#0E153A', color: '#fff', 'fontsize':'200px',boxShadow: "0 0 0 4px #f5bffb, inset 0 2px 0 rgba(0,0,0,.08), 0 3px 0 4px rgba(0,0,0,.05)"}}
+  >
+    <p>sdfdsfdsf</p>
+
+  </VerticalTimelineElement>
+  <VerticalTimelineElement
+    className="vertical-timeline-element--work test"
+    contentStyle={{ background: 'rgba(255,255,255,0.05)', color: '#fff', boxShadow : "0 3px 0 #f5bffb" }}
+    contentArrowStyle={{ borderRight: '7px solid  rgba(255,255,255,0.05)' }}
+    iconStyle={{ background: '#0E153A', color: '#fff', 'fontsize':'200px',boxShadow: "0 0 0 4px #f5bffb, inset 0 2px 0 rgba(0,0,0,.08), 0 3px 0 4px rgba(0,0,0,.05)"}}
+  >
+    <p>sdfdsfdsf</p>
+  </VerticalTimelineElement><VerticalTimelineElement
+    className="vertical-timeline-element--work test"
+    contentStyle={{ background: 'rgba(255,255,255,0.05)', color: '#fff', boxShadow : "0 3px 0 #f5bffb" }}
+    contentArrowStyle={{ borderRight: '7px solid  rgba(255,255,255,0.05)' }}
+    iconStyle={{ background: '#0E153A', color: '#fff', 'fontsize':'200px',boxShadow: "0 0 0 4px #f5bffb, inset 0 2px 0 rgba(0,0,0,.08), 0 3px 0 4px rgba(0,0,0,.05)"}}
+  >
+    <p>sdfdsfdsf</p>
+  </VerticalTimelineElement><VerticalTimelineElement
+    className="vertical-timeline-element--work test"
+    contentStyle={{ background: 'rgba(255,255,255,0.05)', color: '#fff', boxShadow : "0 3px 0 #f5bffb" }}
+    contentArrowStyle={{ borderRight: '7px solid  rgba(255,255,255,0.05)' }}
+    iconStyle={{ background: '#0E153A', color: '#fff', 'fontsize':'200px',boxShadow: "0 0 0 4px #f5bffb, inset 0 2px 0 rgba(0,0,0,.08), 0 3px 0 4px rgba(0,0,0,.05)"}}
+  >
+    <p>sdfdsfdsf</p>
+  </VerticalTimelineElement><VerticalTimelineElement
+    className="vertical-timeline-element--work test"
+    contentStyle={{ background: 'rgba(255,255,255,0.05)', color: '#fff', boxShadow : "0 3px 0 #f5bffb" }}
+    contentArrowStyle={{ borderRight: '7px solid  rgba(255,255,255,0.05)' }}
+    iconStyle={{ background: '#0E153A', color: '#fff', 'fontsize':'200px',boxShadow: "0 0 0 4px #f5bffb, inset 0 2px 0 rgba(0,0,0,.08), 0 3px 0 4px rgba(0,0,0,.05)"}}
+  >
+    <p>sdfdsfdsf</p>
+  </VerticalTimelineElement><VerticalTimelineElement
+    className="vertical-timeline-element--work test"
+    contentStyle={{ background: 'rgba(255,255,255,0.05)', color: '#fff', boxShadow : "0 3px 0 #f5bffb" }}
+    contentArrowStyle={{ borderRight: '7px solid  rgba(255,255,255,0.05)' }}
+    iconStyle={{ background: '#0E153A', color: '#fff', 'fontsize':'200px',boxShadow: "0 0 0 4px #f5bffb, inset 0 2px 0 rgba(0,0,0,.08), 0 3px 0 4px rgba(0,0,0,.05)"}}
+  >
+    <p>sdfdsfdsf</p>
+  </VerticalTimelineElement>
+
+</VerticalTimeline>
+
+
+
+        </section>)
 }
 
 

diff --git a/src/Components/Timeline/timeline.css b/src/Components/Timeline/timeline.css
@@ -0,0 +1,10 @@
+
+
+.bg{
+    background: linear-gradient(180deg, #0b0221 0%, #0b0121 100%);
+
+}
+
+.vertical-timeline::before{
+    background: #f5bffb;
+}
diff --git a/src/Pages/Home/index.jsx b/src/Pages/Home/index.jsx
@@ -9,8 +9,8 @@ const Home = () => {
             <Landing />
             <AboutUs />
             <Judges />
-            {/* <TimeLine /> */}
             <Sponsors />
+            <TimeLine />
             <FaQs />
             <Contact />
         </>

diff --git a/src/Pages/Register/Screenshot 2023-09-27 185655.png b/src/Pages/Register/Screenshot 2023-09-27 185655.png