feat(docs): added new community and contact pages (#1000)

Added new community page and contact us page, so we can turn off the
proxy and go live with landing page.

Co-authored-by: David Boyne <[email protected]>

docusaurus.config.js

@@ -299,13 +299,13 @@ const config = {
                 className: "header-text-link",
               },
               {
-                href: "https://www.winglang.io/community",
+                href: "/community",
                 label: "Community",
                 className: "header-text-link",
                 target: "_self",
               },
               {
-                href: "https://www.winglang.io/contact",
+                href: "/contact",
                 label: "Contact",
                 target: "_self",
                 className: "header-text-link",
@@ -364,18 +364,30 @@ const config = {
                 label: "API Reference",
                 to: "/docs/api/standard-library",
               },
+              {
+                label: "1.0 Roadmap",
+                to: "/blog/2024/08/29/updated-roadmap",
+              },
+              {
+                label: "Press Kit",
+                to: "https://drive.google.com/drive/folders/1Qi0v3v638lLxxP9y80i4TyweZbkXFsZ_",
+              },
             ],
           },
           {
             title: "Community",
             items: [
+              {
+                label: "Discord",
+                href: discordUrl,
+              },
               {
                 label: "GitHub",
                 href: winglangOrgUrl,
               },
               {
-                label: "Discord",
-                href: discordUrl,
+                label: "Report an Issue",
+                href: "https://github.com/winglang/wing/issues/new/choose",
               },
               {
                 label: "Contributor's Handbook",

src/components/Landing/ContactForm.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react'
+
+export default function Example() {
+
+  useEffect(() => {
+
+    setTimeout(() => {
+      // @ts-ignore
+      if (window.hbspt) {
+        // @ts-ignore
+        window.hbspt.forms.create({
+          region: "eu1",
+          portalId: "26754295",
+          formId: "facdc039-1535-48fe-ba43-c1a25b92af0c",
+          target: '#hubspotForm',
+          onFormReady: function ($form) {
+            // $('input[name="url"]').val(window.location.href).change();
+          }
+        });
+      }
+    }, 200);
+
+
+  }, []);
+
+  return (
+    <div id="hubspotForm-contact">
+      <h2 className='block md:hidden text-xl text-white'>Contact us</h2>
+     <div id="hubspotForm"></div>
+    </div>
+  )
+}

src/components/Landing/ContactUs.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import ContactForm from './ContactForm';
+
+const items = [
+    {
+        title: 'Report an issue',
+        label: 'Found a bug? Let us know!',
+        url: 'https://github.com/winglang/wing/issues/new/choose'
+    },
+    {
+        title: 'Ask the community',
+        label: 'Join our discord, and talk to people who have the answers',
+        url: 'https://t.winglang.io/discord'
+    },
+    {
+        title: 'Join the conversation',
+        label: 'Check out what`s new in our GitHub discussions',
+        url: 'https://github.com/winglang/wing'
+    }
+];
+
+export default function ContactUs() {
+    return (
+        <div className="relative isolate dark:bg-gray-900">
+            <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
+                <div className="relative px-6 pb-20 pt-24 sm:pt-32 lg:static lg:px-8 lg:py-48">
+                    <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
+                        <div className="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden ring-1 ring-white/5 lg:w-1/2">
+
+                            <div
+                                aria-hidden="true"
+                                className="absolute -left-56 top-[calc(100%-13rem)] transform-gpu blur-3xl lg:left-[max(-14rem,calc(100%-59rem))] lg:top-[calc(50%-7rem)]"
+                            >
+                                <div
+                                    style={{
+                                        clipPath:
+                                            'polygon(74.1% 56.1%, 100% 38.6%, 97.5% 73.3%, 85.5% 100%, 80.7% 98.2%, 72.5% 67.7%, 60.2% 37.8%, 52.4% 32.2%, 47.5% 41.9%, 45.2% 65.8%, 27.5% 23.5%, 0.1% 35.4%, 17.9% 0.1%, 27.6% 23.5%, 76.1% 2.6%, 74.1% 56.1%)',
+                                    }}
+                                    className="hidden dark:block aspect-[1155/678] w-[72.1875rem] bg-gradient-to-br from-wing/50 to-wing opacity-20"
+                                />
+                            </div>
+                        </div>
+                        <h2 className="text-3xl font-bold tracking-tight dark:text-white">We want to hear from you!</h2>
+                        <p className="mt-6 text-lg leading-8 dark:text-gray-300">
+                            Whether you want to contribute or just have a question, let us know and we’ll respond promptly.
+                        </p>
+                        <ul className='m-0 p-0 space-y-4'>
+                            {items.map((item) => {
+                                return <a href={item.url} className='block p-4 bg-gray-100 dark:bg-gray-800/80 rounded-md space-y-2 hover:bg-wing/20 group'>
+                                    <span className='block text-xl font-bold text-black dark:text-wing group:hover:no-underline!'>{item.title}</span>
+                                    <span className='block text-md dark:text-gray-200 group:hover:no-underline!'>{item.label}</span>
+                                </a>
+                            })}
+                        </ul>
+                    </div>
+                </div>
+                <div className="px-6 pb-24 pt-20 sm:pb-32 lg:px-20 lg:py-48">
+                    <ContactForm />
+                </div>
+
+            </div>
+        </div>
+    )
+}

src/components/Landing/Features.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowPathIcon, CloudArrowUpIcon, LockClosedIcon, CubeIcon, CloudIcon, CodeBracketIcon, ArrowPathRoundedSquareIcon, RectangleGroupIcon, ComputerDesktopIcon } from '@heroicons/react/20/solid'
+import { CubeIcon, CloudIcon, CodeBracketIcon, ArrowPathRoundedSquareIcon, RectangleGroupIcon, ComputerDesktopIcon } from '@heroicons/react/20/solid'
 
 const features = [
   {
@@ -52,14 +52,14 @@ const features = [
   },
 ]
 
-export default function Features() {
+export default function Features({ className = "dark:bg-black", title ="Build distributed systems that fully leverage the power of the cloud"}: any) {
   return (
-    <div className="dark:bg-black py-32 py-16  ">
+    <div className={`dark:bg-black py-32 py-16 ${className}`}>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-3xl lg:text-center">
           {/* <h2 className="text-2xl font-semibold leading-7 text-wing">Code for the cloud</h2> */}
           <p className="mt-2 text-3xl font-bold tracking-tight dark:text-gray-100 sm:text-5xl">
-            Build distributed systems that fully leverage the power of the cloud
+            {title}
           </p>
           <p className="mt-6 text-xl leading-8 dark:text-gray-300">
             Wing gives application developers and platform enigneers the tools they need to build and deploy distributed systems without the need to know all the details of the underlying cloud infrastructure.

src/css/custom.css

@@ -418,4 +418,29 @@ html[data-theme="dark"] h2[itemprop="headline"] a {
   border-radius: 4px;
   padding: 1em 2em;
   margin: 1em 0;
+}
+
+#hubspotForm-contact input, #hubspotForm-contact textarea {
+  background: light-dark(rgb(249, 249, 249), white);;;
+  color:black;
+  border: none;
+  border-radius: 4px;
+  padding: 1em 2em;
+  margin: 1em 0;
+  font-size: 1em;
+}
+
+.footer--light {
+  background: red;
+}
+
+.footer {
+  background-color: light-dark(rgb(249, 249, 249), black);;
+  .footer__title {
+    color: light-dark(#1b918a, #2ad5c1);;
+  }
+  .footer__copyright {
+    padding: 14px 0;
+    opacity: 0.5;
+  }
 }

src/pages/community.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+
+import Features from '../components/Landing/Features';
+import Newsletter from '../components/Landing/Newsletter';
+import Head from '@docusaurus/Head';
+
+
+const CommunityPage = () => {
+
+    return (
+        <Layout title={"Community"} >
+
+            <Head>
+                <script type="text/javascript" src="https://js-eu1.hsforms.net/forms/embed/v2.js" />
+            </Head>
+
+            <div className="relative isolate bg-white dark:bg-black/60 ">
+                <div
+                    aria-hidden="true"
+                    className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+                >
+                    <div
+                        style={{
+                            clipPath:
+                                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                        }}
+                        className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr  dark:from-wing/80 dark:to-wing/50 opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+                    />
+                </div>
+                <div className="py-12 sm:py-32 lg:pb-30">
+                    <div className="mx-auto max-w-7xl px-6 lg:px-8">
+                        <div className="hidden sm:flex sm:justify-center">
+                            <div className="relative rounded-full px-3 py-1 text-lg mb-8 leading-6 dark:text-gray-400 ring-1 ring-wing/70 hover:ring-wing">
+                                <span className="mr-3">Wing 1.0 Roadmap</span>
+                                <a href="/contributing/roadmap" className="font-semibold dark:text-wing/80">
+                                    <span aria-hidden="true" className="absolute inset-0" />
+                                    Read more <span aria-hidden="true">&rarr;</span>
+                                </a>
+                            </div>
+                        </div>
+                        <div className="mx-auto md:max-w-6xl text-center">
+                            <h1 className="text-4xl font-bold tracking-tight dark:text-white sm:text-7xl">
+                                Community Powered
+                            </h1>
+                            <p className="mt-6 text-md  md:leading-8 dark:text-gray-200 sm:text-2xl md:px-20">
+                                Built by an awesome group of contributors from around the world who share a passion for making the cloud a great place to build software
+                            </p>
+                            <div className="mt-10 md:flex items-center justify-center gap-x-6 space-y-4 md:space-y-0">
+                                <a
+                                    href="https://github.com/winglang/wing"
+                                    className="bg-gray-100 dark:bg-gray-900 hover:bg-wing/30 w-full p-8 md:p-10 rounded-sm text-2xl md:text-4xl dark:text-white flex justify-center items-center space-x-8 md:space-x-32  group"
+                                >
+                                    <span className='w-10 h-10 md:w-20 md:h-20 inline-block'>
+                                        <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>github [#142]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="currentColor"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]"> </path> </g> </g> </g> </g></svg>
+                                    </span>
+                                    <span className='inline-block '>GitHub</span>
+                                </a>
+                                <a
+                                    href="https://t.winglang.io/discord"
+                                    className="bg-gray-100 dark:bg-gray-900 hover:bg-wing/30 w-full p-8 md:p-10 rounded-sm text-2xl md:text-4xl dark:text-white flex justify-center items-center space-x-8 md:space-x-32  group"
+                                >
+                                    <span className='w-10 h-10 md:w-20 md:h-20 inline-block'>
+                                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M18.8943 4.34399C17.5183 3.71467 16.057 3.256 14.5317 3C14.3396 3.33067 14.1263 3.77866 13.977 4.13067C12.3546 3.89599 10.7439 3.89599 9.14391 4.13067C8.99457 3.77866 8.77056 3.33067 8.58922 3C7.05325 3.256 5.59191 3.71467 4.22552 4.34399C1.46286 8.41865 0.716188 12.3973 1.08952 16.3226C2.92418 17.6559 4.69486 18.4666 6.4346 19C6.86126 18.424 7.24527 17.8053 7.57594 17.1546C6.9466 16.92 6.34927 16.632 5.77327 16.2906C5.9226 16.184 6.07194 16.0667 6.21061 15.9493C9.68793 17.5387 13.4543 17.5387 16.889 15.9493C17.0383 16.0667 17.177 16.184 17.3263 16.2906C16.7503 16.632 16.153 16.92 15.5236 17.1546C15.8543 17.8053 16.2383 18.424 16.665 19C18.4036 18.4666 20.185 17.6559 22.01 16.3226C22.4687 11.7787 21.2836 7.83202 18.8943 4.34399ZM8.05593 13.9013C7.01058 13.9013 6.15725 12.952 6.15725 11.7893C6.15725 10.6267 6.98925 9.67731 8.05593 9.67731C9.11191 9.67731 9.97588 10.6267 9.95454 11.7893C9.95454 12.952 9.11191 13.9013 8.05593 13.9013ZM15.065 13.9013C14.0196 13.9013 13.1652 12.952 13.1652 11.7893C13.1652 10.6267 13.9983 9.67731 15.065 9.67731C16.121 9.67731 16.985 10.6267 16.9636 11.7893C16.9636 12.952 16.1317 13.9013 15.065 13.9013Z" stroke="currentColor" stroke-linejoin="round"></path> </g></svg>
+                                    </span>
+                                    <span className='inline-block'>Discord</span>
+                                </a>
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+                <div
+                    aria-hidden="true"
+                    className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+                >
+                    <div
+                        style={{
+                            clipPath:
+                                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+                        }}
+                        className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr dark:from-wing/10 dark:to-wing/80 opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+                    />
+
+                </div>
+
+            </div>
+
+
+            <Features className="bg-gray-100/50 dark:bg-gray-900/20" title="Join our community and help build a better cloud experience" />
+
+            <Newsletter />
+
+
+        </Layout>
+    );
+};
+
+export default CommunityPage;

src/pages/contact.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+
+import Head from '@docusaurus/Head';
+import ContactUs from '../components/Landing/ContactUs';
+
+const Contact = () => {
+    return (
+        <Layout title={"Community"} >
+            <Head>
+                <script type="text/javascript" src="https://js-eu1.hsforms.net/forms/embed/v2.js" />
+            </Head>
+            <ContactUs />
+        </Layout>
+    );
+};
+
+export default Contact;