Update src/app/styles/variables.css

Merge version_1 into main

src/app/archive/page.tsx

@@ -15,10 +15,10 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="small"
         sizing="largeSmallSizeLargeTitles"
-        background="none"
+        background="floatingGradient"
         cardStyle="glass-elevated"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="solid"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
         headingFontWeight="bold"
     >
       <ReactLenis root>
@@ -26,17 +26,11 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
-          id: "/",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Community",
-          id: "/community",
-        },
+          name: "Community",          id: "/community"},
         {
-          name: "Archive",
-          id: "/archive",
-        },
+          name: "Archive",          id: "/archive"},
       ]}
       brandName="Selen"
     />
@@ -49,33 +43,13 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          id: "upload-share",
-          title: "Effortless Content Upload",
-          subtitle: "Upload any video, from short clips to feature-length movies.",
-          category: "Management",
-          value: "Unlimited Storage",
-        },
+          id: "upload-share",          title: "Effortless Content Upload",          subtitle: "Upload any video, from short clips to feature-length movies.",          category: "Management",          value: "Unlimited Storage"},
         {
-          id: "real-time-sync",
-          title: "Perfect Playback Synchronization",
-          subtitle: "Everyone sees the same timestamp, pause state, and playback speed.",
-          category: "Experience",
-          value: "WebSocket Sync",
-        },
+          id: "real-time-sync",          title: "Perfect Playback Synchronization",          subtitle: "Everyone sees the same timestamp, pause state, and playback speed.",          category: "Experience",          value: "WebSocket Sync"},
         {
-          id: "immersive-viewing",
-          title: "Cinematic Viewing Interface",
-          subtitle: "Ambient lighting, floating controls, and 3D audio visualization.",
-          category: "Immersion",
-          value: "Vision Pro UI",
-        },
+          id: "immersive-viewing",          title: "Cinematic Viewing Interface",          subtitle: "Ambient lighting, floating controls, and 3D audio visualization.",          category: "Immersion",          value: "Vision Pro UI"},
         {
-          id: "cross-device-streaming",
-          title: "Optimized for All Screens",
-          subtitle: "Seamlessly stream across Desktop, Mobile, Smart TV, and UltraWide.",
-          category: "Compatibility",
-          value: "Responsive",
-        },
+          id: "cross-device-streaming",          title: "Optimized for All Screens",          subtitle: "Seamlessly stream across Desktop, Mobile, Smart TV, and UltraWide.",          category: "Compatibility",          value: "Responsive"},
       ]}
       title="Your World of Content, Synchronized"
       description="Upload, organize, and experience videos and movies with friends in perfect harmony, with unmatched quality and control."
@@ -87,25 +61,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "faq-1",
-          title: "What video formats are supported?",
-          content: "Selen supports a wide range of video formats including MP4, MKV, AVI, and MOV, ensuring compatibility with your entire media library. Our advanced FFmpeg processing handles conversions seamlessly.",
-        },
+          id: "faq-1",          title: "What video formats are supported?",          content: "Selen supports a wide range of video formats including MP4, MKV, AVI, and MOV, ensuring compatibility with your entire media library. Our advanced FFmpeg processing handles conversions seamlessly."},
         {
-          id: "faq-2",
-          title: "How does 4K HDR streaming work?",
-          content: "Our platform utilizes adaptive streaming and CDN optimization to deliver stunning 4K HDR quality. The system intelligently adjusts stream quality based on your network conditions, ensuring the best possible visual experience without buffering.",
-        },
+          id: "faq-2",          title: "How does 4K HDR streaming work?",          content: "Our platform utilizes adaptive streaming and CDN optimization to deliver stunning 4K HDR quality. The system intelligently adjusts stream quality based on your network conditions, ensuring the best possible visual experience without buffering."},
         {
-          id: "faq-3",
-          title: "Can I stream long videos or movies?",
-          content: "Absolutely! Selen is optimized for all durations, from 24-minute clips to 2-3 hour movies and even 10+ hour videos. Our robust synchronization system ensures stability regardless of content length.",
-        },
+          id: "faq-3",          title: "Can I stream long videos or movies?",          content: "Absolutely! Selen is optimized for all durations, from 24-minute clips to 2-3 hour movies and even 10+ hour videos. Our robust synchronization system ensures stability regardless of content length."},
         {
-          id: "faq-4",
-          title: "How do I create and manage watch rooms?",
-          content: "Creating a watch room is intuitive. Simply select your video, set room permissions, and invite friends via ID or shareable link. You have full control over playback, chat, and voice settings within your personalized cinematic space.",
-        },
+          id: "faq-4",          title: "How do I create and manage watch rooms?",          content: "Creating a watch room is intuitive. Simply select your video, set room permissions, and invite friends via ID or shareable link. You have full control over playback, chat, and voice settings within your personalized cinematic space."},
       ]}
       sideTitle="Dedicated Support for Your Viewing"
       sideDescription="Find answers to common questions about video formats, streaming optimization, and room management for an uninterrupted experience."
