update: header hero & SEO web

Author: tanthanhdev

website/next-seo.config.js

@@ -3,17 +3,17 @@ const defaultSEOConfig = {
   titleTemplate: '%s - Tech Notes Hub',
   defaultTitle: 'Tech Notes Hub',
   description: 'A collection of tech notes, code snippets, and technical guides for developers',
-  canonical: 'https://technotes.example.com',
+  canonical: 'https://tech-notes-hub.vercel.app',
   openGraph: {
     type: 'website',
     locale: 'vi_VN',
-    url: 'https://technotes.example.com',
+    url: 'https://tech-notes-hub.vercel.app',
     siteName: 'Tech Notes Hub',
     title: 'Tech Notes Hub',
     description: 'A collection of tech notes, code snippets, and technical guides for developers',
     images: [
       {
-        url: 'https://technotes.example.com/og-image.jpg',
+        url: 'https://tech-notes-hub.vercel.app/og-image.jpg',
         width: 1200,
         height: 630,
         alt: 'Tech Notes Hub',

website/pages/sitemap.xml.js

@@ -1,6 +1,6 @@
 import { getContentAsBlogPosts } from '@/lib/content-mapper';
 
-const WEBSITE_URL = 'https://technotes.example.com';
+const WEBSITE_URL = 'https://tech-notes-hub.vercel.app';
 const LOCALES = ['en', 'vi'];
 
 function generateSiteMap(posts) {

website/public/robots.txt

@@ -3,7 +3,7 @@ User-agent: *
 Allow: /
 
 # Sitemap location
-Sitemap: https://technotes.example.com/sitemap.xml
+Sitemap: https://tech-notes-hub.vercel.app/sitemap.xml
 
 # Disallow admin paths
 User-agent: *

website/public/sitemap.txt

@@ -1,10 +1,10 @@
-https://technotes.example.com/en
-https://technotes.example.com/vi
-https://technotes.example.com/en/about
-https://technotes.example.com/vi/about
-https://technotes.example.com/en/blog
-https://technotes.example.com/vi/blog
-https://technotes.example.com/en/privacy
-https://technotes.example.com/vi/privacy
-https://technotes.example.com/en/terms
-https://technotes.example.com/vi/terms
+https://tech-notes-hub.vercel.app/en
+https://tech-notes-hub.vercel.app/vi
+https://tech-notes-hub.vercel.app/en/about
+https://tech-notes-hub.vercel.app/vi/about
+https://tech-notes-hub.vercel.app/en/blog
+https://tech-notes-hub.vercel.app/vi/blog
+https://tech-notes-hub.vercel.app/en/privacy
+https://tech-notes-hub.vercel.app/vi/privacy
+https://tech-notes-hub.vercel.app/en/terms
+https://tech-notes-hub.vercel.app/vi/terms

website/src/app/[locale]/layout.tsx

@@ -37,13 +37,13 @@ export async function generateMetadata({ params }: { params: { locale: string }
     openGraph: {
       title: 'Tech Notes Hub',
       description: description,
-      url: `https://technotes.example.com/${locale}`,
+      url: `https://tech-notes-hub.vercel.app/${locale}`,
       siteName: 'Tech Notes Hub',
       locale: locale,
       type: 'website',
       images: [
         {
-          url: 'https://technotes.example.com/og-image.jpg',
+          url: 'https://tech-notes-hub.vercel.app/og-image.jpg',
           width: 1200,
           height: 630,
           alt: 'Tech Notes Hub',
@@ -57,10 +57,10 @@ export async function generateMetadata({ params }: { params: { locale: string }
       creator: '@technotes',
     },
     alternates: {
-      canonical: `https://technotes.example.com/${locale}`,
+      canonical: `https://tech-notes-hub.vercel.app/${locale}`,
       languages: {
-        en: 'https://technotes.example.com/en',
-        vi: 'https://technotes.example.com/vi',
+        en: 'https://tech-notes-hub.vercel.app/en',
+        vi: 'https://tech-notes-hub.vercel.app/vi',
       },
     },
   };

website/src/app/[locale]/page.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/componen
 import { Locale, getTranslationsFromNamespaces } from "@/lib/i18n/settings";
 import { Metadata } from "next";
 import { getContentAsBlogPosts } from "@/lib/content-mapper";
+import { Github } from "lucide-react";
 
 type Params = Promise<{ locale: Locale }>;
 
@@ -47,11 +48,16 @@ export default async function HomePage({ params }: { params: Params }) {
                   {t.hero.primaryCTA}
                 </Button>
               </Link>
-              <Link href={`/${locale}/about`} className="cursor-pointer">
-                <Button variant="outline" size="lg">
-                  {t.hero.secondaryCTA}
+              <a href="https://github.com/tech-notes-hub/tech-notes" target="_blank" rel="noreferrer" className="cursor-pointer">
+                <Button
+                  variant="outline"
+                  size="lg"
+                  className="flex items-center gap-2 relative overflow-hidden bg-gradient-to-r from-primary/20 to-primary/10 border-primary/50 animate-pulse hover:animate-none hover:bg-primary/20 transition-all duration-300"
+                >
+                  <Github className="h-4 w-4" />
+                  {t.hero.contributeCTA}
                 </Button>
-              </Link>
+              </a>
             </div>
           </div>
         </div>

website/src/app/api/robots.txt/route.ts

@@ -1,4 +1,4 @@
-const WEBSITE_URL = 'https://technotes.example.com';
+const WEBSITE_URL = 'https://tech-notes-hub.vercel.app';
 
 export async function GET() {
   const robotsTxt = `

website/src/app/api/sitemap.xml/route.ts

@@ -1,7 +1,7 @@
 import { getContentAsBlogPosts } from '@/lib/content-mapper';
 import { locales } from '@/lib/i18n/settings';
 
-const WEBSITE_URL = 'https://technotes.example.com';
+const WEBSITE_URL = 'https://tech-notes-hub.vercel.app';
 
 export async function GET() {
   // Fetch all blog posts from all locales

website/src/components/layout/footer.tsx

@@ -19,7 +19,7 @@ export function Footer({ translations, locale }: FooterProps) {
   return (
     <footer className="w-full border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="w-full flex flex-col sm:flex-row h-auto sm:h-16 md:h-20 items-center px-4 md:px-6 lg:px-8 py-4 sm:py-0">
-        <div className="flex flex-1 flex-col sm:flex-row items-center sm:items-start sm:justify-between w-full gap-4 sm:gap-0">
+        <div className="flex flex-1 flex-col sm:flex-row items-center sm:justify-between w-full gap-4 sm:gap-0">
           <div className="flex-shrink-0 text-center sm:text-left">
             <p className="text-sm text-muted-foreground">
               {t.footer?.copyright || `© ${currentYear} Tech Notes Hub. MIT License.`}

website/src/data/i18n/en/home.json

@@ -11,6 +11,7 @@
     "title": "Tech Notes Hub",
     "description": "Discover technical notes, code snippets, and guides to level up your skills",
     "primaryCTA": "Browse Articles",
-    "secondaryCTA": "About Hub"
+    "secondaryCTA": "About Hub",
+    "contributeCTA": "Contribute on GitHub"
   }
 }

website/src/data/i18n/vi/home.json

@@ -11,6 +11,7 @@
     "title": "Tech Notes Hub",
     "description": "Khám phá các ghi chú kỹ thuật, đoạn mã nguồn và hướng dẫn để nâng cao kỹ năng của bạn",
     "primaryCTA": "Xem bài viết",
-    "secondaryCTA": "Giới thiệu"
+    "secondaryCTA": "Giới thiệu",
+    "contributeCTA": "Đóng góp trên GitHub"
   }
 }

website/src/lib/metadata.ts

@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import { Locale, locales } from './i18n/settings';
 
-const WEBSITE_URL = 'https://technotes.example.com';
+const WEBSITE_URL = 'https://tech-notes-hub.vercel.app';
 
 interface MetadataProps {
   title?: string;