From b425c5c1da2ee357754c87d0871d09240f787fd9 Mon Sep 17 00:00:00 2001 From: heyyakash Date: Thu, 23 Nov 2023 22:44:02 +0530 Subject: [PATCH] added banner --- package-lock.json | 22 +++++++ package.json | 1 + src/App.js | 2 + src/assets/scss/form/form.scss | 65 +++++++++++++++++++++ src/assets/scss/style.scss | 5 ++ src/components/Form/Form.jsx | 100 ++++++++++++++++++++++++++++++++ src/components/layout/Header.js | 8 +++ yarn.lock | 7 ++- 8 files changed, 209 insertions(+), 1 deletion(-) create mode 100644 src/assets/scss/form/form.scss create mode 100644 src/components/Form/Form.jsx diff --git a/package-lock.json b/package-lock.json index f0955a7..3d80140 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "react-awesome-slider": "^4.1.0", "react-dom": "^16.14.0", "react-ga": "^2.7.0", + "react-hook-form": "^7.48.2", "react-router-dom": "^5.3.4", "react-scripts": "^3.4.4", "react-typical": "^0.1.3", @@ -15093,6 +15094,21 @@ "react": "^15.6.2 || ^16.0" } }, + "node_modules/react-hook-form": { + "version": "7.48.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz", + "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -31262,6 +31278,12 @@ "integrity": "sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA==", "requires": {} }, + "react-hook-form": { + "version": "7.48.2", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz", + "integrity": "sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 69ad188..3174a8b 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "react-awesome-slider": "^4.1.0", "react-dom": "^16.14.0", "react-ga": "^2.7.0", + "react-hook-form": "^7.48.2", "react-router-dom": "^5.3.4", "react-scripts": "^3.4.4", "react-typical": "^0.1.3", diff --git a/src/App.js b/src/App.js index c0bac4d..aac93a7 100644 --- a/src/App.js +++ b/src/App.js @@ -15,6 +15,7 @@ import Coc from './views/Coc'; import Events from './components/Events/Events'; import Members from "./components/Members/Members"; import Achievements from './components/Achievements/Achievements' +import Form from './components/Form/Form'; // Initialize Google Analytics ReactGA.initialize(process.env.REACT_APP_GA_CODE); @@ -47,6 +48,7 @@ const App = () => { + )} /> diff --git a/src/assets/scss/form/form.scss b/src/assets/scss/form/form.scss new file mode 100644 index 0000000..f537285 --- /dev/null +++ b/src/assets/scss/form/form.scss @@ -0,0 +1,65 @@ +.form{ + max-width: 1200px; + width: 100%; + margin: 0 auto; +} +.form-container{ + gap: 1rem ; + max-width:500px; + margin:0 auto; + width:100%; +} + +.input-box{ + width: 100% !important; + border:1px solid rgba(255, 255, 255, 0.492); + outline:none; + color:white; + border-radius: 6px; + padding: 10px; + background-color: transparent; + + &::placeholder{ + font-size: .8rem; + } +} + +.form-btn{ + background-color: rgb(25, 155, 25); + border-radius: 6px; + cursor:pointer; + width: 100%; + padding:10px; + border:none; + outline:none; + color:white; + transition: all; + transition-duration: 150ms; + + &:hover{ + background-color: white; + color:black; + } +} + +.form-label{ + font-size: .8rem; +} + +.flex{ + display: flex; +} +.flex-col{ + flex-direction: column; +} +.flex-wrap{ + flex-wrap: wrap; +} +.flex-center{ + align-items: center; + justify-content: center; +} + +.w-full{ + width:100%; +} \ No newline at end of file diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 7ddef89..d82f8c2 100644 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -134,4 +134,9 @@ --------------------------------------------------------------*/ @import "events/events"; +/*-------------------------------------------------------------- +# Form +--------------------------------------------------------------*/ +@import "form/form"; + diff --git a/src/components/Form/Form.jsx b/src/components/Form/Form.jsx new file mode 100644 index 0000000..53305a4 --- /dev/null +++ b/src/components/Form/Form.jsx @@ -0,0 +1,100 @@ +import React, { useState } from 'react' +import Hero2 from '../sections/Hero2'; + +import SectionHeader from '../sections/partials/SectionHeader'; +import { useForm } from 'react-hook-form'; + +const Form = () => { + + const sectionHeader = { + title: 'Recruitment Form 2023-2024', + }; + + const [mode, setMode] = useState(false) + const [display, setDisplay] = useState(false) + const changeMode = (e) => { + console.log(e.target.value) + if (e.target.value === "1") setMode(false) + else setMode(true) + setDisplay(true) + } + + const { register, handleSubmit,reset } = useForm() + + const onSubmit = (data) => { + console.log(data) + reset() + } + + return ( + <> + + +
+ +
+
+ +
+ + +
+
+
+ + +
+
+ + +
+ +
+ {display && (<> + {mode === true ? (<> +
+ + +
+ ) : (<> +
+ + +
+ )})} +
+ + +
+
+ + +
+
+ +