Merge pull request #3 from NepTechTribe/dev-2

Dev 2

Author: devsdenepal

README.md

@@ -1,8 +1 @@
-# React + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+#Website Coming Soon

src/App.jsx

@@ -4,6 +4,7 @@ import Hero from './assets/Components/Hero/Hero'
 import Programs from './assets/Components/Programs/Programs'
 import Title from './assets/Components/Title/Title'
 import About from './assets/Components/About/About'
+import Upcoming from './assets/Components/Upcoming/Upcoming'
 const App = () => {
   return (
     <div>
@@ -14,6 +15,8 @@ const App = () => {
       <About></About>
      <Title title='OUR PROGRAMS' subtitle='What We Offer'></Title>
      <Programs></Programs>
+     <Title title='ANNOUNCEMENTS' subtitle='Our Upcoming Event'></Title>
+     <Upcoming></Upcoming>
      </div>
     </div>
   )

src/assets/Components/Programs/Programs.jsx

@@ -13,6 +13,7 @@ const Programs = () => {
                     {/* <img src={icon1} alt="" /> */}
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="#ffffff" d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></svg>                
                     <p>Social Skill Development</p>
+                    
                     </div>
             </div>
             <div className="program">

src/assets/Components/Upcoming/Upcoming.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import upcomingbanner from '../hackto.jpg';
+const Upcoming = () => {
+    return (
+        <div class="about">
+            <div class="about-left">
+                <img src={upcomingbanner} alt="" class="about-img" />
+            </div>
+            <div class="about-right">
+                <h2>HactoberFest Hackathon Series</h2>
+                <p>Ignite your <b> Hacktoberfest </b> with our first <i>Hackathon Series</i> !</p>
+                <p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="#212ea0" d="M302.8 312C334.9 271.9 408 174.6 408 120C408 53.7 354.3 0 288 0S168 53.7 168 120c0 54.6 73.1 151.9 105.2 192c7.7 9.6 22 9.6 29.6 0zM416 503l144.9-58c9.1-3.6 15.1-12.5 15.1-22.3L576 152c0-17-17.1-28.6-32.9-22.3l-116 46.4c-.5 1.2-1 2.5-1.5 3.7c-2.9 6.8-6.1 13.7-9.6 20.6L416 503zM15.1 187.3C6 191 0 199.8 0 209.6L0 480.4c0 17 17.1 28.6 32.9 22.3L160 451.8l0-251.4c-3.5-6.9-6.7-13.8-9.6-20.6c-5.6-13.2-10.4-27.4-12.8-41.5l-122.6 49zM384 255c-20.5 31.3-42.3 59.6-56.2 77c-20.5 25.6-59.1 25.6-79.6 0c-13.9-17.4-35.7-45.7-56.2-77l0 194.4 192 54.9L384 255z" /></svg>
+                    &nbsp; American Corner, Bhairahawa | &nbsp;
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#212ea0" d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l352 0 0 256c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256z" /></svg>&nbsp; October 1-31 | &nbsp;
+                    <br/><br/><button className='btn'>Register Now!</button>
+                </p>
+            </div>
+        </div>
+    )
+}
+
+export default Upcoming

src/assets/Components/hackto.jpg

@@ -5,6 +5,10 @@
     --h2-color: #1272A5;
     --h1-color: #212EA0;
 }
+svg{
+    height: 25px;
+    width: 30px;
+}
 .title {
     color: var(--h1-color);
 }