finish contact page

remotion-dev · May 16, 2024 · a931d6c · a931d6c
1 parent b7a6360
commit a931d6c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 159 deletions.
diff --git a/packages/docs/src/components/GoogleMaps.module.css b/packages/docs/src/components/GoogleMaps.module.css
@@ -0,0 +1,8 @@
+.mapContainer {
+  display: flex;
+  margin-top: 50px;
+  margin-bottom: 20px;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
diff --git a/packages/docs/src/components/GoogleMaps.tsx b/packages/docs/src/components/GoogleMaps.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./GoogleMaps.module.css"; // Assuming you have a separate CSS module for this component
+
+const GoogleMaps = () => {
+  return (
+    <div className={styles.mapContainer}>
+      <div
+        style={{
+          maxWidth: "968px",
+          transition: "none",
+          overflow: "hidden",
+          width: "100%",
+          height: "500px",
+        }}
+      >
+        <div
+          id="my-map-canvas"
+          style={{ height: "100%", width: "100%", maxWidth: "100%" }}
+        >
+          <iframe
+            style={{ height: "100%", width: "100%", border: "0" }}
+            src="https://www.google.com/maps/embed/v1/place?q=Remotion,+Hohlstrasse+186,+8004+Zurich&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GoogleMaps;
diff --git a/packages/docs/src/pages/contact/contact.module.css b/packages/docs/src/pages/contact/contact.module.css
diff --git a/packages/docs/src/pages/contact/index.tsx b/packages/docs/src/pages/contact/index.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { PlainButton } from "../../../components/layout/Button";
 import { Spacer } from "../../../components/layout/Spacer";
 import { ContactUsHeader } from "../../components/ContactUsHeader";
-import styles from "./contact.module.css";
+import GoogleMaps from "../../components/GoogleMaps";
 
 import Head from "@docusaurus/Head";
 
@@ -14,6 +14,12 @@ const container: React.CSSProperties = {
   paddingRight: 16,
 };
 
+const button: React.CSSProperties = {
+  color: "white",
+  fontFamily: "GTPlanar",
+  textDecoration: "none",
+};
+
 export default () => {
   return (
     <Layout>
@@ -32,25 +38,15 @@ export default () => {
             justifyContent: "left",
           }}
         >
-          <a
-            style={{
-              textDecoration: "none",
-            }}
-            className={styles.a}
-            target="_blank"
-            href="mailto:hi@remotion.dev"
-          >
+          <a style={button} target="_blank" href="mailto:hi@remotion.dev">
             <PlainButton size="sm" loading={false} fullWidth={false}>
               Contact via email
             </PlainButton>
           </a>
           <Spacer />
           <Spacer />
           <a
-            style={{
-              textDecoration: "none",
-            }}
-            className={styles.a}
+            style={button}
             target="_blank"
             href="https://cal.com/remotion/evaluate"
           >
@@ -81,20 +77,14 @@ export default () => {
             justifyContent: "left",
           }}
         >
-          <a
-            style={{
-              textDecoration: "none",
-            }}
-            className={styles.a}
-            target="_blank"
-            href="https://remotion.dev/discord"
-          >
+          <a style={button} target="_blank" href="https://remotion.dev/discord">
             <PlainButton size="sm" loading={false} fullWidth={false}>
               Join Discord
             </PlainButton>
           </a>
         </div>
       </div>
+      <GoogleMaps />
     </Layout>
   );
 };