Warmer style for the entire website + shapes

Jenkinsfile

@@ -6,11 +6,10 @@ pipeline {
     REMOTE_DIR  = '/home/zouklambadabcn.com/public_html'
     PM2_APP     = 'ZLB'
     // Name of Jenkins Credentials (Username with private key) to SSH
-    SSH_CREDS   = 'ssh-remote' // <-- configure this in Jenkins Credentials
+    SSH_CREDS   = 'root_ssh' // <-- configure this in Jenkins Credentials
   }
 
   options {
-    ansiColor('xterm')
     timestamps()
   }
 
@@ -22,32 +21,12 @@ pipeline {
           withCredentials([sshUserPrivateKey(credentialsId: env.SSH_CREDS, keyFileVariable: 'SSH_KEY', usernameVariable: 'SSH_USER')]) {
             // Build the remote command to run
             def remoteCmd = """
-              set -euo pipefail
+              set -e
               cd "${env.REMOTE_DIR}"
-              echo "[$(date)] PWD=$(pwd) on ${HOSTNAME}"
-
-              # Ensure repo is cleanly updated
-              git fetch --all --prune
-              git reset --hard HEAD
-              git pull --rebase --autostash || git pull
-
-              # Use npm if available, fallback to npx if needed
-              if command -v npm >/dev/null 2>&1; then
-                npm ci || npm install
+              git pull
+              npm install
               npm run build
-              else
-                npx --yes npm@latest ci || npx --yes npm@latest install
-                npx --yes npm@latest run build
-              fi
-
-              # Restart pm2 app
-              if command -v pm2 >/dev/null 2>&1; then
-                pm2 restart "${PM2_APP}" || pm2 start npm --name "${PM2_APP}" -- run start
-                pm2 save || true
-              else
-                echo 'pm2 not found in PATH' >&2
-                exit 1
-              fi
+              pm2 restart ${env.PM2_APP}
             """.stripIndent()
 
             // SSH options for non-interactive, secure connection

src/components/AboutSection.tsx

@@ -6,7 +6,7 @@ import { Music, Users, Sparkles, PartyPopper } from "lucide-react";
 const iconMap = [Music, Users, Sparkles, PartyPopper];
 
 const AboutSection = () => (
-  <section id="about" className="section-padding bg-background">
+  <section id="about" className="section-padding bg-background relative z-10 -mt-[50px] pt-[100px]">
     <div className="container mx-auto">
       <div className="grid md:grid-cols-2 gap-12 items-center">
         {/* Imagen */}

src/components/HeroSection.tsx

@@ -34,7 +34,10 @@ const HeroSection = () => {
   ];
 
   return (
-    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
+    <section 
+      className="relative min-h-[calc(100vh+50px)] flex items-center justify-center overflow-hidden z-20 pb-[50px]"
+      style={{ clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px))" }}
+    >
       {/* Background image */}
       <div
         className="absolute inset-0 bg-cover bg-center"

src/components/OrgSection.tsx

@@ -3,8 +3,13 @@ import { ABOUT_ORG } from "@/data/event-data";
 import communityImg from "@/assets/community.jpg";
 import { Instagram, Facebook, Youtube } from "lucide-react";
 
+const maskStyle = "radial-gradient(491.93px at 50% 660px,#000 99%,#0000 101%) calc(50% - 440px) 0/880px 100%, radial-gradient(491.93px at 50% -440px,#0000 99%,#000 101%) 50% 220px/880px 100% repeat-x";
+
 const OrgSection = () => (
-  <section className="section-padding bg-card py-20 md:py-28">
+  <section 
+    className="section-padding bg-card pb-20 md:pb-28 pt-[200px] md:pt-[240px] -mt-[80px] relative z-20"
+    style={{ WebkitMask: maskStyle, mask: maskStyle }}
+  >
     <div className="container mx-auto">
       <div className="grid md:grid-cols-2 gap-12 items-center">
         {/* Texto */}

src/index.css

@@ -12,85 +12,85 @@
 
 @layer base {
   :root {
-    /* Paleta: Egyptian Blue, Slate Indigo, Baby Blue Ice, Dark Amethyst, Dusty Grape */
-    --background: 225 30% 96%;
-    --foreground: 260 32% 24%;
+    /* Paleta: Beachy, Sandy, Warm Orange */
+    --background: 40 40% 94%; /* Sandy beach */
+    --foreground: 25 40% 25%; /* Warm dark brown/orange */
 
-    --card: 225 25% 94%;
-    --card-foreground: 260 32% 24%;
+    --card: 40 50% 98%; /* Light sand */
+    --card-foreground: 25 40% 25%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 260 32% 24%;
+    --popover: 40 50% 98%;
+    --popover-foreground: 25 40% 25%;
 
-    /* Primary: Egyptian Blue */
-    --primary: 231 66% 37%;
+    /* Primary: Vibrant Orange */
+    --primary: 20 90% 55%;
     --primary-foreground: 0 0% 100%;
 
-    /* Secondary: Slate Indigo */
-    --secondary: 225 34% 48%;
+    /* Secondary: Golden Orange */
+    --secondary: 35 90% 50%;
     --secondary-foreground: 0 0% 100%;
 
-    /* Accent: Baby Blue Ice */
-    --accent: 220 81% 75%;
-    --accent-foreground: 260 32% 24%;
+    /* Accent: Warm Peach */
+    --accent: 25 80% 80%;
+    --accent-foreground: 25 40% 25%;
 
-    --muted: 225 20% 90%;
-    --muted-foreground: 227 20% 42%;
+    --muted: 40 30% 85%;
+    --muted-foreground: 25 30% 45%;
 
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
 
-    --border: 225 20% 85%;
-    --input: 225 20% 85%;
-    --ring: 231 66% 37%;
+    --border: 40 25% 82%;
+    --input: 40 25% 82%;
+    --ring: 20 90% 55%;
 
     --radius: 0.75rem;
 
     /* Custom tokens */
-    --gradient-tropical: linear-gradient(135deg, hsla(28.2, 80.4%, 44.1%, 0.91), hsla(27.1, 88.4%, 37.3%, 0.76), hsl(22.3, 95.5%, 56.9%));
-    --gradient-warm: linear-gradient(180deg, hsl(225 30% 96%), hsl(225 25% 92%));
-    --shadow-glow: 0 0 40px hsl(231 66% 37% / 0.3);
-    --shadow-card: 0 8px 30px hsl(260 32% 24% / 0.08);
-    --shadow-elevated: 0 20px 50px hsl(260 32% 24% / 0.12);
+    --gradient-tropical: linear-gradient(135deg, hsla(15, 90%, 55%, 0.9), hsla(30, 90%, 55%, 0.8), hsl(45, 90%, 50%));
+    --gradient-warm: linear-gradient(180deg, hsl(40 40% 94%), hsl(40 30% 85%));
+    --shadow-glow: 0 0 40px hsl(20 90% 55% / 0.3);
+    --shadow-card: 0 8px 30px hsl(25 40% 25% / 0.08);
+    --shadow-elevated: 0 20px 50px hsl(25 40% 25% / 0.12);
     /* Sidebar (unused but required) */
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-background: 40 50% 98%;
+    --sidebar-foreground: 25 40% 25%;
+    --sidebar-primary: 20 90% 55%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 40 30% 90%;
+    --sidebar-accent-foreground: 25 40% 25%;
+    --sidebar-border: 40 25% 82%;
+    --sidebar-ring: 20 90% 55%;
   }
 
   .dark {
-    --background: 260 30% 8%;
-    --foreground: 220 81% 90%;
-    --card: 260 28% 12%;
-    --card-foreground: 220 81% 90%;
-    --popover: 260 28% 12%;
-    --popover-foreground: 220 81% 90%;
-    --primary: 220 81% 75%;
-    --primary-foreground: 260 32% 24%;
-    --secondary: 225 34% 48%;
-    --secondary-foreground: 0 0% 100%;
-    --accent: 231 66% 45%;
-    --accent-foreground: 0 0% 100%;
-    --muted: 260 20% 18%;
-    --muted-foreground: 225 20% 65%;
+    --background: 35 25% 12%; /* Dark beach night */
+    --foreground: 30 50% 96%;
+    --card: 35 20% 15%;
+    --card-foreground: 30 50% 96%;
+    --popover: 35 20% 15%;
+    --popover-foreground: 30 50% 96%;
+    --primary: 20 90% 60%;
+    --primary-foreground: 30 90% 10%;
+    --secondary: 35 90% 55%;
+    --secondary-foreground: 30 90% 10%;
+    --accent: 25 60% 30%;
+    --accent-foreground: 30 50% 96%;
+    --muted: 35 20% 22%;
+    --muted-foreground: 30 30% 70%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 100%;
-    --border: 260 15% 20%;
-    --input: 260 15% 20%;
-    --ring: 220 81% 75%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --border: 35 20% 25%;
+    --input: 35 20% 25%;
+    --ring: 20 90% 60%;
+    --sidebar-background: 35 20% 15%;
+    --sidebar-foreground: 30 50% 96%;
+    --sidebar-primary: 20 90% 60%;
+    --sidebar-primary-foreground: 30 90% 10%;
+    --sidebar-accent: 35 20% 22%;
+    --sidebar-accent-foreground: 30 50% 96%;
+    --sidebar-border: 35 20% 25%;
+    --sidebar-ring: 20 90% 60%;
   }
 }
 

tailwind.config.ts

@@ -14,7 +14,7 @@ export default {
     },
     extend: {
       fontFamily: {
-        display: ['"Playfair Display"', "Georgia", "serif"],
+        display: ['"Noto"', "system-ui", "sans-serif"],
         body: ['"Inter"', "system-ui", "sans-serif"],
       },
       colors: {
@@ -24,7 +24,7 @@ export default {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {
-          DEFAULT: "hsl(230.5, 57.6%, 74.1%)",
+          DEFAULT: "hsla(37, 93%, 53%, 1.00)",
           foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {