',
+ value: "Temples",
+ isRejection: false,
+ },
+ {
+ display:
+ '
',
+ value: "Temples & Crown",
+ isRejection: false,
+ },
+ {
+ display:
+ '
',
+ value: "Patchy",
+ isRejection: true,
+ },
+ {
+ display:
+ '
',
+ value: "Moderate",
+ isRejection: false,
+ },
+ {
+ display:
+ '
',
+ value: "Extensive",
+ isRejection: true,
+ },
+ {
+ display:
+ '
',
+ value: "Complete",
+ isRejection: true,
+ },
+ ],
+ },
+ {
+ question:
+ "Have you ever been diagnosed with prostate cancer, or are you currently undergoing PSA/Prostate monitoring?",
+ type: "ChoiceType",
+ options: [
+ {
+ display: "Yes",
+ value: true,
+ isRejection: true,
+ },
+ {
+ display: "No",
+ value: false,
+ isRejection: false,
+ },
+ ],
+ },
+ {
+ question:
+ "Have you ever been diagnosed with breast cancer or noticed any changes in your breast tissue such as lumps, pain, nipple discharge or swelling?",
+ type: "ChoiceType",
+ options: [
+ {
+ display: "Yes",
+ value: true,
+ isRejection: true,
+ },
+ {
+ display: "No",
+ value: false,
+ isRejection: false,
+ },
+ ],
+ },
+ ]);
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 8703dce..e23eaad 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,7 +10,7 @@
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
- --primary: 222.2 47.4% 11.2%;
+ --primary: 0 89% 26%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
@@ -38,7 +38,7 @@
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
- --primary: 210 40% 98%;
+ --primary: 0 89% 26%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
@@ -73,4 +73,13 @@
/** Configure Satoshi's alternate "t" to better match TT Norms. */
font-feature-settings: "ss03" on;
}
+
+ :root {
+ --brand-50: 135 20% 96%;
+ --brand-100: 129 18% 92%;
+ --brand-300: 167 11% 69%;
+ --brand-600: 166 12% 48%;
+ --brand-800: 181 69% 14%;
+ --brand-hero: 109 13% 67%;
+ }
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f3fcc83..00f1388 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,15 +1,225 @@
-import { Button } from "@/components/ui/button";
+import { QuizButton } from "@/components/quiz-button";
+import { FacebookLogo } from "@/components/ui/logos/facebook-logo";
+import { GoogleLogo } from "@/components/ui/logos/google-logo";
+import { ManualLogo } from "@/components/ui/logos/manual-logo";
+import { TwitterLogo } from "@/components/ui/logos/twitter-logo";
+import Image from "next/image";
export default function Home() {
return (
- Manual
-Be good to yourself
-- We’re working around the clock to bring you a holistic approach to your - wellness. From top to bottom, inside and out. -
- +
+
+
+ {/* Treatments */}
+
+
+ {/* TODO: Include the hero image on smaller screens, possibly setting it as a bg image instead of an inline element */}
+
+ Manual
+
+
+
+ Be good
+
+
+
+ Be good
+
to yourself
+
+ + We’re working around the clock to bring you a holistic approach to + your wellness. From top to bottom, inside and out. +
+
+
+
+ What we can help with +
+
+
+
+
+
+
+
+
+ + Hair loss +
++ Hair loss needn’t be irreversible. We can help! +
++ We’re working around the clock to bring you a holistic + approach to your wellness. From top to bottom, inside and out. +
+
+
+ 02
+
+
+
+
+
+
+ + Erectile dysfunction +
++ Erections can be a tricky thing. But no need to feel down! +
++ We’re working around the clock to bring you a holistic + approach to your wellness. From top to bottom, inside and out. +
+
+
+ );
+}
+
+function SuccessAlert() {
+ return (
+ + Finished! Your result is... +
+
+ {result === "accepted" ?
+
+
+ );
+}
+
+function ErrorAlert() {
+ return (
+
+
+
+
+
+
+
+ + You’re eligible for treatment +
+
+
+ + Great news! We have the perfect treatment for your hair loss. + Proceed to{" "} + + www.manual.co + + , and prepare to say hello to your new hair! +
+
+
+
+
+
+ );
+}
diff --git a/src/components/quiz.tsx b/src/components/quiz.tsx
new file mode 100644
index 0000000..3ec2821
--- /dev/null
+++ b/src/components/quiz.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { QuizNavigation } from "./quiz-navigation";
+import { QuizResult } from "./quiz-result";
+import { QuizOption } from "./quiz-option";
+
+type Option = {
+ display: string;
+ value: string | boolean;
+ isRejection: boolean;
+};
+
+type Question = {
+ question: string;
+ type: string;
+ options: Option[];
+};
+
+export type QuizQuestion = {
+ title: string;
+ options: Option[];
+ response: Option | null;
+ status: "complete" | "current" | "upcoming";
+};
+
+type QuizState = {
+ questions: QuizQuestion[];
+ currentIndex: number;
+ result: "accepted" | "rejected" | null;
+};
+
+export function Quiz() {
+ const [quizState, setQuizState] = React.useState
+
+
+
+
+
+
+ + Sorry, you’re not eligible for treatment +
+
+
+ + Unfortunately, we are unable to prescribe this medication for you. + This is because finasteride can alter the PSA levels, which may be + used to monitor for cancer. You should discuss this further with + your GP or specialist if you would still like this medication. +
+
+
+ );
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 57c9fe4..93a61e8 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,24 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
- "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ "inline-flex items-center justify-center whitespace-nowrap text-sm uppercase tracking-widest font-bold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
- sm: "h-9 rounded-md px-3",
- lg: "h-11 rounded-md px-8",
+ sm: "h-9 px-3",
+ lg: "h-11 px-8",
icon: "h-10 w-10",
},
},
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..d270da0
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef
+ {quizState.result ? (
+
+
+ {
+ setQuizState((prevState) => ({
+ ...prevState,
+ currentIndex: questionIndex,
+ }));
+ }}
+ />
+
+ ) : null}
+ + {currentQuestion.title} +
+
+ {currentQuestion.options.map((o, i) => {
+ const isOptionSelected = currentQuestion.response === o;
+
+ return (
+ handleOptionClick(o)}
+ isSelected={isOptionSelected}
+ display={o.display}
+ value={o.value}
+ />
+ );
+ })}
+
+