Enhance UI with gradient animations and layout adjustments (#1470)

- 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

@@ -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 >

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}`} />