UI: Add NeuroArc promotion to Hero and Sidebar with responsive styling

README.md

@@ -6,15 +6,21 @@ colorTo: blue
 sdk: docker
 app_port: 7860
 pinned: false
+short_description: 'Planck AI: Agentic search with reasoning and web access.'
 ---
 
-# Planck AI <img src="frontend/public/planck-logo.svg" width="40" height="40" align="center" />
+<div align="center">
+  <img src="frontend/public/planck-logo.svg" alt="Logo" width="100" />
+  <h1>Planck AI</h1>
+  <h3>Your Autonomous Reasoning Engine for the Web.</h3>
+  <p><strong>Think -> Search -> Solve</strong></p>
+</div>
 
-> **Your Autonomous Reasoning Engine for the Web.**
-> *Think. Search. Solve.*
+---
 
-Planck AI is an advanced agentic search interface that combines the reasoning power of **GPT-4o** and **GPT-4o Mini** with real-time web access. Unlike traditional chatbots, Planck AI thinks before it speaks—breaking down complex queries into steps, searching multiple sources, reading deep into documents, and verifying facts before giving you an answer.
+## ✨ Overview
 
+**Planck AI** is an advanced agentic search interface that combines the reasoning power of **GPT-4o** and **GPT-4o Mini** with real-time web access. Unlike traditional chatbots, Planck AI thinks before it speaks—breaking down complex queries into steps, searching multiple sources, reading deep into documents, and verifying facts before giving you an answer.
 ## 🚀 Features
 
 - **🧠 Agentic Reasoning**: Uses a multi-step "Thinking" process to plan, execute, and verify tasks.

frontend/src/components/Header.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Menu, Sparkles } from 'lucide-react'
+import { Menu, Sparkles, ExternalLink } from 'lucide-react'
 
 // ... LANGUAGES array remains same ...
 
@@ -52,8 +52,8 @@ export default function Header({ onToggleSidebar, onNewChat, currentLanguage = '
                 </div>
             </div>
 
-            {/* Right section - Language Selector */}
-            <div className="flex items-center gap-2">
+            {/* Right section - Language Selector & Promos */}
+            <div className="flex items-center gap-3">
                 <div
                     className="relative"
                     onMouseEnter={() => setIsDropdownOpen(true)}

frontend/src/components/HeroSection.jsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react'
-import { Sparkles } from 'lucide-react'
+import { Sparkles, ExternalLink } from 'lucide-react'
 
 export default function HeroSection({
     setInput,
@@ -9,10 +9,32 @@ export default function HeroSection({
 }) {
     return (
         <div className="h-full flex flex-col items-center justify-center px-4 relative pb-32">
+
+            {/* Featured Project Floating Badge (Responsive) */}
+            <a
+                href="https://huggingface.co/spaces/manojthapaa/NeuroArc"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="absolute right-6 top-6 sm:right-12 sm:top-10 md:right-20 md:top-14 lg:right-32 lg:top-16 flex items-center gap-3 px-3 py-2 md:px-4 md:py-3 rounded-2xl bg-zinc-900/40 border border-violet-500/30 hover:border-violet-500/60 hover:bg-zinc-900/60 transition-all duration-300 group backdrop-blur-md animate-fade-in-left shadow-[0_0_15px_-3px_rgba(139,92,246,0.2)] scale-90 sm:scale-95 md:scale-100 origin-top-right"
+            >
+                <div className="w-10 h-10 rounded-xl bg-violet-500/10 flex items-center justify-center group-hover:bg-violet-500/20 transition-colors">
+                    <img src="/neuroarc.svg" alt="" className="w-6 h-6 opacity-90" />
+                </div>
+                <div className="flex flex-col gap-1">
+                    <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium text-white group-hover:text-violet-200 transition-colors">NeuroArc</span>
+                        <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-violet-500 text-white tracking-wide">FREE</span>
+                        <ExternalLink className="w-3 h-3 text-zinc-500 group-hover:text-violet-400 transition-colors" />
+                    </div>
+                    <span className="text-[10px] text-zinc-400 group-hover:text-zinc-300">ATS-Friendly CV Builder • By Planck AI Creator</span>
+                </div>
+            </a>
+
             <div className="mb-12 flex flex-col items-center text-center">
-                <div className="mb-4 hidden md:block">
+                <div className="mb-6 hidden md:block">
                     <span className="text-xl font-medium text-pplx-text tracking-wider uppercase">Planck <span className="text-pplx-accent">AI</span></span>
                 </div>
+
                 <h1 className="text-4xl md:text-6xl font-serif font-light text-pplx-text tracking-tight animate-fade-in-up">
                     Where knowledge begins
                 </h1>
@@ -21,9 +43,6 @@ export default function HeroSection({
             {/* Input Area passed as child to avoid prop drilling */}
             {children}
 
-
-
-
             {/* Disclaimer */}
             <div className="absolute bottom-6 left-0 right-0 text-center space-y-2 animate-fade-in px-6">
                 <p className="text-sm text-pplx-muted">

frontend/src/components/Sidebar.jsx

@@ -1,4 +1,4 @@
-import { Plus, MessageSquare, Trash2, X, Menu, Sparkles, Zap, Brain } from 'lucide-react'
+import { Plus, MessageSquare, Trash2, X, Menu, Sparkles, Zap, Brain, Briefcase, ExternalLink } from 'lucide-react'
 
 /**
  * Sidebar Component
@@ -142,6 +142,32 @@ export default function Sidebar({
                     ))
                 )}
             </div>
+
+            {/* Featured Project: NeuroArc */}
+            <div className="p-4 border-t border-pplx-border mt-auto">
+                <a
+                    href="https://huggingface.co/spaces/manojthapaa/NeuroArc"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block group relative overflow-hidden rounded-xl border border-pplx-border hover:border-violet-500/50 transition-all duration-300 bg-gradient-to-br from-[#1c1c1c] to-[#151515] p-3"
+                >
+                    <div className="flex items-start justify-between mb-2">
+                        <div className="w-8 h-8 rounded-lg bg-violet-500/10 flex items-center justify-center group-hover:bg-violet-500/20 transition-colors">
+                            <img src="/neuroarc.svg" alt="NeuroArc" className="w-5 h-5 opacity-80 group-hover:opacity-100 transition-opacity" />
+                        </div>
+                        <ExternalLink className="w-3 h-3 text-pplx-muted group-hover:text-violet-400 transition-colors" />
+                    </div>
+                    <div className="flex flex-col gap-1">
+                        <div className="flex items-center gap-2">
+                            <h3 className="text-sm font-medium text-pplx-text group-hover:text-violet-200 transition-colors">NeuroArc</h3>
+                            <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-violet-500 text-white tracking-wide">FREE</span>
+                        </div>
+                        <p className="text-xs text-pplx-muted line-clamp-2 group-hover:text-zinc-400 transition-colors">ATS-Friendly CV Builder • By Planck AI Creator</p>
+                    </div>
+                    {/* Hover Glow Effect */}
+                    <div className="absolute inset-0 bg-violet-500/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
+                </a>
+            </div>
         </aside>
     )
 }