+
+
+
+
+
diff --git a/troplo-website-next/src/components/README.md b/troplo-website-next/src/components/README.md
new file mode 100644
index 0000000..d1dc92f
--- /dev/null
+++ b/troplo-website-next/src/components/README.md
@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+
+
+
+
+
+
+
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+
+
+
+
+
+
+
+```
diff --git a/troplo-website-next/src/gql/fragment-masking.ts b/troplo-website-next/src/gql/fragment-masking.ts
new file mode 100644
index 0000000..743a364
--- /dev/null
+++ b/troplo-website-next/src/gql/fragment-masking.ts
@@ -0,0 +1,87 @@
+/* eslint-disable */
+import type { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import type { FragmentDefinitionNode } from 'graphql';
+import type { Incremental } from './graphql';
+
+
+export type FragmentType> = TDocumentType extends DocumentTypeDecoration<
+ infer TType,
+ any
+>
+ ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+ ? TKey extends string
+ ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+ : never
+ : never
+ : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment(
+ _documentNode: DocumentTypeDecoration,
+ fragmentType: FragmentType>
+): TType;
+// return nullable if `fragmentType` is undefined
+export function useFragment(
+ _documentNode: DocumentTypeDecoration,
+ fragmentType: FragmentType> | undefined
+): TType | undefined;
+// return nullable if `fragmentType` is nullable
+export function useFragment(
+ _documentNode: DocumentTypeDecoration,
+ fragmentType: FragmentType> | null
+): TType | null;
+// return nullable if `fragmentType` is nullable or undefined
+export function useFragment(
+ _documentNode: DocumentTypeDecoration,
+ fragmentType: FragmentType> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment(
+ _documentNode: DocumentTypeDecoration,
+ fragmentType: Array>>
+): Array;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment(
+ _documentNode: DocumentTypeDecoration,
+ fragmentType: Array>> | null | undefined
+): Array | null | undefined;
+// return readonly array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment(
+ _documentNode: DocumentTypeDecoration,
+ fragmentType: ReadonlyArray>>
+): ReadonlyArray;
+// return readonly array of nullable if `fragmentType` is array of nullable
+export function useFragment(
+ _documentNode: DocumentTypeDecoration,
+ fragmentType: ReadonlyArray>> | null | undefined
+): ReadonlyArray | null | undefined;
+export function useFragment(
+ _documentNode: DocumentTypeDecoration,
+ fragmentType: FragmentType> | Array>> | ReadonlyArray>> | null | undefined
+): TType | Array | ReadonlyArray | null | undefined {
+ return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+ F extends DocumentTypeDecoration,
+ FT extends ResultOf
+>(data: FT, _fragment: F): FragmentType {
+ return data as FragmentType;
+}
+export function isFragmentReady(
+ queryNode: DocumentTypeDecoration,
+ fragmentNode: TypedDocumentNode,
+ data: FragmentType, any>> | null | undefined
+): data is FragmentType {
+ const deferredFields = (queryNode as { __meta__?: { deferredFields: Record } }).__meta__
+ ?.deferredFields;
+
+ if (!deferredFields) return true;
+
+ const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+ const fragName = fragDef?.name?.value;
+
+ const fields = (fragName && deferredFields[fragName]) || [];
+ return fields.length > 0 && fields.every(field => data && field in data);
+}
diff --git a/troplo-website-next/src/gql/gql.ts b/troplo-website-next/src/gql/gql.ts
new file mode 100644
index 0000000..18d0de5
--- /dev/null
+++ b/troplo-website-next/src/gql/gql.ts
@@ -0,0 +1,47 @@
+/* eslint-disable */
+import * as types from './graphql';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+const documents = {
+ "\n query Announcements($input: AnnouncementsInput!) {\n announcements(input: $input) {\n id\n title\n description\n createdAt\n updatedAt\n banner\n bannerText\n bannerExpiry\n bannerType\n flowinityUserId\n }\n }\n": types.AnnouncementsDocument,
+ "\n query StatusPage {\n status {\n name\n status\n }\n }\n": types.StatusPageDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function graphql(source: string): unknown;
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n query Announcements($input: AnnouncementsInput!) {\n announcements(input: $input) {\n id\n title\n description\n createdAt\n updatedAt\n banner\n bannerText\n bannerExpiry\n bannerType\n flowinityUserId\n }\n }\n"): (typeof documents)["\n query Announcements($input: AnnouncementsInput!) {\n announcements(input: $input) {\n id\n title\n description\n createdAt\n updatedAt\n banner\n bannerText\n bannerExpiry\n bannerType\n flowinityUserId\n }\n }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n query StatusPage {\n status {\n name\n status\n }\n }\n"): (typeof documents)["\n query StatusPage {\n status {\n name\n status\n }\n }\n"];
+
+export function graphql(source: string) {
+ return (documents as any)[source] ?? {};
+}
+
+export type DocumentType> = TDocumentNode extends DocumentNode< infer TType, any> ? TType : never;
\ No newline at end of file
diff --git a/troplo-website-next/src/gql/graphql.ts b/troplo-website-next/src/gql/graphql.ts
new file mode 100644
index 0000000..976572c
--- /dev/null
+++ b/troplo-website-next/src/gql/graphql.ts
@@ -0,0 +1,87 @@
+/* eslint-disable */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type Maybe = T | null;
+export type InputMaybe = Maybe;
+export type Exact = { [K in keyof T]: T[K] };
+export type MakeOptional = Omit & { [SubKey in K]?: Maybe };
+export type MakeMaybe = Omit & { [SubKey in K]: Maybe };
+export type MakeEmpty = { [_ in K]?: never };
+export type Incremental = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+ ID: { input: string; output: string; }
+ String: { input: string; output: string; }
+ Boolean: { input: boolean; output: boolean; }
+ Int: { input: number; output: number; }
+ Float: { input: number; output: number; }
+};
+
+export type Announcement = {
+ __typename?: 'Announcement';
+ banner: Scalars['String']['output'];
+ bannerExpiry: Scalars['String']['output'];
+ bannerText: Scalars['String']['output'];
+ bannerType: BannerType;
+ createdAt: Scalars['String']['output'];
+ description: Scalars['String']['output'];
+ flowinityUserId: Scalars['Int']['output'];
+ id: Scalars['String']['output'];
+ title: Scalars['String']['output'];
+ updatedAt: Scalars['String']['output'];
+};
+
+export type AnnouncementsInput = {
+ banner?: InputMaybe;
+ /** The page number. Ignored if banner is true. */
+ page?: InputMaybe;
+};
+
+/** The type of the banner */
+export enum BannerType {
+ Error = 'error',
+ Info = 'info',
+ Success = 'success',
+ Warning = 'warning'
+}
+
+export type Query = {
+ __typename?: 'Query';
+ announcements: Array;
+ information: Scalars['String']['output'];
+ status: Array;
+};
+
+
+export type QueryAnnouncementsArgs = {
+ input: AnnouncementsInput;
+};
+
+/** The status of the monitor */
+export enum Status {
+ Down = 'DOWN',
+ Maintenance = 'MAINTENANCE',
+ Pending = 'PENDING',
+ Up = 'UP'
+}
+
+export type StatusMonitor = {
+ __typename?: 'StatusMonitor';
+ name: Scalars['String']['output'];
+ status: Status;
+};
+
+export type AnnouncementsQueryVariables = Exact<{
+ input: AnnouncementsInput;
+}>;
+
+
+export type AnnouncementsQuery = { __typename?: 'Query', announcements: Array<{ __typename?: 'Announcement', id: string, title: string, description: string, createdAt: string, updatedAt: string, banner: string, bannerText: string, bannerExpiry: string, bannerType: BannerType, flowinityUserId: number }> };
+
+export type StatusPageQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type StatusPageQuery = { __typename?: 'Query', status: Array<{ __typename?: 'StatusMonitor', name: string, status: Status }> };
+
+
+export const AnnouncementsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Announcements"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AnnouncementsInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"announcements"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"banner"}},{"kind":"Field","name":{"kind":"Name","value":"bannerText"}},{"kind":"Field","name":{"kind":"Name","value":"bannerExpiry"}},{"kind":"Field","name":{"kind":"Name","value":"bannerType"}},{"kind":"Field","name":{"kind":"Name","value":"flowinityUserId"}}]}}]}}]} as unknown as DocumentNode;
+export const StatusPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"StatusPage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]}}]} as unknown as DocumentNode;
\ No newline at end of file
diff --git a/troplo-website-next/src/gql/index.ts b/troplo-website-next/src/gql/index.ts
new file mode 100644
index 0000000..f515991
--- /dev/null
+++ b/troplo-website-next/src/gql/index.ts
@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";
\ No newline at end of file
diff --git a/troplo-website-next/src/graphql/announcements/announcements.query.ts b/troplo-website-next/src/graphql/announcements/announcements.query.ts
new file mode 100644
index 0000000..64ab3f1
--- /dev/null
+++ b/troplo-website-next/src/graphql/announcements/announcements.query.ts
@@ -0,0 +1,18 @@
+import gql from "graphql-tag"
+
+export const AnnouncementsQuery = gql`
+ query Announcements($input: AnnouncementsInput!) {
+ announcements(input: $input) {
+ id
+ title
+ description
+ createdAt
+ updatedAt
+ banner
+ bannerText
+ bannerExpiry
+ bannerType
+ flowinityUserId
+ }
+ }
+`
diff --git a/troplo-website-next/src/graphql/status/status.query.ts b/troplo-website-next/src/graphql/status/status.query.ts
new file mode 100644
index 0000000..0f0f8cb
--- /dev/null
+++ b/troplo-website-next/src/graphql/status/status.query.ts
@@ -0,0 +1,10 @@
+import gql from "graphql-tag"
+
+export const StatusPageQuery = gql`
+ query StatusPage {
+ status {
+ name
+ status
+ }
+ }
+`
diff --git a/troplo-website-next/src/main.ts b/troplo-website-next/src/main.ts
new file mode 100644
index 0000000..edf2063
--- /dev/null
+++ b/troplo-website-next/src/main.ts
@@ -0,0 +1,21 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from "@/plugins"
+
+// Components
+import "./styles/index.css"
+import App from "./App.vue"
+
+// Composables
+import { createApp } from "vue"
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount("#app")
diff --git a/troplo-website-next/src/pages/404.vue b/troplo-website-next/src/pages/404.vue
new file mode 100644
index 0000000..79b6e5c
--- /dev/null
+++ b/troplo-website-next/src/pages/404.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
Not Found.
+
This route does not exist.
+ Go Home
+
+
+
+
+
+
+
+
+
diff --git a/troplo-website-next/src/pages/README.md b/troplo-website-next/src/pages/README.md
new file mode 100644
index 0000000..341536c
--- /dev/null
+++ b/troplo-website-next/src/pages/README.md
@@ -0,0 +1,5 @@
+# Pages
+
+Vue components created in this folder will automatically be converted to navigatable routes.
+
+Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.
diff --git a/troplo-website-next/src/pages/contact.vue b/troplo-website-next/src/pages/contact.vue
new file mode 100644
index 0000000..64f0bcc
--- /dev/null
+++ b/troplo-website-next/src/pages/contact.vue
@@ -0,0 +1,116 @@
+
+