From b45d3765fb6079243f30fb1351307161e76f248a Mon Sep 17 00:00:00 2001
From: AlejandroMontijo <AlejandroMontijo@users.noreply.github.com>
Date: Thu, 6 Aug 2026 14:19:01 -0600
Subject: [PATCH 1/2] =?UTF-8?q?feat(ui):=20redise=C3=B1o=20neumorfismo=20s?=
 =?UTF-8?q?uave=20iOS=202026,=20cabecera=20unificada=20y=20tarjetas=20divi?=
 =?UTF-8?q?didas=20en=20rama=20interfaz?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feed/FeedWidgetCard.tsx  |   2 +-
 src/components/feed/PublicationCard.tsx |  10 +-
 src/components/layout/RightPanel.tsx    | 132 ++++++++++++------------
 src/components/layout/Sidebar.tsx       |   8 +-
 src/pages/FeedPage.tsx                  |  14 ++-
 5 files changed, 78 insertions(+), 88 deletions(-)

diff --git a/src/components/feed/FeedWidgetCard.tsx b/src/components/feed/FeedWidgetCard.tsx
index d50be0b..6eef5f7 100644
--- a/src/components/feed/FeedWidgetCard.tsx
+++ b/src/components/feed/FeedWidgetCard.tsx
@@ -14,7 +14,7 @@ interface FeedWidgetCardProps {
 
 export function FeedWidgetCard({ bgTint, icon, title, ctaLabel, ctaTo, children }: FeedWidgetCardProps) {
     return (
-        <div className={`${bgTint} overflow-hidden rounded-none md:rounded-xl border-y md:border border-border/30 my-0 md:my-2`}>
+        <div className={`overflow-hidden rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 p-4.5 mb-4 shadow-sm shadow-black/5 mx-1 md:mx-0 transition-all duration-300`}>
             <div className="px-4 py-3">
                 <div className="flex items-center justify-between mb-2.5">
                     <div className="flex items-center gap-2">
diff --git a/src/components/feed/PublicationCard.tsx b/src/components/feed/PublicationCard.tsx
index 7f5562c..c849a0f 100644
--- a/src/components/feed/PublicationCard.tsx
+++ b/src/components/feed/PublicationCard.tsx
@@ -318,10 +318,10 @@ function PublicationCardInner({
     };
 
     return (
-        <article ref={cardRef} className="max-md:border-b max-md:border-border/40 max-md:bg-background pt-4 pb-3 flex flex-col gap-2 md:liquid-glass md:liquid-glass-hover md:p-4 md:mb-5">
+        <article ref={cardRef} className="relative rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 p-4.5 mb-4 shadow-sm shadow-black/5 hover:shadow-md transition-all duration-300 flex flex-col gap-3.5 mx-1 md:mx-0">
             {/* Header */}
             {hideAuthor ? (
-                <div className="flex items-center justify-between px-4 md:px-0">
+                <div className="flex items-center justify-between">
                     <span className="text-xs text-muted-foreground">
                         {timeAgo(publication.created_at)}
                     </span>
@@ -330,7 +330,7 @@ function PublicationCardInner({
                     </Button>
                 </div>
             ) : (
-                <div className="flex items-center justify-between px-4 md:px-0">
+                <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2.5">
                         <Link
                             to={`/profile/${author.id}`}
@@ -453,7 +453,7 @@ function PublicationCardInner({
             )}
 
             {/* Content */}
-            <div className="px-4 md:px-0">
+            <div className="w-full">
                 <p className="whitespace-pre-wrap text-[14px] leading-[1.5] text-foreground">
                     {localContent}
                 </p>
@@ -474,7 +474,7 @@ function PublicationCardInner({
             </div>
 
             {/* Actions + counts */}
-            <div className="px-4 md:px-0">
+            <div className="w-full">
                 <div className="flex items-center gap-0.5 -ml-2">
                     <button
                         ref={likeButtonRef}
diff --git a/src/components/layout/RightPanel.tsx b/src/components/layout/RightPanel.tsx
index fe61f29..82be8ee 100644
--- a/src/components/layout/RightPanel.tsx
+++ b/src/components/layout/RightPanel.tsx
@@ -25,20 +25,12 @@ const NEWS = [
     { text: 'PotroNET v2 con nuevas funciones', date: 'Ene 2026' },
 ];
 
-
 export function RightPanel() {
     const { session, profile } = useAuth();
     const [suggested, setSuggested] = useState<SuggestedUser[]>([]);
 
-    const suggestedRef = useRef<HTMLDivElement>(null);
-    const featuresRef = useRef<HTMLDivElement>(null);
-    const newsRef = useRef<HTMLDivElement>(null);
-
-    // El widget de sugeridos monta hasta que llegan datos — sin `enabled`
-    // el efecto correría una sola vez con el ref vacío y nunca tendría tilt.
-    use3DTilt(suggestedRef, { enabled: suggested.length > 0 });
-    use3DTilt(featuresRef);
-    use3DTilt(newsRef);
+    const panelRef = useRef<HTMLDivElement>(null);
+    use3DTilt(panelRef);
 
     useEffect(() => {
         const fetchSuggested = async () => {
@@ -66,79 +58,85 @@ export function RightPanel() {
     }, [session?.access_token, profile?.id]);
 
     return (
-        <div className="sticky top-20 space-y-4">
-            {/* Suggested people */}
-            {suggested.length > 0 && (
-                <div ref={suggestedRef} className="liquid-glass liquid-glass-hover p-5">
+        <div className="sticky top-20">
+            {/* Unified Neumorphic Right Panel Card (iOS 2026) */}
+            <div
+                ref={panelRef}
+                className="relative overflow-hidden rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 p-5 shadow-sm shadow-black/5 space-y-5 transition-all duration-300"
+            >
+                {/* Suggested people */}
+                {suggested.length > 0 && (
+                    <div>
+                        <div className="mb-3 flex items-center gap-2">
+                            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/15">
+                                <UsersIcon className="h-3.5 w-3.5 text-primary" />
+                            </div>
+                            <span className="text-sm font-semibold">Personas sugeridas</span>
+                        </div>
+                        <div className="space-y-2.5">
+                            {suggested.map(u => (
+                                <Link key={u.id} to={`/profile/${u.id}`}
+                                    className="flex items-center gap-3 rounded-2xl p-2 transition-all duration-200 hover:bg-primary/8 group">
+                                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary ring-1 ring-transparent group-hover:ring-primary/30 transition-all">
+                                        {u.avatar_url
+                                            ? <img src={u.avatar_url} alt={u.full_name} className="h-8 w-8 rounded-full object-cover" />
+                                            : <UserIcon className="h-4 w-4" />
+                                        }
+                                    </div>
+                                    <div className="min-w-0">
+                                        <p className="truncate text-xs font-medium">{u.full_name}</p>
+                                        {u.career && <p className="truncate text-xs text-muted-foreground">{u.career.name}</p>}
+                                    </div>
+                                </Link>
+                            ))}
+                        </div>
+                        <Link to="/friends" className="mt-2.5 block text-center text-xs font-medium text-primary hover:text-primary/80 transition-colors">
+                            Ver más →
+                        </Link>
+                    </div>
+                )}
+
+                {/* Features section */}
+                <div className={suggested.length > 0 ? "pt-4 border-t border-border/40" : ""}>
                     <div className="mb-3 flex items-center gap-2">
                         <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/15">
-                            <UsersIcon className="h-3.5 w-3.5 text-primary" />
+                            <ZapIcon className="h-3.5 w-3.5 text-primary" />
                         </div>
-                        <span className="text-sm font-semibold">Personas sugeridas</span>
+                        <span className="text-sm font-semibold">Funciones PotroNET</span>
                     </div>
-                    <div className="space-y-3">
-                        {suggested.map(u => (
-                            <Link key={u.id} to={`/profile/${u.id}`}
-                                className="flex items-center gap-3 rounded-xl p-2 transition-all duration-200 hover:bg-primary/8 group">
-                                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary ring-1 ring-transparent group-hover:ring-primary/30 transition-all">
-                                    {u.avatar_url
-                                        ? <img src={u.avatar_url} alt={u.full_name} className="h-8 w-8 rounded-full object-cover" />
-                                        : <UserIcon className="h-4 w-4" />
-                                    }
-                                </div>
-                                <div className="min-w-0">
-                                    <p className="truncate text-xs font-medium">{u.full_name}</p>
-                                    {u.career && <p className="truncate text-xs text-muted-foreground">{u.career.name}</p>}
+                    <div className="space-y-2.5">
+                        {FEATURES.map((f, i) => (
+                            <div key={i} className="flex items-center gap-2.5 text-xs text-muted-foreground">
+                                <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                                    <f.icon className="h-3.5 w-3.5 text-primary" />
                                 </div>
-                            </Link>
+                                <span>{f.text}</span>
+                            </div>
                         ))}
                     </div>
-                    <Link to="/friends" className="mt-2 block text-center text-xs text-primary hover:text-primary/80 transition-colors">
-                        Ver más →
-                    </Link>
                 </div>
-            )}
 
-            {/* Features */}
-            <div ref={featuresRef} className="liquid-glass liquid-glass-hover p-5">
-                <div className="mb-3 flex items-center gap-2">
-                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/15">
-                        <ZapIcon className="h-3.5 w-3.5 text-primary" />
+                {/* News section */}
+                <div className="pt-4 border-t border-border/40">
+                    <div className="mb-3 flex items-center gap-2">
+                        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/15">
+                            <TrendingUpIcon className="h-3.5 w-3.5 text-primary" />
+                        </div>
+                        <span className="text-sm font-semibold">Novedades</span>
                     </div>
-                    <span className="text-sm font-semibold">Funciones PotroNET</span>
-                </div>
-                <div className="space-y-2.5">
-                    {FEATURES.map((f, i) => (
-                        <div key={i} className="flex items-center gap-2.5 text-xs text-muted-foreground">
-                            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-                                <f.icon className="h-3.5 w-3.5 text-primary" />
+                    <div className="space-y-3">
+                        {NEWS.map((n, i) => (
+                            <div key={i} className="border-b border-border/30 pb-2 last:border-0 last:pb-0">
+                                <p className="text-xs font-medium leading-tight">{n.text}</p>
+                                <p className="mt-0.5 text-xs text-muted-foreground">{n.date}</p>
                             </div>
-                            <span>{f.text}</span>
-                        </div>
-                    ))}
-                </div>
-            </div>
-
-            {/* News */}
-            <div ref={newsRef} className="liquid-glass liquid-glass-hover p-5">
-                <div className="mb-3 flex items-center gap-2">
-                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/15">
-                        <TrendingUpIcon className="h-3.5 w-3.5 text-primary" />
+                        ))}
                     </div>
-                    <span className="text-sm font-semibold">Novedades</span>
-                </div>
-                <div className="space-y-3">
-                    {NEWS.map((n, i) => (
-                        <div key={i} className="border-b border-border/30 pb-2 last:border-0 last:pb-0">
-                            <p className="text-xs font-medium leading-tight">{n.text}</p>
-                            <p className="mt-0.5 text-xs text-muted-foreground">{n.date}</p>
-                        </div>
-                    ))}
                 </div>
             </div>
 
             {/* Footer */}
-            <p className="px-1 text-xs text-muted-foreground/50">
+            <p className="mt-3 text-center text-xs text-muted-foreground/50">
                 PotroNET © 2026 · ITSON
             </p>
         </div>
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index f936f8a..0ff349c 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -64,13 +64,7 @@ export function Sidebar({ isOpen, onClose, collapsed, onToggleCollapse }: Sideba
 
             {/* Sidebar */}
             <aside
-                className={`fixed left-4 top-[88px] z-40 h-[calc(100dvh-112px)] ${sidebarWidth} transform rounded-2xl border transition-all duration-300 ease-in-out md:translate-x-0 ${isOpen ? 'translate-x-0' : '-translate-x-full'} shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]`}
-                style={{
-                    background: 'var(--glass-bg)',
-                    backdropFilter: 'blur(24px) saturate(1.2)',
-                    WebkitBackdropFilter: 'blur(24px) saturate(1.2)',
-                    borderColor: 'var(--glass-border)',
-                }}
+                className={`fixed left-4 top-[88px] z-40 h-[calc(100dvh-112px)] ${sidebarWidth} transform rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 shadow-sm shadow-black/5 transition-all duration-300 ease-in-out md:translate-x-0 ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}
             >
                 <div className="flex h-full flex-col p-2 overflow-hidden">
                     {/* Close button for mobile */}
diff --git a/src/pages/FeedPage.tsx b/src/pages/FeedPage.tsx
index 1076db1..67b573d 100644
--- a/src/pages/FeedPage.tsx
+++ b/src/pages/FeedPage.tsx
@@ -374,9 +374,9 @@ export function FeedPage() {
       {/* 3D Scrollytelling Hero Container */}
       <div ref={heroRef} className="perspective-1000 w-full mb-6">
         <div ref={card3DRef} className="preserve-3d space-y-4 will-change-transform">
-          {/* Welcome header */}
-          <div className="relative overflow-hidden px-4 pt-6 pb-5 md:liquid-glass md:px-6">
-            <div className="absolute -top-20 -right-20 h-40 w-40 rounded-full bg-primary/3 blur-xl" />
+          {/* Welcome & Create Post Unified Header Card */}
+          <div className="relative overflow-hidden p-5 rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 shadow-sm shadow-black/5 mx-1 md:mx-0 md:p-6 space-y-4">
+            <div className="absolute -top-20 -right-20 h-40 w-40 rounded-full bg-primary/3 blur-xl pointer-events-none" />
             <div className="relative">
               <div className="flex items-center justify-between">
                 <h1 ref={titleRef} className="text-[22px] leading-tight" style={{ fontVariationSettings: '"wght" 400' }}>
@@ -394,7 +394,7 @@ export function FeedPage() {
             {/* Mobile-only: tap to create post CTA — compact, glass-style */}
             <button
               onClick={() => setShowCreateModal(true)}
-              className="md:hidden mt-4 w-full flex items-center gap-3 rounded-2xl px-4 py-3 text-left neu-raised neu-pressable"
+              className="md:hidden w-full flex items-center gap-3 rounded-2xl px-4 py-3 text-left bg-muted/30 hover:bg-muted/50 border border-border/40 transition-all active:scale-[0.98]"
             >
               <div className="h-8 w-8 rounded-full overflow-hidden ring-1 ring-border/40 shrink-0">
                 {profile?.avatar_url ? (
@@ -408,11 +408,9 @@ export function FeedPage() {
               <span className="flex-1 text-sm text-muted-foreground">¿Qué quieres compartir?</span>
               <span className="shrink-0 rounded-full px-3 py-1 text-[11px] font-semibold text-primary-foreground" style={{ background: 'oklch(0.68 0.15 237)', boxShadow: '0 4px 12px oklch(0.68 0.15 237 / 0.35)' }}>Publicar</span>
             </button>
-          </div>
 
-          {/* Desktop Create Post */}
-          <div className="hidden md:block">
-            <div className="w-full md:max-w-4xl md:mx-auto md:liquid-glass md:p-5">
+            {/* Desktop Create Post embedded seamlessly in the same hero card */}
+            <div className="hidden md:block pt-3 border-t border-border/40">
               <CreatePost onPost={handleNewPost} />
             </div>
           </div>

From 5a3256260613e25060a493a58ca134dcc60358de Mon Sep 17 00:00:00 2001
From: AlejandroMontijo <246809504+AlejandroMontijo@users.noreply.github.com>
Date: Thu, 6 Aug 2026 15:32:28 -0600
Subject: [PATCH 2/2] fix(build): resolve TS6133 unused bgTint parameter to fix
 Vercel deployment build

---
 src/components/feed/FeedWidgetCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/feed/FeedWidgetCard.tsx b/src/components/feed/FeedWidgetCard.tsx
index 6eef5f7..d2ae1a7 100644
--- a/src/components/feed/FeedWidgetCard.tsx
+++ b/src/components/feed/FeedWidgetCard.tsx
@@ -14,7 +14,7 @@ interface FeedWidgetCardProps {
 
 export function FeedWidgetCard({ bgTint, icon, title, ctaLabel, ctaTo, children }: FeedWidgetCardProps) {
     return (
-        <div className={`overflow-hidden rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 p-4.5 mb-4 shadow-sm shadow-black/5 mx-1 md:mx-0 transition-all duration-300`}>
+        <div className={`${bgTint} overflow-hidden rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 p-4.5 mb-4 shadow-sm shadow-black/5 mx-1 md:mx-0 transition-all duration-300`}>
             <div className="px-4 py-3">
                 <div className="flex items-center justify-between mb-2.5">
                     <div className="flex items-center gap-2">