Framer to Remix. As React Router 7+, Remix's successor.

import type { ReactNode } from "react";
import type { RouteHandle } from "@/root";
import { pageMeta } from "@/site/head";
import Template from "@/layouts/template";
import HomePage from "@/views/home";

export const meta = () =>
  pageMeta({
    meta: [
      { title: "Mehdi Hassan Portfolio" },
      { property: "og:title", content: "Mehdi Hassan Portfolio" },
      {
        property: "og:description",
        content:
          "Helping startups design & develop breathtaking products & websites. 🌟 Expert in copywriting, design, & development.",
      },
      { property: "og:url", content: "https://mehdihassan.framer.website/" },
      {
        property: "og:image",
        content: "https://framerusercontent.com/assets/h1lpVwE2dPBKzvByiXOr3ANSFDA.jpg",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:title", content: "Mehdi Hassan Portfolio" },
      {
        name: "twitter:description",
        content:
          "Helping startups design & develop breathtaking products & websites. 🌟 Expert in copywriting, design, & development.",
      },
      {
        name: "twitter:image",
        content: "https://framerusercontent.com/assets/h1lpVwE2dPBKzvByiXOr3ANSFDA.jpg",
      },
    ],
    links: [{ rel: "canonical", href: "https://mehdihassan.framer.website/" }],
  });

// Around the page, from the root route (see src/root.tsx).
export const handle: RouteHandle = {
  layout: (page: ReactNode, _params: Record<string, string>) => {
    return <Template key="layout">{page}</Template>;
  },
};

export default function Page() {
  return <HomePage />;
}