@@ -119,54 +81,33 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Platform",
-          items: [
+          title: "Platform",          items: [
             {
-              label: "About Selen",
-              href: "#platform-info",
-            },
+              label: "About Selen",              href: "#platform-info"},
             {
-              label: "Features",
-              href: "/#platform-info",
-            },
+              label: "Features",              href: "/#platform-info"},
             {
-              label: "Pricing",
-              href: "/#subscription",
-            },
+              label: "Pricing",              href: "/#subscription"},
           ],
         },
         {
-          title: "Community",
-          items: [
+          title: "Community",          items: [
             {
-              label: "Communities",
-              href: "/community#community-features",
-            },
+              label: "Communities",              href: "/community#community-features"},
             {
-              label: "Friends",
-              href: "/community#community-features",
-            },
+              label: "Friends",              href: "/community#community-features"},
             {
-              label: "News",
-              href: "/community#news-panel",
-            },
+              label: "News",              href: "/community#news-panel"},
           ],
         },
         {
-          title: "Archive",
-          items: [
+          title: "Archive",          items: [
             {
-              label: "My Rooms",
-              href: "/archive#archive-features",
-            },
+              label: "My Rooms",              href: "/archive#archive-features"},
             {
-              label: "Upload",
-              href: "/archive#archive-features",
-            },
+              label: "Upload",              href: "/archive#archive-features"},
             {
-              label: "Support",
-              href: "/archive#faq-archive",
-            },
+              label: "Support",              href: "/archive#faq-archive"},
           ],
         },
       ]}

src/app/community/page.tsx

@@ -16,10 +16,10 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="small"
         sizing="largeSmallSizeLargeTitles"
-        background="none"
+        background="floatingGradient"
         cardStyle="glass-elevated"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="solid"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
         headingFontWeight="bold"
     >
       <ReactLenis root>
@@ -27,17 +27,11 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
-          id: "/",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Community",
-          id: "/community",
-        },
+          name: "Community",          id: "/community"},
         {
-          name: "Archive",
-          id: "/archive",
-        },
+          name: "Archive",          id: "/archive"},
       ]}
       brandName="Selen"
     />
@@ -50,33 +44,13 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          id: "groups-channels",
-          title: "Dynamic Communities",
-          subtitle: "Create groups, channels, and forums around any topic.",
-          category: "Social",
-          value: "Unlimited",
-        },
+          id: "groups-channels",          title: "Dynamic Communities",          subtitle: "Create groups, channels, and forums around any topic.",          category: "Social",          value: "Unlimited"},
         {
-          id: "friends-profiles",
-          title: "Friends & Profiles",
-          subtitle: "Find friends by ID, follow, and customize your digital identity.",
-          category: "Networking",
-          value: "Global Reach",
-        },
+          id: "friends-profiles",          title: "Friends & Profiles",          subtitle: "Find friends by ID, follow, and customize your digital identity.",          category: "Networking",          value: "Global Reach"},
         {
-          id: "rich-chat",
-          title: "Expressive Chat",
-          subtitle: "Instant messaging, reactions, stickers, and voice notes.",
-          category: "Communication",
-          value: "Rich Media",
-        },
+          id: "rich-chat",          title: "Expressive Chat",          subtitle: "Instant messaging, reactions, stickers, and voice notes.",          category: "Communication",          value: "Rich Media"},
         {
-          id: "hd-video-calls",
-          title: "Ultra-Low Latency Video Calls",
-          subtitle: "HD video, noise cancellation, and screen sharing powered by WebRTC.",
-          category: "Collaboration",
-          value: "WebRTC",
-        },
+          id: "hd-video-calls",          title: "Ultra-Low Latency Video Calls",          subtitle: "HD video, noise cancellation, and screen sharing powered by WebRTC.",          category: "Collaboration",          value: "WebRTC"},
       ]}
       title="Connect, Create, Conquer"
       description="Selen's Community Hub is a dynamic social space combining the best of Discord, Instagram, and Telegram for shared passions."
