- Prisma Site -
-- This app is the primary host zone. Content sections are served by their - own zones via routing rules. -
+
+
+
+
+
+
+
+ Postgres,
+
+
+ Postgres,
+ perfectly managed.
+
+ + Real Postgres with the developer experience and infrastructure to + ship faster. +
+
+
+
+ $
+
+ npx prisma init --db
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {review?.testimonials?.length > 0 && (
+
+
+
+
+ Build anything.
+
+
+
+ Build anything.
+
+ Deploy instantly.
+
+
+
+ + Give your users instant production-ready Postgres, create + databases, add a built-in data browser, and personalize it. +
+ +
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Ready to try Prisma? +
++ Deploy a Postgres database instantly. +
+
+
+
+
+ + Free to get started, no credit card needed. +
+
+
+);
+
+const useResponsiveLayout = () => {
+ const [isDesktop, setIsDesktop] = useState(true);
+ const handleResize = () => setIsDesktop(window.innerWidth > 1024);
+
+ useEffect(() => {
+ handleResize();
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
+
+ return { isDesktop };
+};
+
+const useCardAnimation = () => {
+ const [visibleBoxes, setVisibleBoxes] = useState+ Your database, right in your workflow +
+
+ {/* Desktop Layout (961+): Original 3-row layout with text in middle */}
+
+ );
+};
+
+interface CardProps {
+ card: CardData;
+ isVisible: boolean;
+}
+
+const Card = ({ card, isVisible }: CardProps) => {
+ const cardRef = useRef
+ {CARDS.filter((card) => card.row === "top").map((card) => (
+
+
+
+ {firstCenterCard && (
+
+
+ ) : (
+
+ {CARDS.map((card) => (
+
+ )}
+
+
+
+
+
+ {card.image && (
+ // eslint-disable-next-line @next/next/no-img-element
+
+
+ + {card.title} +
++ {card.subtitle} +
+
+ {cardSection.map((item, index) => (
+
+
+ ))}
+
+ );
+};
diff --git a/apps/site/src/components/homepage/card-section/default-logos.json b/apps/site/src/components/homepage/card-section/default-logos.json
new file mode 100644
index 0000000000..bca88aae4f
--- /dev/null
+++ b/apps/site/src/components/homepage/card-section/default-logos.json
@@ -0,0 +1,113 @@
+[
+ {
+ "link": "/docs/guides/cloudflare-d1",
+ "imageUrl": "/icons/technologies/cloudflare-d1.svg",
+ "alt": "Cloudflare D1"
+ },
+ {
+ "link": "/docs/orm/prisma-client/deployment/edge/deploy-to-cloudflare",
+ "imageUrl": "/icons/technologies/cloudflare-icon-only.svg",
+ "alt": "Cloudflare"
+ },
+ {
+ "link": "/docs/guides/astro",
+ "imageUrl": "/icons/technologies/astro-dark.svg",
+ "mobileImageUrl": "/icons/technologies/astro.svg",
+ "alt": "Astro"
+ },
+ {
+ "link": "/docs/guides/betterauth-nextjs",
+ "imageUrl": "/icons/technologies/betterauth.png",
+ "alt": "BetterAuth"
+ },
+ {
+ "link": "/docs/guides/bun",
+ "imageUrl": "/icons/technologies/bun.svg",
+ "alt": "Bun"
+ },
+ {
+ "link": "/docs/guides/clerk-nextjs",
+ "imageUrl": "/icons/technologies/clerk.jpeg",
+ "alt": "Clerk"
+ },
+ {
+ "link": "/docs/guides/data-dog",
+ "imageUrl": "/icons/technologies/datadog_light.svg",
+ "mobileImageUrl": "/icons/technologies/datadog.svg",
+ "alt": "Datadog"
+ },
+ {
+ "link": "/docs/guides/docker",
+ "imageUrl": "/icons/technologies/docker-blue.svg",
+ "alt": "Docker"
+ },
+ {
+ "link": "/docs/guides/deno-integration",
+ "imageUrl": "/icons/companies/deno-darkmode.svg",
+ "mobileImageUrl": "/icons/technologies/deno-deploy.svg",
+ "alt": "Deno"
+ },
+ {
+ "link": "/docs/guides/vercel-app-deployment",
+ "imageUrl": "/icons/technologies/vercel-icon-dark.svg",
+ "mobileImageUrl": "/icons/technologies/vercel.svg",
+ "alt": "Vercel"
+ },
+ {
+ "link": "/docs/guides/nextjs",
+ "imageUrl": "/icons/technologies/nextjs.svg",
+ "alt": "Next.js"
+ },
+ {
+ "link": "/docs/guides/hono",
+ "imageUrl": "/icons/technologies/hono.svg",
+ "alt": "Hono"
+ },
+ {
+ "link": "/docs/guides/github-actions",
+ "imageUrl": "/icons/technologies/github-dark.svg",
+ "mobileImageUrl": "/icons/companies/github.svg",
+ "alt": "GitHub"
+ },
+ {
+ "link": "/docs/orm/prisma-client/deployment/traditional/deploy-to-railway",
+ "imageUrl": "/icons/technologies/railway-dark.svg",
+ "mobileImageUrl": "/icons/companies/railway.svg",
+ "alt": "Railway"
+ },
+ {
+ "link": "/docs/guides/react-router-7",
+ "imageUrl": "/icons/technologies/rr7.svg",
+ "alt": "React Router"
+ },
+ {
+ "link": "/docs/guides/solid-start",
+ "imageUrl": "/icons/technologies/solid-start.svg",
+ "alt": "Solid Start"
+ },
+ {
+ "link": "/docs/guides/sveltekit",
+ "imageUrl": "/icons/technologies/svelte.svg",
+ "alt": "SvelteKit"
+ },
+ {
+ "link": "/docs/guides/tanstack-start",
+ "imageUrl": "/icons/technologies/tanstack.svg",
+ "alt": "TanStack"
+ },
+ {
+ "link": "/docs/guides/turborepo",
+ "imageUrl": "/icons/technologies/turborepo-icon-only.svg",
+ "alt": "Turborepo"
+ },
+ {
+ "link": "/docs/guides/nuxt",
+ "imageUrl": "/icons/technologies/nuxt.svg",
+ "alt": "Nuxt"
+ },
+ {
+ "link": "/docs/guides/shopify",
+ "imageUrl": "/icons/technologies/shopify.svg",
+ "alt": "Shopify"
+ }
+]
diff --git a/apps/site/src/components/homepage/card-section/logo-grid.tsx b/apps/site/src/components/homepage/card-section/logo-grid.tsx
new file mode 100644
index 0000000000..f511840b1a
--- /dev/null
+++ b/apps/site/src/components/homepage/card-section/logo-grid.tsx
@@ -0,0 +1,421 @@
+"use client";
+
+import Image from "next/image";
+import { useState, useRef, useEffect, useCallback, memo } from "react";
+import defaultLogosData from "./default-logos.json";
+import { cn } from "../../../lib/cn";
+import { useTheme } from "@prisma-docs/ui/components/theme-provider";
+
+// Inline keyframe animations
+const AnimationStyles = () => (
+
+);
+
+// Inline LogoBar component
+const LogoBar = ({
+ logos,
+ direction = "right",
+ pauseOnHover = false,
+ duplicateCount = 3,
+}: {
+ logos: Logo[];
+ direction?: "left" | "right";
+ pauseOnHover?: boolean;
+ duplicateCount?: number;
+}) => {
+ const duplicatedLogos = Array.from(
+ { length: duplicateCount },
+ () => logos,
+ ).flat();
+
+ return (
+
+
+
+ {item.content}
+
+
+ {item.visualType === "logoGrid" && item.useDefaultLogos && (
+ 
+ {item.mobileImageUrl && (
+
+ )}
+
+ )}
+
+
+
+ );
+};
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface Logo {
+ imageUrl: string;
+ mobileImageUrl?: string;
+ link: string;
+ alt: string;
+}
+
+interface LogoGridProps {
+ logos?: Logo[];
+ type?: "spotlight" | "track";
+}
+
+// ============================================================================
+// CONFIGURATION
+// ============================================================================
+
+const SPOTLIGHT_RADIUS = 200; // Distance in pixels for spotlight effect
+const SPOTLIGHT_POWER = 1.5; // Easing power for spotlight fade
+const MOBILE_BREAKPOINT = 874;
+const TABLET_BREAKPOINT = 1024;
+
+// ============================================================================
+// UTILITY HOOKS
+// ============================================================================
+
+const useResponsive = () => {
+ const [isMobile, setIsMobile] = useState(false);
+ const [isTablet, setIsTablet] = useState(false);
+
+ useEffect(() => {
+ const updateResponsive = () => {
+ const width = window.innerWidth;
+ setIsMobile(width <= MOBILE_BREAKPOINT);
+ setIsTablet(width <= TABLET_BREAKPOINT && width > MOBILE_BREAKPOINT);
+ };
+
+ updateResponsive();
+ window.addEventListener("resize", updateResponsive);
+ return () => window.removeEventListener("resize", updateResponsive);
+ }, []);
+
+ return { isMobile, isTablet };
+};
+
+// ============================================================================
+// LOGO IMAGE COMPONENT
+// ============================================================================
+
+const LogoImage = memo(({ logo, size }: { logo: Logo; size: number }) => {
+ const { resolvedTheme } = useTheme();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ const imageUrl =
+ mounted && resolvedTheme === "light" && logo.mobileImageUrl
+ ? logo.mobileImageUrl
+ : logo.imageUrl;
+
+ const isSvg = imageUrl.endsWith(".svg");
+ const ImageComponent = isSvg ? Image : "img";
+
+ return (
+
+ {duplicatedLogos.map((logo, index) => (
+
+
+
+ {/* Gradient background - desktop/tablet only or static on mobile */}
+ {!isMobile && !isTablet && (
+
+ )}
+ {(isMobile || isTablet) && (
+
+ )}
+
+ {/* Logo grid */}
+
+ );
+ },
+);
+
+SpotlightMode.displayName = "SpotlightMode";
+
+// ============================================================================
+// TRACK MODE COMPONENT
+// ============================================================================
+
+const TrackMode = memo(({ logos }: { logos: Logo[] }) => {
+ // Split logos into 3 even groups
+ const logosPerBar = Math.ceil(logos.length / 3);
+ const logosBar1 = logos.slice(0, logosPerBar);
+ const logosBar2 = logos.slice(logosPerBar, logosPerBar * 2);
+ const logosBar3 = logos.slice(logosPerBar * 2);
+
+ return (
+
+ {logos.map((logo, index) => {
+ const opacity =
+ isMobile || isTablet ? 1 : (logoOpacities[index] ?? 0.2);
+ const brightness =
+ isMobile || isTablet ? 1 : 0.7 + (opacity - 0.2) * 0.375;
+ const grayscale =
+ isMobile || isTablet ? 0 : 0.3 * (1 - (opacity - 0.2) / 0.8);
+
+ // nth-child translations for mobile
+ const getMobileTransform = () => {
+ if (!isMobile) return "";
+ const pos = index + 1;
+ if (pos >= 21) return "hidden";
+ if (pos >= 1 && pos <= 6) return "-translate-x-[20px]";
+ if (pos >= 7 && pos <= 12) return "translate-x-[20px]";
+ if (pos >= 13 && pos <= 18) return "-translate-x-[20px]";
+ if (pos >= 19 && pos <= 21) return "translate-x-[190%]";
+ return "";
+ };
+
+ // nth-child margin for desktop
+ const getDesktopMargin = () => {
+ if (isMobile) return "";
+ const pos = index + 1;
+ if (pos >= 8 && pos <= 14) return "md:-ml-[20px]";
+ return "";
+ };
+
+ return (
+ {
+ logoRefs.current[index] = el;
+ }}
+ href={logo.link}
+ className={cn(
+ "w-full aspect-square rounded-xl z-[1] bg-background-default border border-white/10 flex items-center justify-center p-4 md:p-3 transition-[opacity_0.2s_ease,filter_0.2s_ease,transform_0.2s_ease,background_0.2s_ease,border-color_0.2s_ease] cursor-pointer will-change-[opacity,filter] hover:border-[#16A394] hover:-translate-y-0.5 active:translate-y-0 lg:opacity-100 lg:filter-none",
+ getMobileTransform(),
+ getDesktopMargin(),
+ index === 18 ? "md:ml-[calc(50%-1.grid-column-start:3]" : "",
+ )}
+ target="_blank"
+ rel="noopener noreferrer"
+ style={
+ isMobile || isTablet
+ ? undefined
+ : {
+ opacity,
+ filter: `grayscale(${grayscale}) brightness(${brightness})`,
+ }
+ }
+ >
+
+
+
+
+ );
+});
+
+TrackMode.displayName = "TrackMode";
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+export const LogoGrid = ({
+ logos: propLogos,
+ type = "spotlight",
+}: LogoGridProps) => {
+ const { isMobile, isTablet } = useResponsive();
+ const logos =
+ propLogos && propLogos.length > 0 ? propLogos : defaultLogosData;
+
+ return (
+ <>
+
+
+);
+
+const getTabletSlices = (list: TestimonialItemType[]) => {
+ const half = Math.ceil(list.length / 2);
+ return [list.slice(0, half), list.slice(half)];
+};
+
+const Testimonials = ({ list, noShadow, mask }: TestimonialsType) => {
+ const [col1, col2, col3] = getColumnSlices(list);
+ const [tabletCol1, tabletCol2] = getTabletSlices(list);
+
+ const gridClasses = cn(
+ "grid max-w-full gap-4 relative",
+ !noShadow &&
+ "before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-[30%] before:pointer-events-none before:z-[1] before:bg-gradient-to-b before:from-[#0B0C17] before:to-[rgba(11,12,23,0)]",
+ !noShadow &&
+ "after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[30%] after:pointer-events-none after:z-[1] after:bg-gradient-to-t after:from-[#1A202B] after:to-[rgba(26,32,43,0)]",
+ );
+
+ return (
+
+ {list.map((testimonial: TestimonialItemType, idx) => (
+
+
+ {list.map((testimonial: TestimonialItemType, idx) => (
+
+
+ {/* Mobile */}
+
+ );
+};
+
+export default Testimonials;
diff --git a/apps/site/src/components/homepage/testimonials/testimonial-item.tsx b/apps/site/src/components/homepage/testimonials/testimonial-item.tsx
new file mode 100644
index 0000000000..552fbe6ddc
--- /dev/null
+++ b/apps/site/src/components/homepage/testimonials/testimonial-item.tsx
@@ -0,0 +1,87 @@
+import { cn } from "@/lib/cn";
+import Image from "next/image";
+import parse from "html-react-parser";
+import { Avatar, Separator } from "@prisma/eclipse";
+
+export type TestimonialItemType = {
+ text: string | React.ReactNode;
+ author: string;
+ title: string;
+ company: string;
+ imageUrl?: string;
+ startups?: boolean;
+ imageAlt?: string;
+ key?: string | number;
+};
+
+export const TestimonialItem = ({
+ text,
+ author,
+ title,
+ company,
+ imageUrl,
+ imageAlt,
+ startups,
+ ...rest
+}: TestimonialItemType) => (
+
+
+
+ {/* Tablet */}
+ *:nth-child(2)]:flex [&>*]:flex-1",
+ )}
+ >
+
+
+ {/* Desktop */}
+ *:nth-child(2)]:flex [&>*:nth-child(3)]:flex [&>*]:flex-1",
+ )}
+ >
+
+
+
+);
diff --git a/apps/site/src/data/homepage.json b/apps/site/src/data/homepage.json
new file mode 100644
index 0000000000..41221c8a44
--- /dev/null
+++ b/apps/site/src/data/homepage.json
@@ -0,0 +1,173 @@
+{
+ "title": "TRUSTED BY MORE THAN 500k MONTHLY ACTIVE DEVELOPERS GLOBALLY",
+ "testimonials": [
+ {
+ "company": "Amplication",
+ "author": "Yuval Hazaz",
+ "text": "We adopted Prisma conventions as our standard and it saves lots of time having from reinventing things ourselves.",
+ "title": "CEO",
+ "imageUrl": "/photos/people/yuval-hazaz.jpeg"
+ },
+ {
+ "author": "Matti Nannt",
+ "company": "Formbricks",
+ "title": "Co-founder",
+ "text": "Thanks to Prisma, we can seamlessly scale our applications, without concerns about data layer performance.",
+ "imageUrl": "/photos/people/matti-nannt.jpeg"
+ },
+ {
+ "company": "Dub.co",
+ "author": "Steven Tey",
+ "title": "Founder",
+ "text": "Underrated: Prisma 🐐
+ {typeof text === "string" ? parse(text) : text}
+
+
+
+
+
+
+ {startups ? company : author}
+
+
+
+ {startups ? author : title}
+
+
+ Entire SaaS businesses have been built on top of the Prisma ecosystem— including OSS ones like Dub.co. Have been loving the recent performance improvements as well 🔥", + "imageUrl": "/photos/people/steven-tey.jpeg" + }, + { + "author": "Niko Guerra", + "title": "Senior Backend Engineering Manager", + "company": "Lush", + "text": "With Prisma, we migrated a core production system from MySQL to SQL Server with zero downtime, simply by swapping a few references and updating our schema. I can't imagine building systems without it; it's instrumental to major projects at Lush.", + "imageUrl": "/photos/people/niko-guerra.png" + }, + { + "company": "Rapha", + "title": "Head of Mobile", + "author": "Tom Hutchinson", + "text": "Prisma helps us unify data access from multiple enterprise systems into a single API. It means we can move very quickly whilst staying flexible.", + "imageUrl": "/photos/people/tom.png" + }, + { + "company": "Fluidwave", + "author": "Martin Adams", + "title": "Founder", + "text": "Prisma Postgres has really good DX. It's easy, simple, straightforward. I don't spend time on deployment. It just works.", + "imageUrl": "/photos/people/martin-adams.jpeg" + }, + { + "company": "Grover", + "author": "Ricardo Almeida", + "title": "Software Engineer", + "text": "Prisma has a low learning curve. Productivity becomes higher because it gets combined with end-to-end type-safety using TypeScript.", + "imageUrl": "/photos/people/ricardo-almeida.jpeg" + }, + { + "company": "Juniqe", + "author": "Jonathan Wilke", + "title": "Frontend Dev", + "text": "I have been using Prisma since day one, and it has become my number one choice for ORM. It's the default in @supastarter, and even though things like Drizzle might be more lightweight, the DX of Prisma is just unbeaten.", + "imageUrl": "/photos/people/jonathan-wilke.jpeg" + }, + { + "company": "Backbase", + "author": "Nicolás Torres", + "title": "Fullstack Engineer", + "text": "It's the kind of DX that lets me get stuff done in between my daughter's naps.", + "imageUrl": "/photos/people/nicolas-torres.png" + }, + { + "company": "@kinngh", + "author": "Harshdeep Singh Hura", + "title": "Shopify App Developer and Consultant", + "text": "Prisma Accelerate handled 670,000+ webhooks from Shopify when the orders webhook from 2022/23 was fired, which cost us about $11. Not bad for accidentally being DDoS'd to a Heroku Postgres instance with zero downtime, and all the entries made it through.", + "imageUrl": "/photos/people/harshdeep-singh-hura.jpeg" + }, + { + "company": "Plunk", + "author": "Dries Augustyns", + "title": "Founder", + "text": "Prisma spares me the hassle of keeping my database in sync, allowing me to develop my product with complete confidence.", + "imageUrl": "/photos/people/dries-augustyns.jpg" + }, + { + "company": "WeAreDevelopers", + "author": "Daniel Cranney", + "title": "Developer Advocate", + "text": "I like how the Prisma docs made it easy to jump straight into using it without needing to do a huge amount of reading, and I instantly felt the benefits.", + "imageUrl": "/photos/people/daniel-cranney.jpeg" + }, + { + "company": "Jake Colling", + "author": "", + "title": "Experimenting with LLM powered apps", + "text": "Huge fan of Prisma! The Schema file is great for Cursor. You literally never have to write a CRUD operation again.", + "imageUrl": "/photos/people/jake-colling.jpeg" + }, + { + "company": "Stockle App", + "author": "Joonatan", + "title": "Building", + "text": "I've been building the backend on @stockleapp, with Prisma since the beginning, and I've got to say, it has worked like a charm", + "imageUrl": "/photos/people/joonatan.jpeg" + }, + { + "company": "OpenSeas", + "author": "Ian Hunter", + "title": "Pushing electrons", + "text": "I keep switching from Prisma to whatever the latest flavor is, but always end up coming back to Prisma.", + "imageUrl": "/photos/people/ian-hunter.jpeg" + }, + { + "company": "Solin", + "author": "Blake Carroll", + "title": "CTO", + "text": "Accelerate is a perfect fit for landing pages. We take advantage of caching to speed up queries and reduce latency, making them lightning-fast. This means we have a faster landing page, leading to better conversion.", + "imageUrl": "/photos/people/blake-carroll.jpeg" + }, + { + "company": "Inbox Zero", + "author": "Elie Steinbock", + "title": "Founder", + "text": "I love how Prisma makes my life as a developer so easy. The TypeScript autocompletion is the best I've used, having tried many different ORMs. The migrations are a breeze. And I love how easy it is to get a full view of your database from the Prisma schema file. It's all in one place in readable format.", + "imageUrl": "/photos/people/elie-steinbock.png" + }, + { + "company": "Stack Auth", + "author": "Zai Shi", + "title": "Co-founder", + "text": "I love the Prisma typing system! Stack Auth relies heavily on it.", + "imageUrl": "/photos/people/zai-shi.jpeg" + }, + { + "company": "i18nlocale", + "author": "Cody Bontecou", + "title": "Founder", + "text": "Prisma enabled me to easily manage authentication as well as users' paid status. Prisma Accelerate was a huge boost to my productivity, cutting latency issues I was encountering with Vercel SQL.", + "imageUrl": "/photos/people/cody-bontecou.jpg" + }, + { + "company": "Postiz", + "author": "Nevo David", + "title": "Founder", + "text": "What I love most about Postiz is Prisma. It lets me switch between SQL databases effortlessly. I've used other ORMs before such as Eloquent (Laravel), but nothing matches Prisma's typing and features!", + "imageUrl": "/photos/people/nevo-david.jpg" + }, + { + "company": "Meister", + "author": "Harshal Patil", + "title": "Staff Engineer", + "text": "Prisma's typesafe SQL is a great feature. It fills a great abstraction gap that existed prior to this. Earlier, I would have to fall back straight to pgtyped.", + "imageUrl": "/photos/people/harshal-patil.png" + }, + { + "company": "ChrisCourses", + "author": "Chris Lis", + "title": "Dev Educator", + "text": "Imagine never typing out a migration again. Yeah, that's basically what Prisma does for you. Has saved me literal hours of time, and can for you too.", + "imageUrl": "/photos/people/chris-lis.jpg" + }, + { + "company": "ReUI", + "author": "Shuhrat Saipov", + "title": "Co-founder", + "text": "Prisma has been instrumental in building ReUI, by providing a fully abstracted database layer. It accelerated our development speed several times over, letting us focus on business logic with a beautiful API and top-notch transaction support.", + "imageUrl": "/photos/people/shuhrat-saipov.jpg" + }, + { + "company": "myBeat", + "author": "Jim Hendriks", + "title": "Tech Lead", + "text": "For myBeat, we migrated our legacy codebase to Prisma very easily using Prisma ORM's introspection feature as we were moving from CakePHP to Node.js.", + "imageUrl": "/photos/people/jim-hendriks.webp" + } + ] +} diff --git a/apps/site/src/lib/cn.ts b/apps/site/src/lib/cn.ts new file mode 100644 index 0000000000..8e473dac8a --- /dev/null +++ b/apps/site/src/lib/cn.ts @@ -0,0 +1 @@ +export { twMerge as cn } from "tailwind-merge"; diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts new file mode 100644 index 0000000000..4db90ac23f --- /dev/null +++ b/apps/site/tailwind.config.ts @@ -0,0 +1,82 @@ +import type { Config } from "tailwindcss"; + +const config: Config = { + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + fontVariationSettings: { + normal: "'wght' 400", + medium: "'wght' 500", + semibold: "'wght' 600", + bold: "'wght' 700", + extrabold: "'wght' 800", + black: "'wght' 900", + wide: "'wdth' 125", + narrow: "'wdth' 75", + "bold-wide": "'wght' 700, 'wdth' 125", + "black-wide": "'wght' 900, 'wdth' 125", + }, + keyframes: { + slideDown: { + from: { transform: "translateY(0%)" }, + to: { transform: "translateY(100%)" }, + }, + slideDown2: { + from: { transform: "translateY(-100%)" }, + to: { transform: "translateY(0%)" }, + }, + slideUp: { + from: { transform: "translateY(0%)" }, + to: { transform: "translateY(-100%)" }, + }, + slideUp2: { + from: { transform: "translateY(100%)" }, + to: { transform: "translateY(0%)" }, + }, + fadein: { + "0%": { opacity: "0" }, + "100%": { opacity: "1" }, + }, + }, + animation: { + "slide-down": "slideDown 130s linear infinite", + "slide-down-2": "slideDown2 130s linear infinite", + "slide-up": "slideUp 100s linear infinite", + "slide-up-2": "slideUp2 100s linear infinite", + "fade-in": + "fadein 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards", + }, + }, + }, + plugins: [ + function ({ addUtilities, theme }: any) { + const fontVariationSettings = theme("fontVariationSettings"); + const utilities = Object.entries(fontVariationSettings).reduce( + (acc, [key, value]) => ({ + ...acc, + [`.font-variation-${key}`]: { + "font-variation-settings": value, + }, + }), + {}, + ); + addUtilities(utilities); + + // Add animation-play-state utilities + addUtilities({ + ".paused": { + "animation-play-state": "paused", + }, + ".running": { + "animation-play-state": "running", + }, + }); + }, + ], +}; + +export default config; diff --git a/packages/eclipse/src/components/button.tsx b/packages/eclipse/src/components/button.tsx index 061f56253c..256477d76d 100644 --- a/packages/eclipse/src/components/button.tsx +++ b/packages/eclipse/src/components/button.tsx @@ -5,29 +5,36 @@ import { cn } from "../lib/cn"; const buttonVariants = cva( "flex flex-row justify-center items-center rounded-square transition-all duration-50 cursor-pointer disabled:bg-background-neutral-weak! disabled:border-none! disabled:text-foreground-neutral-weaker! disabled:cursor-not-allowed disabled:shadow-none", { - variants: { - variant: { - ppg: "bg-background-ppg-reverse text-foreground-ppg-reverse hover:bg-background-ppg-reverse-strong shadow-box-low", - orm: "bg-background-orm-reverse text-foreground-orm-reverse hover:bg-background-orm-reverse-strong shadow-box-low", - "default-stronger": "bg-background-neutral text-foreground-neutral hover:bg-background-neutral-strong", - default: "bg-background-default hover:bg-background-neutral border border-stroke-neutral hover:border-stroke-neutral-strong text-foreground-neutral shadow-box-low", - "default-weaker": "bg-transparent hover:bg-background-neutral text-foreground-neutral", - error: "bg-background-error-reverse text-foreground-error-reverse hover:bg-background-error-reverse-strong shadow-box-low", - success: "bg-background-success-reverse text-foreground-success-reverse hover:bg-background-success-reverse-strong shadow-box-low", - link: "text-foreground-neutral underline-offset-4 hover:underline focus-visible:ring-foreground-neutral", + variants: { + variant: { + ppg: "bg-background-ppg-reverse text-foreground-ppg-reverse hover:bg-background-ppg-reverse-strong shadow-box-low", + orm: "bg-background-orm-reverse text-foreground-orm-reverse hover:bg-background-orm-reverse-strong shadow-box-low", + "default-stronger": + "bg-background-neutral text-foreground-neutral hover:bg-background-neutral-strong border border-stroke-neutral-strong", + default: + "bg-background-default hover:bg-background-neutral border border-stroke-neutral hover:border-stroke-neutral-strong text-foreground-neutral shadow-box-low", + "default-weaker": + "bg-transparent hover:bg-background-neutral text-foreground-neutral", + error: + "bg-background-error-reverse text-foreground-error-reverse hover:bg-background-error-reverse-strong shadow-box-low", + success: + "bg-background-success-reverse text-foreground-success-reverse hover:bg-background-success-reverse-strong shadow-box-low", + link: "text-foreground-neutral underline-offset-4 hover:underline focus-visible:ring-foreground-neutral", + }, + size: { + lg: "px-2 h-element-lg type-text-sm-strong", + xl: "px-3 h-element-xl type-text-sm-strong", + "2xl": "px-3 h-element-2xl type-text-sm-strong", + "3xl": "px-4 h-element-3xl type-text-sm-strong", + "4xl": "px-4 h-element-4xl type-heading-md", + }, }, - size: { - lg: "px-2 h-element-lg type-text-sm-strong", - xl: "px-3 h-element-xl type-text-sm-strong", - "2xl": "px-3 h-element-2xl type-text-sm-strong", - "4xl": "px-4 h-element-4xl type-heading-md", + defaultVariants: { + variant: "default", + size: "lg", }, }, - defaultVariants: { - variant: "default", - size: "lg", - }, -}); +); type ButtonBaseProps = VariantProps