diff --git a/apps/frontend/src/components/ProductActionsCard.tsx b/apps/frontend/src/components/ProductActionsCard.tsx index 5345491e..74072e35 100644 --- a/apps/frontend/src/components/ProductActionsCard.tsx +++ b/apps/frontend/src/components/ProductActionsCard.tsx @@ -1,6 +1,6 @@ import { ArrowLongRightIcon } from "@heroicons/react/24/outline"; import { NavLink } from "react-router-dom"; - +import { colorVariants } from "@use-miller/shared-frontend-tooling"; export class ProductAction { title!: string; href!: string; @@ -13,39 +13,6 @@ export default function ProductActionsCard({ }: { actions: ProductAction[]; }) { - const colorVariants = { - green: { - hoverShadow: "hover:shadow-green-500/30", - foreground: "text-green-500", - hoverForeground: "hover:text-green-500", - }, - red: { - hoverShadow: "hover:shadow-red-500/30", - foreground: "text-red-500", - hoverForeground: "hover:text-red-500", - }, - amber: { - hoverShadow: "hover:shadow-amber-500/30", - foreground: "text-amber-500", - hoverForeground: "hover:text-amber-500", - }, - cyan: { - hoverShadow: "hover:shadow-cyan-500/30", - foreground: "text-cyan-500", - hoverForeground: "hover:text-cyan-500", - }, - violet: { - hoverShadow: "hover:shadow-violet-500/30", - foreground: "text-violet-500", - hoverForeground: "hover:text-violet-500", - }, - pink: { - hoverShadow: "hover:shadow-pink-500/30", - foreground: "text-pink-500", - hoverForeground: "hover:text-pink-500", - }, - }; - return (
{actions.map((action, actionIdx) => ( diff --git a/apps/marketing/package.json b/apps/marketing/package.json index 82932606..94416b3f 100644 --- a/apps/marketing/package.json +++ b/apps/marketing/package.json @@ -13,6 +13,7 @@ "dependencies": { "@auth0/nextjs-auth0": "2.2.1", "@headlessui/react": "1.7.12", + "@heroicons/react": "2.0.16", "@tailwindcss/forms": "0.5.3", "@use-miller/shared-api-client": "workspace:*", "@use-miller/shared-frontend-tooling": "workspace:1.0.0", diff --git a/apps/marketing/src/components/Hero.tsx b/apps/marketing/src/components/Hero.tsx index 7636c796..1dd40260 100644 --- a/apps/marketing/src/components/Hero.tsx +++ b/apps/marketing/src/components/Hero.tsx @@ -1,19 +1,28 @@ -import Link from "next/link"; +import StyledLink from "./StyledLink"; import { Container } from "./Container"; +import codeImage from "../intro-media/code.png"; +import adminImage from "../intro-media/admin.png"; +import productImage from "../intro-media/product.png"; +import Image from "next/image"; export function Hero() { const features = [ - "Subscriptions and payments built in", - "Organisations and users built in", - "Pre-built modular Integrations for useful APIs like Twitter and running stable diffusion (requires expensive VM with graphics card!)", - "Queues for async jobs already setup for use", - "Send emails using popular providers (twillio, mailgun, fastmail etc) via smtp", - "Bring your ideas to life in minutes with custom tooling to initialise SaaS projects", + "Organisations and Users", + "Subscriptions and payments (Stripe)", + "Authentication and authorization (Auth0)", + "Pre-built NestJs modules for useful APIs like Twitter or for running Stable Diffusion (graphics card not included with Miller!)", + "Queues for async jobs are already setup and ready to use", + "Send emails using popular providers (Twillio, Mailgun, Fastmail etc) via smtp and nodemailer", + "Local development with docker-compose and pre-configured Postgres and Redis", + "Safe database changes with migrations", + "Terraform scripts to deploy and manage Auth0, Stripe and deploying to Digital Ocean", + "Miller is just Node and React so you can run it on any hosting provider", + "and more...", ]; return ( - -
+ +
-

- The product development kit for makers -

-

- Skip straight to the good stuff - providing valuable - features to your customers. Miller has all of your - technology sorted. -

-
- - Get a demo today - +
+
+
+

+ A Nest JS and React SaaS kit for busy devs +

+

+ Setup a new project with NestJs,Postgres, + React, Tailwind, Stripe and Auth0 in + minutes. Save months of time and skip + straight to the good stuff - providing + valuable features to your customers. +

+
+
+
+ admin image + product image + code image +
+
+
+
+ + Buy now + + + View the code + +
-
-

+

+

+ What is Miller? +

+

+ Miller is a frontend app, backend app, marketing + app, a collection of scripts and NestJs libraries + that are all integrated with Stripe and Auth0. + Miller is months of dev work already completed, for + people with lots of ideas, but not a lot of time. +

+

+ Miller focuses on four main things: +

+
    +
  • + Fast setup. Miller is designed + to get you up and running locally in minutes. + We've already integrated everything. We've + written the scripts to automate initialisation. +
    • +
  • + Leverage services. Managed + services like Stripe and Auth0 provide + extraordinary value to developers. Our terraform + scripts will configure and manage these for you + in seconds. They are already integrated into the + frontend and backend apps. +
    • +
  • + + Avoid chasing the latest technology. + {" "} + You probably don't need Kubernetes for your + first 10 customers. Your customers don't care, + they want their problem solved. Just start + shipping. +
    • +
  • + Convention over configuration.{" "} + Miller comes with sensible defaults for a + production ready application but you can + override them if you want. Nothing is hidden. +
    • +
+
+
+

What you get

    {features.map((feature, key) => (
  • {feature}
    • ))}
+
+ + Buy now + + + View the code + +
diff --git a/apps/marketing/src/components/Pricing.tsx b/apps/marketing/src/components/Pricing.tsx new file mode 100644 index 00000000..9cb16bcf --- /dev/null +++ b/apps/marketing/src/components/Pricing.tsx @@ -0,0 +1,59 @@ +import { colorVariants } from "@use-miller/shared-frontend-tooling"; +import StyledLink from "./StyledLink"; +import { Container } from "./Container"; + +export function Pricing() { + console.log(colorVariants["cyan"]); + return ( + +
+
+
+   +
+
+
+
+

+ Pricing +

+

+ Simple pricing, pay once and use forever. +

+
    +
  • + All the features +
    • +
  • + All the time-saving +
    • +
  • + Updates for 1 year +
    • +
  • + Access to chat forum +
    • +
+

+ $199USD +

+
+ + Buy now + +
+
+
+
+ + ); +} diff --git a/apps/marketing/src/components/StyledLink.tsx b/apps/marketing/src/components/StyledLink.tsx new file mode 100644 index 00000000..2713777b --- /dev/null +++ b/apps/marketing/src/components/StyledLink.tsx @@ -0,0 +1,33 @@ +import { colorVariants } from "@use-miller/shared-frontend-tooling"; +import clsx from "clsx"; +import Link from "next/link"; +import { PropsWithChildren } from "react"; + +const StyledLink = ({ + href, + className, + children, + color, +}: PropsWithChildren & { + href: string; + color: "green" | "cyan" | "amber" | "red" | "violet" | "pink"; + className?: string; +}) => { + return ( + + {children} + + ); +}; + +export default StyledLink; diff --git a/apps/marketing/src/diagrams/miller.drawio.svg b/apps/marketing/src/diagrams/miller.drawio.svg new file mode 100644 index 00000000..388f5e01 --- /dev/null +++ b/apps/marketing/src/diagrams/miller.drawio.svg @@ -0,0 +1,108 @@ + + + + + + + + + +
+
+
+ Main app +
+
+
+ + + Main app + + + + + + + + + +
+
+
+ Prebuilt integrations +
+
+
+ + + Prebuilt integrations + + + + + + + + + +
+
+
+ Backend APi +
+
+
+ + + Backend APi + + + + + + + + + +
+
+
+ Marketing Site +
+
+
+ + + Marketing Site + + + + + + + + + +
+
+
+ Auth0 +
+
+
+ + + Auth0 + + + + + + + + + Text is not SVG - cannot display + + + + \ No newline at end of file diff --git a/apps/marketing/src/intro-media/admin.png b/apps/marketing/src/intro-media/admin.png new file mode 100644 index 00000000..73c05d70 Binary files /dev/null and b/apps/marketing/src/intro-media/admin.png differ diff --git a/apps/marketing/src/intro-media/code.png b/apps/marketing/src/intro-media/code.png new file mode 100644 index 00000000..ea35efd3 Binary files /dev/null and b/apps/marketing/src/intro-media/code.png differ diff --git a/apps/marketing/src/intro-media/product.png b/apps/marketing/src/intro-media/product.png new file mode 100644 index 00000000..deb7bd5f Binary files /dev/null and b/apps/marketing/src/intro-media/product.png differ diff --git a/apps/marketing/src/pages/index.tsx b/apps/marketing/src/pages/index.tsx index 89b3a9ec..565c31e4 100644 --- a/apps/marketing/src/pages/index.tsx +++ b/apps/marketing/src/pages/index.tsx @@ -2,6 +2,7 @@ import Head from "next/head"; import { Footer } from "../components/Footer"; import { Header } from "../components/Header"; import { Hero } from "../components/Hero"; +import { Pricing } from "../components/Pricing"; export default function Home() { return ( @@ -16,6 +17,7 @@ export default function Home() {
+