Merge pull request #9 from Debanjannnn/test

Added FAQ + Footer Skeleton

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 (
+    <div className={classes.wrapper}>
+      <Container size="sm">
+        <Title ta="center" className={classes.title}>
+          Frequently Asked Questions
+        </Title>
+
+        <Accordion
+          chevronPosition="right"
+          defaultValue="reset-password"
+          chevronSize={26}
+          variant="separated"
+          disableChevronRotation
+          styles={{ label: { color: 'var(--mantine-color-black)' }, item: { border: 0 } }}
+          chevron={
+            <ThemeIcon radius="xl" className={classes.gradient} size={26}>
+              <IconPlus style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+            </ThemeIcon>
+          }
+        >
+          <Accordion.Item className={classes.item} value="reset-password">
+            <Accordion.Control>How can I reset my password?</Accordion.Control>
+            <Accordion.Panel>{placeholder}</Accordion.Panel>
+          </Accordion.Item>
+
+          <Accordion.Item className={classes.item} value="another-account">
+            <Accordion.Control>Can I create more than one account?</Accordion.Control>
+            <Accordion.Panel>{placeholder}</Accordion.Panel>
+          </Accordion.Item>
+
+          <Accordion.Item className={classes.item} value="newsletter">
+            <Accordion.Control>How can I subscribe to the monthly newsletter?</Accordion.Control>
+            <Accordion.Panel>{placeholder}</Accordion.Panel>
+          </Accordion.Item>
+
+          <Accordion.Item className={classes.item} value="credit-card">
+            <Accordion.Control>Do you store credit card information securely?</Accordion.Control>
+            <Accordion.Panel>{placeholder}</Accordion.Panel>
+          </Accordion.Item>
+
+          <Accordion.Item className={classes.item} value="payment">
+            <Accordion.Control>What payment systems do you work with?</Accordion.Control>
+            <Accordion.Panel>{placeholder}</Accordion.Panel>
+          </Accordion.Item>
+        </Accordion>
+      </Container>
+    </div>
+  );
+}
+
+export default Faq;

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%;
+  }
+}

src/components/FAQ/index.jsx

@@ -0,0 +1,2 @@
+import Faq from "./Faq";
+export default Faq;

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 (
+    <div className={classes.footer}>
+      <Container className={classes.inner}>
+        {/* <MantineLogo size={28} /> */}
+        <Group gap={0} className={classes.links} justify="flex-end" wrap="nowrap">
+          <ActionIcon size="lg" color="gray" variant="subtle">
+            <IconBrandTwitter style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+          </ActionIcon>
+          <ActionIcon size="lg" color="gray" variant="subtle">
+            <IconBrandYoutube style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+          </ActionIcon>
+          <ActionIcon size="lg" color="gray" variant="subtle">
+            <IconBrandInstagram style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+          </ActionIcon>
+        </Group>
+      </Container>
+    </div>
+  );
+}
+
+export default Footer

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);
+  }
+}

src/components/Footer/index.jsx

@@ -0,0 +1,2 @@
+import Footer from "./Footer";
+export default Footer;

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 (
     <MantineProvider>
       <Navbar />
+      <Faq/>
+      <Footer/>
     </MantineProvider>
   );
 }