From 5e21e7763bd2e85f6201e8babd6613ac8b633150 Mon Sep 17 00:00:00 2001 From: Pratibha666 Date: Thu, 2 Jan 2025 20:14:35 +0530 Subject: [PATCH] made it user friendly --- package-lock.json | 190 ++++++++++++++++++++++++++++++++++++++++ src/Pages/contact.css | 9 ++ src/Pages/contact.js | 31 +++++-- src/componets/Button.js | 7 +- 4 files changed, 227 insertions(+), 10 deletions(-) create mode 100644 src/Pages/contact.css diff --git a/package-lock.json b/package-lock.json index c69f3e6..6d8cef7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4216,6 +4216,112 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "license": "Apache-2.0", + "peer": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "license": "MIT", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "license": "MIT", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "license": "MIT", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -6382,6 +6488,13 @@ "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==", "license": "MIT" }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", + "license": "MIT", + "peer": true + }, "node_modules/bfj": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz", @@ -6419,6 +6532,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bindall-standalone": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz", + "integrity": "sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==", + "license": "MIT", + "peer": true + }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -7759,6 +7879,16 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -13636,6 +13766,13 @@ "shell-quote": "^1.8.1" } }, + "node_modules/lethargy": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz", + "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==", + "license": "MIT", + "peer": true + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13708,6 +13845,18 @@ "node": ">=8" } }, + "node_modules/locomotive-scroll": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz", + "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==", + "license": "MIT", + "peer": true, + "dependencies": { + "bezier-easing": "^2.1.0", + "smoothscroll-polyfill": "^0.4.4", + "virtual-scroll": "^1.5.2" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -17666,6 +17815,13 @@ "node": ">=8" } }, + "node_modules/smoothscroll-polyfill": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", + "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==", + "license": "MIT", + "peer": true + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18761,6 +18917,13 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "license": "MIT" }, + "node_modules/tiny-emitter": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz", + "integrity": "sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==", + "license": "MIT", + "peer": true + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -19033,6 +19196,20 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "license": "Apache-2.0", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -19303,6 +19480,19 @@ "node": ">= 0.8" } }, + "node_modules/virtual-scroll": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz", + "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==", + "license": "MIT", + "peer": true, + "dependencies": { + "bindall-standalone": "^1.0.5", + "lethargy": "^1.0.2", + "object-assign": "^4.0.1", + "tiny-emitter": "^1.0.0" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/src/Pages/contact.css b/src/Pages/contact.css new file mode 100644 index 0000000..6e3db25 --- /dev/null +++ b/src/Pages/contact.css @@ -0,0 +1,9 @@ +.form{ + box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; + background-color: white; +} +.input-hover:hover{ + border: 2px solid #a52c19; + transition: border 1s ease; + color: #320a04; +} diff --git a/src/Pages/contact.js b/src/Pages/contact.js index 54bf9f7..8c18acd 100644 --- a/src/Pages/contact.js +++ b/src/Pages/contact.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { motion } from 'framer-motion'; import Button from '../componets/Button'; - +import './contact.css'; const ContactContainer = styled.div` padding: 4rem 2rem; max-width: 800px; @@ -13,6 +13,8 @@ const Title = styled(motion.h1)` font-size: 2.5rem; margin-bottom: 2rem; text-align: center; + text-shadow: 2px 2px 4px black; + font-weight: bold; `; const Form = styled(motion.form)` @@ -24,16 +26,26 @@ const Form = styled(motion.form)` const Input = styled.input` padding: 0.5rem; font-size: 1rem; - border: 1px solid #ccc; + border: 2px solid #ccc; border-radius: 4px; + outline:none; + &:focus { + border-color: #a52c19; // Change border color when focused + box-shadow: 0 0 3px black; // Add a subtle glow + } `; const TextArea = styled.textarea` padding: 0.5rem; font-size: 1rem; - border: 1px solid #ccc; + border: 2px solid #ccc; border-radius: 4px; min-height: 150px; + outline: none; + &:focus { + border-color: #a52c19; // Change border color when focused + box-shadow: 0 0 3px black; // Add a subtle glow + } `; function Contact() { @@ -59,9 +71,9 @@ function Contact() { }; return ( - + <Input type="text" @@ -81,7 +94,9 @@ function Contact() { value={formData.name} onChange={handleChange} required - pattern="[a-zA-Z\s]+" title="Name must only contain letters" + pattern="[a-zA-Z\s]+" + title="Name must only contain letters" + className='input-hover' /> <Input type="email" @@ -90,6 +105,7 @@ function Contact() { value={formData.email} onChange={handleChange} required + className='input-hover' /> <TextArea name="message" @@ -97,8 +113,9 @@ function Contact() { value={formData.message} onChange={handleChange} required + className='input-hover' /> - <Button primary type="submit">Send Message</Button> + <Button primary type="submit" className='button-hover'>Send Message</Button> </Form> </ContactContainer> ); diff --git a/src/componets/Button.js b/src/componets/Button.js index 9fcc711..50103b4 100644 --- a/src/componets/Button.js +++ b/src/componets/Button.js @@ -9,13 +9,14 @@ const StyledButton = styled(motion.button)` background-color: ${props => props.primary ? '#7c2214' : '#7c2214'}; color: ${props => props.primary ? 'white' : 'white'}; border: 2px solid #7c2214; - border-radius: 4px; + border-radius: 120px; cursor: pointer; transition: all 0.3s ease; &:hover { - background-color: ${props => props.primary ? '#7c2214' : 'white'}; - color: ${props => props.primary ? 'white' : '#7c2214'} + background-color: ${props => props.primary ? '#a03626' : 'white'}; + color: ${props => props.primary ? 'white' : '#7c2214'}; + text-shadow: 2px 2px 4px black; } `;