Remove ContactUs component and associated styles: delete ContactUs.tsx and ContactUs.module.css files to streamline the codebase.
This commit is contained in:
@@ -1,64 +0,0 @@
|
|||||||
.wrapper {
|
|
||||||
min-height: 400px;
|
|
||||||
background-image: linear-gradient(
|
|
||||||
-60deg,
|
|
||||||
var(--mantine-color-blue-4) 0%,
|
|
||||||
var(--mantine-color-blue-7) 100%
|
|
||||||
);
|
|
||||||
border-radius: var(--mantine-radius-md);
|
|
||||||
padding: calc(var(--mantine-spacing-xl) * 2.5);
|
|
||||||
|
|
||||||
@media (max-width: $mantine-breakpoint-sm) {
|
|
||||||
padding: calc(var(--mantine-spacing-xl) * 1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-family:
|
|
||||||
"Greycliff CF",
|
|
||||||
var(--mantine-font-family);
|
|
||||||
color: var(--mantine-color-white);
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
color: var(--mantine-color-blue-0);
|
|
||||||
max-width: 300px;
|
|
||||||
|
|
||||||
@media (max-width: $mantine-breakpoint-sm) {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
|
||||||
background-color: var(--mantine-color-white);
|
|
||||||
padding: var(--mantine-spacing-xl);
|
|
||||||
border-radius: var(--mantine-radius-md);
|
|
||||||
box-shadow: var(--mantine-shadow-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.social {
|
|
||||||
color: var(--mantine-color-white);
|
|
||||||
|
|
||||||
@mixin hover {
|
|
||||||
color: var(--mantine-color-blue-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
background-color: var(--mantine-color-white);
|
|
||||||
border-color: var(--mantine-color-gray-4);
|
|
||||||
color: var(--mantine-color-black);
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--mantine-color-gray-5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputLabel {
|
|
||||||
color: var(--mantine-color-black);
|
|
||||||
}
|
|
||||||
|
|
||||||
.control {
|
|
||||||
background-color: var(--mantine-color-blue-6);
|
|
||||||
}
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
import { TbBrandInstagram, TbBrandTwitter, TbBrandYoutube } from 'react-icons/tb';
|
|
||||||
import {
|
|
||||||
ActionIcon,
|
|
||||||
Button,
|
|
||||||
Group,
|
|
||||||
SimpleGrid,
|
|
||||||
Text,
|
|
||||||
Textarea,
|
|
||||||
TextInput,
|
|
||||||
Title,
|
|
||||||
} from '@mantine/core';
|
|
||||||
import { ContactIconsList } from './ContactIcons';
|
|
||||||
import classes from './ContactUs.module.css';
|
|
||||||
|
|
||||||
const social = [TbBrandInstagram, TbBrandTwitter, TbBrandYoutube];
|
|
||||||
|
|
||||||
export function ContactUs() {
|
|
||||||
const icons = social.map((Icon, index) => (
|
|
||||||
<ActionIcon key={index} size={28} className={classes.social} variant="transparent">
|
|
||||||
<Icon size={22} stroke="1.5" />
|
|
||||||
</ActionIcon>
|
|
||||||
));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={classes.wrapper}>
|
|
||||||
<SimpleGrid cols={{ base: 1, sm: 2 }} spacing={50}>
|
|
||||||
<div>
|
|
||||||
<Title className={classes.title}>Contact us</Title>
|
|
||||||
<Text className={classes.description} mt="sm" mb={30}>
|
|
||||||
Get in touch
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<ContactIconsList />
|
|
||||||
|
|
||||||
<Group mt="xl">{icons}</Group>
|
|
||||||
</div>
|
|
||||||
<div className={classes.form}>
|
|
||||||
<TextInput
|
|
||||||
label="Email"
|
|
||||||
placeholder="your@email.com"
|
|
||||||
required
|
|
||||||
classNames={{ input: classes.input, label: classes.inputLabel }}
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
label="Name"
|
|
||||||
placeholder="John Doe"
|
|
||||||
mt="md"
|
|
||||||
classNames={{ input: classes.input, label: classes.inputLabel }}
|
|
||||||
/>
|
|
||||||
<Textarea
|
|
||||||
required
|
|
||||||
label="Your message"
|
|
||||||
placeholder="I want to order your goods"
|
|
||||||
minRows={4}
|
|
||||||
mt="md"
|
|
||||||
classNames={{ input: classes.input, label: classes.inputLabel }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Group justify="flex-end" mt="md">
|
|
||||||
<Button className={classes.control}>Send message</Button>
|
|
||||||
</Group>
|
|
||||||
</div>
|
|
||||||
</SimpleGrid>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user