Add the new front page

components/FrontPage/ButtonFp.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { children } from "react";
+
+// Unused, will remove later
+export default function ButtonFp({
+  variant = "ui",
+  children,
+  href = "#",
+  backgroundCol = "#FFFFFF",
+}) {
+  return (
+    <div>
+      {variant === "ui" && (
+        <button
+          className="rounded-full border border-slate-800 bg-slate-50 p-5 py-1.5 transition-colors hover:bg-slate-200 dark:border-slate-50 dark:bg-slate-900 dark:hover:bg-slate-800"
+          href={href}
+        >
+          <p className="text-ui">{children}</p>
+        </button>
+      )}
+      {variant === "page" && (
+        <button
+          href={href}
+          className="rounded-full bg-slate-800 px-[30px] py-1.5 transition-transform hover:scale-105 dark:bg-slate-600"
+        >
+          <p className="font-regular text-[16px] text-slate-50">{children}</p>
+        </button>
+      )}
+      {variant === "custom" && (
+        <button
+          href={href}
+          className="rounded-full px-[30px] py-1.5"
+          style={{ background: backgroundCol }}
+        >
+          <p className="font-regular text-[16px] text-slate-50">{children}</p>
+        </button>
+      )}
+    </div>
+  );
+}

components/FrontPage/Combined/WriteOnceAccessAnywhere.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Button from "@/components/ui/Button";
+import Image from "next/image";
+
+// This is the 2nd to last section with the "write, once access anywhere" catchphrase
+
+export default function WriteOnceAccessAnywhere() {
+  return (
+    <div className="flex w-screen justify-center bg-slate-200 py-56 dark:bg-slate-800">
+      <div className="max-screen-xl flex h-full items-center justify-center gap-24 px-6">
+        {/* TODO: Figure out what to do abou these percentage values */}
+        <div className="ml-3 max-w-[90%] sm:max-w-[50%]">
+          <h2 className="text-h2">
+            write once, <br /> access anywhere
+          </h2>
+          <p className="text-p">
+            writedown lets you export your notes to PDF, Markdown, HTML and
+            Text. Print, share or read. writedown gives you the ultimate
+            control.
+          </p>
+          <div className="mt-4">
+            <Button variant="dark">Try it now!</Button>
+          </div>
+        </div>
+        <div className="hidden w-[300px] min-w-[300px] sm:block">
+          <img
+            alt="an image"
+            className=""
+            width={300}
+            height={310}
+            src={"/Images/formats.png"}
+          ></img>
+        </div>
+      </div>
+    </div>
+  );
+}

components/FrontPage/Combined/finalSection.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Button from "@/components/ui/Button";
+export default function FinalSection() {
+  return (
+    <div className="flex w-screen justify-center bg-slate-200 py-52 dark:bg-slate-800">
+      <div className="max-screen-xl flex h-full flex-col items-center justify-center gap-3">
+        <h2 className="text-h3 scale-125 sm:scale-100">Still not convinced?</h2>
+        <Button variant="dark"> Try it out, it&apos;s FREE!</Button>
+      </div>
+    </div>
+  );
+}

components/FrontPage/Combined/frontImage.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Image from "next/image";
+
+export default function FrontImage() {
+  return (
+    <div className="flex w-full flex-col items-center gap-12">
+      {/* Desktop light */}
+      <img
+        alt="an image"
+        className="hidden w-[85vw] max-w-5xl sm:block dark:sm:hidden"
+        width={1200}
+        height={900}
+        src={"/Images/image1.png"}
+      ></img>
+      {/* Mobile light */}
+      <img
+        alt="an image"
+        className="customShadow block w-[90vw] max-w-xs rounded-2xl dark:hidden sm:hidden dark:sm:hidden"
+        width={500}
+        height={900}
+        src={"/Images/image1-mbl.png"}
+      ></img>
+      {/* Desktop dark */}
+      <img
+        alt="an image"
+        className="hidden w-[80vw] max-w-5xl  dark:sm:block "
+        width={1200}
+        height={900}
+        src={"/Images/image1-dark.png"}
+      ></img>
+      {/* Mobile dark */}
+      <img
+        alt="an image"
+        className="customShadowDark hidden w-[90vw] max-w-xs rounded-2xl dark:block sm:hidden dark:sm:hidden"
+        width={500}
+        height={900}
+        src={"/Images/image1-dark-mbl.png"}
+      ></img>
+    </div>
+  );
+}

