Merge pull request #52 from Code-Odyssey-Editor/nikhil

Patch 0.0.7 - Add Support Page

src/App.tsx

@@ -10,6 +10,7 @@ import aboutpage from "./pages/aboutpage";
 import editorpage from "./pages/editor/editorpage";
 import SignIn from "./pages/auth/signinpage";
 import Signup from "./pages/auth/signuppage";
+import supportpage from "./pages/supportpage";
 import { Spinner } from "@nextui-org/react";
 
 // Router
@@ -24,6 +25,7 @@ function Root() {
       <Route path="/" Component={homepage} />
       <Route path="/about" Component={aboutpage} />
       <Route path="/editor" Component={editorpage} />
+      <Route path="/support" Component={supportpage} />
       <Route path="/sign-in" Component={SignIn} />
       <Route path="/sign-up" Component={Signup} />
     </Routes>

src/components/footer/footer.tsx

@@ -10,7 +10,7 @@ const footerNavs = [
         name: "Contact",
       },
       {
-        href: "javascript:void()",
+        href: "/website/support",
         name: "Support",
       },
       {

src/components/navbar/common_navbar.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  Button,
+} from "@nextui-org/react";
+import { AcmeLogo } from "./AcmeLogo.jsx";
+import { Link } from "react-router-dom";
+import ThemeSwitcher from "../theme_switcher/theme_toggle.tsx";
+
+export default function CommonNavbar() {
+
+  return (
+    <Navbar
+      position="static"
+      className="backdrop:blur rounded-full bg-pink-100/20 border hover:shadow-md transition ease-in-out duration-700 border-gray-100/40 dark:border-gray-800/40 dark:bg-gray-800/80 w-11/12 lg:w-1/2 mx-auto mt-4 xl:w-1/3 dark:shadow-blue-200/20"
+    >
+      <NavbarContent>
+        <NavbarBrand>
+          <AcmeLogo />
+          <p className="font-bold text-inherit">Code Odyssey Editor</p>
+        </NavbarBrand>
+      </NavbarContent>
+      <NavbarContent className="sm:flex gap-4" justify="end">
+      <NavbarItem>
+            <Button color="primary" variant="ghost" className="rounded-full text-center justify-center">
+                <Link to="/website">Go to Home</Link>
+            </Button>
+        </NavbarItem>
+        <NavbarItem className="hidden md:block">
+          <ThemeSwitcher />
+        </NavbarItem>
+      </NavbarContent>
+    </Navbar>
+  );
+}

src/components/support_box/box.tsx

@@ -0,0 +1,68 @@
+import { Button, Input, Select, SelectItem, Textarea } from "@nextui-org/react";
+
+const animals = [
+  {
+    value: "dog",
+    label: "Dog",
+  },
+  {
+    value: "cat",
+    label: "Cat",
+  }
+];
+
+export default function Box() {
+  return (
+    <div className="mx-auto my-8 xl:my-32 text-center justify-center dark:bg-gray-900 dark:text-white border border-gray-600/30 w-1/2 rounded-3xl">
+      <h1 className="text-5xl font-serif text-gray-600 dark:text-gray-50 pt-8">
+        CONTACT SUPPORT
+      </h1>
+      <p className="text-md font-light font-serif italic">
+        How can we help you?
+      </p>
+
+      <div className="grid grid-cols-2 gap-8 m-8 grid-rows-2">
+        <Input type="text" variant="underlined" label="First Name" />
+        <Input type="text" variant="underlined" label="Last Name" />
+        <Input type="text" variant="underlined" label="Email" />
+        <Input type="text" variant="underlined" label="Phone Number" />
+      </div>
+
+      {/* Select */}
+      <div className="w-full p-8">
+        <Select size={"lg"} label="Select an issue" className="w-full" variant="underlined">
+          {animals.map((animal) => (
+            <SelectItem key={animal.value} value={animal.value} className="text-black">
+              {animal.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+
+      {/* Description */}
+      <div className="p-8 w-full">
+        <Textarea
+          variant="bordered"
+          placeholder="Let us know what you need help with..."
+          className="w-full rounded-3xl"
+          size="lg"
+        />
+      </div>
+
+      {/* Get in touch Button */}
+      <div className="mb-16 mt-16 mx-8 relative text-center justify-center">
+        <hr className="border-gray-300 border-2 rounded-full" />
+        <div className="absolute -top-8 w-full">
+          <Button
+            className="rounded-full bg-purple-500 text-white font-sans p-8 text-2xl font-light"
+            size="lg"
+            variant="flat"
+            color="secondary"
+          >
+            Get In Touch
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/supportpage.tsx

@@ -0,0 +1,21 @@
+import FooterComponent from "../components/footer/footer";
+import CommonNavbar from "../components/navbar/common_navbar";
+import Box from "../components/support_box/box";
+
+export default function supportpage() {
+  return (
+    <>
+      {/* Common Navbar */}
+      <CommonNavbar />
+
+      {/* Background */}
+      <div className="bg-blue-100/90 dark:bg-purple-200/90 absolute -z-10 top-[6rem] right-[41rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[20rem] sm:w-[68.75rem]"></div>
+
+      {/* Support Box */}
+      <Box />
+
+      {/* Footer */}
+      <FooterComponent />
+    </>
+  );
+}