diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Frame.tsx | 6 | ||||
| -rw-r--r-- | src/components/HomepageFeatures/index.tsx | 40 |
2 files changed, 38 insertions, 8 deletions
diff --git a/src/components/Frame.tsx b/src/components/Frame.tsx index 62467b6..6f858ba 100644 --- a/src/components/Frame.tsx +++ b/src/components/Frame.tsx @@ -6,6 +6,7 @@ type FrameType = { children?: ReactElement | ReactElement[]; rainbow?: boolean; shadowClass?: string; + background?: string; width?: "fit" | "full" | "1/2" | "1/3"; }; @@ -34,11 +35,14 @@ const Frame = ({ children, width, shadowClass = "shadow-neoblack", + background = "bg-white", }: FrameType) => { const s = rainbow ? classes.filter((c) => !c.includes("shadow")).concat("shadow-rainbow") : classes; - const cls = [...s, `${widthClasses[width]}`, shadowClass].join(" "); + const cls = [...s, `${widthClasses[width]}`, shadowClass, background].join( + " " + ); return <div className={cls}>{children}</div>; }; diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index a13fb23..f4471f3 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -4,6 +4,7 @@ import styles from "./styles.module.css"; import CodeFrame from "../CodeFrame"; import Button from "../Button"; import CodeBlock from "@theme/CodeBlock"; +import Frame from "../Frame"; type ShowCase = | { code: string; language: string } @@ -81,13 +82,13 @@ const FeatureList: FeatureItem[] = [ function Feature({ n, title, showcase, description, buttonText }: FeatureItem) { const k = n ?? 0; - const reverse = k % 2 === 0 ? "flex-row" : "flex-row-reverse"; + const reverse = k % 2 === 0 ? "xl:flex-row" : "xl:flex-row-reverse"; const showcaseComponent = "code" in showcase ? ( // <CodeFrame language={showcase.language}>{showcase.code}</CodeFrame> <CodeBlock showLineNumbers - className="!rounded-none !mb-0 " + className="!rounded-none !mb-0" language={showcase.language} > {showcase.code} @@ -98,13 +99,15 @@ function Feature({ n, title, showcase, description, buttonText }: FeatureItem) { // <div className="bg-white -z-0 my-7 p-7 border-4 border-black"></div> return ( <div - className={`bg-violet-200 shadow-neocyan border-4 border-black p-32 flex mx-32 gap-16 ${reverse}`} + className={`bg-violet-200 shadow-neocyan border-4 border-black xl:p-16 sm:p-8 p-0 flex sm:flex-col xl:flex-nowrap flex-wrap md:mx-32 sm:gap-16 gap-8 ${reverse}`} > - <div className="self-center bg-codeBg">{showcaseComponent}</div> - <div className="flex flex-col gap-4"> + <div className="self-center bg-codeBg flex-grow "> + {showcaseComponent} + </div> + <div className="flex flex-col gap-4 sm:p-0 p-8"> <h3 className="text-3xl">{title}</h3> <p className="text-lg">{description}</p> - <div> + <div className="xl:self-start self-center"> <Button rounded="full" color="cyan"> <h3>{buttonText}</h3> </Button> @@ -117,8 +120,31 @@ function Feature({ n, title, showcase, description, buttonText }: FeatureItem) { export default function HomepageFeatures(): JSX.Element { return ( <section> - <div className="container"> + <div className="sm:container relative"> + <span className="absolute left-1/2 w-4 h-full bg-violet-500 border-black border-2 -z-20" /> <div className="flex flex-col gap-32"> + <div className="relative mb-10"> + {/* horrible hack to hide the vertical bar */} + <span className="absolute w-full h-full py-36 bg-lightbackground -z-20" /> + <img + className="absolute sm:h-36 h-24 bottom-1/4 right-2/3 -z-10" + src="img/Star2.svg" + /> + <img + className="absolute sm:h-36 h-24 top-1/4 left-2/3 -z-10 " + src="img/Star1.svg" + /> + <h1 className="text-center"> + <span className="text-4xl sm:text-6xl">Roadmap</span> + </h1> + </div> + <div className="mx-auto relative pb-10"> + <Frame background="bg-yellow-400"> + <h2 className="text-black sm:text-2xl text-lg">Coming Soon</h2> + </Frame> + </div> + </div> + <div className="flex flex-col gap-32 mb-24"> {FeatureList.map((props, idx) => ( <Feature key={idx} {...props} n={idx} /> ))} |