Design System

@import "tailwindcss";
 
@plugin "tailwindcss-animate";
@plugin "tailwindcss-motion";
 
@custom-variant dark (&:is(.dark *));
 
:root {
  --background: #ffffff;
  --foreground: #000000;
  --card: #fafafa;
  --card-foreground: #000000;
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #872bfe;
  --primary-foreground: #ffffff;
  --secondary: #3996ff;
  --secondary-foreground: #ffffff;
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.9rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
 
  --code-background: #fbfbfb;
 
  --main-100: #000000;
  --main-200: #ffffff;
 
  --text-150: #4c4c4c;
  --text-200: #969696;
  --text-300: #c0c0c0;
 
  --icon-100: #000000;
  --icon-150: #4c4c4c;
  --icon-200: #616161;
  --icon-300: #8c8c8c;
 
  --background-300: #f7f7f7;
  --background-400: #f4f4f4;
  --background-500: #f1f1f1;
 
  --border: #ededed;
 
  --button-black: #000000;
  --button-white: #ffffff;
  --button-purple: #872bfe;
  --button-blue: #3996ff;
 
  /* Highlighting Syntax */
  --highlight-opacity: 0.5;
}
 
.dark {
  --background: #121212;
  --foreground: #ffffff;
  --card: #181818;
  --card-foreground: #ffffff;
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
 
  --code-background: #171717;
 
  --main-100: #ffffff;
  --main-200: #000000;
 
  --text-150: #cecece;
  --text-200: #a8a8a8;
  --text-300: #8d8d8d;
 
  --icon-100: #ffffff;
  --icon-150: #4c4c4c;
  --icon-200: #b3b3b3;
  --icon-300: #a8a8a8;
 
  --background-300: #222222;
  --background-400: #2a2a2a;
  --background-500: #333333;
 
  --border: #2a2a2a;
 
  --button-black: #ffffff;
  --button-white: #242424;
 
  /* Highlighting Syntax */
  --highlight-opacity: 0.5;
}
 
@theme inline {
  --font-sans: var(--font-inter);
  --font-manrope: var(--font-manrope);
  --font-mono: var(--font-geist-mono);
 
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
 
  --color-code-background: var(--code-background);
 
  --color-main-100: var(--main-100);
  --color-main-200: var(--main-200);
 
  --color-150: var(--text-150);
  --color-200: var(--text-200);
  --color-300: var(--text-300);
 
  --color-icon-100: var(--icon-100);
  --color-icon-200: var(--icon-200);
  --color-icon-300: var(--icon-300);
 
  --color-background-300: var(--background-300);
  --color-background-400: var(--background-400);
  --color-background-500: var(--background-500);
 
  --color-border: var(--border);
 
  --color-button-black: var(--button-black);
  --color-button-white: var(--button-white);
}

@theme inline {
  /* Headings */
  --text-h1: 3.5rem;
  --text-h1--letter-spacing: -0.03em;
  --text-h1--line-height: 1.15;
 
  --text-h2: 2.5rem;
  --text-h2--letter-spacing: -0.02em;
  --text-h2--line-height: 1.2;
 
  --text-h3: 1.75rem;
  --text-h3--letter-spacing: -0.01em;
 
  /* Labels */
  --text-label-l: 1.125rem;
  --text-label-l--font-weight: 500;
  --text-label-m--font-weight: 500;
  --text-label-s: 0.875rem;
  --text-label-s--font-weight: 500;
  --text-label-xs: 0.75rem;
  --text-label-xs--font-weight: 500;
 
  /* Body */
  --text-lg: 1.125rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
}

@theme inline {
  --shadow-100: 0px 1px 0.5px 0px rgba(0, 0, 0, 0.1);
  --shadow-200:
    0px 13px 4px 0px rgba(0, 0, 0, 0), 0px 8px 3px 0px rgba(0, 0, 0, 0.01),
    0px 5px 3px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.03),
    0px 1px 1px 0px rgba(0, 0, 0, 0.04);
  --shadow-300:
    0px 28px 8px 0px rgba(0, 0, 0, 0), 0px 18px 7px 0px rgba(0, 0, 0, 0.01),
    0px 10px 6px 0px rgba(0, 0, 0, 0.03), 0px 4px 4px 0px rgba(0, 0, 0, 0.05),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

import { ThemeProvider } from "next-themes";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className="overflow-x-hidden">
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

import { cn } from "@/lib/utils";
import React from "react";
 
interface IphoneMockupProps {
  children?: React.ReactNode;
  className?: string;
  fullScreen?: boolean;
}
 
export default function IphoneMockup({
  children,
  className = "",
  fullScreen = false,
}: IphoneMockupProps) {
  return (
    <div
      className={cn(
        "relative aspect-8/16 w-full max-w-[430px] overflow-hidden",
        className
      )}
    >
      <div
        className={`relative h-full w-full rounded-[72px] p-[5.5px]`}
        style={{
          background: "linear-gradient(180deg, #EEEAE1 0%, #D1CCC2 100%)",
          boxShadow:
            "0px 0px 2px 2px rgba(0, 0, 0, 0.20) inset, 0px 0px 3px 2px rgba(0, 0, 0, 0.40) inset",
        }}
      >
        <div
          className="h-full w-full rounded-[67px] border-2 border-black bg-black p-2.5"
          style={{
            boxShadow:
              "0px 0px 3px 1px rgba(255, 255, 255, 0.25), 0px 0px 0.5px 2px #3C3C3C inset",
          }}
        >
          <div
            data-canvas
            className="bg-background relative h-full w-full overflow-hidden rounded-[56px]"
          >
            <div className="no-scrollbar h-full overflow-auto">
              <div
                data-dynamic-island
                className={cn(
                  "sticky top-0 z-50 flex items-center justify-center py-3",
                  fullScreen && "absolute w-full"
                )}
              >
                <div className="h-[37px] w-[125px] rounded-full bg-black"></div>
              </div>
              {children}
              <div className="pointer-events-none h-12 w-full"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}