Add coming soon page (#825)

* Add coming soon page * Update coming-soon.mdx * Update font size * Update coming-soon.mdx --------- Co-authored-by: Kruno Golubic <46486712+kgolubic@users.noreply.github.com>

Author: AlexIchenskiy

components/input-form/InputForm.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+declare global {
+ interface Window {
+ analytics: any;
+ }
+}
+
+export default function InputForm(props: { title: string, subtitle: string, placeholder: string }) {
+ return (
+ <div className="flex flex-col gap-[24px] mt-[48px] border-[1px] rounded-[8px] p-[48px] dark:bg-[#3A3536] dark:border-[#3A3536] bg-[#F9F9F9] border-[#E6E6E6]">
+ <h4 className="font-[600] text-[24px] leading-[32px] dark:text-[#F9F9F9] text-[#231F20]">{props.title}</h4>
+ <p className="text-[16px] leading-[24px] dark:text-[#E6E6E6] text-[#646265]">{props.subtitle}</p>
+ <form
+ action="https://memgraph24563.activehosted.com/proc.php"
+ method="post"
+ id="mc-embedded-subscribe-form"
+ name="mc-embedded-subscribe-form"
+ target="_blank"
+ className="flex gap-[12px]"
+ >
+ <input type="hidden" name="u" value="31" />
+ <input type="hidden" name="f" value="31" />
+ <input type="hidden" name="s" />
+ <input type="hidden" name="c" value="0" />
+ <input type="hidden" name="m" value="0" />
+ <input type="hidden" name="act" value="sub" />
+ <input type="hidden" name="v" value="2" />
+ <input type="hidden" name="or" value="8746b1a9a146f3d041a04711f336c47b" />
+ <input
+ type="email"
+ name="email"
+ id="mce-EMAIL"
+ defaultValue=""
+ className="px-[24px] border-[1px] border-[#E6E6E6] focus:outline-none focus:ring-0 focus:ring-offset-0 rounded-[6px] w-[60%] text-black dark:bg-[#E6E6E6] bg-white"
+ placeholder={props.placeholder} />
+ <button className="h-[48px] rounded-[5px] px-[12px] text-[#F9F9F9] duration-100 dark:!bg-[#FB6E00] dark:hover:!bg-[#231F20] !bg-[#231F20] hover:!bg-[#646265]" type="submit">Submit</button>
+ </form>
+ </div>
+ );
+}

pages/coming-soon.mdx

@@ -0,0 +1,14 @@
+---
+title: What's coming soon to Memgraph?
+description: Upcoming product updates.
+---
+
+import InputForm from '/components/input-form/InputForm'
+
+# Upcoming product updates
+
+<InputForm 
+ title="Want to know what's coming to Memgraph before we release it?"
+ subtitle="Sign up for upcoming product releases and new features we're working on."
+ placeholder="Your email"
+/>

styles/globals.css

@@ -152,6 +152,39 @@ nav .nextra-scrollbar {
  line-height: 21px;
 }
 
+/* Last sidebar element styles for dark mode */
+.dark .nextra-menu-desktop > :last-child,
+.dark .nextra-menu-mobile > :last-child {
+ background-color: #646265;
+ color: #F9F9F9;
+ border-radius: 5px;
+}
+
+/* Last sidebar element styles for light mode */
+.light .nextra-menu-desktop > :last-child,
+.light .nextra-menu-mobile > :last-child {
+ background-color: #3A3536;
+ border-radius: 5px;
+}
+
+/* Last sidebar element link styles */
+.nextra-menu-desktop > :last-child > a,
+.nextra-menu-desktop > .active:last-child > a,
+.nextra-menu-mobile > :last-child > a,
+.nextra-menu-mobile > .active:last-child > a {
+ background: none;
+ color: #F9F9F9!important;
+ font-size: 0;
+}
+
+.nextra-menu-desktop > :last-child > a:after,
+.nextra-menu-mobile > :last-child > a:after {
+ width: 100%;
+ text-align: center;
+ font-size: 14px;
+ content: 'What\'s coming next?';
+}
+
 /* Card hover styles */
 .nextra-cards .nextra-card:hover {
  border-radius: 4px;