Updated Paragraph and TextStyling

examples/to-do-example/src/app/components/Paragraph.tsx

@@ -9,7 +9,7 @@ const paragraphVariants = {
   base: "text-base pb-8 last:pb-0",
   "base/medium": "text-base font-medium pb-8 last:pb-0",
   "base/bold": "text-base font-bold pb-8 last:pb-0",
-  large: "text-base md:text-lg pb-6 last:pb-0",
+  large: "text-base font-medium md:text-xl pb-6 last:pb-0",
   "extraLarge/semiBold": "font-semibold sm:text-2xl text-xl pb-2", // this is the same as Header3 base/semibold
 };
 

examples/to-do-example/src/app/components/TextStyling.tsx

@@ -0,0 +1,64 @@
+import { cn } from "@/utils/cn";
+import React from "react";
+
+const anchorStyle =
+  "text-indigo-400 cursor-pointer hover:text-indigo-300 underline-offset-1 hover:underline hover:underline-offset-2 transition duration-300";
+
+type AnchorTextProps = React.DetailedHTMLProps<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  HTMLAnchorElement
+> & { href: string; children: React.ReactNode; className?: string };
+
+export function AnchorText({
+  children,
+  className,
+  href,
+  ...props
+}: AnchorTextProps) {
+  return (
+    <a className={cn(anchorStyle, className)} {...props}>
+      {children}
+    </a>
+  );
+}
+
+type SpanProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLSpanElement>,
+  HTMLSpanElement
+>;
+
+export function PrimaryGradientText({
+  children,
+  className,
+  ...props
+}: SpanProps) {
+  return (
+    <span
+      style={{
+        background: "linear-gradient(to right, #E7FF52, #41FF54)",
+        WebkitBackgroundClip: "text",
+        WebkitTextFillColor: "transparent",
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function SecondaryGradientText({
+  children,
+  className,
+  ...props
+}: SpanProps) {
+  return (
+    <span
+      style={{
+        background: "linear-gradient(to right, #2563EB, #A855F7)",
+        WebkitBackgroundClip: "text",
+        WebkitTextFillColor: "transparent",
+      }}
+    >
+      {children}
+    </span>
+  );
+}