@@ -92,71 +66,17 @@ export default function LandingPage() {
       description="Stay informed with real-time updates, AI insights, and community news, all presented in a sleek, futuristic interface."
       blogs={[
         {
-          id: "news-update-2-5",
-          category: "Platform",
-          title: "Website Update v2.5.0",
-          excerpt: "New features, optimizations, and bug fixes for a smoother experience.",
-          imageSrc: "http://img.b2bpic.net/free-photo/isolated-screen-laptop-man-play-spaceship-flying-game_482257-121661.jpg",
-          imageAlt: "Futuristic AI control panel displaying website update",
-          authorName: "Selen AI",
-          authorAvatar: "http://img.b2bpic.net/free-vector/dark-infographic-steps-flat-design_52683-16866.jpg",
-          date: "2 hours ago",
-        },
+          id: "news-update-2-5",          category: "Platform",          title: "Website Update v2.5.0",          excerpt: "New features, optimizations, and bug fixes for a smoother experience.",          imageSrc: "http://img.b2bpic.net/free-photo/isolated-screen-laptop-man-play-spaceship-flying-game_482257-121661.jpg",          imageAlt: "Futuristic AI control panel displaying website update",          authorName: "Selen AI",          authorAvatar: "http://img.b2bpic.net/free-vector/dark-infographic-steps-flat-design_52683-16866.jpg",          date: "2 hours ago"},
         {
-          id: "ai-news-breakthrough",
-          category: "AI",
-          title: "AI Enhancements Revolutionize Streaming",
-          excerpt: "Discover how AI is making your co-watching experience even better.",
-          imageSrc: "http://img.b2bpic.net/free-photo/connecting-lines-dots-with-floating-particles_1048-12010.jpg",
-          imageAlt: "Abstract neural network for AI news",
-          authorName: "Selen AI",
-          authorAvatar: "http://img.b2bpic.net/free-photo/close-up-view-fluorescent-make-up-person-face_23-2148410083.jpg",
-          date: "Yesterday",
-        },
+          id: "ai-news-breakthrough",          category: "AI",          title: "AI Enhancements Revolutionize Streaming",          excerpt: "Discover how AI is making your co-watching experience even better.",          imageSrc: "http://img.b2bpic.net/free-photo/connecting-lines-dots-with-floating-particles_1048-12010.jpg",          imageAlt: "Abstract neural network for AI news",          authorName: "Selen AI",          authorAvatar: "http://img.b2bpic.net/free-photo/close-up-view-fluorescent-make-up-person-face_23-2148410083.jpg",          date: "Yesterday"},
         {
-          id: "weather-forecast",
-          category: "Global",
-          title: "Global Weather Outlook",
-          excerpt: "Real-time weather updates from around the world, powered by AI.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cosmonaut-ensuring-operational-readiness-mankind-survival-expedition-mars-upbeat-astronaut_482257-132658.jpg",
-          imageAlt: "Holographic weather forecast for a futuristic city",
-          authorName: "Selen AI",
-          authorAvatar: "http://img.b2bpic.net/free-photo/luminous-metaverse-background_23-2149539959.jpg",
-          date: "Today",
-        },
+          id: "weather-forecast",          category: "Global",          title: "Global Weather Outlook",          excerpt: "Real-time weather updates from around the world, powered by AI.",          imageSrc: "http://img.b2bpic.net/free-photo/cosmonaut-ensuring-operational-readiness-mankind-survival-expedition-mars-upbeat-astronaut_482257-132658.jpg",          imageAlt: "Holographic weather forecast for a futuristic city",          authorName: "Selen AI",          authorAvatar: "http://img.b2bpic.net/free-photo/luminous-metaverse-background_23-2149539959.jpg",          date: "Today"},
         {
-          id: "community-spotlight",
-          category: "Community",
-          title: "Community Spotlight: New Groups",
-          excerpt: "Highlighting vibrant new communities and trending topics on Selen.",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062948.jpg",
-          imageAlt: "Abstract network for community news",
-          authorName: "Selen Mod",
-          authorAvatar: "http://img.b2bpic.net/free-photo/people-celebrating-world-population-day_23-2151493200.jpg",
-          date: "3 days ago",
-        },
+          id: "community-spotlight",          category: "Community",          title: "Community Spotlight: New Groups",          excerpt: "Highlighting vibrant new communities and trending topics on Selen.",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062948.jpg",          imageAlt: "Abstract network for community news",          authorName: "Selen Mod",          authorAvatar: "http://img.b2bpic.net/free-photo/people-celebrating-world-population-day_23-2151493200.jpg",          date: "3 days ago"},
         {
-          id: "feature-roadmap",
-          category: "Platform",
-          title: "Upcoming: Voice Control Integration",
-          excerpt: "Get a sneak peek at the next big feature coming to Selen.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-92639.jpg",
-          imageAlt: "Glowing icon for new feature release",
-          authorName: "Selen Dev",
-          authorAvatar: "http://img.b2bpic.net/free-vector/recycling-icon-vector-environmental-conservation-symbol_53876-136334.jpg",
-          date: "Last week",
-        },
+          id: "feature-roadmap",          category: "Platform",          title: "Upcoming: Voice Control Integration",          excerpt: "Get a sneak peek at the next big feature coming to Selen.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-92639.jpg",          imageAlt: "Glowing icon for new feature release",          authorName: "Selen Dev",          authorAvatar: "http://img.b2bpic.net/free-vector/recycling-icon-vector-environmental-conservation-symbol_53876-136334.jpg",          date: "Last week"},
         {
-          id: "feature-refinement",
-          category: "Platform",
-          title: "Streamlining Interface: Minor Changes",
-          excerpt: "We're always refining Selen for a smoother, more intuitive experience.",
-          imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-laptop_23-2148166660.jpg",
-          imageAlt: "Minimalist X mark for removed features",
-          authorName: "Selen Dev",
-          authorAvatar: "http://img.b2bpic.net/free-photo/various-menus-beside-digital-tablet-with-blank-black-screen_23-2147844251.jpg",
-          date: "Earlier this month",
-        },
+          id: "feature-refinement",          category: "Platform",          title: "Streamlining Interface: Minor Changes",          excerpt: "We're always refining Selen for a smoother, more intuitive experience.",          imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-laptop_23-2148166660.jpg",          imageAlt: "Minimalist X mark for removed features",          authorName: "Selen Dev",          authorAvatar: "http://img.b2bpic.net/free-photo/various-menus-beside-digital-tablet-with-blank-black-screen_23-2147844251.jpg",          date: "Earlier this month"},
       ]}
     />
   </div>
