diff --git a/apps/site/package.json b/apps/site/package.json
index c9d6de8357..e6f11eface 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -22,10 +22,15 @@
"next": "catalog:",
"npm-to-yarn": "catalog:",
"posthog-js": "catalog:",
+ "prop-types": "^15.8.1",
"react": "catalog:",
+ "react-animated-numbers": "^1.1.1",
"react-dom": "catalog:",
+ "react-intersection-observer": "^10.0.3",
+ "react-responsive-masonry": "^2.7.1",
"react-tweet": "catalog:",
"remark-directive": "catalog:",
+ "swiper": "^12.1.3",
"tailwind-merge": "catalog:",
"three": "^0.183.2",
"zod": "catalog:"
diff --git a/apps/site/public/illustrations/careers/hero_lines.svg b/apps/site/public/illustrations/careers/hero_lines.svg
new file mode 100644
index 0000000000..a8ad4a66c5
--- /dev/null
+++ b/apps/site/public/illustrations/careers/hero_lines.svg
@@ -0,0 +1 @@
+Stock options package with a maximum exercise period of 10 years after grant",
+ },
+ {
+ icon: "fa-regular fa-hand-holding-dollar",
+ text: "Generous recurring tech budget and subsidy for an ergonomic chair",
+ },
+ {
+ icon: "fa-regular fa-sunglasses",
+ text: "24 vacation days per year in addition to sick leave and public holidays",
+ },
+ {
+ icon: "fa-regular fa-baby-carriage",
+ text: "20 weeks paid parental leave and 10 days paid time off per year in the event of the sickness of your child",
+ },
+ {
+ icon: "fa-regular fa-head-side-medical",
+ text: "4 mental health days per year",
+ },
+ {
+ icon: "fa-regular fa-star",
+ text: "6-week paid sabbatical leave after three years",
+ },
+ {
+ icon: "fa-regular fa-lamp-desk",
+ text: "Access to co-working spaces in your area",
+ },
+ {
+ icon: "fa-regular fa-headset",
+ text: "Dedicated People and Operations team",
+ },
+ {
+ icon: "fa-regular fa-island-tropical",
+ text: "Two company offsites each year",
+ },
+ {
+ icon: "fa-regular fa-heart-pulse",
+ text: "[US] 401K matching as well as medical, dental, and vision cover",
+ },
+];
+
+const careerTestimonials = [
+ {
+ body: "Thanks to Prisma's wide adoption, I get to tackle interesting challenges while also being exposed to the newest tech in the JavaScript world.",
+ author: {
+ name: "Pierre-Antoine Mills",
+ title: "Senior Software Engineer",
+ },
+ },
+ {
+ body: "Working at Prisma is amazing. We support each other, working side by side to tackle challenges and celebrate wins together.",
+ author: {
+ name: "Tatiana Inama",
+ title: "Software Engineer",
+ },
+ },
+ {
+ body: "At Prisma, everyone cares deeply about the mission and has no problem helping each other out, even if it's outside of their team or scope.",
+ author: {
+ name: "Carla Goncalves",
+ title: "Web Developer",
+ },
+ },
+];
+
+const twoCol = [
+ {
+ content: (
+ <>
+
+ Solve challenging
+
+ Prisma is building the data access layer for modern applications. If
+ you're drawn to the technology powering large companies but desire the
+ challenges and freedom of a startup, then consider joining us.
+
+
+ ),
+ imageUrl: null,
+ imageAlt: null,
+ mobileImageUrl: null,
+ mobileImageAlt: null,
+ otherAsset:
+ Flexible work environment
+
+
+ We offer flexible working hours and generous paid time off to
+ accommodate different lifestyles and responsibilities. As long as it
+ suits your team, you have the freedom to build your work schedule
+ around your life.
+
+
+ ),
+ imageUrl: null,
+ imageAlt: null,
+ mobileImageUrl: null,
+ mobileImageAlt: null,
+ otherAsset:
+ Flexible remote organization
+
+
+ Our team is globally distributed and everyone can work from any
+ location within the UTC -5 to UTC +3 timezones. We want you to choose
+ wherever you are happiest and most productive.
+
+
+ ),
+ imageUrl: null,
+ imageAlt: null,
+ mobileImageUrl: null,
+ mobileImageAlt: null,
+ otherAsset:
+
+
+
+
+
+
+
+ Join Prisma
+
+
+ Help us empower developers to build data-driven applications.
+
+
+
+ View open positions
+
+
+
+
+
+
+
+ Why Prisma?
+
+
+
+
+
+
+
+
+ Working at Prisma
+
+
+
+
+
+
+
+
+
+
+ Our Values
+
+
+ At Prisma, we believe that our company values are essential to
+ our success. They guide us in our daily work, helping us to
+ thrive and creating an environment where team members can grow
+ and collaborate effectively.
+
+
+ {/* Values Grid */}
+
+ {/* Transparency */}
+
+
+
+
+ Transparency
+
+
+
+ {/* Curiosity */}
+
+
+ {/* Solidarity */}
+
+
+ {/* Accountability */}
+
+
+
+
+
+
+
+
+ Benefits
+
+
+ {benefits.map((benefit, index) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/apps/site/src/app/global.css b/apps/site/src/app/global.css
index 799fd38d4c..45f3d10f63 100644
--- a/apps/site/src/app/global.css
+++ b/apps/site/src/app/global.css
@@ -192,3 +192,7 @@ body {
.running {
animation-play-state: running;
}
+
+.swiper-button-prev {
+ top: 100% !important;
+}
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
index 516c4a97f7..834e510001 100644
--- a/apps/site/src/app/layout.tsx
+++ b/apps/site/src/app/layout.tsx
@@ -6,7 +6,7 @@ import type { Metadata } from "next";
import Script from "next/script";
import type React from "react";
import { SITE_HOME_DESCRIPTION, SITE_HOME_TITLE } from "@/lib/blog-metadata";
-import { WebNavigation } from "@prisma-docs/ui/components/web-navigation";
+import { NavigationWrapper } from "@/components/navigation-wrapper";
import { Footer } from "@prisma-docs/ui/components/footer";
import { ThemeProvider } from "@prisma-docs/ui/components/theme-provider";
import { FontAwesomeScript as WebFA } from "@prisma/eclipse";
@@ -154,7 +154,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
-
+ {({ inView, ref }) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+);
diff --git a/apps/site/src/components/careers/Flexible.tsx b/apps/site/src/components/careers/Flexible.tsx
new file mode 100644
index 0000000000..898ff4de6a
--- /dev/null
+++ b/apps/site/src/components/careers/Flexible.tsx
@@ -0,0 +1,446 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import { InView } from "react-intersection-observer";
+
+import styles from "./flexible.module.css";
+
+export const Flexible = () => (
+
+ {({ inView, ref }) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+);
diff --git a/apps/site/src/components/careers/WorldMap.tsx b/apps/site/src/components/careers/WorldMap.tsx
new file mode 100644
index 0000000000..cfffaa4886
--- /dev/null
+++ b/apps/site/src/components/careers/WorldMap.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import { InView } from "react-intersection-observer";
+
+import styles from "./worldmap.module.css";
+
+export const WorldMap = () => (
+
+ {({ inView, ref }) => (
+
+
+
+
+
+
+
+
+
+
+ )}
+
+);
diff --git a/apps/site/src/components/careers/challenges.module.css b/apps/site/src/components/careers/challenges.module.css
new file mode 100644
index 0000000000..498025217b
--- /dev/null
+++ b/apps/site/src/components/careers/challenges.module.css
@@ -0,0 +1,530 @@
+.challenges .svg-elem-1 {
+ stroke-dashoffset: 1529.88134765625px;
+ stroke-dasharray: 1529.88134765625px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s;
+}
+
+.challenges.active .svg-elem-1 {
+ stroke-dashoffset: 0;
+ fill: rgb(195, 218, 254);
+}
+
+.challenges .svg-elem-2 {
+ stroke-dashoffset: 1372.8411865234375px;
+ stroke-dasharray: 1372.8411865234375px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30000000000000004s;
+}
+
+.challenges.active .svg-elem-2 {
+ stroke-dashoffset: 0;
+ fill: rgb(255, 255, 255);
+}
+
+.challenges .svg-elem-3 {
+ stroke-dashoffset: 1053.705810546875px;
+ stroke-dasharray: 1053.705810546875px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
+}
+
+.challenges.active .svg-elem-3 {
+ stroke-dashoffset: 0;
+ fill: rgb(235, 244, 255);
+}
+
+.challenges .svg-elem-4 {
+ stroke-dashoffset: 2942.565185546875px;
+ stroke-dasharray: 2942.565185546875px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
+}
+
+.challenges.active .svg-elem-4 {
+ stroke-dashoffset: 0;
+ fill: rgb(127, 156, 245);
+}
+
+.challenges .svg-elem-5 {
+ stroke-dashoffset: 169.56085205078125px;
+ stroke-dasharray: 169.56085205078125px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6000000000000001s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6000000000000001s;
+}
+
+.challenges.active .svg-elem-5 {
+ stroke-dashoffset: 0;
+ fill: rgb(90, 103, 216);
+}
+
+.challenges .svg-elem-6 {
+ stroke-dashoffset: 1143.3350830078125px;
+ stroke-dasharray: 1143.3350830078125px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
+}
+
+.challenges.active .svg-elem-6 {
+ stroke-dashoffset: 0;
+ fill: rgb(102, 126, 234);
+}
+
+.challenges .svg-elem-7 {
+ stroke-dashoffset: 1032.414306640625px;
+ stroke-dasharray: 1032.414306640625px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
+}
+
+.challenges.active .svg-elem-7 {
+ stroke-dashoffset: 0;
+ fill: rgb(163, 191, 250);
+}
+
+.challenges .svg-elem-8 {
+ stroke-dashoffset: 1769.95703125px;
+ stroke-dasharray: 1769.95703125px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9000000000000001s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9000000000000001s;
+}
+
+.challenges.active .svg-elem-8 {
+ stroke-dashoffset: 0;
+ fill: rgb(251, 182, 206);
+}
+
+.challenges .svg-elem-9 {
+ stroke-dashoffset: 552.1782836914062px;
+ stroke-dasharray: 552.1782836914062px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
+}
+
+.challenges.active .svg-elem-9 {
+ stroke-dashoffset: 0;
+ fill: rgb(195, 218, 254);
+}
+
+.challenges .svg-elem-10 {
+ stroke-dashoffset: 134.1371307373047px;
+ stroke-dasharray: 134.1371307373047px;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
+}
+
+.challenges.active .svg-elem-10 {
+ stroke-dashoffset: 0;
+}
+
+.challenges .svg-elem-11 {
+ stroke-dashoffset: 683.621826171875px;
+ stroke-dasharray: 683.621826171875px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
+}
+
+.challenges.active .svg-elem-11 {
+ stroke-dashoffset: 0;
+ fill: rgb(255, 255, 255);
+}
+
+.challenges .svg-elem-12 {
+ stroke-dashoffset: 677.33837890625px;
+ stroke-dasharray: 677.33837890625px;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 1.3199999999999998s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 1.3199999999999998s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
+}
+
+.challenges.active .svg-elem-12 {
+ stroke-dashoffset: 0;
+}
+
+.challenges .svg-elem-13 {
+ stroke-dashoffset: 410.9504699707031px;
+ stroke-dasharray: 410.9504699707031px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
+}
+
+.challenges.active .svg-elem-13 {
+ stroke-dashoffset: 0;
+ fill: rgb(90, 103, 216);
+}
+
+.challenges .svg-elem-14 {
+ stroke-dashoffset: 555.005126953125px;
+ stroke-dasharray: 555.005126953125px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
+}
+
+.challenges.active .svg-elem-14 {
+ stroke-dashoffset: 0;
+ fill: rgb(127, 156, 245);
+}
+
+.challenges .svg-elem-15 {
+ stroke-dashoffset: 66.31169128417969px;
+ stroke-dasharray: 66.31169128417969px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
+}
+
+.challenges.active .svg-elem-15 {
+ stroke-dashoffset: 0;
+ fill: rgb(76, 81, 191);
+}
+
+.challenges .svg-elem-16 {
+ stroke-dashoffset: 259.47210693359375px;
+ stroke-dasharray: 259.47210693359375px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 1.7999999999999998s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 1.7999999999999998s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7s;
+}
+
+.challenges.active .svg-elem-16 {
+ stroke-dashoffset: 0;
+ fill: url("#paint0_linear_10603_99257");
+}
+
+.challenges .svg-elem-17 {
+ stroke-dashoffset: 244.95346070680176px;
+ stroke-dasharray: 244.95346070680176px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
+}
+
+.challenges.active .svg-elem-17 {
+ stroke-dashoffset: 0;
+ fill: url("#paint1_linear_10603_99257");
+}
+
+.challenges .svg-elem-18 {
+ stroke-dashoffset: 244.95346070680176px;
+ stroke-dasharray: 244.95346070680176px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
+}
+
+.challenges.active .svg-elem-18 {
+ stroke-dashoffset: 0;
+ fill: url("#paint2_radial_10603_99257");
+}
+
+.challenges .svg-elem-19 {
+ stroke-dashoffset: 235.6334991455078px;
+ stroke-dasharray: 235.6334991455078px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
+}
+
+.challenges.active .svg-elem-19 {
+ stroke-dashoffset: 0;
+ fill: url("#paint3_linear_10603_99257");
+}
+
+.challenges .svg-elem-20 {
+ stroke-dashoffset: 235.6334991455078px;
+ stroke-dasharray: 235.6334991455078px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
+}
+
+.challenges.active .svg-elem-20 {
+ stroke-dashoffset: 0;
+ fill: rgb(198, 212, 219);
+}
+
+.challenges .svg-elem-21 {
+ stroke-dashoffset: 235.63282775878906px;
+ stroke-dasharray: 235.63282775878906px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
+}
+
+.challenges.active .svg-elem-21 {
+ stroke-dashoffset: 0;
+ fill: url("#paint4_linear_10603_99257");
+}
+
+.challenges .svg-elem-22 {
+ stroke-dashoffset: 257.1722412109375px;
+ stroke-dasharray: 257.1722412109375px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3000000000000003s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3000000000000003s;
+}
+
+.challenges.active .svg-elem-22 {
+ stroke-dashoffset: 0;
+ fill: url("#paint5_linear_10603_99257");
+}
+
+.challenges .svg-elem-23 {
+ stroke-dashoffset: 246.95118600939742px;
+ stroke-dasharray: 246.95118600939742px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 2.6399999999999997s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 2.6399999999999997s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
+}
+
+.challenges.active .svg-elem-23 {
+ stroke-dashoffset: 0;
+ fill: url("#paint6_linear_10603_99257");
+}
+
+.challenges .svg-elem-24 {
+ stroke-dashoffset: 246.95118600939742px;
+ stroke-dasharray: 246.95118600939742px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5000000000000004s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5000000000000004s;
+}
+
+.challenges.active .svg-elem-24 {
+ stroke-dashoffset: 0;
+ fill: url("#paint7_radial_10603_99257");
+}
+
+.challenges .svg-elem-25 {
+ stroke-dashoffset: 237.57220458984375px;
+ stroke-dasharray: 237.57220458984375px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6000000000000005s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6000000000000005s;
+}
+
+.challenges.active .svg-elem-25 {
+ stroke-dashoffset: 0;
+ fill: url("#paint8_linear_10603_99257");
+}
+
+.challenges .svg-elem-26 {
+ stroke-dashoffset: 237.57220458984375px;
+ stroke-dasharray: 237.57220458984375px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
+}
+
+.challenges.active .svg-elem-26 {
+ stroke-dashoffset: 0;
+ fill: rgb(198, 212, 219);
+}
+
+.challenges .svg-elem-27 {
+ stroke-dashoffset: 237.5701904296875px;
+ stroke-dasharray: 237.5701904296875px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8000000000000003s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8000000000000003s;
+}
+
+.challenges.active .svg-elem-27 {
+ stroke-dashoffset: 0;
+ fill: url("#paint9_linear_10603_99257");
+}
+
+.challenges .svg-elem-28 {
+ stroke-dashoffset: 258.017578125px;
+ stroke-dasharray: 258.017578125px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 3.2399999999999998s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 3.2399999999999998s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
+}
+
+.challenges.active .svg-elem-28 {
+ stroke-dashoffset: 0;
+ fill: url("#paint10_linear_10603_99257");
+}
+
+.challenges .svg-elem-29 {
+ stroke-dashoffset: 246.1225377213873px;
+ stroke-dasharray: 246.1225377213873px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.36s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.0000000000000004s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.36s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.0000000000000004s;
+}
+
+.challenges.active .svg-elem-29 {
+ stroke-dashoffset: 0;
+ fill: url("#paint11_linear_10603_99257");
+}
+
+.challenges .svg-elem-30 {
+ stroke-dashoffset: 230.08078002929688px;
+ stroke-dasharray: 230.08078002929688px;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.48s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.48s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
+}
+
+.challenges.active .svg-elem-30 {
+ stroke-dashoffset: 0;
+}
+
+.challenges .svg-elem-31 {
+ stroke-dashoffset: 1390px;
+ stroke-dasharray: 1390px;
+ fill: transparent;
+ -webkit-transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 3.5999999999999996s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
+ transition:
+ stroke-dashoffset 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 3.5999999999999996s,
+ fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
+}
+
+.challenges.active .svg-elem-31 {
+ stroke-dashoffset: 0;
+ fill: rgb(255, 255, 255);
+}
diff --git a/apps/site/src/components/careers/flexible.module.css b/apps/site/src/components/careers/flexible.module.css
new file mode 100644
index 0000000000..9010dd84a7
--- /dev/null
+++ b/apps/site/src/components/careers/flexible.module.css
@@ -0,0 +1,417 @@
+.flexible .svg-elem-1 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
+}
+
+.flexible.active .svg-elem-1 {
+ fill: url("#paint0_linear_10601_70600");
+}
+
+.flexible .svg-elem-2 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.025s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.025s;
+}
+
+.flexible.active .svg-elem-2 {
+ fill: url("#paint1_radial_10601_70600");
+}
+
+.flexible .svg-elem-3 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.05s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.05s;
+}
+
+.flexible.active .svg-elem-3 {
+ fill: url("#paint2_linear_10601_70600");
+}
+
+.flexible .svg-elem-4 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.07500000000000001s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.07500000000000001s;
+}
+
+.flexible.active .svg-elem-4 {
+ fill: url("#paint3_radial_10601_70600");
+}
+
+.flexible .svg-elem-5 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.1s;
+}
+
+.flexible.active .svg-elem-5 {
+ fill: url("#paint4_linear_10601_70600");
+}
+
+.flexible .svg-elem-6 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.125s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.125s;
+}
+
+.flexible.active .svg-elem-6 {
+ fill: url("#paint5_radial_10601_70600");
+}
+
+.flexible .svg-elem-7 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.15000000000000002s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.15000000000000002s;
+}
+
+.flexible.active .svg-elem-7 {
+ fill: url("#paint6_linear_10601_70600");
+}
+
+.flexible .svg-elem-8 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.17500000000000002s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.17500000000000002s;
+}
+
+.flexible.active .svg-elem-8 {
+ fill: url("#paint7_radial_10601_70600");
+}
+
+.flexible .svg-elem-9 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s;
+}
+
+.flexible.active .svg-elem-9 {
+ fill: url("#paint8_linear_10601_70600");
+}
+
+.flexible .svg-elem-10 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.225s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.225s;
+}
+
+.flexible.active .svg-elem-10 {
+ fill: url("#paint9_radial_10601_70600");
+}
+
+.flexible .svg-elem-11 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s;
+}
+
+.flexible.active .svg-elem-11 {
+ fill: url("#paint10_linear_10601_70600");
+}
+
+.flexible .svg-elem-12 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.275s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.275s;
+}
+
+.flexible.active .svg-elem-12 {
+ fill: url("#paint11_radial_10601_70600");
+}
+
+.flexible .svg-elem-13 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.30000000000000004s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.30000000000000004s;
+}
+
+.flexible.active .svg-elem-13 {
+ fill: url("#paint12_linear_10601_70600");
+}
+
+.flexible .svg-elem-14 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.325s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.325s;
+}
+
+.flexible.active .svg-elem-14 {
+ fill: url("#paint13_linear_10601_70600");
+}
+
+.flexible .svg-elem-15 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.35000000000000003s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.35000000000000003s;
+}
+
+.flexible.active .svg-elem-15 {
+ fill: url("#paint14_radial_10601_70600");
+}
+
+.flexible .svg-elem-16 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.375s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.375s;
+}
+
+.flexible.active .svg-elem-16 {
+ fill: url("#paint15_linear_10601_70600");
+}
+
+.flexible .svg-elem-17 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s;
+}
+
+.flexible.active .svg-elem-17 {
+ fill: url("#paint16_radial_10601_70600");
+}
+
+.flexible .svg-elem-18 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.42500000000000004s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.42500000000000004s;
+}
+
+.flexible.active .svg-elem-18 {
+ fill: url("#paint17_linear_10601_70600");
+}
+
+.flexible .svg-elem-19 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45s;
+}
+
+.flexible.active .svg-elem-19 {
+ fill: rgb(163, 191, 250);
+}
+
+.flexible .svg-elem-20 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.47500000000000003s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.47500000000000003s;
+}
+
+.flexible.active .svg-elem-20 {
+ fill: rgb(90, 103, 216);
+}
+
+.flexible .svg-elem-21 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
+}
+
+.flexible.active .svg-elem-21 {
+ fill: rgb(255, 255, 255);
+}
+
+.flexible .svg-elem-22 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.525s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.525s;
+}
+
+.flexible.active .svg-elem-22 {
+ fill: rgb(90, 103, 216);
+}
+
+.flexible .svg-elem-23 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.55s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.55s;
+}
+
+.flexible.active .svg-elem-23 {
+ fill: rgb(160, 174, 192);
+}
+
+.flexible .svg-elem-24 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.5750000000000001s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.5750000000000001s;
+}
+
+.flexible.active .svg-elem-24 {
+ fill: rgb(45, 55, 72);
+}
+
+.flexible .svg-elem-25 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.6000000000000001s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.6000000000000001s;
+}
+
+.flexible.active .svg-elem-25 {
+ fill: rgb(237, 137, 54);
+}
+
+.flexible .svg-elem-26 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.625s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.625s;
+}
+
+.flexible.active .svg-elem-26 {
+ fill: rgb(255, 255, 255);
+}
+
+.flexible .svg-elem-27 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.65s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.65s;
+}
+
+.flexible.active .svg-elem-27 {
+ fill: rgb(237, 137, 54);
+}
+
+.flexible .svg-elem-28 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.675s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.675s;
+}
+
+.flexible.active .svg-elem-28 {
+ fill: rgb(160, 174, 192);
+}
+
+.flexible .svg-elem-29 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.7000000000000001s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.7000000000000001s;
+}
+
+.flexible.active .svg-elem-29 {
+ fill: rgb(45, 55, 72);
+}
+
+.flexible .svg-elem-30 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.7250000000000001s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.7250000000000001s;
+}
+
+.flexible.active .svg-elem-30 {
+ fill: rgb(4, 200, 187);
+}
+
+.flexible .svg-elem-31 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.75s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.75s;
+}
+
+.flexible.active .svg-elem-31 {
+ fill: rgb(255, 255, 255);
+}
+
+.flexible .svg-elem-32 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.775s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.775s;
+}
+
+.flexible.active .svg-elem-32 {
+ fill: rgb(4, 200, 187);
+}
+
+.flexible .svg-elem-33 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
+}
+
+.flexible.active .svg-elem-33 {
+ fill: rgb(160, 174, 192);
+}
+
+.flexible .svg-elem-34 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.8250000000000001s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.8250000000000001s;
+}
+
+.flexible.active .svg-elem-34 {
+ fill: rgb(45, 55, 72);
+}
+
+.flexible .svg-elem-35 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.8500000000000001s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.8500000000000001s;
+}
+
+.flexible.active .svg-elem-35 {
+ fill: rgb(90, 103, 216);
+}
+
+.flexible .svg-elem-36 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.875s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.875s;
+}
+
+.flexible.active .svg-elem-36 {
+ fill: rgb(255, 255, 255);
+}
+
+.flexible .svg-elem-37 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
+}
+
+.flexible.active .svg-elem-37 {
+ fill: rgb(90, 103, 216);
+}
+
+.flexible .svg-elem-38 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.925s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.925s;
+}
+
+.flexible.active .svg-elem-38 {
+ fill: rgb(160, 174, 192);
+}
+
+.flexible .svg-elem-39 {
+ fill: transparent;
+ -webkit-transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.9500000000000001s;
+ transition: fill 0.6s cubic-bezier(0.47, 0, 0.745, 0.715)
+ 0.9500000000000001s;
+}
+
+.flexible.active .svg-elem-39 {
+ fill: rgb(45, 55, 72);
+}
diff --git a/apps/site/src/components/careers/masonry-client.tsx b/apps/site/src/components/careers/masonry-client.tsx
new file mode 100644
index 0000000000..689068233f
--- /dev/null
+++ b/apps/site/src/components/careers/masonry-client.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const MasonryPict = dynamic(
+ () =>
+ import("./masonry").then((mod) => ({
+ default: mod.MasonryPict,
+ })),
+ { ssr: false },
+);
+
+export default MasonryPict;
diff --git a/apps/site/src/components/careers/masonry.tsx b/apps/site/src/components/careers/masonry.tsx
new file mode 100644
index 0000000000..5215ad2b5d
--- /dev/null
+++ b/apps/site/src/components/careers/masonry.tsx
@@ -0,0 +1,35 @@
+"use client";
+// @ts-ignore - no types available for react-responsive-masonry
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
+import Image from "next/image";
+
+export const MasonryPict = ({
+ images,
+ gutter,
+}: {
+ images: any[];
+ gutter: string;
+}) => {
+ return (
+
+
+
+
+ {images.map((e: any, idx: number) => (
+
+
+
+
+
+ We're hiring
+
+
+ Open roles
+
+
+ Filter by department
+
+
+
+
+
+
+ All
+ {filters.map((dept: string) => (
+
+ {dept}
+
+ ))}
+
+
+
+
+ {Object.keys(jobs).length &&
+ (filter === "All" ? Object.keys(jobs) : [filter]).map(
+ (d: any, idx: number) => (
+
+ <>
+
+ {d}
+
+ {jobs[d].map((job: any) => (
+
+
+
+ {job &&
+ job.workLocation &&
+ job.workLocation.label.split(" (")[0]}
+
+
+ {job.name}
+
+
+
+ View job listing
+
+
+ ))}
+
+
+ ),
+ )}
+
+ {statsList.map((e: any, idx: number) => (
+
+
+
+
{e.sub}
+
+ ))}
+
;
+}) => {
+ const swiperRef = React.useRef(null);
+ const [isBeginning, setIsBeginning] = React.useState(true);
+ const [isEnd, setIsEnd] = React.useState(false);
+
+ return (
+
+
{
+ swiperRef.current = swiper;
+ }}
+ onSlideChange={(swiper) => {
+ setIsBeginning(swiper.isBeginning);
+ setIsEnd(swiper.isEnd);
+ }}
+ breakpoints={{
+ 640: {
+ slidesPerView: 1,
+ spaceBetween: 16,
+ },
+ 768: {
+ slidesPerView: 2,
+ spaceBetween: 16,
+ },
+ 1024: {
+ slidesPerView: 3,
+ spaceBetween: 16,
+ },
+ }}
+ >
+ {testimonials.map((testimonial: Testimonial) => (
+
+ {testimonial.body}
+
+ ))}
+
+
+ {/* Custom Navigation */}
+
+ swiperRef.current?.slidePrev()}
+ className="flex items-center justify-center text-foreground-neutral-weak hover:text-foreground-neutral cursor-pointer disabled:text-foreground-neutral-reverse-weak disabled:cursor-default"
+ aria-label="Previous slide"
+ disabled={isBeginning}
+ >
+
+ swiperRef.current?.slideNext()}
+ className="flex items-center justify-center text-foreground-neutral-weak hover:text-foreground-neutral cursor-pointer disabled:text-foreground-neutral-reverse-weak disabled:cursor-default"
+ aria-label="Next slide"
+ disabled={isEnd}
+ >
+
+
+
+ {item.otherAsset}
+
+ )}
{item.visualType === "logoGrid" && item.useDefaultLogos && (
;
+ children?: ReactNode;
+ }
+
+ export interface MasonryProps {
+ columnsCount?: number;
+ gutter?: string;
+ children?: ReactNode;
+ center?: boolean;
+ }
+
+ export class ResponsiveMasonry extends React.Component {}
+ export default class Masonry extends React.Component {}
+}
diff --git a/packages/ui/src/components/navigation-menu.tsx b/packages/ui/src/components/navigation-menu.tsx
index e1b81ff426..0b27ab4858 100644
--- a/packages/ui/src/components/navigation-menu.tsx
+++ b/packages/ui/src/components/navigation-menu.tsx
@@ -355,10 +355,12 @@ function NavigationMobileMenu({
links,
loginHref,
signupHref,
+ buttonVariant = "ppg",
}: {
links: WebNavigationLink[];
loginHref: string;
signupHref: string;
+ buttonVariant?: "ppg" | "orm" | "default-stronger";
}) {
return (
@@ -394,7 +396,7 @@ function NavigationMobileMenu({
diff --git a/packages/ui/src/components/quote.tsx b/packages/ui/src/components/quote.tsx
new file mode 100644
index 0000000000..3fb3855195
--- /dev/null
+++ b/packages/ui/src/components/quote.tsx
@@ -0,0 +1,59 @@
+import { Avatar, Separator } from "@prisma/eclipse";
+import { cn } from "../lib/cn";
+export const Quote = ({
+ children,
+ author,
+ className,
+}: {
+ children: React.ReactNode;
+ author?: {
+ name: string;
+ imageUrl?: string;
+ title?: string;
+ company?: string;
+ };
+ className?: string;
+}) => {
+ return (
+
+ {children}
+ {author && (
+
+ )}
+
+ );
+};
diff --git a/packages/ui/src/components/web-navigation.tsx b/packages/ui/src/components/web-navigation.tsx
index eff70f009a..975ff473e5 100644
--- a/packages/ui/src/components/web-navigation.tsx
+++ b/packages/ui/src/components/web-navigation.tsx
@@ -40,9 +40,14 @@ interface WebNavigationProps {
source: "website";
medium: string;
};
+ buttonVariant?: "ppg" | "orm" | "default-stronger";
}
-export function WebNavigation({ links, utm }: WebNavigationProps) {
+export function WebNavigation({
+ links,
+ utm,
+ buttonVariant = "ppg",
+}: WebNavigationProps) {
const [mobileView, setMobileView] = useState(false);
const loginHref = utm
? `https://console.prisma.io/login?utm_source=${utm.source}&utm_medium=${utm.medium}&utm_campaign=login`
@@ -114,7 +119,7 @@ export function WebNavigation({ links, utm }: WebNavigationProps) {
@@ -138,6 +143,7 @@ export function WebNavigation({ links, utm }: WebNavigationProps) {
links={links}
loginHref={loginHref}
signupHref={signupHref}
+ buttonVariant={buttonVariant}
/>
)}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b24cda31ba..3f50900968 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -609,18 +609,33 @@ importers:
posthog-js:
specifier: 'catalog:'
version: 1.359.1
+ prop-types:
+ specifier: ^15.8.1
+ version: 15.8.1
react:
specifier: 'catalog:'
version: 19.2.4
+ react-animated-numbers:
+ specifier: ^1.1.1
+ version: 1.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
react-dom:
specifier: 'catalog:'
version: 19.2.4(react@19.2.4)
+ react-intersection-observer:
+ specifier: ^10.0.3
+ version: 10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+ react-responsive-masonry:
+ specifier: ^2.7.1
+ version: 2.7.1
react-tweet:
specifier: 'catalog:'
version: 3.3.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
remark-directive:
specifier: 'catalog:'
version: 4.0.0
+ swiper:
+ specifier: ^12.1.3
+ version: 12.1.3
tailwind-merge:
specifier: 'catalog:'
version: 3.5.0
@@ -4368,6 +4383,20 @@ packages:
forwarded-parse@2.1.2:
resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
+ framer-motion@11.18.2:
+ resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
+ peerDependencies:
+ '@emotion/is-prop-valid': '*'
+ react: ^18.0.0 || ^19.0.0
+ react-dom: ^18.0.0 || ^19.0.0
+ peerDependenciesMeta:
+ '@emotion/is-prop-valid':
+ optional: true
+ react:
+ optional: true
+ react-dom:
+ optional: true
+
framer-motion@12.35.0:
resolution: {integrity: sha512-w8hghCMQ4oq10j6aZh3U2yeEQv5K69O/seDI/41PK4HtgkLrcBovUNc0ayBC3UyyU7V1mrY2yLzvYdWJX9pGZQ==}
peerDependencies:
@@ -4843,6 +4872,10 @@ packages:
longest-streak@3.1.0:
resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+ loose-envify@1.4.0:
+ resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+ hasBin: true
+
lru-cache@11.2.6:
resolution: {integrity: sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==}
engines: {node: 20 || >=22}
@@ -5080,12 +5113,32 @@ packages:
module-details-from-path@1.0.4:
resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
+ motion-dom@11.18.1:
+ resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
+
motion-dom@12.35.0:
resolution: {integrity: sha512-FFMLEnIejK/zDABn+vqGVAUN4T0+3fw+cVAY8MMT65yR+j5uMuvWdd4npACWhh94OVWQs79CrBBuwOwGRZAQiA==}
+ motion-utils@11.18.1:
+ resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
+
motion-utils@12.29.2:
resolution: {integrity: sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==}
+ motion@11.18.2:
+ resolution: {integrity: sha512-JLjvFDuFr42NFtcVoMAyC2sEjnpA8xpy6qWPyzQvCloznAyQ8FIXioxWfHiLtgYhoVpfUqSWpn1h9++skj9+Wg==}
+ peerDependencies:
+ '@emotion/is-prop-valid': '*'
+ react: ^18.0.0 || ^19.0.0
+ react-dom: ^18.0.0 || ^19.0.0
+ peerDependenciesMeta:
+ '@emotion/is-prop-valid':
+ optional: true
+ react:
+ optional: true
+ react-dom:
+ optional: true
+
motion@12.35.0:
resolution: {integrity: sha512-BQUhNUIGvUcwXCzwmnT1JpjUqab34lIwxHnXUyWRht1WC1vAyp7/4qgMiUXxN3K6hgUhyoR+HNnLeQMwUZjVjw==}
peerDependencies:
@@ -5321,6 +5374,9 @@ packages:
resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
engines: {node: '>=0.4.0'}
+ prop-types@15.8.1:
+ resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
property-information@7.1.0:
resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
@@ -5340,6 +5396,12 @@ packages:
queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+ react-animated-numbers@1.1.1:
+ resolution: {integrity: sha512-Jr2vbDWjo5wW+X8wBYRBACpuKdPkLa4A2ZYfxlAR0oc/gXWVeWyAmAWzZj73276IQxycxrTL7aGn4quWV7+l2Q==}
+ peerDependencies:
+ react: '>=16.8.0'
+ react-dom: '>=16.8.0'
+
react-dom@19.2.4:
resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
peerDependencies:
@@ -5351,6 +5413,18 @@ packages:
peerDependencies:
react: ^16.8.0 || ^17 || ^18 || ^19
+ react-intersection-observer@10.0.3:
+ resolution: {integrity: sha512-luICLMbs0zxTO/70Zy7K5jOXkABPEVSAF8T3FdZUlctsrIaPLmx8TZe2SSA+CY2HGWfz2INyNTnp82pxNNsShA==}
+ peerDependencies:
+ react: ^17.0.0 || ^18.0.0 || ^19.0.0
+ react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+ peerDependenciesMeta:
+ react-dom:
+ optional: true
+
+ react-is@16.13.1:
+ resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
react-is@19.2.4:
resolution: {integrity: sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==}
@@ -5395,6 +5469,9 @@ packages:
'@types/react':
optional: true
+ react-responsive-masonry@2.7.1:
+ resolution: {integrity: sha512-Q+u+nOH87PzjqGFd2PgTcmLpHPZnCmUPREHYoNBc8dwJv6fi51p9U6hqwG8g/T8MN86HrFjrU+uQU6yvETU7cA==}
+
react-style-singleton@2.2.3:
resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
engines: {node: '>=10'}
@@ -5689,6 +5766,10 @@ packages:
peerDependencies:
react: '>=17.0'
+ swiper@12.1.3:
+ resolution: {integrity: sha512-XcWlVmkHFICI4fuoJKgbp8PscDcS4i7pBH8nwJRBi3dpQvhCySwsWRYm4bOf/BzKVWkHOYaFw7qz9uBSrY3oug==}
+ engines: {node: '>= 4.7.0'}
+
swr@2.4.1:
resolution: {integrity: sha512-2CC6CiKQtEwaEeNiqWTAw9PGykW8SR5zZX8MZk6TeAvEAnVS7Visz8WzphqgtQ8v2xz/4Q5K+j+SeMaKXeeQIA==}
peerDependencies:
@@ -9315,6 +9396,15 @@ snapshots:
forwarded-parse@2.1.2: {}
+ framer-motion@11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+ dependencies:
+ motion-dom: 11.18.1
+ motion-utils: 11.18.1
+ tslib: 2.8.1
+ optionalDependencies:
+ react: 19.2.4
+ react-dom: 19.2.4(react@19.2.4)
+
framer-motion@12.35.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
dependencies:
motion-dom: 12.35.0
@@ -9797,6 +9887,10 @@ snapshots:
longest-streak@3.1.0: {}
+ loose-envify@1.4.0:
+ dependencies:
+ js-tokens: 4.0.0
+
lru-cache@11.2.6: {}
lru-cache@5.1.1:
@@ -10307,12 +10401,26 @@ snapshots:
module-details-from-path@1.0.4: {}
+ motion-dom@11.18.1:
+ dependencies:
+ motion-utils: 11.18.1
+
motion-dom@12.35.0:
dependencies:
motion-utils: 12.29.2
+ motion-utils@11.18.1: {}
+
motion-utils@12.29.2: {}
+ motion@11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+ dependencies:
+ framer-motion: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+ tslib: 2.8.1
+ optionalDependencies:
+ react: 19.2.4
+ react-dom: 19.2.4(react@19.2.4)
+
motion@12.35.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
dependencies:
framer-motion: 12.35.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -10619,6 +10727,12 @@ snapshots:
progress@2.0.3: {}
+ prop-types@15.8.1:
+ dependencies:
+ loose-envify: 1.4.0
+ object-assign: 4.1.1
+ react-is: 16.13.1
+
property-information@7.1.0: {}
protobufjs@7.5.4:
@@ -10644,6 +10758,14 @@ snapshots:
queue-microtask@1.2.3: {}
+ react-animated-numbers@1.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+ dependencies:
+ motion: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+ react: 19.2.4
+ react-dom: 19.2.4(react@19.2.4)
+ transitivePeerDependencies:
+ - '@emotion/is-prop-valid'
+
react-dom@19.2.4(react@19.2.4):
dependencies:
react: 19.2.4
@@ -10653,6 +10775,14 @@ snapshots:
dependencies:
react: 19.2.4
+ react-intersection-observer@10.0.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+ dependencies:
+ react: 19.2.4
+ optionalDependencies:
+ react-dom: 19.2.4(react@19.2.4)
+
+ react-is@16.13.1: {}
+
react-is@19.2.4: {}
react-medium-image-zoom@5.4.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
@@ -10690,6 +10820,8 @@ snapshots:
optionalDependencies:
'@types/react': 19.2.14
+ react-responsive-masonry@2.7.1: {}
+
react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.4):
dependencies:
get-nonce: 1.0.1
@@ -11130,6 +11262,8 @@ snapshots:
dependencies:
react: 19.2.4
+ swiper@12.1.3: {}
+
swr@2.4.1(react@19.2.4):
dependencies:
dequal: 2.0.3
+ 
+