added a survey page and a download button page

firebaseConfig.js

@@ -0,0 +1,18 @@
+import { initializeApp, getApps, getApp } from "firebase/app";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyDARro02yJnKIO_GMf4CtyynigyOjcNaek",
+  authDomain: "vignette-survey-c10b6.firebaseapp.com",
+  projectId: "vignette-survey-c10b6",
+  storageBucket: "vignette-survey-c10b6.firebasestorage.app",
+  messagingSenderId: "823189834296",
+  appId: "1:823189834296:web:16ead38b21290d293ef4cd",
+  measurementId: "G-ZGV7EBTXBS"
+};
+
+const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
+
+const db = getFirestore(app);
+
+export { db };

locales/en/contact.json

@@ -11,5 +11,8 @@
     "visit-button": "Visit",
     "anything-else": "Anything Else?",
     "email-p": "If you need a more professional or more private way to contact us, our email is available to answer your inquiries.",
-    "email-us-button": "Email us!"
+    "email-us-button": "Email us!",
+    "survey": "Survey Feedback",
+    "survey-p": "Hey Streamers! Got a minute? Share your thoughts and help us improve!",
+    "share-your-feedback": "Feedback"
 }

locales/en/home.json

@@ -20,5 +20,6 @@
   "transparency-p": "Vignette puts the community first. That's why it's created and licensed with openness and transparency in mind.",
   "about-button": "About",
   "partners-title": "Our Partners",
-  "become-partner": "Become a partner"
+  "become-partner": "Become a partner",
+  "download-p": "Download The Vignette App Here"
 }

package.json

@@ -22,6 +22,7 @@
     "cookies-next": "^2.0.4",
     "date-fns": "^2.28.0",
     "esbuild": "^0.14.19",
+    "firebase": "^11.0.2",
     "framer-motion": "^7.2.1",
     "mdx-bundler": "^9.0.1",
     "next": "13",

pages/contact.tsx

@@ -8,7 +8,7 @@ import { cache } from './about'
 import { Nav, SEO, Footer } from 'components'
 import envelope from 'public/images/envelope.png'
 
-import { SiDiscord, SiGithub, SiTwitter } from 'react-icons/si'
+import { SiDiscord, SiGithub, SiGoogleforms, SiTwitter } from 'react-icons/si'
 import Button from 'components/Button'
 const Home: NextPage<cache> = () => {
   const { t } = useTranslation(`contact`)
@@ -18,9 +18,9 @@ const Home: NextPage<cache> = () => {
       <Nav />
       <div
         id="content"
-        className="container z-20 mx-auto mt-[74px] max-w-7xl overflow-hidden pt-8 text-center lg:relative lg:pt-20"
+        className="container z-20 mx-auto mt-[74px] max-w-full overflow-hidden pt-8 text-center lg:relative lg:pt-20"
       >
-        <div className=" flex justify-center">
+        <div className="flex justify-center">
           <h1
             style={{
               paddingLeft: `0.2em`,
@@ -40,8 +40,10 @@ const Home: NextPage<cache> = () => {
           {` `}
           {t(`hero-p-3`)}
         </p>
-        <div className="mx-auto mt-10 flex  flex-wrap justify-center gap-8 p-4 ">
-          <div className="flex h-96 w-full max-w-[16rem] flex-col justify-between rounded-2xl border p-8 px-10 text-center shadow dark:border-neutral-700">
+
+        {/* Adjusted card container */}
+        <div className="mx-auto mt-10 flex flex-wrap justify-center gap-4 p-4">
+          <div className="flex h-96 w-[16rem] flex-col justify-between rounded-2xl border p-8 px-10 text-center shadow dark:border-neutral-700">
             <div className="item-center dark:border-none-neutral-700 mx-auto flex h-24 w-24 items-center justify-center rounded-full border bg-[#5865F2] dark:border dark:border-none ">
               <SiDiscord size={48} color="white" className=" " />
             </div>
@@ -107,9 +109,23 @@ const Home: NextPage<cache> = () => {
               {t(`email-us-button`)} &rarr;
             </Button>
           </div>
+
+          <div className="flex h-96 w-[16rem] flex-col justify-between rounded-2xl border p-8 px-10 text-center shadow dark:border-neutral-700">
+            <div>
+              <div className="item-center mx-auto flex h-24 w-24 items-center justify-center rounded-full border bg-white dark:border-none dark:border-neutral-700">
+                <SiGoogleforms size={48} className="fill-[#59adff] " />
+              </div>
+              <h3 className=" mt-4 text-xl font-bold">{t(`survey`)}</h3>
+              <p className="mx-auto mt-2 max-w-[18rem] text-center text-sm">
+                {t(`survey-p`)}
+              </p>
+            </div>
+            <Button size="small" href="/survey">
+              {t(`share-your-feedback`)} &rarr;
+            </Button>
+          </div>
         </div>
       </div>
-
       <Footer />
     </>
   )

pages/index.tsx

@@ -49,32 +49,40 @@ const Home: NextPage<cache> = ({ contributors }) => {
               {t(`survey-invite`)}
             </p>
 
-            <Button
-              //small-button
-              onClick={() => {
-                window.open(
-                  `https://docs.google.com/forms/d/e/1FAIpQLSfqaFTQsKdWxQINWxMgMp_eSy3b37GyiPJhUfKfH-B1Q90dug/viewform`,
-                  `_blank`,
-                )
-                window.location.href = `/discord`
-              }}
-              className=" inline-block sm:hidden"
-            >
-              {t(`join-survey-short`)}&rarr;
-            </Button>
-            <Button
-              size="large"
-              onClick={() => {
-                window.open(
-                  `https://docs.google.com/forms/d/e/1FAIpQLSfqaFTQsKdWxQINWxMgMp_eSy3b37GyiPJhUfKfH-B1Q90dug/viewform`,
-                  `_blank`,
-                )
-                window.location.href = `/discord`
-              }}
-              className=" hidden sm:inline-block"
-            >
-              {t(`join-survey-long`)} &rarr;
-            </Button>
+            <div className="flex flex-col items-start space-y-4">
+              <Button
+                onClick={() => {
+                  window.location.href = `/survey`
+                }}
+                className="inline-block sm:hidden"
+              >
+                {t(`join-survey-short`)} &rarr;
+              </Button>
+
+              <Button
+                size="large"
+                onClick={() => {
+                  window.location.href = `/survey`
+                }}
+                className="hidden sm:inline-block"
+              >
+                {t(`join-survey-long`)} &rarr;
+              </Button>
+
+              <div className="w-full lg:w-auto flex justify-center lg:justify-end">
+                <Button
+                  size="large"
+                  onClick={() => {
+                    window.open(`/404`, `_blank`)
+                  }}
+                  className="w-full lg:w-[35rem] text-xl py-16 px-26 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+                >
+                  <span className="font-regular">
+                    {t(`download-p`)} &#8595;
+                  </span>
+                </Button>
+              </div>
+            </div>
           </div>
         </div>
         <MenuComp />