Added Open Graph and JSON-LD (#13)

* fix: footer background on mobile screen

* fix: typos

* feat: add og and json ld

* fix: failed pipeline

* feat: add address and duns number

Author: haricnugraha

app/(main)/page.tsx

@@ -1,5 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
+import type { Metadata } from "next";
+import type { Organization, WebPage, WithContext } from "schema-dts";
 
 import {
   Accordion,
@@ -17,7 +19,34 @@ import GridItemsContainer, {
 import data from "@/data.json";
 import { CaseStudiesCTA } from "./components/case-studies-cta";
 
-const { cta, location } = data;
+const {
+  cta,
+  hero: { heading, subheading },
+  location,
+  socials,
+  title,
+  url
+} = data;
+
+export const metadata: Metadata = {
+  description: subheading,
+  title: `${title} - ${heading}`,
+  openGraph: {
+    url,
+    type: "website",
+    title: `${title} - ${heading}`,
+    images: [
+      {
+        url: "https://hyperjump.tech/images/hyperjump-og.png",
+        width: 1200,
+        height: 630,
+        alt: "Hyperjump Logo",
+        type: "image/png"
+      }
+    ],
+    siteName: title
+  }
+};
 
 export default function Home() {
   return (
@@ -27,6 +56,7 @@ export default function Home() {
       <OpenSourceProducts />
       <Faqs />
       <Location />
+      <JsonLd />
     </>
   );
 }
@@ -200,3 +230,63 @@ function Location() {
     </GridItemsContainer>
   );
 }
+
+function JsonLd() {
+  return (
+    <>
+      <JsonLdOrganization />
+      <JsonLdWebsite />
+    </>
+  );
+}
+
+function JsonLdOrganization() {
+  const jsonLd: WithContext<Organization> = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: title,
+    url,
+    logo: "https://hyperjump.tech/images/hyperjump-colored.png",
+    address: {
+      "@type": "PostalAddress",
+      streetAddress: "D.Lab Building (6th floor), Jl. Riau No. 1",
+      addressLocality: "Gondangdia, Menteng, Jakarta Pusat",
+      addressRegion: "DKI Jakarta",
+      postalCode: "10350",
+      addressCountry: "ID"
+    },
+    contactPoint: {
+      "@type": "ContactPoint",
+      email: location.email,
+      contactType: "Sales",
+      areaServed: "Worldwide",
+      availableLanguage: ["English", "Indonesian"]
+    },
+    sameAs: socials.map(({ url }) => url),
+    duns: location.duns
+  };
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+    />
+  );
+}
+
+function JsonLdWebsite() {
+  const jsonLd: WithContext<WebPage> = {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    name: title,
+    url,
+    description: subheading
+  };
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+    />
+  );
+}

app/components/footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
           alt="Footer background"
           width={1440}
           height={308}
-          className="pointer-events-none w-full select-none"
+          className="pointer-events-none h-full w-full select-none"
           style={{
             background: "linear-gradient(44.24deg, #0D0B1E 0%, #161D29 109.69%)"
           }}

app/components/nav.tsx

@@ -152,7 +152,7 @@ export function NavContainer({ children }: { children: ReactNode }) {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  const showBorder = isScrolled ? "boder border-b-2" : "boder-none2";
+  const showBorder = isScrolled ? "border border-b-2" : "border-none";
 
   return (
     <div

bun.lock

@@ -32,6 +32,7 @@
     { "label": "Open Source", "href": "#open-source" },
     { "label": "FAQ", "href": "#faqs" }
   ],
+  "url": "https://hyperjump.tech",
   "clients": [
     {
       "name": "Amman Mineral Internasional",

data.json

@@ -28,6 +28,7 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "schema-dts": "^1.1.5",
     "sonner": "2.0.3",
     "tailwindcss-animate": "^1.0.7"
   },