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