Fix favicon and add GitHub links to solution cards

index.html

@@ -9,7 +9,10 @@
       content="Democratizing innovation through inclusive, accessible solutions that empower diverse communities and promote social equity."
     />
     <meta name="author" content="Monynha Softwares Agency" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5b2c6f" />
+    <link rel="manifest" href="/site.webmanifest" />
 
     <meta
       property="og:title"

src/lib/solutions.ts

@@ -33,6 +33,32 @@ export interface GitHubRepository {
 
 type SupabaseSolutionRow = Database['public']['Tables']['solutions']['Row'];
 
+const sanitizeUrl = (value?: string | null): string | null => {
+  if (!value) {
+    return null;
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  const normalized = /^https?:\/\//i.test(trimmed)
+    ? trimmed
+    : `https://${trimmed}`;
+
+  try {
+    const url = new URL(normalized);
+    if (!['http:', 'https:'].includes(url.protocol)) {
+      return null;
+    }
+
+    return url.toString();
+  } catch {
+    return null;
+  }
+};
+
 const uniqueNonEmpty = (values: Array<string | null | undefined>): string[] => {
   const seen = new Set<string>();
   const result: string[] = [];
@@ -114,12 +140,14 @@ const buildFeatureList = (
     ? uniqueNonEmpty(repository.topics)
     : [];
 
+  const homepageUrl = sanitizeUrl(repository.homepage);
+
   const formattedUpdatedAt =
     formatDate(repository.updated_at ?? repository.pushed_at) ?? undefined;
 
   const metadata = uniqueNonEmpty([
     repository.language ? `Built with ${repository.language}.` : null,
-    repository.homepage ? `Live project: ${repository.homepage}` : null,
+    homepageUrl ? `Live project: ${homepageUrl}` : null,
     repository.stargazers_count > 0
       ? `${repository.stargazers_count} ⭐ stars on GitHub`
       : null,
@@ -153,6 +181,9 @@ export const mapGitHubRepoToContent = (
 
   const description = repository.description?.trim();
 
+  const repositoryUrl = sanitizeUrl(repository.html_url) ?? repository.html_url;
+  const websiteUrl = sanitizeUrl(repository.homepage);
+
   return {
     id: String(repository.id),
     title: fallback?.title ?? repository.name,
@@ -165,6 +196,8 @@ export const mapGitHubRepoToContent = (
     imageUrl: fallback?.imageUrl ?? null,
     features: buildFeatureList(repository, fallback),
     gradient,
+    repositoryUrl,
+    websiteUrl,
   };
 };
 
@@ -196,6 +229,8 @@ export const mapSupabaseSolutionToContent = (
     imageUrl: solution.image_url ?? fallback?.imageUrl ?? null,
     features,
     gradient,
+    repositoryUrl: fallback?.repositoryUrl ?? null,
+    websiteUrl: fallback?.websiteUrl ?? null,
   };
 };
 

src/pages/Projects.tsx

@@ -316,6 +316,47 @@ const Projects = () => {
                             </ul>
                           )}
 
+                          {(solution.repositoryUrl || solution.websiteUrl) && (
+                            <div className="mt-8 grid gap-3 sm:grid-cols-2">
+                              {solution.repositoryUrl && (
+                                <Button
+                                  asChild
+                                  variant="secondary"
+                                  className="w-full bg-neutral-900 text-white hover:bg-neutral-800"
+                                >
+                                  <a
+                                    href={solution.repositoryUrl}
+                                    target="_blank"
+                                    rel="noreferrer noopener"
+                                    aria-label={`${t('projects.viewGithub')} - ${solution.title}`}
+                                    className="flex items-center justify-center gap-2"
+                                  >
+                                    <Github className="h-4 w-4" />
+                                    {t('projects.viewGithub')}
+                                  </a>
+                                </Button>
+                              )}
+                              {solution.websiteUrl && (
+                                <Button
+                                  asChild
+                                  variant="outline"
+                                  className="w-full border-neutral-200 hover:border-brand-blue hover:text-brand-blue"
+                                >
+                                  <a
+                                    href={solution.websiteUrl}
+                                    target="_blank"
+                                    rel="noreferrer noopener"
+                                    aria-label={`${t('projects.liveDemo')} - ${solution.title}`}
+                                    className="flex items-center justify-center gap-2"
+                                  >
+                                    <ExternalLink className="h-4 w-4" />
+                                    {t('projects.liveDemo')}
+                                  </a>
+                                </Button>
+                              )}
+                            </div>
+                          )}
+
                           <div className="mt-10 flex flex-col sm:flex-row gap-3">
                             <Button
                               asChild

src/pages/Solutions.tsx

@@ -6,7 +6,7 @@ import Layout from '@/components/Layout';
 import Meta from '@/components/Meta';
 import PageBreadcrumb from '@/components/PageBreadcrumb';
 import { Link } from 'react-router-dom';
-import { ArrowRight, CheckCircle } from 'lucide-react';
+import { ArrowRight, CheckCircle, ExternalLink, Github } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { supabase } from '@/integrations/supabase';
 import {
@@ -170,6 +170,47 @@ const Solutions = () => {
                     </ul>
                   )}
 
+                  {(solution.repositoryUrl || solution.websiteUrl) && (
+                    <div className="mt-8 grid gap-3 sm:grid-cols-2">
+                      {solution.repositoryUrl && (
+                        <Button
+                          asChild
+                          variant="secondary"
+                          className="w-full bg-neutral-900 text-white hover:bg-neutral-800"
+                        >
+                          <a
+                            href={solution.repositoryUrl}
+                            target="_blank"
+                            rel="noreferrer noopener"
+                            aria-label={`${t('projects.viewGithub')} - ${solution.title}`}
+                            className="flex items-center justify-center gap-2"
+                          >
+                            <Github className="h-4 w-4" />
+                            {t('projects.viewGithub')}
+                          </a>
+                        </Button>
+                      )}
+                      {solution.websiteUrl && (
+                        <Button
+                          asChild
+                          variant="outline"
+                          className="w-full border-neutral-200 hover:border-brand-blue hover:text-brand-blue"
+                        >
+                          <a
+                            href={solution.websiteUrl}
+                            target="_blank"
+                            rel="noreferrer noopener"
+                            aria-label={`${t('projects.liveDemo')} - ${solution.title}`}
+                            className="flex items-center justify-center gap-2"
+                          >
+                            <ExternalLink className="h-4 w-4" />
+                            {t('projects.liveDemo')}
+                          </a>
+                        </Button>
+                      )}
+                    </div>
+                  )}
+
                   <div className="mt-10 flex flex-col sm:flex-row gap-3">
                     <Button
                       asChild

src/pages/solutions/[slug].tsx

@@ -6,7 +6,13 @@ import Meta from '@/components/Meta';
 import PageBreadcrumb from '@/components/PageBreadcrumb';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
-import { ArrowLeft, ArrowRight, CheckCircle } from 'lucide-react';
+import {
+  ArrowLeft,
+  ArrowRight,
+  CheckCircle,
+  ExternalLink,
+  Github,
+} from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { supabase } from '@/integrations/supabase';
 import type { GitHubRepository } from '@/lib/solutions';
@@ -199,6 +205,47 @@ const SolutionDetail = () => {
                   </Link>
                 </Button>
               </div>
+
+              {(displaySolution.repositoryUrl || displaySolution.websiteUrl) && (
+                <div className="mt-6 grid gap-3 sm:grid-cols-2">
+                  {displaySolution.repositoryUrl && (
+                    <Button
+                      asChild
+                      variant="secondary"
+                      className="w-full bg-neutral-900 text-white hover:bg-neutral-800"
+                    >
+                      <a
+                        href={displaySolution.repositoryUrl}
+                        target="_blank"
+                        rel="noreferrer noopener"
+                        aria-label={`${t('projects.viewGithub')} - ${displaySolution.title}`}
+                        className="flex items-center justify-center gap-2"
+                      >
+                        <Github className="h-4 w-4" />
+                        {t('projects.viewGithub')}
+                      </a>
+                    </Button>
+                  )}
+                  {displaySolution.websiteUrl && (
+                    <Button
+                      asChild
+                      variant="outline"
+                      className="w-full border-neutral-200 hover:border-brand-blue hover:text-brand-blue"
+                    >
+                      <a
+                        href={displaySolution.websiteUrl}
+                        target="_blank"
+                        rel="noreferrer noopener"
+                        aria-label={`${t('projects.liveDemo')} - ${displaySolution.title}`}
+                        className="flex items-center justify-center gap-2"
+                      >
+                        <ExternalLink className="h-4 w-4" />
+                        {t('projects.liveDemo')}
+                      </a>
+                    </Button>
+                  )}
+                </div>
+              )}
             </div>
 
             {displaySolution.imageUrl && (

src/types/solutions.ts

@@ -6,4 +6,6 @@ export interface SolutionContent {
   imageUrl?: string | null;
   features: string[];
   gradient: string;
+  repositoryUrl?: string | null;
+  websiteUrl?: string | null;
 }