components/FrontPage/Combined/showcaseImages.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import Image from "next/image";
+import Button from "@/components/ui/Button";
+export default function ShowcaseImages() {
+  return (
+    <div className="flex w-screen justify-center">
+      <div className="max-screen-xl my-32 grid grid-rows-2 gap-24 px-0 sm:px-12">
+        {/* Showcase Image 1 */}
+        <div className="flex w-full flex-col-reverse items-center justify-center sm:flex-row">
+          <div className="mt-7 flex flex-col gap-3 text-center sm:mt-7 sm:px-6 sm:text-start">
+            <h3 className="text-h3">Easy to use, easy to write</h3>
+            <p className="text-p">
+              With writedown it becomes easier to jot down your thoughts quickly
+              and in an efficient manner.
+            </p>
+            <div className="w-full">
+              <Button variant="dark">Try it out!</Button>
+            </div>
+          </div>
+
+          <div className="flex w-full justify-center sm:justify-end sm:pr-6">
+            <img
+              alt="an image"
+              width={630}
+              height={630}
+              className="customShadow dark:customShadowDark w-[90vw]  max-w-[630px] rounded-[33px] sm:w-[50vw] xl:max-w-[550px]"
+              src={"/Images/showcaseImg1.png"}
+            ></img>
+          </div>
+        </div>
+        {/* Showcase Image 2 */}
+        <div className="flex w-full flex-col-reverse items-center justify-center sm:flex-row-reverse">
+          <div className="mr-5 mt-7 flex flex-col gap-3 text-center sm:mt-0 sm:px-6  sm:text-start">
+            <h3 className="text-h3">Easy to use, easy to write</h3>
+            <p className="text-p">
+              With writedown it becomes easier to jot down your thoughts quickly
+              and in an efficient manner.
+            </p>
+            <div className="w-60">
+              <Button variant="dark">Try it out!</Button>
+            </div>
+          </div>
+
+          <div className="flex w-full justify-center sm:justify-start sm:pl-6">
+            <img
+              alt="an image"
+              width={630}
+              height={630}
+              className="customShadow dark:customShadowDark w-[90vw] max-w-[630px] rounded-[33px] sm:w-[50vw] xl:max-w-[550px]"
+              src={"/Images/showcaseImg1.png"}
+            ></img>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/FrontPage/Combined/textFields.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export function CathPhrase1() {
+  return (
+    <div className="text-center">
+      <h3 className="text-h3">Still using & paper?</h3>
+      <h4 className="text-[30px] text-slate-400">
+        Cmon now, it&apos;s not the 90s anymore
+      </h4>
+    </div>
+  );
+}
+
+export function MainTitle() {
+  return (
+    <div>
+      <h1 className="text-special">
+        Upgrade your <br /> Dear Diary
+      </h1>
+      <h2 className="text-center text-[12px] text-slate-600 dark:text-slate-50 sm:text-[24px]">
+        The easiest way to write down
+      </h2>
+    </div>
+  );
+}

components/FrontPage/Combined/usedTechnologies.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { RiGithubFill } from "react-icons/ri";
+import { RiNextjsFill } from "react-icons/ri";
+import { RiFirebaseFill } from "react-icons/ri";
+import { RiTailwindCssFill } from "react-icons/ri";
+
+// TODO: ask nayamamarshe if these are links or not
+import Image from "next/image";
+
+export default function UsedTechnologies({}) {
+  return (
+    <div className="flex h-[400px] w-screen justify-center">
+      <div className="max-screen-xl flex h-full flex-col items-center justify-center text-center">
+        <h3 className="text-h3">
+          Built on the foundation of trust and open source
+        </h3>
+        <div className="mt-5 flex gap-6 sm:gap-12">
+          <RiGithubFill
+            className="w-[40px] sm:w-[60px]"
+            size={60}
+          ></RiGithubFill>
+          <RiNextjsFill
+            className="w-[40px] sm:w-[60px]"
+            size={60}
+          ></RiNextjsFill>
+          <RiFirebaseFill
+            className="w-[40px] sm:w-[60px]"
+            size={60}
+          ></RiFirebaseFill>
+          <RiTailwindCssFill
+            className="w-[40px] sm:w-[60px]"
+            size={60}
+          ></RiTailwindCssFill>
+        </div>
+      </div>
+    </div>
+  );
+}

components/FrontPage/customFooter.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { FaGithub } from "react-icons/fa";
+
+export default function Footer() {
+  return (
+    <footer className="bottom-0 left-0 right-0 grid grid-cols-2 bg-slate-900 px-[50px] py-5 lg:grid-cols-3">
+      {/* things on the left */}
+      <div className="flex h-full items-center">
+        <div className="text-xs text-slate-50 lg:text-base">
+          ©2024 <b>writedown.</b> All rights reserved.
+        </div>
+      </div>
+      {/* Things in the middle */}
+      <div className=" hidden h-full w-full items-center justify-center text-slate-50 lg:flex">
+        <FaGithub size={40}></FaGithub>
+      </div>
+      {/* Things on the right */}
+      <div className="flex h-full w-full items-center justify-end gap-1 md:gap-5">
+        <button
+          className="rounded-full border border-slate-100 bg-slate-900 px-[10px] py-[3px] transition-colors  dark:hover:bg-slate-800 md:p-5  md:py-1.5"
+          href="#"
+        >
+          <p className="font-regular text-[10px] text-slate-50 sm:text-sm">
+            Support the project!
+          </p>{" "}
+        </button>
+      </div>
+    </footer>
+  );
+}

components/FrontPage/featureBox.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { CiGlobe } from "react-icons/ci";
+
+export function FeatureBox({
+  icon = <CiGlobe size={35}></CiGlobe>,
+  bigText = "loremIpsum",
+  smallText = "loremipsumLoremIpsum",
+}) {
+  return (
+    <div className="flex  h-[75px] w-full items-center justify-center gap-4 rounded-2xl transition-all hover:scale-110 md:h-[220px] md:w-[280px] md:flex-col md:gap-1.5 md:bg-slate-300 md:hover:bg-slate-200 md:dark:bg-slate-700 md:hover:dark:bg-slate-600">
+      <div className="rounded-2xl bg-slate-300 p-3.5 text-slate-900 dark:bg-slate-700 dark:text-slate-50 md:rounded-[0px] md:bg-transparent md:p-0 md:dark:bg-transparent ">
+        {icon}
+      </div>
+      <div className="h-full text-center md:h-auto">
+        <h3 className="text-h3">{bigText}</h3>
+        <h5 className="text-h5"> {smallText}</h5>
+      </div>
+    </div>
+  );
+}
+export function FeatureBoxGrid() {
+  return (
+    <div className="mb-44 flex w-screen justify-center">
+      <div className="max-w-screen-lg">
+        <div className="flex w-full flex-col gap-12  md:grid md:grid-cols-2 md:grid-rows-3 lg:grid-cols-3 lg:grid-rows-2">
+          <FeatureBox></FeatureBox>
+          <FeatureBox></FeatureBox>
+          <FeatureBox></FeatureBox>
+          <FeatureBox></FeatureBox>
+          <FeatureBox></FeatureBox>
+          <FeatureBox></FeatureBox>
+        </div>
+      </div>
+    </div>
+  );
+}

components/FrontPage/themeSwitcher.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { CiLight } from "react-icons/ci";
+import { CiDark } from "react-icons/ci";
+import { useTheme } from "next-themes";
+
+//useTheme provided by the next-themes package (godsent)
+
+export default function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+  return (
+    <div>
+      <button
+        onClick={() => setTheme("dark")}
+        className="block text-slate-900 dark:hidden"
+      >
+        <CiLight size={23}></CiLight>
+      </button>
+      <button
+        onClick={() => setTheme("light")}
+        className="hidden text-slate-50 dark:block"
+      >
+        <CiDark size={23}></CiDark>
+      </button>
+    </div>
+  );
+}