style: add secondary color & apply in feature section

peanutprotocol · Oct 16, 2024 · 1f8e9c2 · 1f8e9c2
1 parent 09f18ae
commit 1f8e9c2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/src/assets/illustrations/claim-chains-badge.svg b/src/assets/illustrations/claim-chains-badge.svg
diff --git a/src/components/Club/features.tsx b/src/components/Club/features.tsx
@@ -250,7 +250,7 @@ export function Features({ sections, marquee = { visible: false } }: FeaturesPro
                                                 }}
                                                 transition={{ type: 'spring', damping: 15 }}
                                                 key={index}
-                                                className={`feature ${index % 2 === 0 ? 'feature-primary' : ''}`}
+                                                className={`feature ${index % 2 === 0 ? 'feature-secondary' : ''}`}
                                             >
                                                 {item}
                                             </motion.div>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -3,6 +3,7 @@
 @tailwind utilities;
 :root {
     --primary-color: #f681df;
+    --secondary-color: #b23386;
     --background-color: #fbfdd8;
     --accent-color: #6340df;
 }
@@ -289,6 +290,10 @@ Firefox input[type='number'] {
     @apply bg-primary text-white;
 }
 
+.feature-secondary {
+    @apply border-secondary bg-secondary text-white;
+}
+
 /* Form styling */
 .input-text {
     @apply h-12 w-full rounded-md border-2 border-n-1 bg-white px-3 font-medium outline-none ring-2 ring-white transition-colors focus:border-purple-1 dark:border-white dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -59,8 +59,8 @@ module.exports = {
                 // background: '#FAF4F0',
                 red: '#FF0000',
                 black: '#000000',
-
                 primary: 'var(--primary-color)',
+                secondary: 'var(--secondary-color)',
                 background: 'var(--background-color)',
                 accent: 'var(--accent-color)',
             },