feat: update CTAs

darraghoriordan · Sep 17, 2023 · 804779c · 804779c
1 parent 9bc7043
commit 804779c
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 70 deletions.
diff --git a/apps/frontend/src/images/profile-pic.jpg b/apps/frontend/src/images/profile-pic.jpg
diff --git a/apps/frontend/src/marketing-pages/dev-shell-home/Hero.tsx b/apps/frontend/src/marketing-pages/dev-shell-home/Hero.tsx
@@ -59,7 +59,7 @@ export function Hero({ user }: { user: UserDto }) {
         },
     ];
     const codeHref = `docs/dev-shell/reference/dev-shell-scripts/${btoa(
-        "/README.md"
+        "/README.md",
     )}`;
     const docsHref = `/docs/dev-shell/get-started/quick-start`;
     return (
@@ -141,7 +141,7 @@ export function Hero({ user }: { user: UserDto }) {
                                 color="violet"
                                 className="rounded-lg  text-xl px-14 py-4 hover:shadow-lg"
                             >
-                                Pricing
+                                Buy DevShell now!
                             </StyledLink>
                             <StyledLink
                                 href={docsHref}
@@ -262,7 +262,7 @@ export function Hero({ user }: { user: UserDto }) {
                                 color="green"
                                 className="rounded-lg text-xl px-14 py-4 hover:shadow-lg"
                             >
-                                Pricing
+                                Buy DevShell now!
                             </StyledLink>
                             <StyledLink
                                 href={docsHref}

diff --git a/apps/frontend/src/marketing-pages/index-home/Hero.tsx b/apps/frontend/src/marketing-pages/index-home/Hero.tsx
@@ -15,7 +15,8 @@ export interface HeroProduct {
     blurb: string;
     benefits: string[];
     image: StaticImageData;
-    learnMoreLink: string;
+    learnMoreLinkUrl: string;
+    learnMoreLinkText: string;
     altLinkText: string;
     altLink: string;
     githubUrl?: string;
@@ -27,7 +28,8 @@ export function Hero({ user }: { user: UserDto }) {
             title: "Miller Dev Shell",
             blurb: "Say Goodbye to manual dev environment configuration",
             image: devShellLogo,
-            learnMoreLink: "/dev-shell",
+            learnMoreLinkUrl: "/dev-shell",
+            learnMoreLinkText: "Save hours with DevShell",
             altLinkText: "Preview the code now",
 
             altLink:
@@ -45,7 +47,9 @@ export function Hero({ user }: { user: UserDto }) {
             title: "Local Dev Tools",
             blurb: "Local dev utilities to keep your business data safe",
             image: devToolsLogo,
-            learnMoreLink: "/local-dev-tools",
+            learnMoreLinkUrl: "/local-dev-tools",
+            learnMoreLinkText: "Try dev tools for free!",
+
             githubUrl:
                 "https://github.com/darraghoriordan/ssh-tool-new-electron",
             altLinkText: "Download now",
@@ -64,7 +68,9 @@ export function Hero({ user }: { user: UserDto }) {
             blurb: "Master full-stack web development by example",
             image: millerStartLogo,
             githubUrl: "https://github.com/darraghoriordan/use-miller",
-            learnMoreLink: "/miller-start",
+            learnMoreLinkUrl: "/miller-start",
+            learnMoreLinkText: "Try Miller Start for free!",
+
             altLinkText: "Preview the code now",
             altLink: "/docs/miller-start/reference/miller-web/L1JFQURNRS5tZA==",
             benefits: [
@@ -98,9 +104,10 @@ export function Hero({ user }: { user: UserDto }) {
                                     Code Safer. <br></br>Code Faster.
                                 </h1>
                                 <p className="mx-auto mt-12 max-w-2xl text-left text-lg text-gray-400 md:mx-0">
-                                    Miller makes dev tools that save you time so
-                                    you can focus on building your product and
-                                    helping your customers.
+                                    Hi! I'm Darragh, I make dev tools based on
+                                    my 20 years of experience that save you time
+                                    so you can focus on building your product
+                                    and helping your customers.
                                 </p>
                             </div>
                             <div className="intro-image-rotation md:relative w-1/2 md:w-full mt-20 md:mt-0 md:mb-0 hidden md:block">
@@ -126,7 +133,7 @@ export function Hero({ user }: { user: UserDto }) {
                         id="features"
                     >
                         <h2 className="pt-8 leading-snug mx-auto max-w-2xl font-display text-4xl font-medium tracking-tight text-white md:mx-0">
-                            Our Tools
+                            Check out the tools
                         </h2>
                         {products.map((product) => (
                             <SingleProductCard

diff --git a/apps/frontend/src/marketing-pages/index-home/SingleProductCard.tsx b/apps/frontend/src/marketing-pages/index-home/SingleProductCard.tsx
@@ -21,7 +21,8 @@ export const SingleProductCard = ({
     blurb,
     benefits,
     image,
-    learnMoreLink,
+    learnMoreLinkUrl,
+    learnMoreLinkText,
     altLinkText,
     altLink,
     githubUrl,
@@ -59,11 +60,11 @@ export const SingleProductCard = ({
                     </ul>
                     <div className="flex items-center space-x-8">
                         <StyledLink
-                            href={learnMoreLink}
+                            href={learnMoreLinkUrl}
                             color={colorVariant}
                             className={" border-white border"}
                         >
-                            Learn more &rarr;
+                            {learnMoreLinkText} &rarr;
                         </StyledLink>
                         <StyledLink
                             href={altLink}

diff --git a/apps/frontend/src/marketing-pages/local-dev-tools/Hero.tsx b/apps/frontend/src/marketing-pages/local-dev-tools/Hero.tsx
@@ -155,7 +155,7 @@ export function Hero({ user }: { user: UserDto }) {
                                 color="violet"
                                 className="rounded-lg  text-xl px-14 py-4 hover:shadow-lg"
                             >
-                                Try for Free
+                                Try for free!
                             </StyledLink>
                             <StyledLink
                                 href={codeHref}
@@ -196,39 +196,45 @@ export function Hero({ user }: { user: UserDto }) {
                             Download right now and try it out. Buy a license
                             later if you find it useful.
                         </p>
-                        <h3 className="mt-8 leading-snug mx-auto max-w-2xl font-display text-2xl font-medium tracking-tight text-white md:mx-0">
-                            Mac
-                        </h3>
-                        <p className="mt-4 text-left font-display text-lg tracking-tight text-gray-200">
-                            Universal App (Apple Silicon & Intel) -{" "}
-                            <a
-                                href={universalDownload}
-                                className="underline underline-offset-2 font-semibold"
-                            >
-                                Download
-                            </a>
-                        </p>
-                        <h3 className="mt-8 leading-snug mx-auto max-w-2xl font-display text-2xl font-medium tracking-tight text-white md:mx-0">
-                            Windows
-                        </h3>
-                        <p className="mt-4 text-left font-display text-lg tracking-tight text-gray-200">
-                            Intel x64 -{" "}
-                            <a
-                                href={winX64Download}
-                                className="underline underline-offset-2 font-semibold"
-                            >
-                                Download
-                            </a>
-                        </p>
-                        <p className="mt-4 text-left font-display text-lg tracking-tight text-gray-200">
-                            Arm 64 -{" "}
-                            <a
-                                href={winArm64Download}
-                                className="underline underline-offset-2 font-semibold"
-                            >
-                                Download
-                            </a>
-                        </p>
+                        <div className="md:flex md:gap-x-8 mt-8 justify-stretch">
+                            <div className="border rounded-lg p-8 mb-8 md:mb-0">
+                                <h3 className="mb-8 leading-snug mx-auto max-w-2xl font-display text-2xl font-medium tracking-tight text-white md:mx-0">
+                                    Mac
+                                </h3>
+                                <p className="mt-4 text-left font-display text-lg tracking-tight text-gray-200">
+                                    Universal App (Apple Silicon & Intel) -{" "}
+                                    <a
+                                        href={universalDownload}
+                                        className="underline underline-offset-2 font-semibold"
+                                    >
+                                        Download Now
+                                    </a>
+                                </p>
+                            </div>
+                            <div className="border rounded-lg p-8">
+                                <h3 className="mb-8 leading-snug mx-auto max-w-2xl font-display text-2xl font-medium tracking-tight text-white md:mx-0">
+                                    Windows
+                                </h3>
+                                <p className="mt-4 text-left font-display text-lg tracking-tight text-gray-200">
+                                    Intel x64 -{" "}
+                                    <a
+                                        href={winX64Download}
+                                        className="underline underline-offset-2 font-semibold"
+                                    >
+                                        Download Now
+                                    </a>
+                                </p>
+                                <p className="mt-4 text-left font-display text-lg tracking-tight text-gray-200">
+                                    Arm 64 -{" "}
+                                    <a
+                                        href={winArm64Download}
+                                        className="underline underline-offset-2 font-semibold"
+                                    >
+                                        Download Now
+                                    </a>
+                                </p>
+                            </div>
+                        </div>
                     </div>
                     <div className="mt-16" id="">
                         <p className="max-w-4xl text-left font-display text-3xl font-medium tracking-tight text-white sm:text-4xl">
@@ -250,7 +256,7 @@ export function Hero({ user }: { user: UserDto }) {
                                 color="green"
                                 className="rounded-lg  text-xl px-14 py-4 hover:shadow-lg"
                             >
-                                Buy Now
+                                Buy once, use forever.
                             </StyledLink>
                             <StyledLink
                                 href={codeHref}

diff --git a/apps/frontend/src/marketing-pages/local-dev-tools/Pricing.tsx b/apps/frontend/src/marketing-pages/local-dev-tools/Pricing.tsx
@@ -29,7 +29,7 @@ export function Pricing({ user }: { user: UserDto }) {
                 </div>
                 <div id="pricing" className="mt-16 text-gray-200 w-full">
                     <p className="my-8 max-w-4xl text-left font-display text-3xl font-medium tracking-tight text-white sm:text-4xl">
-                        Buy Now
+                        Buy once, use forever.
                     </p>
                     <p className="mt-4 text-left font-display text-lg font-medium tracking-tight ">
                         Simple pricing, pay once and use forever.

diff --git a/apps/frontend/src/marketing-pages/miller-start-home/Hero-learner.tsx b/apps/frontend/src/marketing-pages/miller-start-home/Hero-learner.tsx
@@ -211,7 +211,7 @@ export function Hero({ user }: { user: UserDto }) {
                                 color="violet"
                                 className="rounded-lg  text-xl px-14 py-4 hover:shadow-lg"
                             >
-                                Pricing
+                                Try for free!
                             </StyledLink>
                             <StyledLink
                                 href={docsHref}
@@ -313,7 +313,7 @@ export function Hero({ user }: { user: UserDto }) {
                                 color="green"
                                 className="rounded-lg text-xl px-14 py-4 hover:shadow-lg"
                             >
-                                Pricing
+                                Try for free!
                             </StyledLink>
                             <StyledLink
                                 href={docsHref}

diff --git a/apps/frontend/src/pages/about.tsx b/apps/frontend/src/pages/about.tsx
@@ -1,5 +1,7 @@
 import { Container } from "../components/Container.jsx";
 import Layout from "../components/Layout.jsx";
+import portraitImage from "../images/profile-pic.jpg";
+import Image from "next/image";
 
 export default function Home() {
     return (
@@ -13,25 +15,48 @@ export default function Home() {
                 <article className="prose prose-lg prose-invert mx-auto">
                     <h1>About Miller</h1>
                     <p>Hi! Thanks for checking out the Miller products. </p>
+                    <div className="md:flex gap-x-8">
+                        <div className="text-justify">
+                            <p>
+                                I'm Darragh ORiordan, I make all the tools that
+                                are available here. I'm a software engineer and
+                                people leader. I currently live in sunny Sydney,
+                                Australia.
+                            </p>
+                            <p>
+                                You can read more about me on my main website{" "}
+                                <a href="https://www.darraghoriordan.com/about/">
+                                    https://www.darraghoriordan.com/about/
+                                </a>
+                                .
+                            </p>
+                            <p>
+                                You can always reach me on{" "}
+                                <a href="https://twitter.com/darraghor">
+                                    Twitter
+                                </a>{" "}
+                                or{" "}
+                                <a href="https://www.linkedin.com/in/darraghoriordan/">
+                                    LinkedIn
+                                </a>
+                                . My email address is darragh.oriordan (AT)
+                                gmail.{" "}
+                            </p>
+                        </div>
+
+                        <Image
+                            src={portraitImage}
+                            alt="portrait image of darragh oriordan"
+                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                            className="aspect-w-16 aspect-h-9 rounded-lg bg-zinc-100 object-cover dark:bg-zinc-800 md:w-1/2"
+                        />
+                    </div>
+
                     <p>
-                        I'm Darragh ORiordan, I make all the tools that are
-                        available here. I'm a software engineer and people
-                        leader. I currently live in sunny Sydney, Australia.
-                    </p>
-                    <p>
-                        You can read more about me on my main website{" "}
-                        <a href="https://www.darraghoriordan.com/about/">
-                            https://www.darraghoriordan.com/about/
-                        </a>
-                        .
-                    </p>
-                    <p>
-                        You can always reach me on{" "}
-                        <a href="https://twitter.com/darraghor">Twitter</a> or{" "}
-                        <a href="https://www.linkedin.com/in/darraghoriordan/">
-                            LinkedIn
-                        </a>
-                        .
+                        I live in Sydney, Australia so my timezone is Australian
+                        Eastern Standard Time. There is some cross over with
+                        west-coast USA but not much wih East and Europe. I aim
+                        to respond to you within 24 hours.
                     </p>
                 </article>
             </Container>