@@ -166,15 +86,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       names={[
-        "Quantum Sync Technologies",
-        "Aether Stream Media",
-        "NeuralNet Solutions",
-        "Chrono-Play Systems",
-        "Aurora Vision Labs",
-        "Veridian Data Security",
-        "Apex Innovations Group",
-        "Global Connect Labs",
-      ]}
+        "Quantum Sync Technologies",        "Aether Stream Media",        "NeuralNet Solutions",        "Chrono-Play Systems",        "Aurora Vision Labs",        "Veridian Data Security",        "Apex Innovations Group",        "Global Connect Labs"]}
       title="Trusted by Visionaries"
       description="Our growing community of early adopters and strategic partners are shaping the future of entertainment."
     />
@@ -184,54 +96,33 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Platform",
-          items: [
+          title: "Platform",          items: [
             {
-              label: "About Selen",
-              href: "#platform-info",
-            },
+              label: "About Selen",              href: "#platform-info"},
             {
-              label: "Features",
-              href: "/#platform-info",
-            },
+              label: "Features",              href: "/#platform-info"},
             {
-              label: "Pricing",
-              href: "/#subscription",
-            },
+              label: "Pricing",              href: "/#subscription"},
           ],
         },
         {
-          title: "Community",
-          items: [
+          title: "Community",          items: [
             {
-              label: "Communities",
-              href: "/community#community-features",
-            },
+              label: "Communities",              href: "/community#community-features"},
             {
-              label: "Friends",
-              href: "/community#community-features",
-            },
+              label: "Friends",              href: "/community#community-features"},
             {
-              label: "News",
-              href: "/community#news-panel",
-            },
+              label: "News",              href: "/community#news-panel"},
           ],
         },
         {
-          title: "Archive",
-          items: [
+          title: "Archive",          items: [
             {
-              label: "My Rooms",
-              href: "/archive#archive-features",
-            },
+              label: "My Rooms",              href: "/archive#archive-features"},
             {
-              label: "Upload",
-              href: "/archive#archive-features",
-            },
+              label: "Upload",              href: "/archive#archive-features"},
             {
-              label: "Support",
-              href: "/archive#faq-archive",
-            },
+              label: "Support",              href: "/archive#faq-archive"},
           ],
         },
       ]}

src/app/page.tsx

@@ -20,10 +20,10 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="small"
         sizing="largeSmallSizeLargeTitles"
-        background="none"
+        background="floatingGradient"
         cardStyle="glass-elevated"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="solid"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
         headingFontWeight="bold"
     >
       <ReactLenis root>

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #000000;
   --card: #0c0c0c;
-  --foreground: #e0e0e0;
-  --primary-cta: #007AFF;
+  --foreground: #ffffff;
+  --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #222222;
+  --secondary-cta: #000000;
   --secondary-cta-text: #e0e0e0;
-  --accent: #007AFF;
-  --background-accent: #001A33;
+  --accent: #535353;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);