diff --git a/src/assets/logo.jpeg b/src/assets/logo.jpeg new file mode 100644 index 0000000..8861cf8 Binary files /dev/null and b/src/assets/logo.jpeg differ diff --git a/src/components/FAQ/Faq.jsx b/src/components/FAQ/Faq.jsx new file mode 100644 index 0000000..1a5da04 --- /dev/null +++ b/src/components/FAQ/Faq.jsx @@ -0,0 +1,59 @@ +import { Title, Container, Accordion, ThemeIcon, rem } from '@mantine/core'; +import { IconPlus } from '@tabler/icons-react'; +import classes from './Faq.module.css'; + +const placeholder = + 'It can’t help but hear a pin drop from over half a mile away, so it lives deep in the mountains where there aren’t many people or Pokémon. It was born from sludge on the ocean floor. In a sterile environment, the germs within its body can’t multiply, and it dies. It has no eyeballs, so it can’t see. It checks its surroundings via the ultrasonic waves it emits from its mouth.'; + +const Faq = () => { + return ( +
+ + + Frequently Asked Questions + + + + + + } + > + + How can I reset my password? + {placeholder} + + + + Can I create more than one account? + {placeholder} + + + + How can I subscribe to the monthly newsletter? + {placeholder} + + + + Do you store credit card information securely? + {placeholder} + + + + What payment systems do you work with? + {placeholder} + + + +
+ ); +} + +export default Faq; diff --git a/src/components/FAQ/Faq.module.css b/src/components/FAQ/Faq.module.css new file mode 100644 index 0000000..3dc375b --- /dev/null +++ b/src/components/FAQ/Faq.module.css @@ -0,0 +1,72 @@ +.wrapper { + padding-top: calc(var(--mantine-spacing-xl) * 2); + min-height: rem(820px); + background-image: radial-gradient( + var(--mantine-color-blue-6) 0%, + var(--mantine-color-blue-4) 100% + ); + background-repeat: no-repeat; + background-position: top left; + position: relative; + color: var(--mantine-color-black); +} + +.title { + color: var(--mantine-color-white); + font-size: 52px; + font-family: + Greycliff CF, + var(--mantine-font-family); + margin-bottom: calc(var(--mantine-spacing-xl) * 1.5); +} + +.item { + background-color: var(--mantine-color-white); + border-bottom: 0; + border-radius: var(--mantine-radius-md); + box-shadow: var(--mantine-shadow-lg); + overflow: hidden; +} + +.control { + font-size: var(--mantine-font-size-lg); + padding: var(--mantine-spacing-lg) var(--mantine-spacing-xl); + color: var(--mantine-color-black); + + @mixin hover { + background-color: transparent; + } +} + +.content { + padding-left: var(--mantine-spacing-xl); + line-height: 1.6; + color: var(--mantine-color-black); +} + +.icon { + margin-left: var(--mantine-spacing-md); +} + +.gradient { + background-image: radial-gradient( + var(--mantine-color-blue-6) 0%, + var(--mantine-color-blue-5) 100% + ); +} + +.itemOpened { + & .icon { + transform: rotate(45deg); + } +} + +.button { + display: block; + margin-top: var(--mantine-spacing-md); + + @media (max-width: $mantine-breakpoint-sm) { + display: block; + width: 100%; + } +} \ No newline at end of file diff --git a/src/components/FAQ/index.jsx b/src/components/FAQ/index.jsx new file mode 100644 index 0000000..6de46c1 --- /dev/null +++ b/src/components/FAQ/index.jsx @@ -0,0 +1,2 @@ +import Faq from "./Faq"; +export default Faq; diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx new file mode 100644 index 0000000..a751c2f --- /dev/null +++ b/src/components/Footer/Footer.jsx @@ -0,0 +1,27 @@ +import { Container, Group, ActionIcon, rem } from '@mantine/core'; +import { IconBrandTwitter, IconBrandYoutube, IconBrandInstagram } from '@tabler/icons-react'; + +import classes from './Footer.module.css'; + +const Footer = () => { + return ( +
+ + {/* */} + + + + + + + + + + + + +
+ ); +} + +export default Footer \ No newline at end of file diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css new file mode 100644 index 0000000..281352f --- /dev/null +++ b/src/components/Footer/Footer.module.css @@ -0,0 +1,22 @@ +.footer { + margin-top: rem(120px); + border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5)); +} + +.inner { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: var(--mantine-spacing-xl); + padding-bottom: var(--mantine-spacing-xl); + + @media (max-width: $mantine-breakpoint-xs) { + flex-direction: column; + } +} + +.links { + @media (max-width: $mantine-breakpoint-xs) { + margin-top: var(--mantine-spacing-md); + } +} \ No newline at end of file diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx new file mode 100644 index 0000000..ccb5e78 --- /dev/null +++ b/src/components/Footer/index.jsx @@ -0,0 +1,2 @@ +import Footer from "./Footer"; +export default Footer; diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index 774b08d..b0d5104 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -1,12 +1,16 @@ -import { MantineProvider, Container, Title } from "@mantine/core"; +import { MantineProvider} from "@mantine/core"; import "@mantine/core/styles.css"; -import classes from "./Home.module.css"; import Navbar from "../../components/Navbar"; +import Footer from "../../components/Footer"; +import Faq from "../../components/FAQ"; + function Home() { return ( + +