Refactor category metadata handling and enhance product banner styles (…

…#1531) - Introduced a new utility function `getCategoryMetadata` to streamline metadata retrieval for categories. - Removed outdated metadata checks in `generateMetadata` function, improving clarity and efficiency. - Updated styles in the `ProductBanner` component for improved responsiveness and visual appeal, including hover effects and spacing adjustments.
BasedHardware · Dec 12, 2024 · fc3372d · fc3372d
2 parents b3484c3 + ef8d155
commit fc3372d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 16 deletions.
diff --git a/frontend/src/app/apps/category/[category]/page.tsx b/frontend/src/app/apps/category/[category]/page.tsx
@@ -12,6 +12,7 @@ import {
   generateCollectionPageSchema,
   generateBreadcrumbSchema,
   generateAppListSchema,
+  getCategoryMetadata,
 } from '../../utils/metadata';
 import { ProductBanner } from '@/src/app/components/product-banner';
 import { getAppsByCategory } from '@/src/lib/api/apps';
@@ -41,14 +42,7 @@ async function getCategoryData(category: string) {
 export async function generateMetadata({ params }: CategoryPageProps): Promise<Metadata> {
   const { category } = params;
   const { categoryPlugins } = await getCategoryData(category);
-  const metadata = categoryMetadata[category];
-
-  if (!metadata) {
-    return {
-      title: 'Category Not Found - OMI Apps',
-      description: 'The requested category could not be found.',
-    };
-  }
+  const metadata = getCategoryMetadata(category);
 
   const title = `${metadata.title} - OMI Apps Marketplace`;
   const description = `${metadata.description} Browse ${categoryPlugins.length}+ ${category} apps for your OMI Necklace.`;

diff --git a/frontend/src/app/apps/utils/metadata.ts b/frontend/src/app/apps/utils/metadata.ts
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 import envConfig from '@/src/constants/envConfig';
+import { getCategoryMetadata as getUICategoryMetadata } from './category';
 
 export interface CategoryMetadata {
   title: string;
@@ -71,6 +72,30 @@ export const categoryMetadata: Record<string, CategoryMetadata> = {
       'service integration',
     ],
   },
+  utility: {
+    title: 'Utility Apps for OMI Necklace',
+    description:
+      'Essential utility apps for your OMI Necklace. Access practical tools and helpful functions through voice commands and AI assistance.',
+    keywords: [
+      'utility apps',
+      'tools',
+      'practical apps',
+      'voice commands',
+      'AI assistance',
+    ],
+  },
+  lifestyle: {
+    title: 'Lifestyle Apps for OMI Necklace',
+    description:
+      'Enhance your daily life with OMI lifestyle apps. From personal organization to habit tracking, make everyday tasks more intuitive with AI assistance.',
+    keywords: [
+      'lifestyle apps',
+      'personal organization',
+      'habit tracking',
+      'daily assistance',
+      'AI companion',
+    ],
+  },
 };
 
 const productInfo = {
@@ -207,3 +232,20 @@ export function getBaseMetadata(title: string, description: string): Metadata {
     },
   };
 }
+
+export function getCategoryMetadata(category: string): CategoryMetadata {
+  const uiMetadata = getUICategoryMetadata(category);
+
+  return {
+    title: `${uiMetadata.displayName} Apps for OMI Necklace`,
+    description: `${uiMetadata.description}. Browse and discover apps designed for voice control and ambient computing.`,
+    keywords: [
+      `${category.toLowerCase()} apps`,
+      'OMI apps',
+      'voice control',
+      'AI assistant',
+      'wearable apps',
+      ...uiMetadata.displayName.toLowerCase().split(' '),
+    ],
+  };
+}
diff --git a/frontend/src/app/components/product-banner/index.tsx b/frontend/src/app/components/product-banner/index.tsx
@@ -144,12 +144,12 @@ export function ProductBanner({
                     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"
+                    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 transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-500/25 active:scale-[0.98] sm:w-auto"
                   >
-                    <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 className="relative inline-flex items-center gap-2 px-6 py-3.5 text-base font-semibold text-white transition-all duration-300 sm:px-8 sm:py-4 sm:text-lg">
                       <span>Order Now</span>
                       <svg
-                        className="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
+                        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"
@@ -243,12 +243,12 @@ export function ProductBanner({
                   href={PRODUCT_INFO.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="relative mt-3 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"
+                  className="group relative mt-4 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 transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-500/25 active:scale-[0.98]"
                 >
-                  <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 className="relative inline-flex items-center gap-2 px-3 py-2 text-xs font-semibold text-white transition-all duration-300 sm:gap-2 sm:px-4 sm:py-2.5 sm:text-sm md:px-6 md:py-3 md:text-base">
                     <span>Order Now</span>
                     <svg
-                      className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
+                      className="h-3 w-3 transition-transform duration-300 group-hover:translate-x-1 sm:h-4 sm:w-4 md:h-5 md:w-5"
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -307,9 +307,9 @@ export function ProductBanner({
                   href={PRODUCT_INFO.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="group relative inline-flex items-center justify-center overflow-hidden rounded-lg 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"
+                  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 transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-500/25 active:scale-[0.98]"
                 >
-                  <span className="relative inline-flex items-center gap-1 rounded-[0.375rem] bg-[#1A1F2E] px-2 py-1 text-xs font-medium text-white transition-all duration-300 group-hover:bg-opacity-90 sm:gap-2 sm:px-4 sm:py-2 sm:text-sm md:px-6 md:py-3">
+                  <span className="relative inline-flex items-center gap-2 px-3 py-2 text-xs font-semibold text-white transition-all duration-300 sm:gap-2 sm:px-4 sm:py-2.5 sm:text-sm md:px-6 md:py-3 md:text-base">
                     <span>Order Now</span>
                     <svg
                       className="h-3 w-3 transition-transform duration-300 group-hover:translate-x-1 sm:h-4 sm:w-4 md:h-5 md:w-5"