fix: brand color

app/components/collaboration.tsx

@@ -9,7 +9,7 @@ export default function Collaboration() {
     <>
       <div className="flex gap-2 justify-center items-end mb-10">
         <div className="xs:text-xl lg:text-6xl font-semibold ">Kolaborasi</div>
-        <div className="xs:text-base lg:text-2xl font-medium text-[#c7cbd1]">
+        <div className="xs:text-base lg:text-2xl font-medium text-lightGray">
           dengan
         </div>
         <img
@@ -18,21 +18,21 @@ export default function Collaboration() {
           alt=""
         />
       </div>
-      <div className="font-medium xs:text-base  lg:text-2xl mb-12 xs:px-2 lg:px-10 text-[#c7cbd1]">
+      <div className="font-medium xs:text-base  lg:text-2xl mb-12 xs:px-2 lg:px-10 text-lightGray">
         Kami di reactjs.id menyelenggarakan event untuk developer React JS
         indonesia berbagi wawasan dan pengetahuan mengenai ekosistem Reactjs.
       </div>
 
       <img src={indonesiaMap} alt="" className="size-full" />
-      <div className="font-medium xs:text-base lg:text-2xl text-[#b1c8e791]">
+      <div className="font-medium xs:text-base lg:text-2xl text-x-blue-300">
         member telegram
       </div>
-      <div className="font-medium xs:text-lg lg:text-4xl text-[#c7cbd1] mb-20">
+      <div className="font-medium xs:text-lg lg:text-4xl text-lightGray mb-20">
         50.000
       </div>
 
       <Link to="https://t.me/react_idn" target="_blank" rel="noreferrer">
-        <Button className="bg-[#1B212A] border border-[#2E3137] justify-start text-center xs:px-4 xl:px-9 !py-[28px] rounded-2xl">
+        <Button className="bg-x-black-700 border border-x-black-500 justify-start text-center xs:px-4 xl:px-9 !py-[28px] rounded-2xl">
           <span className="xs:text-base lg:text-xl">Lihat daftar peserta</span>
           <MoveRight className="ml-2" />
         </Button>

app/components/content/about/community.tsx

@@ -1,6 +1,6 @@
 export const AboutCommunity = () => {
   return (
-    <section className="max-w-7xl w-full px-16 text-[#C7CBD1] flex flex-col gap-10 md:gap-12 md:text-3xl">
+    <section className="max-w-7xl w-full px-16 text-lightGray flex flex-col gap-10 md:gap-12 md:text-3xl">
       <h2 className="font-semibold text-2xl md:text-4xl text-white">
         Komunitas Kami
       </h2>

app/components/content/about/contact.tsx

@@ -1,6 +1,6 @@
 export const AboutContact = () => {
   return (
-    <section className="max-w-7xl w-full px-16 text-[#C7CBD1] flex flex-col gap-10 md:gap-12 md:text-3xl">
+    <section className="max-w-7xl w-full px-16 text-lightGray flex flex-col gap-10 md:gap-12 md:text-3xl">
       <h2 className="font-semibold text-2xl md:text-4xl text-white">
         Kontak Kami
       </h2>

app/components/content/about/general.tsx

@@ -2,7 +2,7 @@ import { CalendarCheck2, Newspaper, Users } from "lucide-react";
 
 export const AboutGeneral = () => {
   return (
-    <section className="max-w-7xl w-full px-16 text-[#C7CBD1] flex flex-col gap-10 md:gap-12 md:text-3xl">
+    <section className="max-w-7xl w-full px-16 text-lightGray flex flex-col gap-10 md:gap-12 md:text-3xl">
       <div className="flex flex-col gap-2">
         <h1 className="text-white font-bold text-4xl md:text-6xl">
           <img
@@ -29,15 +29,15 @@ export const AboutGeneral = () => {
           <p className="font-medium text-xl md:text-4xl text-white">100.000+</p>
           <p>Member telegram</p>
         </div>
-        <div className="md:w-[1px] h-[1px] w-full md:h-full bg-[#3E4F6B]" />
+        <div className="md:w-[1px] h-[1px] w-full md:h-full bg-x-blue-700" />
         <div className="flex flex-col gap-1">
           <CalendarCheck2 className="w-6 h-6 md:w-12 md:h-12 text-white" />
           <p className="font-medium text-xl md:text-4xl text-white">
             29 Events
           </p>
           <p>Acara diselenggarakan</p>
         </div>
-        <div className="md:w-[1px] h-[1px] w-full md:h-full bg-[#3E4F6B]" />
+        <div className="md:w-[1px] h-[1px] w-full md:h-full bg-x-blue-700" />
         <div className="flex flex-col gap-1">
           <Newspaper className="w-6 h-6 md:w-12 md:h-12 text-white" />
           <p className="font-medium text-xl md:text-4xl text-white">

app/components/content/about/mission.tsx

@@ -2,7 +2,7 @@ import { missionData } from "~/data/about";
 
 export const AboutMission = () => {
   return (
-    <section className="max-w-7xl w-full px-16 text-[#C7CBD1] flex flex-col gap-10 md:gap-12 md:text-3xl">
+    <section className="max-w-7xl w-full px-16 text-lightGray flex flex-col gap-10 md:gap-12 md:text-3xl">
       <h2 className="font-semibold text-2xl md:text-4xl text-white">
         Misi Kami
       </h2>
@@ -12,7 +12,7 @@ export const AboutMission = () => {
             key={title + index}
             className="md:text-2xl flex flex-col gap-10 md:gap-12"
           >
-            <h3 className="text-[#C7CBD1]/40">
+            <h3 className="text-lightGray/40">
               Misi #{index + 1}
               <br />
               <span className="text-xl md:text-3xl text-white font-medium">

app/components/content/about/offer.tsx

@@ -2,7 +2,7 @@ import { offerData } from "~/data/about";
 
 export const AboutOffer = () => {
   return (
-    <section className="max-w-7xl w-full px-16 text-[#C7CBD1] flex flex-col gap-10 md:gap-12 md:text-3xl">
+    <section className="max-w-7xl w-full px-16 text-lightGray flex flex-col gap-10 md:gap-12 md:text-3xl">
       <h2 className="font-semibold text-2xl md:text-4xl text-white">
         Apa yang Kami Tawarkan
       </h2>

app/components/content/about/organizer.tsx

@@ -4,7 +4,7 @@ import type { OrganizerType } from "~/types/about";
 
 export const AboutOrganizer = () => {
   return (
-    <section className="max-w-7xl w-full px-16 text-[#C7CBD1] flex flex-col gap-10 md:gap-12 md:text-3xl">
+    <section className="max-w-7xl w-full px-16 text-lightGray flex flex-col gap-10 md:gap-12 md:text-3xl">
       <h2 className="font-semibold text-2xl md:text-4xl text-white">
         Pengurus
       </h2>
@@ -35,7 +35,7 @@ const OrganizerCard = ({ fullName, image, role }: OrganizerType) => {
       </Avatar>
       <div className="flex flex-col gap-[2px] font-medium md:text-2xl">
         <h3>{fullName}</h3>
-        <p className="text-[#C7CBD1]/40">{role}</p>
+        <p className="text-lightGray/40">{role}</p>
       </div>
     </article>
   );

app/components/event-item.tsx

@@ -20,12 +20,12 @@ function EventItem({ title, date, description, imgUrl }: EventItemProps) {
           <h3 className="text-lg lg:text-4xl font-medium text-white truncate text-wrap line-clamp-2 lg:line-clamp-1">
             {title}
           </h3>
-          <div className="text-xs lg:text-xl flex items-center gap-1.5 text-[#8E96A5]">
+          <div className="text-xs lg:text-xl flex items-center gap-1.5 text-x-blue-200">
             <CalendarFold size={21} />
             <p>{date}</p>
           </div>
         </div>
-        <p className="text-sm lg:text-xl text-[#C7CBD1] line-clamp-2">
+        <p className="text-sm lg:text-xl text-lightGray line-clamp-2">
           {description}
         </p>
       </div>

app/components/home/networking.tsx

@@ -13,7 +13,7 @@ export default function Networking() {
               <h2 className="text-4xl lg:text-6xl font-semibold text-balance">
                 Networking
               </h2>
-              <span className="text-[#C7CBD1] text-sm lg:text-2xl font-medium">
+              <span className="text-lightGray text-sm lg:text-2xl font-medium">
                 dengan
               </span>
               <img
@@ -24,7 +24,7 @@ export default function Networking() {
               />
             </div>
 
-            <p className="text-sm lg:text-2xl text-[#C7CBD1] font-medium max-w-prose">
+            <p className="text-sm lg:text-2xl text-lightGray font-medium max-w-prose">
               Di reactjs.id, Anda akan bertemu dengan para profesional
               <br />
               dari berbagai latar belakang dan tingkat pengalaman
@@ -194,7 +194,7 @@ export default function Networking() {
 
         <Spacer size="xs" />
 
-        <Button className="bg-[#1B212A] border border-[#2E3137] justify-start text-center px-4 lg:px-9 py-6 lg:!py-[28px] rounded-2xl">
+        <Button className="bg-x-black-700 border border-x-black-500 justify-start text-center px-4 lg:px-9 py-6 lg:!py-[28px] rounded-2xl">
           <span className="text-base lg:text-xl">Lihat semua acara</span>
           <MoveRight className="ml-2" />
         </Button>

app/components/join-community.tsx

@@ -23,7 +23,7 @@ export function JoinCommunity({ isImageSlide }: JoinCommunityPropsType) {
       <div className="xs:text-xl lg:text-6xl font-semibold text-center xs:mb-5 lg:mb-10 xs:mt-16 lg:mt-32">
         Gabung reactjs.id
       </div>
-      <div className="xs:text-base lg:text-2xl text-[#C7CBD1] font-medium text-center xs:mb-10 lg:mb-20">
+      <div className="xs:text-base lg:text-2xl text-lightGray font-medium text-center xs:mb-10 lg:mb-20">
         Jadilah bagian dari komunitas developer React dan React Native terbesar
         di Indonesia di ujung jarimu. <br />
         Temukan kami di platform social media favorit-mu!

app/components/line.tsx

@@ -1,5 +1,5 @@
 export const Line = () => (
   <div className="px-16 max-w-7xl w-full">
-    <div className="h-[1px] bg-[#3E4F6B] w-full" />
+    <div className="h-[1px] bg-x-blue-700 w-full" />
   </div>
 );

app/components/shared/site-navigation.tsx

@@ -19,7 +19,7 @@ export function SiteNavigation() {
             <SheetTrigger>
               <AlignRight />
             </SheetTrigger>
-            <SheetContent side="right" className="bg-[#15181D] text-slate-50">
+            <SheetContent side="right" className="bg-x-black-900 text-slate-50">
               <ul className={`flex flex-col gap-4 text-slate-400`}>
                 {navigationItems.map((navItem) => (
                   <li key={navItem.path}>

app/root.tsx

@@ -20,7 +20,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body className="bg-[#15181D] text-slate-50 flex flex-col min-h-screen">
+      <body className="bg-x-black-900 text-slate-50 flex flex-col min-h-screen">
         <SiteNavigation />
         <main className="flex-1">{children}</main>
         <SiteFooter />

tailwind.config.ts

@@ -15,6 +15,12 @@ export default {
     extend: {
       colors: {
         lightGray: "#C7CBD1",
+        "x-blue-700": "#3E4F6B",
+        "x-blue-300": "#B1C8E7",
+        "x-blue-200": "#8E96A5",
+        "x-black-900": "#15181D",
+        "x-black-700": "#1B212A",
+        "x-black-500": "#2E3137",
         darkJoinButton: "#20242B",
         darkBorderJoinButton: "#2E3137",
         border: "hsl(var(--border))",