From 23886e3ef2ee5d825f18cfcb5977b0dcba56a1c4 Mon Sep 17 00:00:00 2001
From: smian1 <smian1@gmail.com>
Date: Tue, 3 Dec 2024 21:55:19 -0800
Subject: [PATCH] Enhance UI with gradient animations and layout adjustments

- Added a new gradient animation for background effects in the ProductBanner and other components.
- Updated spacing in AppList and CategoryHeader for improved layout consistency.
- Refactored ProductBanner to enhance visual appeal and responsiveness with new gradient backgrounds and hover effects.
- Added 'rel="noreferrer"' to external links in the footer for security improvements.
---
 frontend/src/app/apps/components/app-list.tsx |   4 +-
 .../apps/components/category-header/index.tsx |   2 +-
 .../app/components/product-banner/index.tsx   | 330 ++++++++++++------
 frontend/src/app/globals.css                  |  17 +
 frontend/src/components/shared/footer.tsx     |   3 +
 5 files changed, 252 insertions(+), 104 deletions(-)

diff --git a/frontend/src/app/apps/components/app-list.tsx b/frontend/src/app/apps/components/app-list.tsx
index 10507857e..213cc3bfd 100644
--- a/frontend/src/app/apps/components/app-list.tsx
+++ b/frontend/src/app/apps/components/app-list.tsx
@@ -116,7 +116,7 @@ export default async function AppList() {
       <main className="relative z-0 mt-[260px]">
         <div className="px-6 pt-8">
           <div className="container mx-auto">
-            <div className="space-y-12">
+            <div className="space-y-16">
               {/* New This Week Section */}
               <section>
                 <div className="flex items-center justify-between">
@@ -180,7 +180,7 @@ export default async function AppList() {
 
               {/* Category Sections */}
               {Object.entries(sortedCategories).map(([category, plugins]) => (
-                <section key={category} id={category}>
+                <section key={category} id={category} className="space-y-8">
                   <div className="flex items-center justify-between">
                     <CategoryHeader category={category} totalApps={plugins.length} />
                     {plugins.length >
diff --git a/frontend/src/app/apps/components/category-header/index.tsx b/frontend/src/app/apps/components/category-header/index.tsx
index 516a6624b..ab978d544 100644
--- a/frontend/src/app/apps/components/category-header/index.tsx
+++ b/frontend/src/app/apps/components/category-header/index.tsx
@@ -12,7 +12,7 @@ export function CategoryHeader({ category, totalApps }: CategoryHeaderProps) {
   const Icon = metadata.icon;
 
   return (
-    <div className="mb-12">
+    <div>
       <div className="flex items-start space-x-4">
         <div className={`rounded-xl p-3 ${metadata.theme.accent}`}>
           <Icon className={`h-8 w-8 ${metadata.theme.primary}`} />
diff --git a/frontend/src/app/components/product-banner/index.tsx b/frontend/src/app/components/product-banner/index.tsx
index 3c130932b..5e638a2ce 100644
--- a/frontend/src/app/components/product-banner/index.tsx
+++ b/frontend/src/app/components/product-banner/index.tsx
@@ -24,45 +24,122 @@ export function ProductBanner({
     switch (variant) {
       case 'detail':
         return (
-          <div className="relative overflow-hidden rounded-2xl bg-[#1A1F2E] p-4 shadow-lg sm:p-6">
-            <div className="absolute inset-0 bg-gradient-to-r from-[#1A1F2E]/80 to-transparent" />
-            <div className="relative z-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-8">
-              <div className="flex items-center gap-4 sm:gap-8">
-                <div className="relative h-20 w-20 flex-shrink-0 overflow-hidden rounded-xl sm:h-32 sm:w-32">
-                  <Image
-                    src={
-                      isHovered
-                        ? PRODUCT_INFO.images.secondary
-                        : PRODUCT_INFO.images.primary
-                    }
-                    alt={PRODUCT_INFO.name}
-                    fill
-                    className="object-cover transition-transform duration-700 hover:scale-110"
-                  />
+          <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-[#1A1F2E] to-[#141824] p-1">
+            <div className="animate-gradient-x absolute inset-0 bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10" />
+            <div className="relative backdrop-blur-sm backdrop-filter">
+              <div className="relative z-10 grid grid-cols-1 gap-6 p-6 sm:grid-cols-[1fr,auto] sm:gap-8 md:p-8">
+                {/* Left Content */}
+                <div className="flex flex-col gap-6 sm:flex-row sm:items-center">
+                  {/* Image Container */}
+                  <div className="group relative h-24 w-24 flex-shrink-0 sm:h-36 sm:w-36">
+                    <div className="absolute -inset-0.5 rounded-2xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-75 blur-sm transition-opacity duration-500 group-hover:opacity-100" />
+                    <div className="relative h-full w-full overflow-hidden rounded-2xl">
+                      <Image
+                        src={
+                          isHovered
+                            ? PRODUCT_INFO.images.secondary
+                            : PRODUCT_INFO.images.primary
+                        }
+                        alt={PRODUCT_INFO.name}
+                        fill
+                        className="object-cover transition-all duration-700 group-hover:scale-110"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Text Content */}
+                  <div className="space-y-4">
+                    <div>
+                      <h3 className="bg-gradient-to-r from-white via-white to-white/75 bg-clip-text text-2xl font-bold text-transparent sm:text-3xl">
+                        Experience {appName} with {PRODUCT_INFO.name}
+                      </h3>
+                      <p className="mt-2 text-base text-gray-400 sm:text-lg">
+                        AI-Powered Voice Assistant - {PRODUCT_INFO.shipping}
+                      </p>
+                    </div>
+
+                    {/* Features */}
+                    <div className="flex flex-wrap gap-3">
+                      <span className="inline-flex items-center gap-1.5 rounded-full bg-cyan-500/10 px-3 py-1 text-sm text-cyan-300">
+                        <svg
+                          className="h-3.5 w-3.5"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
+                          <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
+                        </svg>
+                        Second Brain
+                      </span>
+                      <span className="inline-flex items-center gap-1.5 rounded-full bg-purple-500/10 px-3 py-1 text-sm text-purple-300">
+                        <svg
+                          className="h-3.5 w-3.5"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z" />
+                        </svg>
+                        Voice AI
+                      </span>
+                      <span className="inline-flex items-center gap-1.5 rounded-full bg-teal-500/10 px-3 py-1 text-sm text-teal-300">
+                        <svg
+                          className="h-3.5 w-3.5"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                        Built-in Memory
+                      </span>
+                    </div>
+                  </div>
                 </div>
-                <div className="min-w-0 space-y-2">
-                  <h3 className="truncate text-xl font-bold text-white sm:text-2xl">
-                    Experience {appName} with {PRODUCT_INFO.name}
-                  </h3>
-                  <p className="text-base text-gray-400 sm:text-lg">
-                    AI-Powered Voice Assistant - {PRODUCT_INFO.shipping}
-                  </p>
+
+                {/* Right Content - Price and CTA */}
+                <div className="flex flex-col items-center gap-4 sm:items-end">
+                  <div className="text-center sm:text-right">
+                    <div className="flex items-center gap-2 sm:justify-end">
+                      <span className="text-3xl font-bold text-white sm:text-4xl">
+                        {PRODUCT_INFO.price}
+                      </span>
+                      <span className="rounded-full bg-green-500/10 px-2.5 py-1 text-sm text-green-300">
+                        Shipping Now
+                      </span>
+                    </div>
+                    <p className="mt-1 text-sm text-gray-400">
+                      30-day money-back guarantee
+                    </p>
+                  </div>
+
+                  <a
+                    href={PRODUCT_INFO.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="group relative inline-flex items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-0.5 transition-all duration-300 ease-out hover:bg-gradient-to-br hover:shadow-lg hover:shadow-indigo-500/25"
+                  >
+                    <span className="relative inline-flex items-center gap-2 rounded-[0.625rem] bg-[#1A1F2E] px-6 py-3 text-base font-medium text-white transition-all duration-300 group-hover:bg-opacity-90 sm:text-lg">
+                      <span>Order Now</span>
+                      <svg
+                        className="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M13 7l5 5m0 0l-5 5m5-5H6"
+                        />
+                      </svg>
+                    </span>
+                  </a>
                 </div>
               </div>
-              <div className="flex items-center gap-3 sm:flex-col sm:items-end sm:gap-2">
-                <span className="text-2xl font-bold text-white sm:text-3xl">
-                  {PRODUCT_INFO.price}
-                </span>
-                <a
-                  href={PRODUCT_INFO.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group relative inline-flex flex-1 items-center justify-center overflow-hidden whitespace-nowrap rounded-xl bg-gradient-to-br from-[#7C3AED] via-[#6366F1] to-[#4F46E5] px-6 py-2.5 text-base font-medium text-white shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-500/25 active:translate-y-0 sm:flex-none"
-                >
-                  <span className="relative z-10">Order Now</span>
-                  <div className="absolute inset-0 bg-gradient-to-br from-[#6366F1] via-[#4F46E5] to-[#7C3AED] opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
-                </a>
-              </div>
             </div>
           </div>
         );
@@ -71,45 +148,71 @@ export function ProductBanner({
         return (
           <div
             className={cn(
-              'fixed bottom-6 right-6 z-50 overflow-hidden rounded-2xl bg-[#1A1F2E] shadow-lg transition-all duration-500',
+              'fixed bottom-6 right-6 z-50 overflow-hidden rounded-2xl bg-gradient-to-br from-[#1A1F2E] to-[#141824] p-1 shadow-lg transition-all duration-500',
               isHovered ? 'w-80' : 'w-48',
             )}
           >
-            <div className="relative p-4">
-              <div className="flex items-center gap-4">
-                <div className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-lg">
-                  <Image
-                    src={
-                      isHovered
-                        ? PRODUCT_INFO.images.secondary
-                        : PRODUCT_INFO.images.primary
-                    }
-                    alt={PRODUCT_INFO.name}
-                    fill
-                    className="object-cover transition-transform duration-700 hover:scale-110"
-                  />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <h3 className="truncate text-lg font-bold text-white">
-                    {PRODUCT_INFO.name}
-                  </h3>
-                  <p className="text-sm text-gray-400">{PRODUCT_INFO.price}</p>
+            <div className="animate-gradient-x absolute inset-0 bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10" />
+            <div className="relative backdrop-blur-sm backdrop-filter">
+              <div className="p-4">
+                <div className="flex items-center gap-4">
+                  <div className="group relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-xl">
+                    <div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-75 blur-sm transition-opacity duration-500 group-hover:opacity-100" />
+                    <div className="relative h-full w-full overflow-hidden rounded-xl">
+                      <Image
+                        src={
+                          isHovered
+                            ? PRODUCT_INFO.images.secondary
+                            : PRODUCT_INFO.images.primary
+                        }
+                        alt={PRODUCT_INFO.name}
+                        fill
+                        className="object-cover transition-all duration-700 group-hover:scale-110"
+                      />
+                    </div>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <h3 className="truncate text-lg font-bold text-white">
+                      {PRODUCT_INFO.name}
+                    </h3>
+                    <div className="flex items-center gap-2">
+                      <p className="text-sm text-gray-400">{PRODUCT_INFO.price}</p>
+                      <span className="rounded-full bg-green-500/10 px-2 py-0.5 text-xs text-green-300">
+                        Shipping Now
+                      </span>
+                    </div>
+                  </div>
                 </div>
-              </div>
-              <div
-                className={cn(
-                  'mt-4 transition-all duration-500',
-                  isHovered ? 'opacity-100' : 'opacity-0',
-                )}
-              >
-                <a
-                  href={PRODUCT_INFO.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="relative overflow-hidden rounded-xl bg-gradient-to-r from-[#6366F1] to-[#4F46E5] px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-500/25 active:scale-[0.98] active:duration-75"
+                <div
+                  className={cn(
+                    'mt-4 transition-all duration-500',
+                    isHovered ? 'opacity-100' : 'opacity-0',
+                  )}
                 >
-                  Order Now - Ships Worldwide
-                </a>
+                  <a
+                    href={PRODUCT_INFO.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="group relative inline-flex w-full items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-0.5 transition-all duration-300 ease-out hover:bg-gradient-to-br hover:shadow-lg hover:shadow-indigo-500/25"
+                  >
+                    <span className="relative inline-flex w-full items-center justify-center gap-2 rounded-[0.625rem] bg-[#1A1F2E] px-4 py-2 text-sm font-medium text-white transition-all duration-300 group-hover:bg-opacity-90">
+                      <span>Order Now</span>
+                      <svg
+                        className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M13 7l5 5m0 0l-5 5m5-5H6"
+                        />
+                      </svg>
+                    </span>
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -117,39 +220,64 @@ export function ProductBanner({
 
       case 'category':
         return (
-          <div className="relative overflow-hidden rounded-xl bg-[#1A1F2E] p-4 shadow-lg">
-            <div className="absolute inset-0 bg-gradient-to-r from-[#1A1F2E]/90 to-transparent" />
-            <div className="relative z-10 flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                <div className="relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-lg sm:h-20 sm:w-20">
-                  <Image
-                    src={
-                      isHovered
-                        ? PRODUCT_INFO.images.secondary
-                        : PRODUCT_INFO.images.primary
-                    }
-                    alt={PRODUCT_INFO.name}
-                    fill
-                    className="object-cover transition-transform duration-700 hover:scale-110"
-                  />
-                </div>
-                <div>
-                  <h3 className="text-base font-bold text-white sm:text-lg">
-                    Enhance your {category} experience
-                  </h3>
-                  <p className="text-xs text-gray-400 sm:text-sm">
-                    {PRODUCT_INFO.name} - {PRODUCT_INFO.price}
-                  </p>
+          <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#1A1F2E] to-[#141824] p-1">
+            <div className="animate-gradient-x absolute inset-0 bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10" />
+            <div className="relative backdrop-blur-sm backdrop-filter">
+              <div className="relative z-10 flex flex-wrap items-center justify-between gap-4 p-4 sm:flex-nowrap sm:gap-6 sm:p-6">
+                <div className="flex items-center gap-4">
+                  <div className="group relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-xl sm:h-20 sm:w-20">
+                    <div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-75 blur-sm transition-opacity duration-500 group-hover:opacity-100" />
+                    <div className="relative h-full w-full overflow-hidden rounded-xl">
+                      <Image
+                        src={
+                          isHovered
+                            ? PRODUCT_INFO.images.secondary
+                            : PRODUCT_INFO.images.primary
+                        }
+                        alt={PRODUCT_INFO.name}
+                        fill
+                        className="object-cover transition-all duration-700 group-hover:scale-110"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="bg-gradient-to-r from-white via-white to-white/75 bg-clip-text text-lg font-bold text-transparent sm:text-xl">
+                      Enhance your {category} experience
+                    </h3>
+                    <div className="mt-1 flex flex-wrap items-center gap-2">
+                      <p className="text-sm text-gray-400 sm:text-base">
+                        {PRODUCT_INFO.name} - {PRODUCT_INFO.price}
+                      </p>
+                      <span className="rounded-full bg-green-500/10 px-2 py-0.5 text-xs text-green-300 sm:text-sm">
+                        Shipping Now
+                      </span>
+                    </div>
+                  </div>
                 </div>
+                <a
+                  href={PRODUCT_INFO.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group relative inline-flex items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-0.5 transition-all duration-300 ease-out hover:bg-gradient-to-br hover:shadow-lg hover:shadow-indigo-500/25"
+                >
+                  <span className="relative inline-flex items-center gap-2 rounded-[0.625rem] bg-[#1A1F2E] px-4 py-2 text-sm font-medium text-white transition-all duration-300 group-hover:bg-opacity-90 sm:px-6 sm:py-3">
+                    <span>Order Now</span>
+                    <svg
+                      className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1 sm:h-5 sm:w-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M13 7l5 5m0 0l-5 5m5-5H6"
+                      />
+                    </svg>
+                  </span>
+                </a>
               </div>
-              <a
-                href={PRODUCT_INFO.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="relative overflow-hidden rounded-xl bg-gradient-to-r from-[#6366F1] to-[#4F46E5] px-4 py-2 text-xs font-semibold text-white transition-all duration-300 hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-500/25 active:scale-[0.98] active:duration-75 sm:px-6 sm:py-3 sm:text-sm"
-              >
-                Order Now
-              </a>
             </div>
           </div>
         );
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index f021f0bcb..11f10bf7e 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -12,3 +12,20 @@
     scrollbar-width: none;
   }
 }
+
+@keyframes gradient-x {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animate-gradient-x {
+  animation: gradient-x 15s ease infinite;
+  background-size: 400% 400%;
+}
diff --git a/frontend/src/components/shared/footer.tsx b/frontend/src/components/shared/footer.tsx
index b99648746..b8aead763 100644
--- a/frontend/src/components/shared/footer.tsx
+++ b/frontend/src/components/shared/footer.tsx
@@ -71,6 +71,7 @@ export default function Footer() {
                 className="text-zinc-400 hover:text-white hover:underline md:text-base"
                 href={'https://www.omi.me/pages/openglass'}
                 target="_blank"
+                rel="noreferrer"
               >
                 OpenGlass
               </a>
@@ -80,6 +81,7 @@ export default function Footer() {
                 className="text-zinc-400 hover:text-white hover:underline md:text-base"
                 href={'https://www.omi.me/'}
                 target="_blank"
+                rel="noreferrer"
               >
                 Friend
               </a>
@@ -89,6 +91,7 @@ export default function Footer() {
                 className="text-zinc-400 hover:text-white hover:underline md:text-base"
                 href={'https://www.omi.me/pages/friend-dev'}
                 target="_blank"
+                rel="noreferrer"
               >
                 Friend DEV KIT
               </a>