diff --git a/components/FrontPage/ButtonFp.jsx b/components/FrontPage/ButtonFp.jsx new file mode 100644 index 00000000..2e11a03b --- /dev/null +++ b/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 ( +
+ {variant === "ui" && ( + + )} + {variant === "page" && ( + + )} + {variant === "custom" && ( + + )} +
+ ); +} diff --git a/components/FrontPage/Combined/WriteOnceAccessAnywhere.jsx b/components/FrontPage/Combined/WriteOnceAccessAnywhere.jsx new file mode 100644 index 00000000..21d40d5c --- /dev/null +++ b/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 ( +
+
+ {/* TODO: Figure out what to do abou these percentage values */} +
+

+ write once,
access anywhere +

+

+ writedown lets you export your notes to PDF, Markdown, HTML and + Text. Print, share or read. writedown gives you the ultimate + control. +

+
+ +
+
+
+ an image +
+
+
+ ); +} diff --git a/components/FrontPage/Combined/finalSection.jsx b/components/FrontPage/Combined/finalSection.jsx new file mode 100644 index 00000000..b5d9ca4a --- /dev/null +++ b/components/FrontPage/Combined/finalSection.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import Button from "@/components/ui/Button"; +export default function FinalSection() { + return ( +
+
+

Still not convinced?

+ +
+
+ ); +} diff --git a/components/FrontPage/Combined/frontImage.jsx b/components/FrontPage/Combined/frontImage.jsx new file mode 100644 index 00000000..d57ce273 --- /dev/null +++ b/components/FrontPage/Combined/frontImage.jsx @@ -0,0 +1,41 @@ +import React from "react"; +import Image from "next/image"; + +export default function FrontImage() { + return ( +
+ {/* Desktop light */} + an image + {/* Mobile light */} + an image + {/* Desktop dark */} + an image + {/* Mobile dark */} + an image +
+ ); +} diff --git a/components/FrontPage/Combined/showcaseImages.jsx b/components/FrontPage/Combined/showcaseImages.jsx new file mode 100644 index 00000000..15a62e01 --- /dev/null +++ b/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 ( +
+
+ {/* Showcase Image 1 */} +
+
+

Easy to use, easy to write

+

+ With writedown it becomes easier to jot down your thoughts quickly + and in an efficient manner. +

+
+ +
+
+ +
+ an image +
+
+ {/* Showcase Image 2 */} +
+
+

Easy to use, easy to write

+

+ With writedown it becomes easier to jot down your thoughts quickly + and in an efficient manner. +

+
+ +
+
+ +
+ an image +
+
+
+
+ ); +} diff --git a/components/FrontPage/Combined/textFields.jsx b/components/FrontPage/Combined/textFields.jsx new file mode 100644 index 00000000..f49e3436 --- /dev/null +++ b/components/FrontPage/Combined/textFields.jsx @@ -0,0 +1,25 @@ +import React from "react"; + +export function CathPhrase1() { + return ( +
+

Still using & paper?

+

+ Cmon now, it's not the 90s anymore +

+
+ ); +} + +export function MainTitle() { + return ( +
+

+ Upgrade your
Dear Diary +

+

+ The easiest way to write down +

+
+ ); +} diff --git a/components/FrontPage/Combined/usedTechnologies.jsx b/components/FrontPage/Combined/usedTechnologies.jsx new file mode 100644 index 00000000..649e5b9e --- /dev/null +++ b/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 ( +
+
+

+ Built on the foundation of trust and open source +

+
+ + + + +
+
+
+ ); +} diff --git a/components/FrontPage/customFooter.jsx b/components/FrontPage/customFooter.jsx new file mode 100644 index 00000000..a2a28e8f --- /dev/null +++ b/components/FrontPage/customFooter.jsx @@ -0,0 +1,30 @@ +import React from "react"; +import { FaGithub } from "react-icons/fa"; + +export default function Footer() { + return ( + + ); +} diff --git a/components/FrontPage/featureBox.jsx b/components/FrontPage/featureBox.jsx new file mode 100644 index 00000000..e55e1d2e --- /dev/null +++ b/components/FrontPage/featureBox.jsx @@ -0,0 +1,36 @@ +import React from "react"; +import { CiGlobe } from "react-icons/ci"; + +export function FeatureBox({ + icon = , + bigText = "loremIpsum", + smallText = "loremipsumLoremIpsum", +}) { + return ( +
+
+ {icon} +
+
+

{bigText}

+
{smallText}
+
+
+ ); +} +export function FeatureBoxGrid() { + return ( +
+
+
+ + + + + + +
+
+
+ ); +} diff --git a/components/FrontPage/themeSwitcher.jsx b/components/FrontPage/themeSwitcher.jsx new file mode 100644 index 00000000..3dd947f4 --- /dev/null +++ b/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 ( +
+ + +
+ ); +} diff --git a/components/FrontPage/topbar.jsx b/components/FrontPage/topbar.jsx new file mode 100644 index 00000000..ffa8f8c3 --- /dev/null +++ b/components/FrontPage/topbar.jsx @@ -0,0 +1,72 @@ +"use client"; +import React from "react"; +import Button from "../ui/Button"; +import ThemeSwitcher from "./ThemeSwitcher"; +import { useState, useEffect } from "react"; + +export default function TopBar() { + // Logic for changing the scrollbar whenever it's not at the very top + const [isAtTop, setIsAtTop] = useState(true); + useEffect(() => { + const handleScroll = () => { + const scrollTop = + window.pageYOffset || document.documentElement.scrollTop; + setIsAtTop(scrollTop === 0); + }; + window.addEventListener("scroll", handleScroll); + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + //TODO: figure out a better way to scale the topbar, currently it just hides the middle section + return ( + + ); +} diff --git a/components/dashboard/Sidebar/index.tsx b/components/dashboard/Sidebar/index.tsx index 2566a672..373dc722 100644 --- a/components/dashboard/Sidebar/index.tsx +++ b/components/dashboard/Sidebar/index.tsx @@ -127,9 +127,9 @@ const Sidebar = ({ )} {user ? (

- Hi there,{" "} + Hi there, - {user?.displayName}{" "} + {user?.displayName}

) : ( diff --git a/components/home/Footer.tsx b/components/home/Footer.tsx index 771ec834..540e4cf3 100644 --- a/components/home/Footer.tsx +++ b/components/home/Footer.tsx @@ -32,7 +32,7 @@ const Footer = ({ className }: { className?: string }) => {

- © {new Date().getFullYear()}{" "} + © {new Date().getFullYear()} writedown diff --git a/components/home/HeroSection.tsx b/components/home/HeroSection.tsx index d059ee10..974119cb 100644 --- a/components/home/HeroSection.tsx +++ b/components/home/HeroSection.tsx @@ -9,7 +9,7 @@ const HeroSection = () => {

-

+

Upgrade Your Dear Diary diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx index fe819c3a..3fae983c 100644 --- a/components/ui/Button.tsx +++ b/components/ui/Button.tsx @@ -1,7 +1,7 @@ import React, { ButtonHTMLAttributes } from "react"; interface ButtonProps { - variant?: "red" | "green" | "slate" | "blue"; + variant?: "red" | "green" | "slate" | "blue" | "dark"; size?: "sm"; children: React.ReactNode; className?: string; @@ -33,8 +33,10 @@ const Button = ({ switch (variant) { case "red": return "inline-flex items-center justify-center px-5 py-2.5 bg-white border rounded-full border-red-900 text-sm font-medium text-red-900 hover:bg-red-200 transition-all duration-300"; + case "dark": + return "inline-flex items-center justify-center px-5 py-2.5 bg-slate-900 border rounded-full text-sm font-medium text-slate-50 hover:bg-slate-700 transition-all duration-300"; default: - return "inline-flex items-center justify-center px-5 py-2.5 bg-slate-50 border rounded-full border-2 border-slate-900 text-sm font-medium text-slate-900 hover:bg-slate-200 transition-all duration-300 dark:bg-slate-900 dark:border-slate-50 dark:text-slate-100 dark:hover:bg-slate-800"; + return "inline-flex items-center justify-center px-5 py-2.5 bg-slate-50 border rounded-full border border-slate-900 text-sm font-medium text-slate-900 hover:bg-slate-200 transition-all duration-300 dark:bg-slate-900 dark:border-slate-50 dark:text-slate-100 dark:hover:bg-slate-800"; } }; diff --git a/package.json b/package.json index 9bc5e849..76f76310 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "build": "next build", "start": "next start", "lint": "next lint", - "firebase": "firebase emulators:start", + "firebase": "npm run stop; firebase emulators:start", "stop": "for port in 3000 3001 3002 4000 4001 4002 9150; do lsof -t -i:$port | xargs -r kill; done", "prepare": "husky install", "cypress": "cypress open" diff --git a/pages/[username]/posts/[postId].tsx b/pages/[username]/posts/[postId].tsx index df1f320a..0ea14cae 100644 --- a/pages/[username]/posts/[postId].tsx +++ b/pages/[username]/posts/[postId].tsx @@ -136,7 +136,7 @@ export const PostPage = ({}: Props) => { {note?.title}

- By{" "} + By {name}

diff --git a/pages/index.tsx b/pages/index.tsx index 7c49a915..ac66c6c1 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,23 +1,55 @@ -import HeroSection from "@/components/home/HeroSection"; -import HeadTags from "@/components/common/HeadTags"; -import Features from "@/components/home/Features"; -import Navbar from "@/components/home/Navbar"; -import Footer from "@/components/home/Footer"; +// import HeroSection from "@/components/home/HeroSection"; +// import Features from "@/components/home/Features"; +// import Navbar from "@/components/home/Navbar"; +// import Footer from "@/components/home/Footer"; import type { NextPage } from "next"; +import TopBar from "@/components/frontPage/Topbar"; +import Button from "@/components/ui/Button"; +import FrontImage from "@/components/frontPage/Combined/FrontImage"; +import { + MainTitle, + CathPhrase1, +} from "@/components/frontPage/Combined/TextFields"; +import ShowcaseImages from "@/components/frontPage/Combined/ShowcaseImages"; +import { FeatureBoxGrid } from "@/components/frontPage/FeatureBox"; +import WriteOnceAccessAnywhere from "@/components/frontPage/Combined/WriteOnceAccessAnywhere"; +import UsedTechnologies from "@/components/frontPage/Combined/UsedTechnologies"; +import FinalSection from "@/components/frontPage/Combined/FinalSection"; +import Footer from "@/components/frontPage/CustomFooter"; +import HeadTags from "@/components/common/HeadTags"; const Home: NextPage = () => { return ( -

+
- - - -
+ +
+ +
+ +
+
+ +
+ {/* No, I am not gonna fix the typo -presi300 */} + + +

+ Features, plenty.
+ Looks, fancy ✨ +

+
+ + + + + +
); }; diff --git a/public/Images/SVG/Next-custom.svg b/public/Images/SVG/Next-custom.svg new file mode 100644 index 00000000..0da7b746 --- /dev/null +++ b/public/Images/SVG/Next-custom.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Images/formats.png b/public/Images/formats.png new file mode 100644 index 00000000..1a12394c Binary files /dev/null and b/public/Images/formats.png differ diff --git a/public/Images/image1-dark-mbl.png b/public/Images/image1-dark-mbl.png new file mode 100644 index 00000000..ef43bcd2 Binary files /dev/null and b/public/Images/image1-dark-mbl.png differ diff --git a/public/Images/image1-dark.png b/public/Images/image1-dark.png new file mode 100644 index 00000000..6c84efe6 Binary files /dev/null and b/public/Images/image1-dark.png differ diff --git a/public/Images/image1-mbl.png b/public/Images/image1-mbl.png new file mode 100644 index 00000000..64cbc910 Binary files /dev/null and b/public/Images/image1-mbl.png differ diff --git a/public/Images/image1.png b/public/Images/image1.png new file mode 100644 index 00000000..fdc44289 Binary files /dev/null and b/public/Images/image1.png differ diff --git a/public/Images/showcaseImg1.png b/public/Images/showcaseImg1.png new file mode 100644 index 00000000..730f94f9 Binary files /dev/null and b/public/Images/showcaseImg1.png differ diff --git a/public/Images/showcaseImg2.png b/public/Images/showcaseImg2.png new file mode 100644 index 00000000..730f94f9 Binary files /dev/null and b/public/Images/showcaseImg2.png differ diff --git a/styles/globals.css b/styles/globals.css index 6b84d905..6657c351 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,6 +1,7 @@ @import url("https://api.fonts.coollabs.io/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Leckerli One&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap"); @tailwind base; @tailwind components; @@ -86,6 +87,67 @@ label > input[type="checkbox"] { border-radius: 0.25rem; } +.customShadow { + -webkit-box-shadow: -24px 26px 37.9px 0px rgba(137, 145, 156, 0.4); + -moz-box-shadow: -24px 26px 37.9px 0px rgba(137, 145, 156, 0.4); + box-shadow: -24px 26px 37.9px 0px rgba(137, 145, 156, 0.4); +} +.customShadowDark { + -webkit-box-shadow: -7px 4px 37.9px 0px rgba(137, 145, 156, 0.4); + -moz-box-shadow: -7px 4px 37.9px 0px rgba(137, 145, 156, 0.4); + box-shadow: -7px 4px 37.9px 0px rgba(137, 145, 156, 0.4); +} + +.text-p { + @apply text-[18px] text-slate-900 dark:text-slate-50; +} + +.text-ui { + @apply text-[16px] text-slate-900 dark:text-slate-50; +} + +.text-h5 { + @apply text-[22px] text-slate-900 dark:text-slate-50 sm:text-[18px]; +} + +.text-h4 { + @apply text-[20px] font-medium text-slate-900 dark:text-slate-50 sm:text-[28px]; +} + +.text-h3 { + @apply text-[24px] font-semibold text-slate-900 dark:text-slate-50 sm:text-[36px]; +} + +.text-h2 { + @apply text-[32px] font-bold text-slate-900 dark:text-slate-50 sm:text-[42px]; +} + +.text-h1 { + @apply text-[38px] font-bold text-slate-900 dark:text-slate-50 sm:text-[52px]; +} + +.text-special { + @apply text-center text-[40px] font-bold text-slate-900 dark:text-slate-50 sm:text-[65px]; + font-family: "Syne", sans-serif; + font-optical-sizing: auto; +} + +.fpButton-page { + @apply rounded-full bg-slate-800 px-[30px] py-1.5 transition-transform hover:scale-105 dark:bg-slate-600; +} + +.fpButton-ui { + @apply 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; +} + +.fpButton-page p { + @apply text-[16px] text-slate-50; +} + +.fpButton-ui p { + @apply text-[16px] text-slate-900 dark:text-slate-50; +} + /* .milkdown { width: 100%; height: 100%; diff --git a/tailwind.config.js b/tailwind.config.js index 6a4cdb2d..779bd3fc 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,6 +10,39 @@ module.exports = { extend: { screens: { xs: "320px", + mxs: { max: "400px" }, + }, + colors: { + // Yes, the color is called with text-text-white + /* "text-light": "#0B101D", + "text-dark": "#EBECEE", */ + /* chalk: { + 50: "#fafbfc", + 75: "#eaeef3", + 100: "#e1e7ee", + 200: "#d4dce6", + 300: "#cbd5e1", + 400: "#8e959e", + 500: "#7c8289", + }, + dusk: { + 50: "#ebecee", + 75: "#abb1b9", + 100: "#89919c", + 200: "#566172", + 300: "#334155", + 400: "#242e3b", + 500: "#1f2834", + }, + midnight: { + 50: "#e7e8ea", + 75: "#9da0a8", + 100: "#747883", + 200: "#383e4e", + 300: "#0f172a", + 400: "#0b101d", + 500: "#0b101d", + }, */ }, typography: { DEFAULT: {