diff options
| -rw-r--r-- | src/components/HomepageFeatures/index.tsx | 26 |
1 files changed, 14 insertions, 12 deletions
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index 2191ea1..e1c42d3 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import clsx from "clsx"; import styles from "./styles.module.css"; import CodeFrame from "../CodeFrame"; +import Button from "../Button"; type ShowCase = | { code: string; language: string } @@ -11,6 +12,8 @@ type FeatureItem = { title: string; description: JSX.Element; showcase: ShowCase; + buttonText: string; + shadowColor?: string; }; const FeatureList: FeatureItem[] = [ @@ -21,10 +24,9 @@ const FeatureList: FeatureItem[] = [ NeoHaskell offers a clean and intuitive language design, complemented by a core library that provides all the tools you need to start creating amazing software right away. - <br /> - START CODING </> ), + buttonText: "Start Coding", showcase: { language: "haskell", code: `processLogs rawLogs = @@ -43,10 +45,9 @@ const FeatureList: FeatureItem[] = [ multi-platform support a breeze. Whether you're compiling to native code or generating WebAssembly for browser compatibility, you'll enjoy error messages that guide, not hinder. - <br /> - EMPOWER YOUR DEVELOPMENT </> ), + buttonText: "Empower your Development", showcase: { code: "", language: "" }, }, { @@ -57,10 +58,9 @@ const FeatureList: FeatureItem[] = [ them. Say goodbye to the cognitive overhead of managing state or wrestling with dependency injection. Your focus stays where it belongs: on solving problems and crafting solutions. - <br /> - BEGIN YOUR JOURNEY </> ), + buttonText: "Begin your Journey", showcase: { code: "", language: "" }, }, { @@ -70,15 +70,14 @@ const FeatureList: FeatureItem[] = [ Relish the ease of crafting full-stack applications in a unified language environment. NeoHaskell takes care of frontend-backend communication, allowing you to focus solely on your application's logic. - <br /> - EXPERIENCE NATURAL FULL-STACK DEVELOPMENT </> ), + buttonText: "Experience Bliss", showcase: { code: "", language: "" }, }, ]; -function Feature({ title, showcase, description }: FeatureItem) { +function Feature({ title, showcase, description, buttonText }: FeatureItem) { const showcaseComponent = "code" in showcase ? ( <CodeFrame language={showcase.language}>{showcase.code}</CodeFrame> @@ -88,9 +87,12 @@ function Feature({ title, showcase, description }: FeatureItem) { return ( <div className="flex p-4"> {showcaseComponent} - <div className="p-7"> - <h3>{title}</h3> - <p>{description}</p> + <div className="bg-white -z-0 my-7 p-7 border-4 border-black"> + <h3 className="text-xl">{title}</h3> + <p className="text-lg">{description}</p> + <Button rounded="full" color="lime"> + <h3>{buttonText}</h3> + </Button> </div> </div> ); |