-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement responsive landing page
- Loading branch information
Showing
51 changed files
with
2,781 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -54,5 +54,10 @@ export default tseslint.config( | |
| "no-unused-vars", | ||
| ]), | ||
| }, | ||
| { | ||
| rules: { | ||
| "react/prop-types": 0, | ||
| }, | ||
| }, | ||
| prettier, | ||
| ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import path from "path"; | ||
| import { Plugin } from "@docusaurus/types"; | ||
| import { RuleSetRule } from "webpack"; | ||
| import { Config as SvgrConfig } from "@svgr/core"; | ||
|
|
||
| // This plugin is used to fix duplicate IDs in svg styles. | ||
| // For more details, see: https://github.com/facebook/docusaurus/issues/8297 | ||
| export function svgFixPlugin(): Plugin { | ||
| return { | ||
| name: "svg-fix", | ||
| configureWebpack(config) { | ||
| const svgRule = config.module?.rules?.find(r => | ||
| (r as { test: RegExp }).test.test("file.svg"), | ||
| ) as RuleSetRule | undefined; | ||
| if (!svgRule) { | ||
| console.warn("Failed to apply SVG fix, could not find SVG rule in webpack config!"); | ||
| return {}; | ||
| } | ||
| const svgrLoader = svgRule.oneOf?.find( | ||
| r => | ||
| ((r as RuleSetRule).use as object[] | undefined)?.length === 1 && | ||
| ((r as RuleSetRule).use as { loader: string }[])?.[0].loader.includes( | ||
| "@svgr/webpack", | ||
| ), | ||
| ); | ||
| if (!svgrLoader) { | ||
| console.warn( | ||
| "Failed to apply SVG fix, could not find svgr loader in webpack config!", | ||
| ); | ||
| return {}; | ||
| } | ||
|
|
||
| const svgoConfig = (svgrLoader.use as { options: SvgrConfig }[])[0].options.svgoConfig; | ||
| if (!svgoConfig?.plugins) { | ||
| console.warn( | ||
| "Failed to apply SVG fix, could not find svgo config in webpack config!", | ||
| ); | ||
| return {}; | ||
| } | ||
|
|
||
| svgoConfig.plugins.push({ | ||
| name: "prefixIds", | ||
| params: { | ||
| delim: "_", | ||
| prefix: (element, file) => { | ||
| return path.basename(file?.path ?? "").split(".")[0]; | ||
| }, | ||
| prefixIds: true, | ||
| prefixClassNames: true, | ||
| }, | ||
| }); | ||
|
|
||
| return {}; | ||
| }, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React from "react"; | ||
| import { animated, useInView } from "react-spring"; | ||
|
|
||
| interface AnimatedAppearProps { | ||
| children: React.ReactNode; | ||
| className?: string; | ||
| onAppear?: () => void; | ||
| } | ||
|
|
||
| export function AnimatedAppear(props: AnimatedAppearProps) { | ||
| const [ref, styles] = useInView( | ||
| () => ({ | ||
| from: { | ||
| opacity: 0, | ||
| y: 100, | ||
| }, | ||
| to: { | ||
| opacity: 1, | ||
| y: 0, | ||
| }, | ||
| onRest: () => { | ||
| props.onAppear?.(); | ||
| }, | ||
| }), | ||
| { | ||
| rootMargin: "100% 0% -10% 0%", | ||
| }, | ||
| ); | ||
|
|
||
| return ( | ||
| <animated.div ref={ref} style={styles} className={props.className}> | ||
| {props.children} | ||
| </animated.div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| interface DemoStatsProps { | ||
| value: string; | ||
| description: string; | ||
| } | ||
|
|
||
| export function DemoStats(props: DemoStatsProps) { | ||
| return ( | ||
| <div className="flex flex-col text-white"> | ||
| <div className="text-center text-2xl font-bold">{props.value}</div> | ||
| <div className="text-center text-lg leading-tight">{props.description}</div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { ReactNode } from "react"; | ||
| import clsx from "clsx"; | ||
| import TickIcon from "@site/static/icons/tick-bold.svg"; | ||
|
|
||
| export enum FeatureBlockOrder { | ||
| PictureOnTheLeft, | ||
| PictureOnTheRight, | ||
| } | ||
|
|
||
| interface FeatureBlockProps { | ||
| heading: ReactNode; | ||
| description: string; | ||
| items: string[]; | ||
| order: FeatureBlockOrder; | ||
| imgSrc: string; | ||
| className?: string; | ||
| } | ||
|
|
||
| export function FeatureBlock(props: FeatureBlockProps) { | ||
| console.log(props.imgSrc); | ||
| return ( | ||
| <div | ||
| className={clsx( | ||
| "flex justify-between", | ||
| { "flex-row-reverse": props.order === FeatureBlockOrder.PictureOnTheLeft }, | ||
| props.className, | ||
| )} | ||
| > | ||
| <div className="flex flex-grow basis-1/2 flex-col justify-center overflow-hidden"> | ||
| <div className="text-xl font-bold text-gray-700 sm:text-2xl">{props.heading}</div> | ||
| <img className="sm:hidden" src={props.imgSrc} alt="Feature Image" /> | ||
| <div className="mt-4 text-lg font-medium text-gray-500">{props.description}</div> | ||
| <div className="mt-4 columns-2"> | ||
| {props.items.map(item => ( | ||
| <div | ||
| key={item} | ||
| className="mb-3 flex max-w-48 items-center text-lg font-medium text-gray-500" | ||
| > | ||
| <TickIcon className="mr-1 size-5 flex-shrink-0 fill-gray-500" /> | ||
| {item} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <img | ||
| className="hidden basis-1/2 overflow-hidden sm:block" | ||
| src={props.imgSrc} | ||
| alt="Feature Image" | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import clsx from "clsx"; | ||
| import { ReactNode } from "react"; | ||
|
|
||
| export interface FeatureCardProps { | ||
| icon: ReactNode; | ||
| heading: string; | ||
| items: string[]; | ||
| className?: string; | ||
| } | ||
|
|
||
| export function FeatureCard(props: FeatureCardProps) { | ||
| return ( | ||
| <div | ||
| className={clsx( | ||
| "grid break-inside-avoid grid-flow-row grid-cols-[48px_auto] grid-rows-[auto_1fr]", | ||
| )} | ||
| > | ||
| <div className="flex items-center justify-center"> | ||
| <div className="flex size-12 items-center justify-center rounded-full bg-indigo-200"> | ||
| <div className="flex size-6 h-min flex-shrink-0 items-center justify-center fill-indigo-600"> | ||
| {props.icon} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="ml-3 flex items-center fill-indigo-600 text-xl font-medium text-gray-700"> | ||
| {props.heading} | ||
| </div> | ||
| <div className="flex items-center justify-center pt-3"> | ||
| <div className="h-full w-0.5 bg-gradient-to-b from-indigo-600 to-transparent"></div> | ||
| </div> | ||
| <div className="ml-3 pb-5 pt-1"> | ||
| {props.items.map(item => ( | ||
| <div className="mt-4 text-lg leading-6 text-gray-500" key={item}> | ||
| {item} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.