feat: background gradients to project settings

3 files changed, 62 insertions, 0 deletions

diff --git a/apps/web/src/data/colors/pattern-craft.ts b/apps/web/src/data/colors/pattern-craft.ts
new file mode 100644
index 00000000..56c49b34
--- /dev/null
+++ b/apps/web/src/data/colors/pattern-craft.ts
@@ -0,0 +1,30 @@
+// These are the gradients from Pattern Craft (https://patterncraft.fun/)
+
+export const patternCraftGradients = [
+  // Dreamy Sky Pink Glow
+  "radial-gradient(circle at 30% 70%, rgba(173, 216, 230, 0.35), transparent 60%), radial-gradient(circle at 70% 30%, rgba(255, 182, 193, 0.4), transparent 60%)",
+
+  // Soft Warm Pastel Texture
+  "radial-gradient(circle at 20% 80%, rgba(255, 182, 153, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 214, 0.5) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 182, 153, 0.1) 0%, transparent 50%), #fff8f0",
+
+  // Warm Soft Coral & Cream
+  "radial-gradient(circle at 20% 80%, rgba(255, 160, 146, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 228, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 160, 146, 0.15) 0%, transparent 50%), #fef9f7",
+
+  // Soft Green Glow
+  "radial-gradient(circle at center, #8FFFB0, transparent), white",
+
+  // Purple Glow Right
+  "radial-gradient(circle at top right, rgba(173, 109, 244, 0.5), transparent 70%)",
+
+  // Teal Glow Right
+  "radial-gradient(circle at top right, rgba(56, 193, 182, 0.5), transparent 70%)",
+
+  // Warm Orange Glow Right
+  "radial-gradient(circle at top right, rgba(255, 140, 60, 0.5), transparent 70%)",
+
+  // Cool Blue Glow Right
+  "radial-gradient(circle at top right, rgba(70, 130, 180, 0.5), transparent 70%)",
+
+  // Purple Glow Left
+  "radial-gradient(circle at top left, rgba(173, 109, 244, 0.5), transparent 70%)",
+];
diff --git a/apps/web/src/data/colors.ts b/apps/web/src/data/colors/solid.ts
index 9a12a587..9a12a587 100644
--- a/apps/web/src/data/colors.ts
+++ b/apps/web/src/data/colors/solid.ts
diff --git a/apps/web/src/data/colors/syntax-ui.tsx b/apps/web/src/data/colors/syntax-ui.tsx
new file mode 100644
index 00000000..6a7677b4
--- /dev/null
+++ b/apps/web/src/data/colors/syntax-ui.tsx
@@ -0,0 +1,32 @@
+// These are the gradients from Syntax UI (https://syntaxui.com/effects/gradients)

+

+export const syntaxUIGradients = [

+  // Cyan to Blue gradients

+  "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)",

+  "linear-gradient(to right, #bfdbfe, #a5f3fc)",

+  "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)",

+

+  // Purple gradients

+  "linear-gradient(to right, #e9d5ff, #d8b4fe, #c084fc)",

+  "linear-gradient(to right, #c4b5fd, #a78bfa, #8b5cf6)",

+

+  // Blue gradients

+  "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)",

+  "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)",

+

+  // Green gradients

+  "linear-gradient(to right, #6ee7b7, #34d399, #10b981)",

+  "linear-gradient(to right, #d1fae5, #a7f3d0, #6ee7b7)",

+

+  // Red gradient

+  "linear-gradient(to right, #fca5a5, #f87171, #ef4444)",

+

+  // Yellow/Orange gradient

+  "linear-gradient(to right, #fde68a, #fbbf24, #f59e0b)",

+

+  // Pink gradient

+  "linear-gradient(to right, #fbcfe8, #f9a8d4, #f472b6)",

+

+  // Neon radial gradient

+  "radial-gradient(circle at bottom left, #ff00ff, #00ffff)",

+];