neura-packages 1.0.49 → 1.0.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/UI/Contact-form/index.css +55 -0
- package/UI/Contact-form/index.jsx +18 -0
- package/package.json +1 -1
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
.contact-form {
|
|
2
|
+
background: white;
|
|
3
|
+
border-radius: 10px;
|
|
4
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
5
|
+
padding: 2rem;
|
|
6
|
+
width: 90%;
|
|
7
|
+
max-width: 400px;
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
gap: 1rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.contact-form h2 {
|
|
14
|
+
margin: 0;
|
|
15
|
+
font-weight: 600;
|
|
16
|
+
text-align: center;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.contact-form input,
|
|
20
|
+
.contact-form textarea {
|
|
21
|
+
border: 1px solid #ccc;
|
|
22
|
+
border-radius: 5px;
|
|
23
|
+
padding: 0.5rem;
|
|
24
|
+
font-size: 1rem;
|
|
25
|
+
transition: border-color 0.3s, box-shadow 0.3s;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.contact-form input:focus,
|
|
29
|
+
.contact-form textarea:focus {
|
|
30
|
+
border-color: #6a11cb;
|
|
31
|
+
box-shadow: 0 0 5px rgba(106, 17, 203, 0.5);
|
|
32
|
+
outline: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.contact-form button {
|
|
36
|
+
background: #6a11cb;
|
|
37
|
+
color: white;
|
|
38
|
+
border: none;
|
|
39
|
+
border-radius: 5px;
|
|
40
|
+
padding: 0.7rem;
|
|
41
|
+
font-size: 1rem;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
transition: background-color 0.3s, transform 0.3s;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.contact-form button:hover {
|
|
47
|
+
background: #2575fc;
|
|
48
|
+
transform: translateY(-2px);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@media (max-width: 600px) {
|
|
52
|
+
.contact-form {
|
|
53
|
+
padding: 1.5rem;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './index.css';
|
|
3
|
+
|
|
4
|
+
const Index = ({ className = '', children, title = 'Contact Us', ...props }) => {
|
|
5
|
+
return (
|
|
6
|
+
<div className={`contact-form ${className}`} {...props}>
|
|
7
|
+
<h2>{title}</h2>
|
|
8
|
+
<input type='text' placeholder='Full Name' required />
|
|
9
|
+
<input type='email' placeholder='Email' required />
|
|
10
|
+
<input type='tel' placeholder='Phone Number (optional)' />
|
|
11
|
+
<textarea rows='4' placeholder='Message' required></textarea>
|
|
12
|
+
<button type='submit'>Submit</button>
|
|
13
|
+
{children}
|
|
14
|
+
</div>
|
|
15
|
+
);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export default Index;
|