Add landing pages for lookup subfeatures 🛬

wotschofsky · Sep 18, 2024 · f4a1095 · f4a1095
1 parent cbd48a7
commit f4a1095
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 14 deletions.
diff --git a/app/(landing)/_components/trusted-by-logos.tsx b/app/(landing)/_components/trusted-by-logos.tsx
@@ -1,9 +1,18 @@
 import Link from 'next/link';
 import type { FC } from 'react';
 
-export const TrustedByLogos: FC = () => (
+type TrustedByLogoProps = {
+  subpage?: string;
+};
+
+const formatHref = (domain: string, subpage?: string) => {
+  const suffix = subpage ? `/${subpage}` : '';
+  return `/lookup/${domain}${suffix}`;
+};
+
+export const TrustedByLogos: FC<TrustedByLogoProps> = ({ subpage }) => (
   <div className="flex flex-wrap justify-center gap-8 [&_*]:h-7 [&_*]:w-auto">
-    <Link href="/lookup/cloudflare.com">
+    <Link href={formatHref('cloudflare.com', subpage)}>
       <span className="sr-only">Cloudflare</span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -29,7 +38,7 @@ export const TrustedByLogos: FC = () => (
       </svg>
     </Link>
 
-    <Link href="/lookup/atlassian.com">
+    <Link href={formatHref('atlassian.com', subpage)}>
       <span className="sr-only">Atlassian</span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -49,7 +58,7 @@ export const TrustedByLogos: FC = () => (
       </svg>
     </Link>
 
-    <Link href="/lookup/heroku.com">
+    <Link href={formatHref('heroku.com', subpage)}>
       <span className="sr-only">Heroku</span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -65,7 +74,7 @@ export const TrustedByLogos: FC = () => (
       </svg>
     </Link>
 
-    <Link href="/lookup/webflow.com">
+    <Link href={formatHref('webflow.com', subpage)}>
       <span className="sr-only">Webflow</span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -117,7 +126,7 @@ export const TrustedByLogos: FC = () => (
       </svg>
     </Link>
 
-    <Link href="/lookup/sap.com">
+    <Link href={formatHref('sap.com', subpage)}>
       <span className="sr-only">SAP</span>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 1223">
         <path

diff --git a/app/(landing)/_components/trusted-by-section.tsx b/app/(landing)/_components/trusted-by-section.tsx
@@ -2,7 +2,9 @@ import type { FC, HTMLAttributes } from 'react';
 
 import { TrustedByLogos } from './trusted-by-logos';
 
-type TrustedBySectionProps = HTMLAttributes<HTMLElement>;
+type TrustedBySectionProps = HTMLAttributes<HTMLElement> & {
+  subpage?: string;
+};
 
 export const TrustedBySection: FC<TrustedBySectionProps> = (props) => (
   <section {...props}>
@@ -11,7 +13,7 @@ export const TrustedBySection: FC<TrustedBySectionProps> = (props) => (
         Trusted by experts at
       </h2>
 
-      <TrustedByLogos />
+      <TrustedByLogos subpage={props.subpage} />
 
       <a
         href="https://www.producthunt.com/posts/domain-digger?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-domain&#0045;digger"

diff --git a/app/(landing)/certs/page.tsx b/app/(landing)/certs/page.tsx
@@ -0,0 +1,36 @@
+import type { FC } from 'react';
+
+import { SearchForm } from '../../_components/search-form';
+import { SponsorsSection } from '../_components/sponsors-section';
+import { AuthorSection } from './../_components/author-section';
+import { TrustedBySection } from './../_components/trusted-by-section';
+
+export const metadata = {
+  openGraph: {
+    url: '/certs',
+  },
+  alternates: {
+    canonical: '/certs',
+  },
+};
+
+const CertsLandingPage: FC = () => {
+  return (
+    <div className="container space-y-16 pt-24">
+      <section>
+        <h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
+          Find certificate history for any domain
+        </h1>
+        <div className="mx-auto max-w-4xl">
+          <SearchForm subpage="certs" autofocus />
+        </div>
+      </section>
+
+      <TrustedBySection subpage="certs" />
+      <AuthorSection />
+      <SponsorsSection />
+    </div>
+  );
+};
+
+export default CertsLandingPage;
diff --git a/app/(landing)/map/page.tsx b/app/(landing)/map/page.tsx
@@ -0,0 +1,36 @@
+import type { FC } from 'react';
+
+import { SearchForm } from '../../_components/search-form';
+import { SponsorsSection } from '../_components/sponsors-section';
+import { AuthorSection } from './../_components/author-section';
+import { TrustedBySection } from './../_components/trusted-by-section';
+
+export const metadata = {
+  openGraph: {
+    url: '/map',
+  },
+  alternates: {
+    canonical: '/map',
+  },
+};
+
+const MapLandingPage: FC = () => {
+  return (
+    <div className="container space-y-16 pt-24">
+      <section>
+        <h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
+          Run DNS lookups across multiple regions
+        </h1>
+        <div className="mx-auto max-w-4xl">
+          <SearchForm subpage="map" autofocus />
+        </div>
+      </section>
+
+      <TrustedBySection subpage="map" />
+      <AuthorSection />
+      <SponsorsSection />
+    </div>
+  );
+};
+
+export default MapLandingPage;
diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx
@@ -15,15 +15,15 @@ export const metadata = {
   },
 };
 
-const Home: FC = () => {
+const MainLandingPage: FC = () => {
   return (
     <div className="container space-y-16 pt-24">
       <section>
         <h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
           Get details about any Domain
         </h1>
         <div className="mx-auto max-w-4xl">
-          <SearchForm autofocus={true} />
+          <SearchForm autofocus />
         </div>
       </section>
 
@@ -35,4 +35,4 @@ const Home: FC = () => {
   );
 };
 
-export default Home;
+export default MainLandingPage;
diff --git a/app/(landing)/subdomains/page.tsx b/app/(landing)/subdomains/page.tsx
@@ -0,0 +1,36 @@
+import type { FC } from 'react';
+
+import { SearchForm } from '../../_components/search-form';
+import { SponsorsSection } from '../_components/sponsors-section';
+import { AuthorSection } from './../_components/author-section';
+import { TrustedBySection } from './../_components/trusted-by-section';
+
+export const metadata = {
+  openGraph: {
+    url: '/subdomains',
+  },
+  alternates: {
+    canonical: '/subdomains',
+  },
+};
+
+const SubdomainsLandingPage: FC = () => {
+  return (
+    <div className="container space-y-16 pt-24">
+      <section>
+        <h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
+          Find hidden subdomains for any domain
+        </h1>
+        <div className="mx-auto max-w-4xl">
+          <SearchForm subpage="subdomains" autofocus />
+        </div>
+      </section>
+
+      <TrustedBySection subpage="subdomains" />
+      <AuthorSection />
+      <SponsorsSection />
+    </div>
+  );
+};
+
+export default SubdomainsLandingPage;
diff --git a/app/(landing)/whois/page.tsx b/app/(landing)/whois/page.tsx
@@ -0,0 +1,36 @@
+import type { FC } from 'react';
+
+import { SearchForm } from '../../_components/search-form';
+import { SponsorsSection } from '../_components/sponsors-section';
+import { AuthorSection } from './../_components/author-section';
+import { TrustedBySection } from './../_components/trusted-by-section';
+
+export const metadata = {
+  openGraph: {
+    url: '/whois',
+  },
+  alternates: {
+    canonical: '/whois',
+  },
+};
+
+const WhoisLandingPage: FC = () => {
+  return (
+    <div className="container space-y-16 pt-24">
+      <section>
+        <h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
+          Find WHOIS information for any domain
+        </h1>
+        <div className="mx-auto max-w-4xl">
+          <SearchForm subpage="whois" autofocus />
+        </div>
+      </section>
+
+      <TrustedBySection subpage="whois" />
+      <AuthorSection />
+      <SponsorsSection />
+    </div>
+  );
+};
+
+export default WhoisLandingPage;
diff --git a/app/_components/footer.tsx b/app/_components/footer.tsx
@@ -49,9 +49,13 @@ export const Footer: FC = () => (
       <div className="flex w-full items-center justify-between">
         <div className="flex flex-col gap-4">
           <div>
-            <h2 className="font-semibold">Free Tools</h2>
+            <h2 className="font-semibold mb-1">Free Tools</h2>
             <div className="space-y-1 text-sm underline decoration-dotted underline-offset-4 [&>*]:block">
               <Link href="/">DNS Lookup</Link>
+              <Link href="/map">Global DNS Lookup</Link>
+              <Link href="/whois">WHOIS Lookup</Link>
+              <Link href="/certs">Certificate Logs</Link>
+              <Link href="/subdomains">Subdomains Finder</Link>
             </div>
           </div>
         </div>

diff --git a/app/_components/search-form.tsx b/app/_components/search-form.tsx
@@ -104,6 +104,7 @@ enum FormStates {
 type SearchFormProps = {
   initialValue?: string;
   autofocus?: boolean;
+  subpage?: string;
 };
 
 export const SearchForm: FC<SearchFormProps> = (props) => {
@@ -135,7 +136,10 @@ export const SearchForm: FC<SearchFormProps> = (props) => {
     (domain: string) => {
       setState(FormStates.Submitting);
 
-      const target = `/lookup/${domain}`;
+      let target = `/lookup/${domain}`;
+      if (props.subpage) {
+        target += `/${props.subpage}`;
+      }
 
       if (pathname === target) {
         router.refresh();
@@ -147,7 +151,7 @@ export const SearchForm: FC<SearchFormProps> = (props) => {
 
       router.push(target);
     },
-    [setState, router, pathname]
+    [setState, router, pathname, props.subpage]
   );
 
   const handleSubmit = useCallback(