Add the new front page #108
Conversation
|
@presi300 is attempting to deploy a commit to the nayamamarshe's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe recent updates introduce new React components for the front page, enhancing the layout and functionality, including sections for catchphrases, feature showcases, and technology icons. The Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
components/FrontPage/textbox.jsx
Outdated
| @@ -0,0 +1,54 @@ | |||
| import React from "react"; | |||
| import { children } from "react"; | |||
There was a problem hiding this comment.
Remove unnecessary import.
The children import from "react" is unnecessary and can be removed as it is not used in the code.
- import { children } from "react";Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| import { children } from "react"; |
There was a problem hiding this comment.
+1, this shouldn't be here.
There was a problem hiding this comment.
@NayamAmarshe, thank you for confirming. The unnecessary children import from "react" will be removed as suggested.
components/FrontPage/textbox.jsx
Outdated
| export default function TBox({ children, variant = "p" }) { | ||
| return ( | ||
| <div> | ||
| {variant === "special" && ( | ||
| <h1 | ||
| className={`${syne.className} text-center text-[40px] font-bold text-text-light dark:text-text-dark sm:text-[65px]`} | ||
| > | ||
| {children} | ||
| </h1> | ||
| )} | ||
| {variant === "h1" && ( | ||
| <h1 className="text-[38px] font-bold text-text-light dark:text-text-dark sm:text-[52px]"> | ||
| {children} | ||
| </h1> | ||
| )} | ||
| {variant === "h2" && ( | ||
| <h2 className="text-[32px] font-bold text-text-light dark:text-text-dark sm:text-[42px]"> | ||
| {children} | ||
| </h2> | ||
| )} | ||
| {variant === "h3" && ( | ||
| <h3 className="text-[24px] font-semibold text-text-light dark:text-text-dark sm:text-[36px]"> | ||
| {children} | ||
| </h3> | ||
| )}{" "} | ||
| {variant === "h4" && ( | ||
| <h4 className="text-[20px] font-medium text-text-light dark:text-text-dark sm:text-[28px]"> | ||
| {children} | ||
| </h4> | ||
| )} | ||
| {variant === "h5" && ( | ||
| <h5 className="text-[22px] text-text-light dark:text-text-dark sm:text-[18px]"> | ||
| {children} | ||
| </h5> | ||
| )} | ||
| {variant === "p" && ( | ||
| <p className="text-[18px] text-text-light dark:text-text-dark"> | ||
| {children} | ||
| </p> | ||
| )} | ||
| {variant === "ui" && ( | ||
| <p className="font-regular text-[16px] text-text-light dark:text-text-dark"> | ||
| {children} | ||
| </p> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Ensure consistent variant naming.
The variant names should be consistent. For example, "ui" is not a standard HTML tag. Consider renaming it to something more descriptive like "paragraph" or "text".
- export default function TBox({ children, variant = "p" }) {
+ export default function TBox({ children, variant = "paragraph" }) {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export default function TBox({ children, variant = "p" }) { | |
| return ( | |
| <div> | |
| {variant === "special" && ( | |
| <h1 | |
| className={`${syne.className} text-center text-[40px] font-bold text-text-light dark:text-text-dark sm:text-[65px]`} | |
| > | |
| {children} | |
| </h1> | |
| )} | |
| {variant === "h1" && ( | |
| <h1 className="text-[38px] font-bold text-text-light dark:text-text-dark sm:text-[52px]"> | |
| {children} | |
| </h1> | |
| )} | |
| {variant === "h2" && ( | |
| <h2 className="text-[32px] font-bold text-text-light dark:text-text-dark sm:text-[42px]"> | |
| {children} | |
| </h2> | |
| )} | |
| {variant === "h3" && ( | |
| <h3 className="text-[24px] font-semibold text-text-light dark:text-text-dark sm:text-[36px]"> | |
| {children} | |
| </h3> | |
| )}{" "} | |
| {variant === "h4" && ( | |
| <h4 className="text-[20px] font-medium text-text-light dark:text-text-dark sm:text-[28px]"> | |
| {children} | |
| </h4> | |
| )} | |
| {variant === "h5" && ( | |
| <h5 className="text-[22px] text-text-light dark:text-text-dark sm:text-[18px]"> | |
| {children} | |
| </h5> | |
| )} | |
| {variant === "p" && ( | |
| <p className="text-[18px] text-text-light dark:text-text-dark"> | |
| {children} | |
| </p> | |
| )} | |
| {variant === "ui" && ( | |
| <p className="font-regular text-[16px] text-text-light dark:text-text-dark"> | |
| {children} | |
| </p> | |
| )} | |
| </div> | |
| ); | |
| } | |
| export default function TBox({ children, variant = "paragraph" }) { | |
| return ( | |
| <div> | |
| {variant === "special" && ( | |
| <h1 | |
| className={`${syne.className} text-center text-[40px] font-bold text-text-light dark:text-text-dark sm:text-[65px]`} | |
| > | |
| {children} | |
| </h1> | |
| )} | |
| {variant === "h1" && ( | |
| <h1 className="text-[38px] font-bold text-text-light dark:text-text-dark sm:text-[52px]"> | |
| {children} | |
| </h1> | |
| )} | |
| {variant === "h2" && ( | |
| <h2 className="text-[32px] font-bold text-text-light dark:text-text-dark sm:text-[42px]"> | |
| {children} | |
| </h2> | |
| )} | |
| {variant === "h3" && ( | |
| <h3 className="text-[24px] font-semibold text-text-light dark:text-text-dark sm:text-[36px]"> | |
| {children} | |
| </h3> | |
| )}{" "} | |
| {variant === "h4" && ( | |
| <h4 className="text-[20px] font-medium text-text-light dark:text-text-dark sm:text-[28px]"> | |
| {children} | |
| </h4> | |
| )} | |
| {variant === "h5" && ( | |
| <h5 className="text-[22px] text-text-light dark:text-text-dark sm:text-[18px]"> | |
| {children} | |
| </h5> | |
| )} | |
| {variant === "p" && ( | |
| <p className="text-[18px] text-text-light dark:text-text-dark"> | |
| {children} | |
| </p> | |
| )} | |
| {variant === "ui" && ( | |
| <p className="font-regular text-[16px] text-text-light dark:text-text-dark"> | |
| {children} | |
| </p> | |
| )} | |
| </div> | |
| ); | |
| } |
| @@ -0,0 +1,55 @@ | |||
| import React from "react"; | |||
| import Image from "next/image"; | |||
There was a problem hiding this comment.
Optimize import statement.
The Image import from "next/image" can be optimized by using named imports to reduce bundle size.
- import Image from "next/image";
+ import { Image } from "next/image";Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| import Image from "next/image"; | |
| import { Image } from "next/image"; |
| export default function ShowcaseImages() { | ||
| return ( | ||
| <div className="flex w-screen justify-center"> | ||
| <div className="my-32 grid max-w-[1200px] grid-rows-2 gap-24"> | ||
| {/* 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"> | ||
| {" "} | ||
| <TBox variant="h3">Easy to use, easy to write</TBox> | ||
| <TBox variant="p"> | ||
| With writedown it becomes easier to jot down your thoughts quickly | ||
| and in an efficient manner. | ||
| </TBox> | ||
| <Btn variant="page">Try it out!</Btn> | ||
| </div> | ||
|
|
||
| <div className="flex w-full justify-center sm:justify-end sm:pr-6"> | ||
| <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"} | ||
| ></Image> | ||
| </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"> | ||
| {" "} | ||
| <TBox variant="h3">Easy to use, easy to write</TBox> | ||
| <TBox variant="p"> | ||
| With writedown it becomes easier to jot down your thoughts quickly | ||
| and in an efficient manner. | ||
| </TBox> | ||
| <Btn variant="page">Try it out!</Btn> | ||
| </div> | ||
|
|
||
| <div className="flex w-full justify-center sm:justify-start sm:pl-6"> | ||
| <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"} | ||
| ></Image> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Ensure unique alt text for images.
The Image components lack alt attributes, which are important for accessibility and SEO. Ensure each image has a unique and descriptive alt text.
- src={"/Images/showcaseImg1.png"}
+ src={"/Images/showcaseImg1.png"}
+ alt="Showcase image 1"Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export default function ShowcaseImages() { | |
| return ( | |
| <div className="flex w-screen justify-center"> | |
| <div className="my-32 grid max-w-[1200px] grid-rows-2 gap-24"> | |
| {/* 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"> | |
| {" "} | |
| <TBox variant="h3">Easy to use, easy to write</TBox> | |
| <TBox variant="p"> | |
| With writedown it becomes easier to jot down your thoughts quickly | |
| and in an efficient manner. | |
| </TBox> | |
| <Btn variant="page">Try it out!</Btn> | |
| </div> | |
| <div className="flex w-full justify-center sm:justify-end sm:pr-6"> | |
| <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"} | |
| ></Image> | |
| </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"> | |
| {" "} | |
| <TBox variant="h3">Easy to use, easy to write</TBox> | |
| <TBox variant="p"> | |
| With writedown it becomes easier to jot down your thoughts quickly | |
| and in an efficient manner. | |
| </TBox> | |
| <Btn variant="page">Try it out!</Btn> | |
| </div> | |
| <div className="flex w-full justify-center sm:justify-start sm:pl-6"> | |
| <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"} | |
| ></Image> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| export default function ShowcaseImages() { | |
| return ( | |
| <div className="flex w-screen justify-center"> | |
| <div className="my-32 grid max-w-[1200px] grid-rows-2 gap-24"> | |
| {/* 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"> | |
| {" "} | |
| <TBox variant="h3">Easy to use, easy to write</TBox> | |
| <TBox variant="p"> | |
| With writedown it becomes easier to jot down your thoughts quickly | |
| and in an efficient manner. | |
| </TBox> | |
| <Btn variant="page">Try it out!</Btn> | |
| </div> | |
| <div className="flex w-full justify-center sm:justify-end sm:pr-6"> | |
| <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"} | |
| alt="Showcase image 1" | |
| ></Image> | |
| </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"> | |
| {" "} | |
| <TBox variant="h3">Easy to use, easy to write</TBox> | |
| <TBox variant="p"> | |
| With writedown it becomes easier to jot down your thoughts quickly | |
| and in an efficient manner. | |
| </TBox> | |
| <Btn variant="page">Try it out!</Btn> | |
| </div> | |
| <div className="flex w-full justify-center sm:justify-start sm:pl-6"> | |
| <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"} | |
| alt="Showcase image 1" | |
| ></Image> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } |
| // import HeroSection from "@/components/home/HeroSection"; | ||
| // import Features from "@/components/home/Features"; | ||
| // import Navbar from "@/components/home/Navbar"; | ||
| // import Footer from "@/components/home/Footer"; |
There was a problem hiding this comment.
Remove commented-out imports.
Remove the commented-out import statements to keep the code clean and maintainable.
- // import HeroSection from "@/components/home/HeroSection";
- // import Features from "@/components/home/Features";
- // import Navbar from "@/components/home/Navbar";
- // import Footer from "@/components/home/Footer";Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| // import HeroSection from "@/components/home/HeroSection"; | |
| // import Features from "@/components/home/Features"; | |
| // import Navbar from "@/components/home/Navbar"; | |
| // import Footer from "@/components/home/Footer"; |
| window.removeEventListener("scroll", handleScroll); | ||
| }; | ||
| }, []); | ||
| //TODO: figure out a better way to scale the topbar, currently it just hides the middle section |
There was a problem hiding this comment.
Address TODO comment.
There is a TODO comment regarding scaling the topbar. Do you need assistance in figuring out a better way to scale the topbar? I can help with that.
- //TODO: figure out a better way to scale the topbar, currently it just hides the middle sectionCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| //TODO: figure out a better way to scale the topbar, currently it just hides the middle section |
| return ( | ||
| <div className="flex h-[400px] w-screen justify-center bg-slate-200 dark:bg-slate-800"> | ||
| <div className="flex h-full max-w-[1200px] flex-col items-center justify-center gap-3"> | ||
| <TBox variant="h2">Still not convinced?</TBox> |
There was a problem hiding this comment.
It would be better to not have this bold. Medium should be fine.
|
|
||
| export default function WriteOnceAccessAnywhere() { | ||
| return ( | ||
| <div className="flex h-[700px] w-screen justify-center bg-slate-200 dark:bg-slate-800"> |
There was a problem hiding this comment.
Instead of absolute height, prefer using padding instead. Use the tailwind presets for padding, and every section must use the x and y padding consistently.
components/FrontPage/topbar.jsx
Outdated
| <nav | ||
| className="fixed left-1 right-1 top-1 z-30 grid h-[63px] grid-cols-2 rounded-full border-midnight-400 bg-chalk-50 px-[20px] transition-all dark:border-dusk-50 dark:bg-midnight-300 sm:grid-cols-3" |
There was a problem hiding this comment.
The design for this is a bit off. Please refer to the previous version's navbar for design. The padding must be correct
components/FrontPage/topbar.jsx
Outdated
| <div className="flex h-full w-full items-center justify-end gap-3 "> | ||
| <ThemeSwitcher></ThemeSwitcher> | ||
| <div className="mxs:hidden"> | ||
| <Btn variant="ui">Write now!</Btn> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
The button design is inconsistent with the rest of the buttons on the same page. Prefer using buttons from the previous version.
There was a problem hiding this comment.
Please consult with me for the button designs that use a solid background :)
| <MainTitle></MainTitle> | ||
| <Btn variant="page">Write now!</Btn> | ||
| </div> | ||
| <FrontImage></FrontImage> |
There was a problem hiding this comment.
Empty tags must be written properly.
| <FrontImage></FrontImage> | |
| <FrontImage /> |
| <HeroSection /> | ||
| <Features /> | ||
| <Footer /> | ||
| <TopBar></TopBar> |
There was a problem hiding this comment.
Empty tags must be written properly.
| <TopBar></TopBar> | |
| <TopBar /> |
…o the pre-existing button component
Summary by CodeRabbit
New Features
Enhancements
Dependency Updates
@tiptap-proextensions.@tiptap/extension-code-block-lowlight,@tiptap/extension-image, and@tiptap/extension-link.