From f445f86fac29d52a7f405429d2ed084c0a052a5b Mon Sep 17 00:00:00 2001 From: Bart Stefanski Date: Fri, 21 Apr 2023 17:50:04 +0200 Subject: [PATCH] feat: add basic LP --- components/Button/Button.stories.tsx | 4 +- components/Button/Button.tsx | 15 +- lp-items.tsx | 416 +++++++++++++++++++++++++++ pages/index.tsx | 167 ++--------- 4 files changed, 446 insertions(+), 156 deletions(-) create mode 100644 lp-items.tsx diff --git a/components/Button/Button.stories.tsx b/components/Button/Button.stories.tsx index 9dbe534..ad992c7 100644 --- a/components/Button/Button.stories.tsx +++ b/components/Button/Button.stories.tsx @@ -6,13 +6,13 @@ const meta: Meta = { component: Button, args: { intent: "primary", - disabled: false, + underline: false, children: "Button", size: "lg", }, argTypes: { intent: { - options: ["primary", "secondary",], + options: ["primary", "secondary"], control: { type: "select" }, }, size: { diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx index f2b1bc1..10b9811 100644 --- a/components/Button/Button.tsx +++ b/components/Button/Button.tsx @@ -24,7 +24,7 @@ const button = cva( sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"], lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"], }, - disabled: { true: ["opacity-30"], false: [] }, + underline: { true: ["underline"], false: [] }, }, defaultVariants: { intent: "primary", @@ -33,16 +33,15 @@ const button = cva( } ) -export interface ButtonProps - extends Omit, "disabled">, - VariantProps { - disabled?: boolean +export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { + underline?: boolean + href: string } -export function Button({ className, intent, size, disabled, ...props }: ButtonProps) { +export function Button({ className, intent, size, underline, ...props }: ButtonProps) { return ( - + ) } diff --git a/lp-items.tsx b/lp-items.tsx new file mode 100644 index 0000000..3a97992 --- /dev/null +++ b/lp-items.tsx @@ -0,0 +1,416 @@ +export const LP_GRID_ITEMS = [ + { + title: "Next.js", + description: "Fast by default, with config optimized for performance.", + icon: ( + + + + ), + }, + { + title: "Tailwind CSS", + description: "A utility-first CSS framework for rapid UI development.", + icon: ( + + + + ), + }, + { + title: "ESlint & Prettier", + description: "For clean, consistent, and error-free code.", + icon: ( + + + + ), + }, + { + title: "Extremely strict TypeScript", + description: "With `ts-reset` library for ultimate type safety.", + icon: ( + + + + ), + }, + { + title: "Bundle analyzer plugin", + description: "Keep an eye on your bundle size.", + icon: ( + + + + ), + }, + { + title: "Jest & React Testing Library", + description: "For rock-solid unit and integration tests.", + icon: ( + + + + ), + }, + { + title: "Playwright", + description: "Write end-to-end tests like a pro.", + icon: ( + + + + ), + }, + { + title: "Storybook", + description: "Create, test, and showcase your components.", + icon: ( + + + + ), + }, + { + title: "Smoke Testing & Acceptance Tests", + description: "For confidence in your deployments.", + icon: ( + + + + ), + }, + { + title: "Conventional commits git hook", + description: "Keep your commit history neat and tidy.", + icon: ( + + + + ), + }, + { + title: "Observability", + description: "Open Telemetry integration for seamless monitoring.", + icon: ( + + + + + ), + }, + { + title: "Absolute imports", + description: "No more spaghetti imports.", + icon: ( + + + + ), + }, + { + title: "Health checks", + description: "Kubernetes-compatible for robust deployments.", + icon: ( + + + + ), + }, + { + title: "Radix UI", + description: "Headless UI components for endless customization.", + icon: ( + + + + ), + }, + { + title: "CVA", + description: "Create a consistent, reusable, and atomic design system.", + icon: ( + + + + ), + }, + { + title: "Renovate BOT", + description: "Auto-updating dependencies, so you can focus on coding.", + icon: ( + + + + ), + }, + { + title: "Patch-package", + description: "Fix external dependencies without losing your mind.", + icon: ( + + + + ), + }, + { + title: "Components coupling & cohesion graph", + description: "A tool for managing component relationships.", + icon: ( + + + + + ), + }, + { + title: "GitHub Actions", + description: "Pre-configured actions for smooth workflows, including Bundle Size and performance stats.", + icon: ( + + + + ), + }, + { + title: "Automated ChatGPT Code Reviews", + description: "Stay on the cutting edge with AI-powered code reviews!", + icon: ( + + + + ), + }, + { + title: "Semantic Release", + description: "For automatic changelog generation.", + icon: ( + + + + ), + }, +] diff --git a/pages/index.tsx b/pages/index.tsx index d0bbdb6..c097e46 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,6 @@ import Head from "next/head" import { Button } from "components/Button/Button" +import { LP_GRID_ITEMS } from "../lp-items" export default function Web() { return ( @@ -11,163 +12,37 @@ export default function Web() {

- Payments tool for software companies + Next.js Enterprise Boilerplate

- From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their - payment stack. + Jumpstart your enterprise project with our feature-packed, high-performance Next.js boilerplate! + Experience rapid UI development, AI-powered code reviews, and an extensive suite of tools for a smooth and + enjoyable development process.

- - +
-
-

- Designed for business teams like yours -

-

- Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value - and drive economic growth. -

-
-
-
-
- - - +
+ {LP_GRID_ITEMS.map((singleItem) => ( +
+
+ {singleItem.icon} +
+

{singleItem.title}

+

{singleItem.description}

-

Marketing

-

- Plan it, create it, launch it. Collaborate seamlessly with all the organization and hit your marketing - goals every month with our marketing plan. -

-
-
-
- - - -
-

Legal

-

- Protect your organization, devices and stay compliant with our structured workflows and custom - permissions made for you. -

-
-
-
- - - - -
-

Business Automation

-

- Auto-assign tasks, send Slack messages, and much more. Now power up with hundreds of new templates to - help you get started. -

-
-
-
- - - - -
-

Finance

-

- Audit-proof software built for critical financial operations like month-end close and quarterly - budgeting. -

-
-
-
- - - -
-

Enterprise Design

-

- Craft beautiful, delightful experiences for both marketing and product with real cross-company - collaboration. -

-
-
-
- - - -
-

Operations

-

- Keep your company’s lights on with customizable, iterative, and structured workflows built for all - efficient teams and individual. -

-
+ ))}