add badge google play

mayconline · Mar 8, 2023 · afbdbe5 · afbdbe5 · vercel · Mar 8, 2023
1 parent 9d45544
commit afbdbe5
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 17 deletions.
diff --git a/web/next.config.js b/web/next.config.js
@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'play.google.com',
+      },
+    ],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/web/src/components/footer.tsx b/web/src/components/footer.tsx
@@ -0,0 +1,10 @@
+export function Footer() {
+  return (
+    <footer className="flex items-end justify-center mt-6 text-sm font-normal text-gray-400">
+      <span className="text-center">
+        Google Play e o logotipo do Google Play são marcas registradas da Google
+        LLC.
+      </span>
+    </footer>
+  );
+}
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
@@ -0,0 +1,21 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export function Header() {
+  return (
+    <header className="flex items-center justify-end">
+      <Link
+        className="cursor-pointer"
+        href="https://play.google.com/store/apps/details?id=com.app.imccalc&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"
+      >
+        <Image
+          src="https://play.google.com/intl/en_us/badges/static/images/badges/pt-br_badge_web_generic.png"
+          width={169}
+          height={65}
+          alt="Disponível no Google Play"
+          priority
+        />
+      </Link>
+    </header>
+  );
+}
diff --git a/web/src/components/hero.tsx b/web/src/components/hero.tsx
@@ -0,0 +1,16 @@
+import Image from 'next/image';
+
+export function Hero() {
+  return (
+    <figure className="flex flex-col items-center gap-6">
+      <Image
+        src="/logo.svg"
+        width={300}
+        height={83}
+        alt="Logo da Égide Saúde"
+        priority
+      />
+      <h1 className="font-bold text-2xl">Calculadora de IMC</h1>
+    </figure>
+  );
+}
diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
@@ -1,35 +1,35 @@
 import Head from 'next/head';
-import Image from 'next/image';
-
-import { IMCForm } from '../components/IMCForm';
+import { Header } from '../components/header';
+import { Hero } from '../components/hero';
 import { LinkOMS } from '../components/linkOMS';
+import { IMCForm } from '../components/IMCForm';
 import { ResultList } from '../components/resultList';
+import { Footer } from '../components/footer';
 
 export default function Home() {
   return (
     <>
       <Head>
         <title>Calculadora de IMC</title>
-        <meta name="description" content="Calculadora de IMC" />
+        <meta name="theme-color" content="#111827" />
+        <meta name="description" content="IMC Calc - Calculadora de IMC" />
+        <meta name="robots" content="index, follow" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+
         <link rel="icon" href="/favicon.ico" />
+        <link rel="manifest" href="manifest.json" />
       </Head>
       <div className="min-h-screen p-4 flex flex-col bg-gray-900 text-gray-100">
-        <header className="flex flex-col items-center gap-6 mb-6">
-          <Image
-            src="/logo.svg"
-            width={300}
-            height={83}
-            alt="Logo da Égide Saúde"
-            priority
-          />
-          <h1 className="font-bold text-2xl">Calculadora de IMC</h1>
-        </header>
-        <main className="flex flex-col items-center justify-center w-full gap-10">
+        <Header />
+
+        <main className="flex flex-col items-center justify-center w-full gap-6">
+          <Hero />
           <LinkOMS />
           <IMCForm />
           <ResultList />
         </main>
+
+        <Footer />
       </div>
     </>
   );