more clean, solagn: your safe space for dangerous ideas. colors should be a mixture of indigo , gold and bourdeaux but make it astehtic and simple

index.html

@@ -3,9 +3,55 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CreativePulse | Digital Creator & Artist</title>
+    <title>solagn | your safe space for dangerous ideas</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        indigo: {
+                            50: '#EEF2FF',
+                            100: '#E0E7FF',
+                            200: '#C7D2FE',
+                            300: '#A5B4FC',
+                            400: '#818CF8',
+                            500: '#6366F1',
+                            600: '#4F46E5',
+                            700: '#4338CA',
+                            800: '#3730A3',
+                            900: '#312E81',
+                        },
+                        gold: {
+                            50: '#FFFBEB',
+                            100: '#FEF3C7',
+                            200: '#FDE68A',
+                            300: '#FCD34D',
+                            400: '#FBBF24',
+                            500: '#F59E0B',
+                            600: '#D97706',
+                            700: '#B45309',
+                            800: '#92400E',
+                            900: '#78350F',
+                        },
+                        bordeaux: {
+                            50: '#FDF2F2',
+                            100: '#FCE7E7',
+                            200: '#FBCBCB',
+                            300: '#F9A8A8',
+                            400: '#F47272',
+                            500: '#EC4899',
+                            600: '#DC2626',
+                            700: '#B91C1C',
+                            800: '#991B1B',
+                            900: '#7F1D1D',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+<script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
     <style>
@@ -15,11 +61,11 @@
             scroll-behavior: smooth;
         }
         .hero-gradient {
-            background: linear-gradient(135deg, #000000 0%, #111827 100%);
-        }
+            background: linear-gradient(135deg, #1A103D 0%, #4C1D95 100%);
+}
         .text-gradient {
-            background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%);
-            -webkit-background-clip: text;
+            background: linear-gradient(90deg, #8B5FBF 0%, #D4A017 50%, #7F1D1D 100%);
+-webkit-background-clip: text;
             background-clip: text;
             color: transparent;
         }
@@ -39,8 +85,8 @@
             <div class="flex justify-between h-16">
                 <div class="flex">
                     <div class="flex-shrink-0 flex items-center">
-                        <span class="text-xl font-bold text-gray-900">CreativePulse</span>
-                    </div>
+                        <span class="text-xl font-bold text-gray-900">solagn</span>
+</div>
                 </div>
                 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                     <a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Work</a>
@@ -62,12 +108,12 @@
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
             <div class="text-center">
                 <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
-                    <span class="text-gradient">Digital Artistry</span> <br>Meets Strategic Vision
+                    <span class="text-gradient">solagn</span> <br>your safe space for dangerous ideas
                 </h1>
                 <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10">
-                    I transform ideas into visually stunning experiences. As a digital creator and creative director, I bridge the gap between art and strategy.
+                    A curated platform for radical thinking and unconventional creativity. Where boundaries are pushed and ideas are set free.
                 </p>
-                <div class="flex justify-center space-x-4">
+<div class="flex justify-center space-x-4">
                     <button class="bg-white text-gray-900 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-100 transition">
                         View Portfolio
                     </button>
@@ -90,8 +136,8 @@
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Project 1 -->
                 <div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
-                    <div class="h-64 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
-                        <span class="text-white text-xl font-bold">Digital Campaign</span>
+                    <div class="h-64 bg-gradient-to-r from-indigo-700 to-bordeaux-800 flex items-center justify-center">
+<span class="text-white text-xl font-bold">Digital Campaign</span>
                     </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold text-gray-900 mb-2">Brand Transformation</h3>
@@ -106,8 +152,8 @@
                 
                 <!-- Project 2 -->
                 <div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
-                    <div class="h-64 bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center">
-                        <span class="text-white text-xl font-bold">Social Media</span>
+                    <div class="h-64 bg-gradient-to-r from-gold-500 to-amber-600 flex items-center justify-center">
+<span class="text-white text-xl font-bold">Social Media</span>
                     </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold text-gray-900 mb-2">Influencer Campaign</h3>
@@ -122,8 +168,8 @@
                 
                 <!-- Project 3 -->
                 <div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
-                    <div class="h-64 bg-gradient-to-r from-orange-500 to-yellow-400 flex items-center justify-center">
-                        <span class="text-white text-xl font-bold">Interactive</span>
+                    <div class="h-64 bg-gradient-to-r from-bordeaux-700 to-purple-800 flex items-center justify-center">
+<span class="text-white text-xl font-bold">Interactive</span>
                     </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold text-gray-900 mb-2">Augmented Reality</h3>
@@ -144,10 +190,9 @@
             </div>
         </div>
     </div>
-
     <!-- About Section -->
-    <div class="py-20 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="py-20 bg-indigo-50">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="lg:flex lg:items-center lg:justify-between">
                 <div class="lg:w-1/2 mb-12 lg:mb-0">
                     <h2 class="text-3xl font-bold text-gray-900 mb-6">About Me</h2>
@@ -189,10 +234,9 @@
             </div>
         </div>
     </div>
-
     <!-- Services -->
-    <div class="py-20 bg-gray-900 text-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="py-20 bg-bordeaux-900 text-white">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold mb-4">Creative Services</h2>
                 <p class="text-gray-300 max-w-2xl mx-auto">Comprehensive solutions tailored to your brand's needs</p>
@@ -201,8 +245,8 @@
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Service 1 -->
                 <div class="bg-gray-800 p-8 rounded-xl card-hover">
-                    <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-6">
-                        <i data-feather="pen-tool" class="text-white"></i>
+                    <div class="w-12 h-12 bg-indigo-600 rounded-lg flex items-center justify-center mb-6">
+<i data-feather="pen-tool" class="text-white"></i>
                     </div>
                     <h3 class="text-xl font-bold mb-3">Creative Direction</h3>
                     <p class="text-gray-300 mb-4">
@@ -226,8 +270,8 @@
                 
                 <!-- Service 2 -->
                 <div class="bg-gray-800 p-8 rounded-xl card-hover">
-                    <div class="w-12 h-12 bg-pink-500 rounded-lg flex items-center justify-center mb-6">
-                        <i data-feather="camera" class="text-white"></i>
+                    <div class="w-12 h-12 bg-gold-500 rounded-lg flex items-center justify-center mb-6">
+<i data-feather="camera" class="text-white"></i>
                     </div>
                     <h3 class="text-xl font-bold mb-3">Content Creation</h3>
                     <p class="text-gray-300 mb-4">
@@ -251,8 +295,8 @@
                 
                 <!-- Service 3 -->
                 <div class="bg-gray-800 p-8 rounded-xl card-hover">
-                    <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-6">
-                        <i data-feather="trending-up" class="text-white"></i>
+                    <div class="w-12 h-12 bg-bordeaux-600 rounded-lg flex items-center justify-center mb-6">
+<i data-feather="trending-up" class="text-white"></i>
                     </div>
                     <h3 class="text-xl font-bold mb-3">Digital Strategy</h3>
                     <p class="text-gray-300 mb-4">
@@ -357,10 +401,9 @@
             </div>
         </div>
     </div>
-
     <!-- Contact CTA -->
-    <div class="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <div class="py-20 bg-gradient-to-r from-indigo-700 to-bordeaux-800 text-white">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
             <h2 class="text-3xl font-bold mb-6">Ready to elevate your brand?</h2>
             <p class="text-xl text-blue-100 max-w-2xl mx-auto mb-10">
                 Let's collaborate to create something extraordinary. I'm currently accepting select new projects.
@@ -370,16 +413,15 @@
             </button>
         </div>
     </div>
-
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-12">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <footer class="bg-bordeaux-900 text-white py-12">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div class="md:col-span-2">
                     <h3 class="text-xl font-bold mb-4">CreativePulse</h3>
                     <p class="text-gray-400 mb-6">
-                        Bridging the gap between artistic vision and strategic execution to create impactful digital experiences.
-                    </p>
+                        your safe space for dangerous ideas. cultivating radical thinking and unconventional creativity.
+</p>
                     <div class="flex space-x-4">
                         <a href="#" class="text-gray-400 hover:text-white">
                             <i data-feather="instagram"></i>
@@ -424,8 +466,8 @@
             </div>
             <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                 <p class="text-gray-400 text-sm mb-4 md:mb-0">
-                    © 2023 CreativePulse Studio. All rights reserved.
-                </p>
+                    © 2023 solagn. All rights reserved.
+</p>
                 <div class="flex space-x-6">
                     <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
                     <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>