Merge pull request #100 from teaxyz/website-version-3

.github/build-package-pages.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+# cmd: $ ./build-package-pages.sh srcJson targetPath
+# sample:  $ .github/build-package-pages.sh src/data/packages.json src/content/packages'
+
+for row in $(jq -r '.[] | @base64' < "$1"); do
+    _jq() {
+     echo "${row}" | base64 --decode | jq -r "${1}"
+    }
+   touch "$2"/"$(_jq '.slug')".md
+   content="---
+type: page
+title: \"$(_jq '.name')\"
+maintainer: \"$(_jq '.maintainer')\"
+Description: \"$(_jq '.desc' | tr '\"' "'")\"
+layout: \"package-detail\"
+---"
+   echo "$content" > "$2"/"$(_jq '.slug')".md
+done

.github/prepare-thumb-images.sh

@@ -0,0 +1,31 @@
+#!/bin/bash
+# cmd: $ ./prepare-thumb-images.sh srcJson targetPath
+# sample:  $ .github/prepare-thumb-images.sh src/data/packages.json src/static/Images/packages/
+
+# create packages folder: where airtable images will be DLd
+mkdir -p ./packages_thumbs_images
+packages="cat $1"
+temp_packages="./src/data/temp.json"
+cp $1 $temp_packages
+for row in $($packages | jq -r '.[] | @base64'); do
+    _jq() {
+      echo ${row} | base64 --decode | jq -r ${1}
+    }
+
+    dl_url=$(_jq '.thumb_image_url')
+    if [[ $dl_url == *"https://dl.airtable.com/.attachments"* ]]; then
+        filename=$(basename -- "$dl_url")
+        extension="${filename##*.}"
+        filename="${filename%.*}"
+        slug=$(_jq '.slug')
+        outputPath=$2/$(_jq '.slug').$extension
+        new_thumb_image_url="https://tea.xyz/Images/packages/$slug.$extension"
+        curl $dl_url -o ./packages_thumbs_images/$slug.$extension
+        updated_packages=$(jq '(.[] | select(.slug == "'$slug'") | .thumb_image_url) |= "'$new_thumb_image_url'"' ./src/data/temp.json)
+        echo $updated_packages > $temp_packages
+        echo "update $slug"
+    fi
+done
+
+# replace packages.json with the updated version with localized image links
+mv $temp_packages $1

.github/workflows/cd.yml

@@ -25,6 +25,35 @@ jobs:
 
     - uses: actions/checkout@v3
 
+    - name: Copy packages.json summary from dist.tea.xyz
+      uses: prewk/s3-cp-action@v2
+      with:
+        aws_access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        source: 's3://dist.tea.xyz/packages.json'
+        dest: './src/data/packages.json'
+
+    - name: Create Package Detail Pages from packages.json
+      uses: getneil/jq-action@v1
+      id: version
+      with:
+        cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
+
+    - name: Download package thumbnails from Airtable
+      uses: getneil/jq-action@v1
+      with:
+        cmd: '.github/prepare-thumb-images.sh src/data/packages.json'
+
+    - name: Upload package thumbnails to AWS S3
+      uses: jakejarvis/s3-sync-action@master
+      env:
+        AWS_S3_BUCKET: www.tea.xyz
+        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        AWS_REGION: 'us-east-1'
+        SOURCE_DIR: 'packages_thumbs_images'
+        DEST_DIR: 'Images/packages'
+
     - run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
     - uses: teaxyz/setup@v0
       with:
@@ -50,22 +79,23 @@ jobs:
     # cache-control of 10 mins because we *need* to be able to update
     # this and have people see the results can be fixed well with a static site builder
     - run: |
-        aws s3 sync public s3://www.tea.xyz \
+        aws s3 sync public s3://test1.tea.xyz \
           --metadata-directive REPLACE \
           --cache-control max-age=600 \
           --exclude '.git/*' --exclude '.github/*' \
           --exclude 'pour.sh' \
           --exclude 'tea.white-paper*.pdf' \
           --exclude '*.md' \
+          --exclude 'public/Images/packages/*' \
           --delete
 
     #TODO create a github-action that can be used to parse the
     # output from `s3 sync` into invalidation commands. NOTE
     # I have already looked for something to do this and failed.
-    - run: |
-        aws cloudfront create-invalidation \
-          --distribution-id ${{ secrets.AWS_CF_DISTRIBUTION_ID }} \
-          --paths '/*'
+    # - run: |
+    #     aws cloudfront create-invalidation \
+    #       --distribution-id ${{ secrets.AWS_CF_DISTRIBUTION_ID }} \
+    #       --paths '/*'
 
     - name: Seal Deployment
       uses: bobheadxi/deployments@v1

.github/workflows/staging.yml

@@ -6,9 +6,55 @@ concurrency:
 
 env:
   TEA_SECRET: ${{ secrets.TEA_SECRET }}
+  AWS_ACCOUNT_ID: ${{ secrets.AWS_ACCOUNT_ID }}
 
 jobs:
+  validation:
+    runs-on: ubuntu-latest
+    outputs:
+      website: ${{steps.website.outputs.src}}
+      lambdas: ${{steps.lambdas.outputs.lambdas}}
+    steps:
+    - uses: actions/checkout@v3
+    - uses: dorny/paths-filter@v2
+      id: website
+      with:
+        filters: |
+          src:
+            - 'src/**'
+    - uses: dorny/paths-filter@v2
+      id: lambdas
+      with:
+        filters: |
+          lambdas:
+            - 'lambdas/**'
+
+  serverless:
+    needs: validation
+    if: needs.validation.outputs.lambdas == 'true'
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: us-east-1
+  
+    - uses: borales/actions-yarn@v3.0.0
+      with:
+        cmd: --cwd ./lambdas install
+  
+    - name: serverless deploy
+      uses: serverless/github-action@v3
+      with:
+        args: -c "cd ./lambdas && serverless deploy"
+        entrypoint: /bin/sh
+
   deploy:
+    needs: validation
+    if: needs.validation.outputs.website == 'true'
     runs-on: ubuntu-latest
     steps:
     - name: inject slug/short variables
@@ -33,7 +79,36 @@ jobs:
         echo "relativeurls = true" >>config.toml
       working-directory: src
 
+    - name: Copy packages.json summary from dist.tea.xyz
+      uses: prewk/s3-cp-action@v2
+      with:
+        aws_access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        source: 's3://dist.tea.xyz/mock_packages.json'
+        dest: './src/data/packages.json'
+
+    - name: Create Package Detail Pages from packages.json
+      uses: getneil/jq-action@v1
+      with:
+        cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
+
+    - name: Download package thumbnails from Airtable
+      uses: getneil/jq-action@v1
+      with:
+        cmd: '.github/prepare-thumb-images.sh src/data/packages.json'
+
+    - name: Upload package thumbnails to AWS S3
+      uses: jakejarvis/s3-sync-action@master
+      env:
+        AWS_S3_BUCKET: www.tea.xyz
+        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        AWS_REGION: 'us-east-1'
+        SOURCE_DIR: 'packages_thumbs_images'
+        DEST_DIR: 'Images/packages'
+
     - run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
+
     - uses: teaxyz/setup@v0
       with:
         target: build

.gitignore

@@ -22,3 +22,9 @@ hugo.linux
 node_modules
 .envrc
 cdk.out
+
+.ideas
+
+# initially committed _sample.md only the rest will be ignored
+src/content/packages/*
+src/static/Images/packages/*

README.md

@@ -16,6 +16,12 @@ The tea logo and wordmark are registered trademarks of tea.inc.
 * Repeated components are in [`./src/layouts/partials/`].
 
 ## Getting Started
+The detail pages of each package are not committed to the repository for the simple reason of that would be too much to much repeating data.
+Execute the following command just once per version of `/src/data/packages.json`. This will create the package detail pages in `/src/content/packages/[package_slug].md`.
+```sh
+.github/build-package-pages.sh src/data/packages.json src/content/packages
+```
+
 
 hugo can render your edits while you work:
 

lambdas/.gitignore

@@ -0,0 +1,9 @@
+# package directories
+node_modules
+jspm_packages
+
+# Serverless directories
+.serverless
+
+# esbuild directories
+.esbuild

lambdas/.nvmrc

@@ -0,0 +1 @@
+lts/fermium

lambdas/README.md

@@ -0,0 +1,90 @@
+# Serverless - AWS Node.js Typescript
+
+This project has been generated using the `aws-nodejs-typescript` template from the [Serverless framework](https://www.serverless.com/).
+
+For detailed instructions, please refer to the [documentation](https://www.serverless.com/framework/docs/providers/aws/).
+
+## Installation/deployment instructions
+
+Depending on your preferred package manager, follow the instructions below to deploy your project.
+
+> **Requirements**: NodeJS `lts/fermium (v.14.15.0)`. If you're using [nvm](https://github.com/nvm-sh/nvm), run `nvm use` to ensure you're using the same Node version in local and in your lambda's runtime.
+
+### Using Yarn
+
+- Run `yarn` to install the project dependencies
+- Run `yarn sls deploy` to deploy this stack to AWS
+
+## Test your service
+
+This template contains a single lambda function triggered by an HTTP request made on the provisioned API Gateway REST API `/hello` route with `POST` method. The request body must be provided as `application/json`. The body structure is tested by API Gateway against `src/functions/hello/schema.ts` JSON-Schema definition: it must contain the `name` property.
+
+- requesting any other path than `/hello` with any other method than `POST` will result in API Gateway returning a `403` HTTP error code
+- sending a `POST` request to `/hello` with a payload **not** containing a string property named `name` will result in API Gateway returning a `400` HTTP error code
+- sending a `POST` request to `/hello` with a payload containing a string property named `name` will result in API Gateway returning a `200` HTTP status code with a message saluting the provided name and the detailed event processed by the lambda
+
+> :warning: As is, this template, once deployed, opens a **public** endpoint within your AWS account resources. Anybody with the URL can actively execute the API Gateway endpoint and the corresponding lambda. You should protect this endpoint with the authentication method of your choice.
+
+### Locally
+
+In order to test the hello function locally, run the following command:
+
+- `npx sls invoke local -f hello --path src/functions/hello/mock.json` if you're using NPM
+- `yarn sls invoke local -f hello --path src/functions/hello/mock.json` if you're using Yarn
+
+Check the [sls invoke local command documentation](https://www.serverless.com/framework/docs/providers/aws/cli-reference/invoke-local/) for more information.
+
+### Remotely
+
+Copy and replace your `url` - found in Serverless `deploy` command output - and `name` parameter in the following `curl` command in your terminal or in Postman to test your newly deployed application.
+
+```
+curl --location --request POST 'https://myApiEndpoint/dev/hello' \
+--header 'Content-Type: application/json' \
+--data-raw '{
+    "name": "Frederic"
+}'
+```
+
+## Template features
+
+### Project structure
+
+The project code base is mainly located within the `src` folder. This folder is divided in:
+
+- `functions` - containing code base and configuration for your lambda functions
+- `libs` - containing shared code base between your lambdas
+
+```
+.
+├── src
+│   ├── functions               # Lambda configuration and source code folder
+│   │   ├── hello
+│   │   │   ├── handler.ts      # `Hello` lambda source code
+│   │   │   ├── index.ts        # `Hello` lambda Serverless configuration
+│   │   │   ├── mock.json       # `Hello` lambda input parameter, if any, for local invocation
+│   │   │   └── schema.ts       # `Hello` lambda input event JSON-Schema
+│   │   │
+│   │   └── index.ts            # Import/export of all lambda configurations
+│   │
+│   └── libs                    # Lambda shared code
+│       └── apiGateway.ts       # API Gateway specific helpers
+│       └── handlerResolver.ts  # Sharable library for resolving lambda handlers
+│       └── lambda.ts           # Lambda middleware
+│
+├── package.json
+├── serverless.ts               # Serverless service file
+├── tsconfig.json               # Typescript compiler configuration
+├── tsconfig.paths.json         # Typescript paths
+└── webpack.config.js           # Webpack configuration
+```
+
+### 3rd party libraries
+
+- [json-schema-to-ts](https://github.com/ThomasAribart/json-schema-to-ts) - uses JSON-Schema definitions used by API Gateway for HTTP request validation to statically generate TypeScript types in your lambda's handler code base
+- [middy](https://github.com/middyjs/middy) - middleware engine for Node.Js lambda. This template uses [http-json-body-parser](https://github.com/middyjs/middy/tree/master/packages/http-json-body-parser) to convert API Gateway `event.body` property, originally passed as a stringified JSON, to its corresponding parsed object
+- [@serverless/typescript](https://github.com/serverless/typescript) - provides up-to-date TypeScript definitions for your `serverless.ts` service file
+
+### Advanced usage
+
+Any tsconfig.json can be used, but if you do, set the environment variable `TS_NODE_CONFIG` for building the application, eg `TS_NODE_CONFIG=./tsconfig.app.json npx serverless webpack`

lambdas/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "lambdas",
+  "version": "1.0.0",
+  "description": "Serverless aws-nodejs-typescript template",
+  "main": "serverless.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "engines": {
+    "node": ">=14.15.0"
+  },
+  "resolutions": {
+    "node-fetch": "2.6.1"
+  },
+  "dependencies": {
+    "@middy/core": "^3.4.0",
+    "@middy/http-json-body-parser": "^3.4.0",
+    "airtable": "^0.11.5",
+    "algoliasearch": "^4.14.2",
+    "aws-lambda": "^1.0.7",
+    "aws-sdk": "^2.1239.0",
+    "axios": "^1.1.3",
+    "compare-versions": "^5.0.1",
+    "ipfs-http-client": "^33.1.1",
+    "lodash": "^4.17.21",
+    "node-fetch": "2.6.1"
+  },
+  "devDependencies": {
+    "@serverless/typescript": "^3.0.0",
+    "@types/aws-lambda": "^8.10.71",
+    "@types/node": "^14.14.25",
+    "esbuild": "^0.14.11",
+    "json-schema-to-ts": "^1.5.0",
+    "serverless": "^3.0.0",
+    "serverless-esbuild": "^1.23.3",
+    "serverless-iam-roles-per-function": "^3.2.0",
+    "ts-node": "^10.4.0",
+    "tsconfig-paths": "^3.9.0",
+    "typescript": "^4.1.3"
+  },
+  "author": "The serverless webpack authors (https://github.com/elastic-coders/serverless-webpack)",
+  "license": "MIT"
+}

lambdas/serverless.ts

@@ -0,0 +1,66 @@
+import type { AWS } from '@serverless/typescript';
+
+import buildPackages from '@functions/buildPackages';
+import ipfsUpload from '@functions/ipfsUpload';
+
+const serverlessConfiguration: AWS = {
+  service: 'lambdas',
+  frameworkVersion: '3',
+  plugins: [
+    'serverless-esbuild',
+    'serverless-iam-roles-per-function'
+  ],
+  provider: {
+    name: 'aws',
+    runtime: 'nodejs14.x',
+    apiGateway: {
+      minimumCompressionSize: 1024,
+      shouldStartNameWithService: true,
+    },
+    environment: {
+      AWS_NODEJS_CONNECTION_REUSE_ENABLED: '1',
+      NODE_OPTIONS: '--enable-source-maps --stack-trace-limit=1000',
+      AWS_DIST_BUCKET: '',
+    },
+    iam: {
+      deploymentRole: `arn:aws:iam::${process.env.AWS_ACCOUNT_ID || '640264234305'}:role/CloudFormationExecutionRole`,
+      role: {
+        statements: []
+      }
+    },
+    vpc: {
+      securityGroupIds: [
+        "${ssm:/vpc/sg/serverless_lambdas}",
+      ],
+      subnetIds: [
+        "${ssm:/vpc/subnets/private_1}",
+        "${ssm:/vpc/subnets/private_2}"
+      ]
+    }
+  },
+  // import the function via paths
+  functions: {
+    buildPackages,
+    ipfsUpload,
+  },
+  package: { individually: true },
+  custom: {
+    esbuild: {
+      bundle: true,
+      minify: false,
+      sourcemap: true,
+      exclude: ['aws-sdk'],
+      target: 'node14',
+      define: { 'require.resolve': undefined },
+      platform: 'node',
+      concurrency: 10,
+    },
+    'serverless-iam-roles-per-function': {
+      // on inherit: try to configure permission per function correctly
+      // TODO: ci/cd puresec-ish auto-auditing permissions
+      defaultInherit: false, 
+    }
+  },
+};
+
+module.exports = serverlessConfiguration;

lambdas/src/functions/buildPackages/handler.ts

@@ -0,0 +1,93 @@
+import type { Package, AirtablePackage, S3Package } from '@libs/types';
+import _ from 'lodash';
+
+import { getAllS3Packages, writePackagesToS3 } from '@libs/dist_tea_xyz';
+import { getAllAirtablePackages, insertPackagesToAirtable } from '@libs/airtable';
+import { getBestMatchingIndexedPackage } from '@libs/algolia';
+
+type NewAirtablePackage = Partial<AirtablePackage>;
+
+
+const buildPackages = async () => {
+  try {
+    const [
+      allS3Packages,
+      airtablePackages
+    ] = await Promise.all([
+      getAllS3Packages(),
+      getAllAirtablePackages(),
+    ]);
+
+    const {
+      newPackages,
+      packagesJson,
+    } = await getFinalPackagesData(allS3Packages, airtablePackages);
+
+    await Promise.all([
+      insertPackagesToAirtable(newPackages),
+      writePackagesToS3(packagesJson),
+    ]);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+interface FinalPackageOutput {
+  newPackages: NewAirtablePackage[],
+  packagesJson: Package[],
+}
+interface AirtablePackageDict {
+  [slug: string]: AirtablePackage
+}
+const placeholderThumbImg = '/Images/package-thumb-nolabel4.jpg';
+const getFinalPackagesData = async (s3Packages: S3Package[], airtablePackages: AirtablePackage[]): Promise<FinalPackageOutput> => {
+  const newPackages: NewAirtablePackage[] = [];
+  const packagesJson: Package[] = [];
+
+  const airtablePackagesDict: AirtablePackageDict = airtablePackages.reduce(
+    (dict: AirtablePackageDict, p: AirtablePackage) => {
+      dict[p.slug] = p;
+      return dict;
+    },
+    {}
+  );
+
+  for(const s3Package of s3Packages) {
+    const airtablePackage = airtablePackagesDict[s3Package.slug];
+    if (airtablePackage) {
+      const finalPackage: Package = {
+        ...airtablePackage,
+        installs: 0, // temporary get this from tea db/ipfs eventually
+        thumb_image_url: airtablePackage.thumb_image_url || placeholderThumbImg,
+      }
+      packagesJson.push(finalPackage);
+    } else {
+      const matchingIndexedPackage = await getBestMatchingIndexedPackage(s3Package.full_name);
+      const desc = matchingIndexedPackage ? matchingIndexedPackage.desc : '';
+      const homepage = s3Package.homepage ||  _.get(matchingIndexedPackage, 'homepage', '');
+      
+      const newPackage: NewAirtablePackage = {
+        ...s3Package,
+        desc,
+        homepage,
+      }
+      const tempPackage: Package = {
+        ...s3Package,
+        homepage,
+        desc,
+        installs: 0, // TODO: get from algolia
+        dl_count: 0,
+        thumb_image_url: placeholderThumbImg,
+      }
+      newPackages.push(newPackage);
+      packagesJson.push(tempPackage);
+    }
+  }
+
+  return {
+    newPackages,
+    packagesJson,
+  }
+}
+
+export const main = buildPackages;

lambdas/src/functions/buildPackages/index.ts

@@ -0,0 +1,30 @@
+// import schema from './schema';
+import { handlerPath } from '@libs/handler-resolver';
+
+export default {
+  handler: `${handlerPath(__dirname)}/handler.main`,
+  events: [],
+  environment: {
+    AIRTABLE_API_KEY: '${ssm:/airtable/api_key}',
+    AIRTABLE_PACKAGES_BASE: '${ssm:/airtable/packages_base}',
+    AWS_DIST_BUCKET: '${ssm:AW5_S3_BUCKET}',
+    ALGOLIA_APP_ID: '${ssm:/algolia/app_id}',
+    ALGOLIA_SEARCH_API_KEY: '${ssm:/algolia/search_api_key}',
+  },
+  iamRoleStatements: [
+    {
+      Effect: 'Allow',
+      Action: [
+        's3:GetBucketAcl',
+        's3:List',
+        's3:ListBucket',
+        's3:PutObject'
+      ],
+      Resource: [
+        "arn:aws:s3:::${ssm:AW5_S3_BUCKET}",
+        "arn:aws:s3:::${ssm:AW5_S3_BUCKET}/*",
+        "arn:aws:s3:::${ssm:AW5_S3_BUCKET}/*/*",
+      ]
+    }
+  ]
+};

lambdas/src/functions/buildPackages/mock.json

@@ -0,0 +1,6 @@
+{
+  "headers": {
+    "Content-Type": "application/json"
+  },
+  "body": "{\"name\": \"Frederic\"}"
+}

lambdas/src/functions/buildPackages/schema.ts

@@ -0,0 +1,7 @@
+export default {
+  type: "object",
+  properties: {
+    name: { type: 'string' }
+  },
+  required: ['name']
+} as const;

lambdas/src/functions/index.ts

@@ -0,0 +1 @@
+export { default as buildPackages } from './buildPackages';

lambdas/src/functions/ipfsUpload/handler.ts

@@ -0,0 +1,51 @@
+import AWS from 'aws-sdk';
+import { S3CreateEvent } from 'aws-lambda';
+import ipfs from 'ipfs-http-client';
+import fs from 'fs';
+
+const s3 = new AWS.S3();
+
+const ipfsUpload = async (event: S3CreateEvent) => {
+  const http = ipfs(process.env.IPFS_IP4_ADDRESS);
+  
+  // S3 interaction
+  for (const record of event.Records){
+    try {
+      const { key, size } = record.s3.object;
+      const isPackage =  key.split('/').length > 1;
+      if(!isPackage) continue
+
+      // const objectURL = "https://" + process.env.BUCKET + ".s3.amazonaws.com/" + record.s3.object.key
+      const fileName = decodeURIComponent(record.s3.object.key.replace(/\+/g, " "))
+
+      // download file to /tmp      
+      const s3ReadStream = s3.getObject({
+        Bucket: process.env.AWS_DIST_BUCKET,
+        Key: key,
+      }).createReadStream();
+
+      console.log(`adding key:${key} to ipfs...`);
+      const cid = await http.add(s3ReadStream, {
+        progress: (progress) => {
+          const progressPercent = Math.floor(progress/size * 100);
+          console.log(`ipfs upload progress ${progressPercent}% ${fileName}`);
+        }
+      });
+      console.log('file added to ipfs.');
+
+      const cidHash = cid[0].hash
+      console.log(`adding cid file: ${key}.cid`);
+      await s3.putObject({
+        Bucket: process.env.AWS_DIST_BUCKET,
+        Key: fileName + ".cid",
+        Body: cidHash
+      }).promise()
+      console.log('cid file added.');
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+
+
+export const main = ipfsUpload;

lambdas/src/functions/ipfsUpload/index.ts

@@ -0,0 +1,86 @@
+// import schema from './schema';
+import { handlerPath } from '@libs/handler-resolver';
+
+export default {
+  handler: `${handlerPath(__dirname)}/handler.main`,
+  events: [
+    {
+      s3: {
+        bucket: '${ssm:AW5_S3_BUCKET}',
+        existing: true,
+        event: 's3:ObjectCreated:*',
+        rules: [
+          {
+            suffix: '.gz'
+          },
+        ]
+      },
+    },
+    {
+      s3: {
+        bucket: '${ssm:AW5_S3_BUCKET}',
+        existing: true,
+        event: 's3:ObjectCreated:*',
+        rules: [
+          {
+            suffix: '.xz'
+          },
+        ]
+      },
+    },
+    {
+      s3: {
+        bucket: '${ssm:AW5_S3_BUCKET}',
+        existing: true,
+        event: 's3:ObjectCreated:*',
+        rules: [
+          {
+            suffix: '.sha256sum'
+          },
+        ]
+      },
+    },
+    {
+      s3: {
+        bucket: '${ssm:AW5_S3_BUCKET}',
+        existing: true,
+        event: 's3:ObjectCreated:*',
+        rules: [
+          {
+            suffix: '.txt'
+          },
+        ]
+      },
+    },
+    {
+      s3: {
+        bucket: '${ssm:AW5_S3_BUCKET}',
+        existing: true,
+        event: 's3:ObjectCreated:*',
+        rules: [
+          {
+            suffix: '.tgz'
+          },
+        ]
+      },
+    },
+  ],
+  environment: {
+    AWS_DIST_BUCKET: '${ssm:AW5_S3_BUCKET}',
+    IPFS_IP4_ADDRESS: '${ssm:/ipfs/ip4_address}',
+  },
+  iamRoleStatements: [
+    {
+      Effect: 'Allow',
+      Action: [
+        's3:GetObject',
+        's3:PutObject',
+      ],
+      Resource: [
+        "arn:aws:s3:::${ssm:AW5_S3_BUCKET}",
+        "arn:aws:s3:::${ssm:AW5_S3_BUCKET}/*",
+        "arn:aws:s3:::${ssm:AW5_S3_BUCKET}/*/*",
+      ]
+    }
+  ]
+};

lambdas/src/functions/ipfsUpload/mock.json

@@ -0,0 +1,25 @@
+{
+  "Records": [
+    {
+      "s3": {
+        "object": {
+          "key": "zlib.net/v1.2.12.tar.gz"
+        }
+      }
+    },
+    {
+      "s3": {
+        "object": {
+          "key": "test/test.cid"
+        }
+      }
+    },
+    {
+      "s3": {
+        "object": {
+          "key": "packages.json"
+        }
+      }
+    }
+  ]
+}

lambdas/src/libs/airtable.ts

@@ -0,0 +1,64 @@
+import { base, FieldSet } from 'airtable';
+import _ from 'lodash';
+import type { AirtablePackage } from './types';
+
+
+const airtablePackagesBase = base(process.env.AIRTABLE_PACKAGES_BASE);
+
+
+export const getAllAirtablePackages = async (): Promise<AirtablePackage[]> => {
+  const allRecords = await airtablePackagesBase('packages')
+    .select({
+      maxRecords: 100,
+      view: '_api'
+    }).all();
+
+  const packages: AirtablePackage[] = allRecords.map((record) => {
+    return {
+      airtable_record_id: record.id,
+      ..._.pick(record.fields, [
+        'slug',
+        'homepage',
+        'maintainer',
+        'name',
+        'version',
+        'last_modified',
+        'full_name',
+        'dl_count',
+      ]),
+      maintainer: record.fields?.maintainer || '',
+      desc: record.fields?.desc || '',
+      thumb_image_url: _.get(record.fields, 'thumb_image[0].url', '/Images/package-thumb-nolabel3.jpg')
+    } as AirtablePackage;
+  });
+  return packages;
+}
+
+type NewPackageRecord = {
+  fields: Partial<FieldSet>
+}
+
+export const insertPackagesToAirtable = async (newPackages: Partial<AirtablePackage>[]) => {
+  console.log(`airtable: inserting new packages(${newPackages.length})`);
+  try {
+    const newRecords: NewPackageRecord[] = newPackages.map((fields) => {
+      return {
+        fields: {
+          ...fields,
+          last_modified: fields.last_modified.toString(),
+          dl_count: 0,
+        }
+      }
+    });
+
+    // airtable can only insert 10 at a time
+    const insertBatches = _.chunk(newRecords, 10);
+    for(const batch of insertBatches) {
+      await airtablePackagesBase('packages').create(batch);
+    }
+    console.info(`airtable: new packages(${newPackages.length}) inserted`)
+  } catch (error) {
+    console.error(error);
+    console.log(`airtable: failed to insert packages(${newPackages.length})!`);
+  }
+}

lambdas/src/libs/algolia.ts

@@ -0,0 +1,32 @@
+import algoliasearch from 'algoliasearch';
+import _ from 'lodash';
+
+import type { AlgoliaIndexedPackage } from './types';
+
+const appId = process.env.ALGOLIA_APP_ID;
+const searchApiKey = process.env.ALGOLIA_SEARCH_API_KEY;
+
+const client = algoliasearch(appId, searchApiKey);
+
+const packagesIndex = client.initIndex('dev_packages');
+
+export const getBestMatchingIndexedPackage = async (name: string): Promise<AlgoliaIndexedPackage | void> => {
+    const { hits: [bestMatch] } = await packagesIndex.search(name);
+    if (bestMatch) {
+        /**
+         * sample hit:
+         *  {
+                name: 'pyyaml',
+                full_name: 'pyyaml',
+                desc: 'YAML framework for Python',
+                homepage: 'https://pyyaml.org',
+                version: '6.0',
+                objectID: 'pyyaml',
+                _highlightResult: [Object]
+            }
+         */
+        return {
+            ..._.omit(bestMatch, ['_highlightResult']),
+        } as unknown as AlgoliaIndexedPackage;
+    }
+}

lambdas/src/libs/api-gateway.ts

@@ -0,0 +1,12 @@
+import type { APIGatewayProxyEvent, APIGatewayProxyResult, Handler } from "aws-lambda"
+import type { FromSchema } from "json-schema-to-ts";
+
+type ValidatedAPIGatewayProxyEvent<S> = Omit<APIGatewayProxyEvent, 'body'> & { body: FromSchema<S> }
+export type ValidatedEventAPIGatewayProxyEvent<S> = Handler<ValidatedAPIGatewayProxyEvent<S>, APIGatewayProxyResult>
+
+export const formatJSONResponse = (response: Record<string, unknown>) => {
+  return {
+    statusCode: 200,
+    body: JSON.stringify(response)
+  }
+}

lambdas/src/libs/dist_tea_xyz.ts

@@ -0,0 +1,85 @@
+import S3 from 'aws-sdk/clients/s3';
+import { compareVersions, validate } from 'compare-versions';
+import _ from 'lodash';
+import type { S3Package } from './types';
+
+const Bucket = process.env.AWS_DIST_BUCKET;
+const  s3 = new S3();
+
+export const getAllS3Packages = async (): Promise<S3Package[]>  => {
+  const allS3PackagesWithDups = await getKeysFromS3();
+
+  const sortedByVersion = allS3PackagesWithDups
+    .sort((a, b) => compareVersions(a.version, b.version))
+    .reverse();
+
+  const uniquePackages = _(sortedByVersion)
+    .uniqBy('name')
+    .value();
+
+  return uniquePackages;
+}
+
+const getKeysFromS3 = async (ContinuationToken?: string) : Promise<S3Package[]> => {
+  const res = await s3.listObjectsV2({
+    Bucket,
+    MaxKeys: 2147483647,
+    ...(ContinuationToken ? { ContinuationToken } : {}),
+  }).promise();
+
+  const s3Packages: S3Package[] = res.Contents
+    .filter((data: S3.Object) => data.Key.split('/').length >= 2)
+    .map(convertS3ContentTOS3Package);
+
+  if (res.IsTruncated && res.NextContinuationToken) {
+    const nextPackages = await getKeysFromS3(res.NextContinuationToken);
+    s3Packages.push(...nextPackages);
+  }
+
+  return s3Packages.filter((p) => validate(p.version));
+}
+
+const convertS3ContentTOS3Package = (data: S3.Object) : S3Package => {
+  const pathElements = data.Key.replace('github.com/', '').split('/');
+  const [rawVersion] = pathElements.pop().split('.tar');
+  const version = rawVersion.replace('v', '')
+    .replace('.sha256sum','')
+    .replace('ersions.txt', '');
+
+  const [maintainerOrPackageName, packageName] = pathElements;
+  const isMaintainer = !packageName ? false :
+    !['linux','darwin'].includes(packageName);
+
+  const fullName = isMaintainer ? [maintainerOrPackageName, packageName].join('/') : maintainerOrPackageName;
+
+  return {
+    slug: fullName.replace(/[^\w\s]/gi, '_').toLocaleLowerCase(),
+    name: isMaintainer ? packageName : maintainerOrPackageName,
+    full_name: fullName,
+    maintainer: isMaintainer ? maintainerOrPackageName : '',
+    version,
+    last_modified: data.LastModified,
+    homepage: getPossibleHomepage(maintainerOrPackageName) || getPossibleHomepage(packageName) || '' 
+  }
+}
+
+const getPossibleHomepage = (name: string) => {
+  return name && name.split('.').length > 1 ? `https://${name}` : ''
+}
+
+export const writePackagesToS3 = async (packages: S3Package[]) => {
+  console.log("uploading!")
+
+  const buf = Buffer.from(JSON.stringify(packages));
+
+  const data = {
+      Bucket: 'dist.tea.xyz',
+      Key: 'mock_packages.json',
+      Body: buf,
+      ContentEncoding: 'base64',
+      ContentType: 'application/json'
+  };
+
+  await s3.putObject(data).promise();
+  console.log("uploaded!")
+}

lambdas/src/libs/handler-resolver.ts

@@ -0,0 +1,3 @@
+export const handlerPath = (context: string) => {
+  return `${context.split(process.cwd())[1].substring(1).replace(/\\/g, '/')}`
+};

lambdas/src/libs/lambda.ts

@@ -0,0 +1,6 @@
+import middy from "@middy/core"
+import middyJsonBodyParser from "@middy/http-json-body-parser"
+
+export const middyfy = (handler) => {
+  return middy(handler).use(middyJsonBodyParser())
+}

lambdas/src/libs/types.ts

@@ -0,0 +1,27 @@
+export interface S3Package {
+  slug: string,
+  version: string,
+  full_name: string,
+  name: string,
+  maintainer: string,
+  homepage: string,
+  // key: string,
+  last_modified: Date | string,
+}
+
+export type AirtablePackage = S3Package & {
+  airtable_record_id: string,
+  thumb_image_url: string,
+  desc: string,
+  dl_count: number,
+}
+
+export type Package = Omit<AirtablePackage, 'airtable_record_id'> & {
+  airtable_record_id?: string,
+  installs: number,
+}
+
+export type AlgoliaIndexedPackage = Omit<S3Package, 'slug | maintainer | last_modified'> & {
+  objectID: string;
+  desc: string;
+}

lambdas/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.paths.json",
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "removeComments": true,
+    "sourceMap": true,
+    "target": "ES2020",
+    "outDir": "lib",
+    "allowSyntheticDefaultImports": true 
+  },
+  "include": ["src/**/*.ts", "serverless.ts"],
+  "exclude": [
+    "node_modules/**/*",
+    ".serverless/**/*",
+    ".webpack/**/*",
+    "_warmup/**/*",
+    ".vscode/**/*"
+  ],
+  "ts-node": {
+    "require": ["tsconfig-paths/register"]
+  }
+}

lambdas/tsconfig.paths.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@functions/*": ["src/functions/*"],
+      "@libs/*": ["src/libs/*"]
+    }
+  }
+}

lychee.toml

@@ -11,8 +11,15 @@ exclude = [
   "https://www.googletagmanager.com/gtm.js",
   ".*/mailto:.*@.*",
   "https://tea.xyz/tea.white-paper",
+  "https://tea.xyz/tea.products",
+  "https://tea.xyz/tea.nebraska-man",
+  "https://tea.xyz/tea.cli",
+  "https://github.com/teaxyz/pantry",
   "https://tea.xyz/tea.authentication-success",
   "https://tea.xyz/tea.email-subscribe",
   "https://www.google.com/thank-you",
-  "https://www.instagram.com/tea.xyz/"
+  "file:///home/runner/work/www/www/public/tea.white-paper.pdf",
+  "file:///home/runner/work/www/www/public/manage.kmail-lists.com/subscriptions/subscribe",
+  "file:///home/runner/work/www/www/public/www.klaviyo.com/media/js/public/klaviyo_subscribe.js",
+  "https://openssl.org/"
 ]

src/config.toml

@@ -5,23 +5,11 @@ title = 'Equitable Open-Source for Web3'
 # menu links via config file
 
 [menu]
-  [[menu.main]]
-    identifier = 'why-tea'
-    name = 'Why tea?'
-    title = 'why tea?'
-    url = '/#why-tea'
-    weight = 2
-  [[menu.main]]
-    identifier = 'features'
-    name = 'Features'
-    title = 'features'
-    url = '/#features'
-    weight = 3
   [[menu.main]]
     identifier = 'community'
     name = 'Community'
     title = 'community'
-    url = '/#community'
+    url = './#community'
     weight = 4
   [[menu.main]]
     identifier = 'blog'
@@ -29,9 +17,3 @@ title = 'Equitable Open-Source for Web3'
     title = 'blog'
     url = 'https://medium.com/teaxyz'
     weight = 5
-  [[menu.main]]
-    identifier = 'linktree'
-    name = 'Linktree'
-    title = 'linktree'
-    url = 'https://linktr.ee/teaxyz'
-    weight = 6

src/content/careers.md

@@ -2,6 +2,4 @@
 title: "Careers"
 Description: "tea.careers"
 layout: "careers"
-menu: main
-weight: 7
 ---

src/content/lisbon.md

@@ -1,5 +1,5 @@
 ---
-title: "tea in Lisbon"
-Description: "tea Web Summit Agenda"
+title: "tea @ Web Summit 2022"
+Description: "tea.web_summit"
 layout: "lisbon"
 ---

src/content/media-kit.md

@@ -0,0 +1,5 @@
+---
+title: "tea Media Kit"
+Description: "tea.media_kit"
+layout: "media-kit"
+---

src/content/nebraska-man.md

@@ -0,0 +1,7 @@
+---
+title: "Nebraska Man"
+Description: "tea.nebraska-man"
+layout: "nebraska-man"
+menu: main
+weight: 2
+---

src/content/package-manager.md

@@ -0,0 +1,5 @@
+---
+title: "tea.package-manager"
+Description: "tea.package manager"
+layout: "package-manager"
+---

src/content/packages/_sample.md

@@ -0,0 +1,15 @@
+<!--
+this page will be automatically duplicated/populated
+    by .github/build-package-pages.sh
+    before build & deploy probably in Github Actions
+    values to be replaced are title and Description
+
+WARN: anything else added to this folder will be git ignored
+ -->
+---
+type: page
+title: "mpdecimal"
+Description: "mpdecimal"
+layout: "package-detail"
+---
+

src/content/press.md

@@ -0,0 +1,5 @@
+---
+title: "tea.press"
+Description: "press | tea.xyz"
+layout: "press"
+---

src/content/products.md

@@ -0,0 +1,7 @@
+---
+title: "Products"
+Description: "tea.products"
+layout: "products"
+menu: main
+weight: 1
+---

src/content/rewards.md

@@ -0,0 +1,5 @@
+---
+title: "Rewards"
+Description: "tea.rewards"
+layout: "rewards"
+---

src/content/style-guide.md

@@ -0,0 +1,5 @@
+---
+title: "tea.brand_style_guide"
+Description: "tea.Brand-Style-Guide"
+layout: "style-guide"
+---

src/content/tea-cli.md

@@ -0,0 +1,5 @@
+---
+title: "tea CLI"
+Description: "tea.cli"
+layout: "tea-cli"
+---

src/content/tea-protocol.md

@@ -0,0 +1,5 @@
+---
+title: "tea protocol"
+Description: "tea.protocol"
+layout: "tea-protocol"
+---

src/data/packages.json

@@ -0,0 +1,253 @@
+[
+    {
+        "airtable_record_id": "rec2wRWth0lgvPAid",
+        "slug": "mesonbuild_com",
+        "homepage": "https://mesonbuild.com",
+        "name": "mesonbuild.com",
+        "version": "0.63.3",
+        "last_modified": "2022-10-06T15:45:08.000Z",
+        "full_name": "mesonbuild.com",
+        "dl_count": 270745,
+        "maintainer": "",
+        "desc": "Fast and user friendly build system",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "recSM8ux0y8D45gzD",
+        "slug": "pixman_org",
+        "homepage": "http://www.pixman.org/",
+        "maintainer": "freedesktop",
+        "name": "pixman.org",
+        "version": "0.40.0",
+        "last_modified": "2022-09-26T19:37:47.000Z",
+        "full_name": "pixman.org",
+        "dl_count": 0,
+        "desc": "Pixman is a library that provides low-level pixel manipulation features such as image compositing and trapezoid rasterization.",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "recbaeb2QJ9lxeQRw",
+        "slug": "freedesktop_org_pkg_config",
+        "homepage": "https://freedesktop.org",
+        "maintainer": "freedesktop.org",
+        "name": "pkg-config",
+        "version": "0.29.2",
+        "last_modified": "2022-10-20T01:32:15.000Z",
+        "full_name": "freedesktop.org/pkg-config",
+        "dl_count": 2661501,
+        "desc": "Manage compile and link flags for libraries",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "rec5b1Fd9sdTbSkI6",
+        "slug": "gnu_org_gettext",
+        "homepage": "https://gnu.org",
+        "maintainer": "gnu.org",
+        "name": "gettext",
+        "version": "0.21.1",
+        "last_modified": "2022-10-20T01:23:46.000Z",
+        "full_name": "gnu.org/gettext",
+        "dl_count": 3715970,
+        "desc": "GNU internationalization (i18n) and localization (l10n) library",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "recKgwsxJh8aYxr6P",
+        "slug": "bins_pre_2022_10_18_gnu_org",
+        "homepage": "https://gnu.org",
+        "maintainer": "bins-pre-2022-10-18",
+        "name": "gnu.org",
+        "version": "0.21.0",
+        "last_modified": "2022-10-26T22:20:57.000Z",
+        "full_name": "bins-pre-2022-10-18/gnu.org",
+        "dl_count": 0,
+        "desc": "",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "rec3CDKHQtb8RZo4J",
+        "slug": "ipfs_tech",
+        "homepage": "https://ipfs.tech",
+        "name": "ipfs.tech",
+        "version": "0.16.0",
+        "last_modified": "2022-10-19T21:36:52.000Z",
+        "full_name": "ipfs.tech",
+        "dl_count": 14457,
+        "maintainer": "",
+        "desc": "Peer-to-peer hypermedia protocol",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "rec3S1tzbfzq1bmvc",
+        "slug": "nixos_org_patchelf",
+        "homepage": "https://nixos.org",
+        "maintainer": "nixos.org",
+        "name": "patchelf",
+        "version": "0.15.0",
+        "last_modified": "2022-09-27T04:50:44.000Z",
+        "full_name": "nixos.org/patchelf",
+        "dl_count": 0,
+        "desc": "PatchELF is a simple utility for modifying existing ELF executables and libraries.",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "recUIw0boyZBoh4lQ",
+        "slug": "tea_xyz",
+        "homepage": "https://tea.xyz",
+        "maintainer": "tea.xyz",
+        "name": "tea.xyz",
+        "version": "0.8.6",
+        "last_modified": "2022-10-19T19:13:51.000Z",
+        "full_name": "tea.xyz",
+        "dl_count": 0,
+        "desc": "Website of tea.xyz",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "reczeCWpKtsqKEINF",
+        "slug": "charm_sh_gum",
+        "homepage": "https://charm.sh",
+        "maintainer": "charm.sh",
+        "name": "gum",
+        "version": "0.8.0",
+        "last_modified": "2022-10-21T02:15:16.000Z",
+        "full_name": "charm.sh/gum",
+        "dl_count": 0,
+        "desc": "",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "recnXg9PFDyYsGOYp",
+        "slug": "pyyaml_org",
+        "homepage": "https://pyyaml.org",
+        "name": "pyyaml.org",
+        "version": "0.2.5",
+        "last_modified": "2022-10-03T15:35:14.000Z",
+        "full_name": "pyyaml.org",
+        "dl_count": 107505,
+        "maintainer": "",
+        "desc": "YAML framework for Python",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "reczYRb2bZsZMFQWt",
+        "slug": "tea_xyz_gx",
+        "homepage": "https://tea.xyz",
+        "maintainer": "tea.xyz",
+        "name": "gx",
+        "version": "0.1.0",
+        "last_modified": "2022-10-19T16:47:44.000Z",
+        "full_name": "tea.xyz/gx",
+        "dl_count": 0,
+        "desc": "",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "recQr2GBxWIbRpklO",
+        "slug": "unicode_org",
+        "homepage": "https://unicode.org",
+        "name": "unicode.org",
+        "version": "71.1.1",
+        "last_modified": "2022-09-26T19:46:25.000Z",
+        "full_name": "unicode.org",
+        "dl_count": 5176882,
+        "maintainer": "",
+        "desc": "The Unicode Consortium is the standards body for the internationalization of software and services. Deployed on more than 20 billion devices around the world, Unicode also provides the solution for internationalization and the architecture to support localization.",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "rec2YuxV2Y9C68eXz",
+        "slug": "bins_pre_2022_10_18_nodejs_org",
+        "homepage": "https://nodejs.org",
+        "maintainer": "bins-pre-2022-10-18",
+        "name": "nodejs.org",
+        "version": "18.10.0",
+        "last_modified": "2022-10-26T22:41:01.000Z",
+        "full_name": "bins-pre-2022-10-18/nodejs.org",
+        "dl_count": 0,
+        "desc": "",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "recihVbKobbz64mJZ",
+        "slug": "llvm_org",
+        "homepage": "https://llvm.org",
+        "name": "llvm.org",
+        "version": "14.0.6",
+        "last_modified": "2022-10-18T09:52:30.000Z",
+        "full_name": "llvm.org",
+        "dl_count": 524573,
+        "maintainer": "",
+        "desc": "Next-gen compiler infrastructure\n",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },{
+        "airtable_record_id": "recSZ305UlAS9rq1q",
+        "slug": "ijg_org",
+        "homepage": "https://ijg.org",
+        "name": "ijg.org",
+        "version": "9.5.0",
+        "last_modified": "2022-09-27T09:17:13.000Z",
+        "full_name": "ijg.org",
+        "dl_count": 2363922,
+        "maintainer": "",
+        "desc": "Image manipulation library",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "recRKo9eBpysRGtlE",
+        "slug": "bins_pre_2022_10_18_haskell_org",
+        "homepage": "https://haskell.org",
+        "maintainer": "bins-pre-2022-10-18",
+        "name": "haskell.org",
+        "version": "9.2.4",
+        "last_modified": "2022-10-26T22:32:26.000Z",
+        "full_name": "bins-pre-2022-10-18/haskell.org",
+        "dl_count": 0,
+        "desc": "",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "recFqwOok0aD8dRFf",
+        "slug": "gnu_org_coreutils",
+        "homepage": "https://gnu.org",
+        "maintainer": "gnu.org",
+        "name": "coreutils",
+        "version": "9.1.0",
+        "last_modified": "2022-10-26T07:23:27.000Z",
+        "full_name": "gnu.org/coreutils",
+        "dl_count": 0,
+        "desc": "GNU File, Shell, and Text utilities",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    },
+    {
+        "airtable_record_id": "recdB627HKa2XmorH",
+        "slug": "pcre_org",
+        "homepage": "https://pcre.org",
+        "name": "pcre.org",
+        "version": "8.45.0",
+        "last_modified": "2022-09-26T18:36:33.000Z",
+        "full_name": "pcre.org",
+        "dl_count": 2396413,
+        "maintainer": "",
+        "desc": "The PCRE library is a set of functions that implement regular expression pattern matching using the same syntax and semantics as Perl 5",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
+        "installs": 0
+    }
+]

src/layouts/page/authentication-success.html

@@ -2,19 +2,11 @@
 
 <div class="container auth-success-container">
   <div class="row">
-    <div class="col my-auto">
-      <div class="success-div p-4" style="
-            margin: 0;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width:70%;
-            -ms-transform: translate(-50%, -50%);
-            transform: translate(-50%, -50%);">
-        <h1 class="display-4 text-center">Thanks for Authenticating!</h1>
-        <p class="lead text-center mb-5">You've just become an integral part in the future of the internet, AND you'll be entitled to a variety of exciting rewards such as minted NFT badges to honor your work thus far.</p>
-        <a class="btn btn-primary mb-5" href="https://tea.xyz"
-          role="button">Return to Home</a>
+    <div class="col success-container">
+      <div class="success-content">
+        <h1 class="text-center display-4">Thanks for Authenticating!</h1>
+        <p class="lead text-center">You've just become an integral part in the future of the internet, AND you'll be entitled to a variety of exciting rewards such as minted NFT badges to honor your work thus far.</p>
+        <button onclick="window.location.href='/';" id="return-home" class="detail-btn-large"><i class="icon-enter-arrow"></i>RETURN HOME</button>
       </div>
     </div>
   </div>
@@ -22,46 +14,24 @@
 
 <style>
 
-  .auth-success-container{
-    height:100vh;
+  .success-container{
+    height: 80vh;
     position: relative;
-    background-image: url("/Images/tea-steam-dark.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
   }
 
-  .btn-primary{
+  .success-content{
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  #return-home{
     display:block;
     margin-left:auto;
     margin-right:auto;
   }
 
-  .success-gif{
-    width: 7vw;
-    height: 7vw;
-    border-radius: 100px;
-    background-image: url("/Images/auth-success.gif");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    display: block;
-    margin-left:auto;
-    margin-right:auto;
-  }
-
-  @media only screen and (max-width: 720px) {
-    .success-div{
-      width: 100% !important;
-    }
-
-    .success-gif{
-      width: 18vw;
-      height: 18vw;
-    }
-
-  }
-
 </style>
 
 {{ end }}

src/layouts/page/careers.html

@@ -1,206 +1,126 @@
 {{ define "main" }}
-<img id="tea-steam-dark-1" src="/Images/tea-steam-dark-1.svg" style="z-index:0 !important; " alt="">
-<div class="container mb-5 mt-5">
+
+<section class="two-boxes hero-section">
+
+<div>
+
+  <span id="aa62fd265a9f"></span>
+
+</div>
+
+  <div class="container">
     <div class="row">
-    <div class="col-lg-6 col-md-6 col-sm-12 col-12 pe-lg-5 pe-md-5 pe-sm-0 pe-0" style="z-index:100; display:flex; flex-direction:column;">
-      <div style="margin-top:auto; margin-bottom:auto;">
-        <h1 class="display-1 mb-5">Join the <span class="teal">tea</span> party!</h1>
-        <p class="mb-lg-5 mb-md-5 mb-sm-5 mb-5 lead">We’re looking for the best-of-the-best to help brew the future of web3. If you’re a visionary self-starter who’s eager to be on the front lines of innovation, then take look at our list of current openings and apply accordingly. Even if you don’t see a role that captures your skill set, please feel free to <a class="teal" href="mailto:talent@tea.xyz?subject=resumé">email us</a> your resumé in order to be considered for future opportunities.</p>
+      <div class="col">
+        <h1>Careers</h1>
+        <p class="lead">Join us!</p>
+        <p>tea is building an open-source ecosystem that is fair for everyone. We are growing our team of talented people to make this happen. We are looking for curious, passionate, and smart teammates. If you are interested please check out our open positions below.</p>
+        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
       </div>
     </div>
+  </div>
+</section>
 
-      <hr class="careers-divider">
+<hr>
 
-    <style>
-      @media only screen and (min-width: 600px) {
-        .careers-divider{
-          display:none;
-        }
-      }
-    </style>
-
-    <div class="col-lg-6 col-md-6 col-sm-12 col-12" style="z-index:100 !important;">
-      <h3 class="mb-4">Current <span class="teal">job openings</span></h3>
-      <p class="mb-4" style="color:#E5E6E9;">The tools that build the internet have steeped too long. For the past two decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never thanking, never mentioning, and certainly never paying. At tea, we’re brewing something to change that by enabling developers (you) to continue doing what you love, while earning what you deserve.</p>
   <div class="accordion" id="accordionExample">
-
     <div class="accordion-item">
-          <p class="accordion-header" id="headingOne">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="true" aria-controls="collapseOne">
-              Package Maintainer
+      <h2 class="accordion-header" id="headingOne">
+        <button class="accordion-button" id="jobOne" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+          Accordion Item #1
         </button>
-          </p>
-            <div class="accordion-body">
-              <div>We are looking for Package Maintainers to help us review, update, and deploy packages for the tea system.</div>
-              <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
-              <br><strong>Responsibilities:</strong><br><br>
-              <ul>
-                <li>Collaborate with Package Manager teammates to determine priorities. </li>
-                <li>Build source code and compile packages for distribution. </li>
-                <li>Include testing code and documentation to help teammates troubleshoot issues. </li>
-                <li>Track security and breaking changes for packages in our ecosystem to ensure quick remediations. </li>
-                <li>Attend meetings, brainstorming sessions and regular standups for enhancing your knowledge of new technologies. </li>
-                <li>Stay on top of technology trends and developments, especially changes related to package dependencies. </li>
-                <li>Ensure that all technology practices adhere to applicable standards. </li>
-              </ul>
-
-              <p>This is a full-time remote contractor position.</p><br>
-
-              <a class="btn btn-primary mb-3" href="https://tea.breezy.hr/p/d98d28311cbd-package-maintainer"
-                role="button">Apply on Breezy HR</a>
-
-              <p class="small" style="color:#B9C7C9;">Visit Breezy HR to apply, and to read more about the qualifications and responsibilities for this position.</p></div>
-
+      </h2>
+      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+        <div class="accordion-body two-boxes">
+          <div class="one-box-down">
+            <p>Employment type: <span id="typeOne"></span></p>
+            <p>Department: <span id="deptOne"></span></p>
+            <p>Location: <span id="locOne"></span></p>
+          </div>
+          <div class="one-box-down">
+            <hr>
+          </div>
+          <div class="one-box-down" id="descOne"></div>
+          <div>
+            <a href="" id="linkOne">
+            <button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
+            </a>
+          </div>
+        </div>
       </div>
     </div>
-
     <div class="accordion-item">
-          <p class="accordion-header" id="headingTwo">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-              Blockchain Architect
+      <h2 class="accordion-header" id="headingTwo">
+        <button class="accordion-button collapsed" id="jobTwo" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+          Accordion Item #2
         </button>
-          </p>
-            <div class="accordion-body">
-              Reporting to the Chief Product Officer, the Blockchain Architect will be responsible to effectively and efficiently utilize technology to meet the network’s needs and goals, including:
+      </h2>
       <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
-              <br>
-              <ul>
-              <li>Select and/or build all components of the blockchain technology stack.</li>
-              <li>Ensure scalable connectivity of on-chain and off-chain software solutions.</li>
-              <li>Support the launch and growth of the developer community through various initiatives including public engagement and documentation publishing.</li>
-              </ul>
-
-              <p>This is a full-time remote position.</p><br>
-
-              <a class="btn btn-primary mb-3" href="https://tea.breezy.hr/p/dc187fdab65e-blockchain-architect"
-                role="button">Apply on Breezy HR</a>
-
-              <p class="small" style="color:#B9C7C9;">Visit Breezy HR to apply, and to read more about the qualifications and responsibilities for this position.</p></div>
+        <div class="accordion-body two-boxes">
+          <div class="one-box-down">
+            <p>Employment type: <span id="typeTwo"></span></p>
+            <p>Department: <span id="deptTwo"></span></p>
+            <p>Location: <span id="locTwo"></span></p>
+          </div>
+          <div class="one-box-down">
+            <hr>
+          </div>
+          <div class="one-box-down" id="descTwo"></div>
+          <div>
+            <a href="" id="linkTwo">
+            <button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
+            </a>
+          </div>
+        </div>
       </div>
     </div>
-
     <div class="accordion-item">
-          <p class="accordion-header" id="headingOne">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-              Senior Blockchain Developer
+      <h2 class="accordion-header" id="headingThree">
+        <button class="accordion-button collapsed" id="jobThree" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+          Accordion Item #3
         </button>
-          </p>
-            <div class="accordion-body">
-              <div> Reporting to the Blockchain Architect, the Blockchain Developer will be responsible for the design, implementation, and distribution of a secure blockchain infrastructure that meets the network’s needs and goals.<br></div>
-              <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample"><br>
-              This is a full-time remote position.<br><br>
-
-              <a class="btn btn-primary mb-3 mt-3" href="https://tea.breezy.hr/p/f5b2c4d0f3e6-senior-blockchain-developer"
-                role="button">Apply on Breezy HR</a>
-
-              <p class="small" style="color:#B9C7C9;">Visit Breezy HR to apply, and to read more about the qualifications and responsibilities for this position.</p></div>
-
+      </h2>
+      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+        <div class="accordion-body two-boxes">
+          <div class="one-box-down">
+            <p>Employment type: <span id="typeThree"></span></p>
+            <p>Department: <span id="deptThree"></span></p>
+            <p>Location: <span id="locThree"></span></p>
           </div>
+          <div class="one-box-down">
+            <hr>
+          </div>
+          <div class="one-box-down" id="descThree"></div>
+          <div>
+            <a href="" id="linkThree">
+            <button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
+            </a>
           </div>
-
-        <div class="accordion-item">
-          <p class="accordion-header" id="headingOne">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseOne">
-              Full Stack Developer
-            </button>
-          </p>
-            <div class="accordion-body">
-              <div>Reporting to the CEO, the full stack developer will be directly responsible for the architecture and implementation of entire portions of tea’s open source product suite.<br></div>
-              <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample"><br>
-              This is a full-time remote position.<br><br>
-
-              <a class="btn btn-primary mb-3 mt-3" href="https://tea.breezy.hr/p/aa62fd265a9f-full-stack-developer"
-                role="button">Apply on Breezy HR</a>
-
-              <p class="small" style="color:#B9C7C9;">Visit Breezy HR to apply, and to read more about the qualifications and responsibilities for this position.</p></div>
-
-            </div>
-        </div>
-
         </div>
       </div>
     </div>
   </div>
-
-<style>
-  .accordion-item:last-of-type .accordion-button.collapsed {
-      border-bottom-right-radius: 0px;
-      border-bottom-left-radius: 0px;
-  }
-</style>
 
 <!-- Why Work at tea -->
-<div class="row" style="background-color:#23282C;">
-  <div class="container mb-5 mt-5">
+<section class="teal-bg two-boxes">
   <div class="row">
-      <h3 class="text-center display-4 mb-5">Why work at tea?</h3>
-    </div>
+    <div class="container two-boxes">
       <div class="row">
         <div class="col">
-        <p class="text-center lead">Join a team of motivated and passionate individuals and be a part of a rapidly growing and exciting project in web3 and open source technologies. We offer an attractive salary, relocation packages (if applicable), token/equity options and performance&#8208;based bonuses.</p>
+          <h3 class="black text-center">Why work @ tea?</h3>
+          <p class="text-center black" style="background-color:#00ffd0 !important;">Join a team of motivated and passionate individuals and be a part of a rapidly growing and exciting project in web3 and open source technologies. We offer an attractive salary, relocation packages (if applicable), token/equity options and performance&#8208;based bonuses.</p>
         </div>
       </div>
     </div>
   </div>
 
-<!-- Community Links -->
-<div class="row community-container pt-5 pb-5 mt-5 mb-5">
-  <div class="container p-4" id="community">
-    <div class="row">
-      <div class="col">
-        <h3 style="text-align:center;" class="mb-5 display-5">Join the Community</h3>
-      </div>
-    </div>
-    <div class="row">
+</section>
 
-      <div class="col-6 col-sm-6 col-lg">
-        <a href="https://discord.gg/KCZsXfJphn">
-          <div class="com-card mb-4">
-            <img src="/Images/discord.svg" alt="" class="community-icon">
-          </div>
-        </a>
-      </div>
+<style>
 
-      <div class="col-6 col-sm-6 col-lg">
-        <a href="https://twitter.com/teaxyz_">
-          <div class="com-card mb-4">
-            <img src="/Images/twitter.svg" alt="" class="community-icon">
-          </div>
-        </a>
-      </div>
+  .accordion-button{
+    line-height: 6vw;
+  }
 
-      <div class="col-6 col-sm-6 col-lg">
-        <a href="https://github.com/teaxyz">
-          <div class="com-card mb-4">
-            <img src="/Images/github.svg" alt="" class="community-icon">
-          </div>
-        </a>
-      </div>
+</style>
 
-      <div class="col-6 col-sm-6 col-lg">
-        <a href="https://t.me/tea_xyz">
-          <div class="com-card mb-4">
-            <img src="/Images/telegram.svg" alt="" class="community-icon">
-          </div>
-        </a>
-      </div>
-
-      <div class="col-6 col-sm-6 col-lg align-self-center">
-        <a href="https://reddit.com/r/teaxyz">
-          <div class="com-card mb-4">
-            <img src="/Images/reddit.svg" alt="" class="community-icon">
-          </div>
-        </a>
-      </div>
-
-      <div class="col-6 col-sm-6 col-lg align-self-center">
-        <a href="https://www.instagram.com/tea.xyz/">
-          <div class="com-card mb-4">
-            <img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
-          </div>
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
 {{ end }}

src/layouts/page/keep-what-is-yours.html

@@ -480,7 +480,7 @@
         </div>
 
         <div class="col-6 col-sm-6 col-lg align-self-center">
-          <a href="https://www.instagram.com/tea.xyz/">
+          <a href="#">
             <div class="com-card mb-4">
               <img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
             </div>

src/layouts/page/lisbon.html

@@ -1,53 +1,53 @@
 {{ define "main" }}
 
-<section class="hero-section pt-5 pb-5 mb-5">
+<section class="two-boxes">
   <div class="container">
     <div class="row">
       <div class="col hero-col">
         <div class="hero-content">
-          <h1 class="display-1 mb-5">tea @ Web Summit 2022</h1>
+          <h1>tea @ Web Summit 2022</h1>
           <p class="lead">The tea’m will be in Lisbon the first week of November to meet developers, speak on stage, and celebrate the launch of tea cli! Check the schedule below for a full itinerary of tea’vents, including a speech on the FLLSTACK Stage by Max about tea’s role in shaping the future of open source. Don’t hesitate to come up and say hi - we can’t wait to meet you and have some new merchandise to share as well!</p>
+          <img class="xl-grid-element" src="/Images/xl-grid-element.svg" alt="grid-element">
+          {{- partial "mobile-grid-element" -}}
         </div>
       </div>
     </div>
   </div>
 </section>
 
-<section class="mb-5">
+
+<hr>
+
+<section class="two-boxes">
   <div class="container">
     <div class="row">
-      <div class="col-lg-6 col-md-6 col-sm-12 col-12 my-auto">
+      <div class="col-lg-6 col-md-6 col-sm-12 col-12 my-auto schedule-content">
         <h2>Schedule</h2>
         <p class="lead">While we’re there all week to learn from and meet people, Thursday and Friday are going to be our busiest days. Don’t hesitate to come up and say hi - we can’t wait to meet you and have some new merchandise to share as well!</p>
         <p>Thursday, November 3rd is going to be a jam-packed day in Lisbon. Not only are we releasing our command line interface, but Max will be speaking solo on the FLLSTACK stage about tea and Tim will be speaking on a panel about fundraising for tech. We will then be going out to dinner with the people who believed in our vision from day one to celebrate. The next day, we’re hosting a swanky rooftop party at Hotel Mundial that's open to any dev in the area! We only have space for 150 people though, so be sure to rsvp.</p>
       </div>
       <div class="col-lg-6 col-md-6 col-sm-12 col-12 my-auto">
-        <ul class="list-group">
-          <li class="list-group-item d-flex justify-content-between align-items-start">
-            <div class="me-auto">
-              <div class="fw-bold">Thursday, Nov. 3 @ 11:30AM</div>
-              Max Howell speaks on the FLLSTACK stage.
+        <div class="agenda-container">
+          <div class="agenda-item p-lg-5 p-md-5 p-sm-4 p-4">
+            <h4>Thursday, Nov. 3 @ 11:30AM</h4>
+            <p>Max Howell speaks on the FLLSTACK stage.</p>
           </div>
-          </li>
-          <li class="list-group-item d-flex justify-content-between align-items-start">
-            <div class="me-auto">
-              <div class="fw-bold">Thursday, Nov 3 @ 2:05PM</div>
-              Panel on fundraising for tech companies on FLLSTACK stage.
+          <hr>
+          <div class="agenda-item p-lg-5 p-md-5 p-sm-4 p-4">
+            <h4>Thursday, Nov 3 @ 2:05PM</h4>
+            <p>Panel on fundraising for tech companies on FLLSTACK stage.</p>
           </div>
-          </li>
-          <li class="list-group-item d-flex justify-content-between align-items-start">
-            <div class="me-auto">
-              <div class="fw-bold">Thursday Evening, Nov 3 – Investor Dinner (privatea)</div>
-              Dinner event exclusively for tea investors.
+          <hr>
+          <div class="agenda-item p-lg-5 p-md-5 p-sm-4 p-4">
+            <h4>Thursday Evening, Nov 3 – Investor Dinner (privatea)</h4>
+            <p>Dinner event exclusively for tea investors.</p>
+          </div>
+          <hr>
+          <div class="agenda-item p-lg-5 p-md-5 p-sm-4 p-4">
+            <h4>Friday, Nov 4 – 6:00PM - 9:00PM</h4>
+            <p>We're throwing a swanky tea launch party at Mundial Hotel! <a href="https://lu.ma/tealisbon">RSVP here</a> or via the section below.</p>
           </div>
-          </li>
-          <li class="list-group-item d-flex justify-content-between align-items-start">
-            <div class="me-auto">
-              <div class="fw-bold">Friday, Nov 4 – 6:00PM - 9:00PM</div>
-              We're throwing a swanky tea launch party at Mundial Hotel! <a href="https://lu.ma/tealisbon" class="https://lu.ma/tealisbon" style="text-decoration:none;">RSVP here</a> or via the section below.
         </div>
-          </li>
-        </ul>
       </div>
     </div>
   </div>
@@ -55,70 +55,40 @@
 
 <style>
 
-  @media screen and (max-width: 576px) {
-    .hero-col{
-      height: 100% !important;
+  .agenda-container{
+    border: 2px solid #949494;;
   }
 
-    .rsvp-btn{
-      width: 100%;
-    }
+  .agenda-item p{
+    margin-bottom: 0px !important;
   }
 
-  .list-group-item{
-    background-color: #1C1E21;
-    color: white;
-    border-color: white;
+  @media only screen and (max-width: 576px) {
+
+    .schedule-content{
+      margin-bottom: 75px !important;
     }
 
-  .rsvp-btn{
-    background-color: #1C1E21;
-  }
-
-  .rsvp-btn:hover{
-    background-color: #292929;
-  }
-
-  .rsvp-section{
-    background-color: #54BAAB;
-  }
-
-  .dark-text{
-    color: #1C1E21;
-  }
-
-  .countdown-section{
+    .xl-grid-element{
       display: none;
     }
 
-  .hero-col{
-    height: 50vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
   }
 
-  .hero-section{
-    background-image: url("/Images/lisbon-web-summit-bg-dark.jpg");
-    background-color: #cccccc;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-attachment: fixed;
-  }
 </style>
 
+<hr>
+
 <section class="rsvp-section pt-5 pb-5">
   <div class="container">
     <div class="row">
       <div class="col-lg-9 col-md-7 col-sm-12 col-12 mb-sm-5 mb-5 my-auto">
         <h2 class="display-5 dark-text">RSVP for our launch party!</h2>
         <p class="dark-text mb-4">​Join the tea’m as we celebrate the launch of tea.cli, the successor to homebrew. Hear from co-founders Max Howell and Timothy Lewis about the revolutionary new package manager, the future of open-source, and how blockchain will play a role in it. We will have an open bar, small plates, and a great opportunity to just hang out after a long week of networking. This event is open to all attendees of Websummit but RSVP now: venue capacity is only 150 people.</p>
-        <a class="btn btn-primary rsvp-btn" href="https://lu.ma/tealisbon"
-          role="button">RSVP ON LU.MA</a>
+        <button onClick="location.href='https://lu.ma/tealisbon'" class="detail-btn-large"><i class="icon-enter-arrow"></i>RSVP ON LU.MA</button>
       </div>
       <div class="col">
-        <img class="qr-code" src="/Images/rsvp-qr-code.svgAsset 1.svg" alt="qr-code">
+        <img class="qr-code" src="/Images/lisbon-qr-code-teal.svg" alt="qr-code">
       </div>
     </div>
   </div>

src/layouts/page/media-kit.html

@@ -0,0 +1,14 @@
+{{ define "main" }}
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <h1>tea Media Kit</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ end }}

src/layouts/page/nebraska-man.html

@@ -0,0 +1,232 @@
+{{ define "main" }}
+
+<div class="section two-boxes nb-hero-section">
+  <div class="container">
+    <div class="row">
+      <div class="col" style="z-index:2;">
+        <h1>Nebraska Man</h1>
+        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr>
+
+<section class="nb-man-about two-boxes">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
+        <h3>the battle for the internet has just begun</h3>
+        <p class="lead">We’ve called open source devs the “unnamed heroes of the internet.” Now is the time to give them a name and tell their stories. Introducing The Maintainers: a comic series about the OSS Developer Universe. Our first issue follows the origins of Nebraska Man as he joins the fight for a fairer internet.</p>
+        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<style>
+  .wrapper {
+  align-items: center;
+  display: flex;
+  height: 90%;
+  justify-content: center;
+  margin: 5%;
+  width: 90%;
+}
+
+.aspect {
+  padding-bottom: 70%;
+  position: relative;
+  width: 100%;
+}
+
+.aspect-inner {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.flipbook {
+  height: 100%;
+  transition: margin-left 0.25s ease-out;
+  width: 100%;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.flipbook .page {
+  height: 100%;
+  width: 100%;
+}
+
+.flipbook .page img {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<section class="nb-man-latest">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <div class="wrapper">
+          <div class="aspect">
+            <div class="aspect-inner">
+              <div class="flipbook" id="flipbook">
+                <div class="page"><img src="/Images/nb-man-cover-one.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_01.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_02.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_03.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_04.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_05.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_06.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_07.jpg" draggable="false" alt="" /></div>
+                <div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_08.jpg" draggable="false" alt="" /></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!--<hr>
+  <div class="row button-container">
+    <a href="#" role="button" class="btn btn-primary text-center auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0" id="nav-cta">DOWNLOAD ISSUE #1</a>
+  </div>
+<hr>
+<section>
+  <div class="container">
+    <div class="row two-boxes">
+      <div class="col">
+        <h3>Take 'saving the internet' one step further...</h3>
+        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+    </div>
+    <hr>
+    <div class="row gx-5 one-box">
+      <div class="col-lg-7 col-md-6 col-sm-12 col-12 one-box-down">
+        <h3>How to earn your Nebraska Man cover NFT's:</h3>
+        <div class="mb-4 mt-4">
+          <p class="lead nft-require">Follow our Twitter</p>
+        </div>
+        <hr>
+        <div class="mb-4 mt-4">
+          <p class="lead nft-require">like the Nebraska Man tweet</p>
+        </div>
+        <hr>
+        <div class="mb-4 mt-4">
+          <p class="lead nft-require">retweet that same tweet</p>
+        </div>
+        <hr>
+        <div class="mb-4 mt-4">
+          <p class="lead nft-require">join our discord</p>
+        </div>
+        <hr>
+        <div class="mb-4 mt-4">
+          <p class="lead nft-require">sign up for tea&#39;mails</p>
+        </div>
+        <hr>
+        <div class="mb-4 mt-4">
+          <p class="lead nft-require">attend an AMA</p>
+        </div>
+        <hr>
+        <div class="mb-4 mt-4">
+          <p class="lead nft-require">join our subreddit</p>
+        </div>
+        <hr>
+        <div class="mb-4 mt-4">
+          <p class="lead nft-require">subscribe to our youtube</p>
+        </div>
+        <p>That&#39;s all there is to it! 8 easy steps to earn your Nebraksa Man cover NFT&#39;s. Check out our Project Galaxy campaign to track your progress and earn your rewards. Thanks for being a part of the battle to save the ineternet!</p>
+      </div>
+
+      <style>
+
+        .nft-require{
+          margin-bottom: 0px;
+          font-family: "pp-neue-machina", sans-serif;
+          text-transform: uppercase;
+        }
+
+      </style>
+
+      <div class="col">
+
+        <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
+          <div class="carousel-inner">
+            <div class="carousel-item active">
+              <img src="/Images/nb-man-cover-one.jpg" class="d-block w-100" alt="Nebraska Man - Teamwor Makes the Dream Work">
+            </div>
+            <div class="carousel-item">
+              <img src="/Images/nb-man-cover-two.jpg" class="d-block w-100" alt="Nrebaska Man - Fight Night">
+            </div>
+            <div class="carousel-item">
+              <img src="/Images/nb-man-cover-three.jpg" class="d-block w-100" alt="Nebraska Man - Who Will You Meet in the Shadows?">
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</section> -->
+
+{{- partial "full-width-cta.html" -}}
+
+<script type="text/javascript">
+
+function loadApp() {
+
+  // Create the flipbook
+
+  $('.flipbook').turn({
+
+      // Enable gradients
+
+      gradients: true,
+
+      // Auto center this flipbook
+
+      autoCenter: true
+
+  });
+}
+
+// Load the HTML4 version if there's not CSS transform
+
+yepnope({
+  test : Modernizr.csstransforms,
+  yep: ['/js/turn.js'],
+  nope: ['/js/turn.html4.min.js'],
+  both: ['/css/basic.css'],
+  complete: loadApp
+});
+
+var flipbookEL = document.getElementById('flipbook');
+
+window.addEventListener('resize', function (e) {
+  flipbookEL.style.width = '';
+  flipbookEL.style.height = '';
+  $(flipbookEL).turn('size', flipbookEL.clientWidth, flipbookEL.clientHeight);
+});
+
+$(flipbookEL).turn({
+    autoCenter: true
+});
+
+
+</script>
+
+{{ end }}

src/layouts/page/package-detail.html

@@ -0,0 +1,58 @@
+{{ define "main" }}
+
+<section class="one-box">
+  <div class="container">
+    <div class="row">
+      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
+        <div class="package-thumbnail">
+          {{ range where $.Site.Data.packages "name" .Title }}
+          <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
+          {{ end }}
+        </div>
+      </div>
+      <div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
+        <h3>{{- .Title -}}</h3>
+        {{ range where $.Site.Data.packages "name" .Title }}
+          <p>{{- .desc -}}</p>
+          {{ if not (eq .homepage "") }}
+            {{- partial "detail-btn-large.html" .homepage -}}
+          {{end}}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Copy to clipboard field -->
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col grid-gray">
+        Copy the tea one-liner below into your terminal to install {{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ range where $.Site.Data.packages "name" .Title }}
+  {{- partial "clipboard-copy.html"  -}}
+
+  <script type="text/javascript">
+    document.getElementById("shortcodeCopy").value = "sh <(curl tea.xyz) +{{- .full_name -}}";
+  </script>
+{{ end }}
+
+
+
+<style>
+
+  .package-thumbnail{
+    width: 100%;
+    height: 100%;
+    background-color: gray;
+  }
+
+</style>
+
+{{ end }}

src/layouts/page/package-manager.html

@@ -0,0 +1,76 @@
+{{ define "main" }}
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col my-auto">
+        <h1 class="text-center">package manager</h1>
+        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <div class="full-width-graphic text-center">Full-Width Graphic Here</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 col-md-8 col-sm-12 col-12">
+        <h2>brew2 for web3</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{- partial "full-width-cta.html" -}}
+
+
+
+{{ end }}

src/layouts/page/pioneer-a-better-internet.html

@@ -407,7 +407,7 @@ their Github account. So don’t delay, get it while it’s hot.</p>
         </div>
 
         <div class="col-6 col-sm-6 col-lg align-self-center">
-          <a href="https://www.instagram.com/tea.xyz/">
+          <a href="#">
             <div class="com-card mb-4">
               <img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
             </div>

src/layouts/page/press.html

@@ -0,0 +1,220 @@
+{{ define "main" }}
+
+<section class="two-boxes">
+  <div class="container">
+    <div class="row">
+      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
+        <h1>Press</h1>
+        <div class="one-box-down">
+          <p class="lead mb-5" style="margin-bottom: 0px;">Tea Inc. is a Puerto Rico-based corporation that is building the open-source toolkit that makes development possible and builds the internet. Developers can work on any platform, CI/CD on any platform, deploy on any platform; Tea abstracts this detail away so developers can get on with the work that matters. Those interested in joining the team fixing how open-source is funded should reach out through Telegram or Discord at https://linktr.ee/teaxyz.</p>
+        </div>
+        <a href="mailto:press@tea.xyz?subject=Press Inquiry">
+          <button class="detail-btn-large"><i class="icon-enter-arrow"></i>CONTACT US</button>
+        </a>
+      </div>
+      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
+
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<section class="one-box">
+  <div class="container">
+    <div class="row one-box-down">
+      <div class="col">
+        <h3>Assets</h3>
+      </div>
+    </div>
+
+    <div class="row one-box-down">
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <h5>Type</h5>
+        <p>Brand Style Guide</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <h5>Format</h5>
+        <p>PDF</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <h5>Size</h5>
+        <p>1.5 MB</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
+        <h5>Asset Link</h5>
+        <button class="asset-btn">DOWNLOAD</button>
+      </div>
+    </div>
+
+    <div class="one-box-down">
+      <hr>
+    </div>
+
+    <div class="row">
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <h5>Type</h5>
+        <p>Brand Library</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <h5>Format</h5>
+        <p>Google Drive</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <h5>Size</h5>
+        <p>variable</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
+        <h5>Asset Link</h5>
+        <a href="https://drive.google.com/drive/u/0/folders/1JB7Fa3hzM639KtRjgpKkcBGRwx4Lr-k3">
+          <button class="asset-btn">OPEN FOLDER</button>
+        </a>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<hr>
+
+<section class="one-box">
+  <div class="container">
+    <div class="row one-box-down">
+      <div class="col">
+        <h3>In the Press</h3>
+      </div>
+    </div>
+    <div class="row one-box-down gx-5">
+      <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1 order-sm-2 order-2">
+        <h5>Binance</h5>
+        <p class="press-desc">Binance Labs, the venture capital and innovation incubator of Binance, led an $8 million seed funding round of Tea, a new company building an open-source software platform on the blockchain. Open source has been foundational for the Internet, underpinning everything online for more than twenty-five years. Tea Co-Founder and CEO, Max Howell, is known for creating Homebrew, also known as “brew,” the most contributed-to open-source software program globally. Homebrew has been used by tens of millions of developers worldwide and has served as the backbone for the most prominent technology corporations to build their products without directly contributing to its development. </p>
+        <a href="https://www.binance.com/en/blog/ecosystem/binance-labs-leads-$8-million-seed-funding-round-for-tea-421499824684903608">Read more</a>
+      </div>
+      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 order-xl-2 order-lg-2 order-md-2 order-sm-1 order-1">
+        <div class="press-image" id="binance-img">
+
+        </div>
+      </div>
+    </div>
+
+    <div class="divider one-box-down">
+      <hr>
+    </div>
+
+    <div class="row one-box-down gx-5">
+      <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1 order-sm-2 order-2">
+        <h5>TechCrunch</h5>
+        <p class="press-desc">Open source code is integral to tech stacks at many large companies, but its authors rarely get recognized — let alone compensated — for their work. Max Howell claims the package manager software he created, Homebrew, is the most contributed-to open source software program in the world. Still, companies including Square and Google that have leveraged Homebrew haven’t acknowledged Howell’s contributions to their product in any meaningful way, he told TechCrunch — though he noted they did send him some branded swag items, including a blanket.</p>
+        <a href="https://techcrunch.com/2022/03/23/open-source-project-tea-is-brew2-for-web3/">Read more</a>
+      </div>
+      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 order-xl-2 order-lg-2 order-md-2 order-sm-1 order-1">
+        <div class="press-image" id="techcrunch-img">
+
+        </div>
+      </div>
+    </div>
+
+    <div class="divider one-box-down">
+      <hr>
+    </div>
+
+    <div class="row gx-5">
+      <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1 order-sm-2 order-2">
+        <h5>Businesswire</h5>
+        <p class="press-desc">SAN JUAN, Puerto Rico--(BUSINESS WIRE)--Tea, a new company building an open source software platform on the blockchain, today announced an $8 million seed funding round led by Binance Labs, the venture capital and innovation incubator of Binance, the world's leading blockchain ecosystem and cryptocurrency infrastructure provider. Open source has been foundational for the Internet, underpinning everything online for more than twenty-five years. Tea Co-Founder and CEO Max Howell created the open-source software package management system Homebrew, also known as “brew,” which grew into the most contributed-to open source software program in the world. Homebrew has been used by tens of millions of developers worldwide and has served as the backbone for the largest technology corporations to build their products without directly contributing to its development.</p>
+        <a href="https://www.businesswire.com/news/home/20220323005603/en/Tea-Raises-8-Million-Led-by-Binance-Labs-to-Create-New-Open-Source-Software-on-the-Blockchain">Read more</a>
+      </div>
+      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 order-xl-2 order-lg-2 order-md-2 order-sm-1 order-1">
+        <div class="press-image" id="businesswire-img">
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<hr>
+
+<section class="one-box">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <h3>Founder Bios</h3>
+      </div>
+    </div>
+    <div class="row gx-5">
+      <div class="col-xl-6 ">
+        <h5>Max Howell</h5>
+        <p>Co-Founder and CEO Max Howell created the open-source software package management system Homebrew, also known as “brew,” which grew into the most contributed‐to open source software program in the world. Homebrew has been used by tens of millions of developers worldwide and has served as the backbone for the largest technology corporations to build their products without directly contributing to its development.</p>
+      </div>
+      <div class="col">
+        <h5>Timothy Lewis</h5>
+        <p>Co-Founder Timothy Lewis began his career in 2002 at e-velocity technical consulting as a  Data Center Engineer for two years, after that he held any roles as a Consulting Engineer, worked at Oracle, Kaiser Permanente until he switched over to Blockchain Development in 2017 and has been involved in that area ever since. He now is the founder of a non-profit called DEVxDAO which supports DAO which provides grants to build cohesion and longevity in decentralized systems at large.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+
+  .asset-btn{
+    width: 100%;
+    display:inline-block;
+    font-family: "pp-neue-machina", sans-serif;
+    background-color: #1a1a1a;
+    border: .5px solid #ffffff;
+    color: #fff;
+    height: 40px;
+    padding-top: 5px;
+    transition: 0.2s ease-in-out;
+  }
+
+  .asset-btn:hover{
+    background-color: #8000ff;
+    box-shadow: inset 0px 0px 0px 4px #1a1a1a !important;
+  }
+
+  .press-image{
+    height: 100%;
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #binance-img{
+    background-image: url("/Images/binance-labs-gen-art.jpg");
+  }
+
+
+  #techcrunch-img{
+    background-image: url("/Images/techcrunch-gen-art.jpg");
+  }
+
+  #businesswire-img{
+    background-image: url("/Images/businesswire-gen-art.jpg");
+  }
+  
+  .press-desc{
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+  }
+
+  @media only screen and (max-width: 576px) {
+
+    .press-image{
+      height: 100px;
+      background-position: center;
+      background-repeat: repeat;
+      background-size: cover;
+      margin-bottom: 40px;
+    }
+
+  }
+
+</style>
+
+{{ end }}

src/layouts/page/products.html

@@ -0,0 +1,141 @@
+{{ define "main" }}
+
+<!-- Desktop Gen Art -->
+
+<section class="two-boxes product-hero-section">
+
+<!-- Mobile Gen Art -->
+
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-p-gen-art-1"></div>
+<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-p-gen-art-2"></div>
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-p-gen-art-3"></div>
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-p-gen-art-4"></div>
+<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-p-gen-art-5"></div>
+
+
+<style media="screen">
+
+  #m-p-gen-art-1{
+    position:absolute;
+    width:48vw;
+    height: 18.6vw;
+    left: 6.8vw;
+    margin-top:61vw;
+    z-index: 3;
+    background-image: url("/Images/gen-art/glass-triangles.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-p-gen-art-2{
+    position:absolute;
+    width:15vw;
+    height: 15vw;
+    left: 45vw;
+    margin-top:72vw;
+    border-radius: 200px;
+    z-index: 3;
+    background-image: url("/Images/gen-art/colorful-sandal.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-p-gen-art-3{
+    position:absolute;
+    width:20vw;
+    height: 20vw;
+    right: 6.8vw;
+    margin-top: 70vw;
+    z-index: 3;
+    background-image: url("/Images/gen-art/pixel-mouth.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-p-gen-art-4{
+    position:absolute;
+    width:60vw;
+    height: 20vw;
+    right: 6.8vw;
+    margin-top: 0vw;
+    z-index:2;
+    background-image: url("/Images/gen-art/pixel-mouth.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-p-gen-art-5{
+    position:absolute;
+    width:25vw;
+    height: 10vw;
+    right: 15vw;
+    top: 30vw;
+    z-index:2;
+    background-image: url("/Images/gen-art/tribal-green.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  @media only screen and (min-width: 576px) {
+    .gen-art-mobile{
+      display: none;
+    }
+  }
+
+</style>
+
+  <div class="container">
+    <div class="row">
+      <div class="col" style="position:relative; z-index:4;">
+        <h1 style="margin-bottom: 0px !important;">Products</h1>
+        <div class="lead-text-container animated-25 animatedFadeInUp fadeInUp black-bg p-4">
+          <p class="lead" style="margin-bottom: 0px">Just like the perfect cup of tea, greatness takes time to steep. But the wait is over… it’s time to take your first sip.</p>
+          <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<section class="products-tea-cli">
+  <div class="container product-container">
+    <div class="row">
+      <div class="col-lg-6 col-md-6 col-sm-12 col-12 my-auto">
+        <h3>tea.cli</h3>
+        <p>Tea.cli is more than a package manager. With new features such as executable markdown, a universal interpreter, and virtual environment manager it has never been easier to create and collaborate. </p>
+        <button onclick="window.location.href='/tea-cli/'" class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
+      </div>
+      <div class="col my-auto">
+        <img src="/Images/tea_cli_mockup_no_background.png" alt="tea-cli preview" style="width:100%;">
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<section class="products-tea-package-manager">
+  <div class="container product-container">
+    <div class="row">
+      <div class="col-lg-6 col-md-6 col-sm-12 col-12 order-lg-2 my-auto">
+        <h3>tea protocol</h3>
+        <p>The OSS funding problem has always existed, but until now, we haven't had the technology to fix it. tea is changing that by facilitating the graph of open source projects that underpin all modern digital infrastructure. We're putting this information on-chain so that we can create a map to guide value redistribution back into the open source projects that make the Internet possible.</p>
+        <button onclick="window.location.href='/white-paper/'" class="detail-btn-large"><i class="icon-enter-arrow"></i>READ OUR WHITE PAPER</button>
+      </div>
+      <div class="col">
+        <img src="/Images/tea_cli_mockup_no_background.png" alt="tea-cli preview" style="width:100%;">
+      </div>
+    </div>
+  </div>
+</section>
+
+{{- partial "full-width-cta.html" -}}
+
+{{ end }}

src/layouts/page/rewards.html

@@ -0,0 +1,70 @@
+{{ define "main" }}
+
+<section class="rewards-hero">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <h1>How to Earn Your NFT Rewards</h1>
+        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <img class="action-item-image" src="/Images/gen-art/glass-triangles.jpg" alt="">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <img class="action-item-image" src="/Images/gen-art/glass-triangles.jpg" alt="">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <img class="action-item-image" src="/Images/gen-art/glass-triangles.jpg" alt="">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <img class="action-item-image" src="/Images/gen-art/glass-triangles.jpg" alt="">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <img class="action-item-image" src="/Images/gen-art/glass-triangles.jpg" alt="">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <img class="action-item-image" src="/Images/gen-art/glass-triangles.jpg" alt="">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <img class="action-item-image" src="/Images/gen-art/glass-triangles.jpg" alt="">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
+        <img class="action-item-image" src="/Images/gen-art/glass-triangles.jpg" alt="">
+        <h4>Action Item</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+
+  .action-item-image{
+    width: 100%;
+    height: 10vw;
+  }
+
+</style>
+
+{{ end }}

src/layouts/page/style-guide.html

@@ -0,0 +1,83 @@
+{{ define "main" }}
+<section>
+  <div class="container style-guide-container">
+    <div class="row">
+      <div class="col">
+        <h1>The tea style guide. Also, this is an H1.</h1>
+        <h2>We believe in open-sourcing everything... right down to our brand's look and feel. Also, this is an H2.</h2>
+        <h3>Working with a visible grid system in a responsive framework is difficult, but you can inspect these elements to see how we did it.</h3>
+        <h4>This H4 is intended to explain how we convert 'px' meaurements from design specs to 'vw' units. The formula for that is (vw = pixels / viewport total width x 100).</h4>
+        <h5>This is an H5, and it's primarily used for things like the headers inside the footer section. It's a small one, but should still always be in our primary tea'l color.</h5>
+        <p class="lead">This is our 'lead' text and it's displays slightly larger than our regular paragraph text. This variant is used for sub-heads and important 'call-out' information. Each line's height should be equivalent to roughly 1/3 the height of a grid box.</p>
+        <p>And this is our good old-fashioned body copy. This font-size is on the larger end of what's considered standard for paragraph text. The monospace typeaces we're using, while super-cool, are not quite as ledgible as their variable-spaced counterparts. Thusly, we're over-compensating slightly. This variant, as well as the 'lead' text, should either be white (#fff) or 'Soft Black' (#1A1A1A)... depending on the background.</p>
+      </div>
+    </div>
+  </div>
+  <div class="full-width-cta-container">
+     {{- partial "full-width-cta.html" . -}}
+  </div>
+</section>
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        {{- partial "klaviyo-form.html" -}}
+
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+
+@media only screen and (min-width: 1200px) {
+
+  .style-guide-container{
+    background-image: url("/Images/x-large-grid.svg");
+    background-attachment: fixed;
+    background-repeat: repeat;
+    background-size: contain;
+  }
+
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1200px) {
+
+  .style-guide-container{
+    background-image: url("/Images/large-grid.svg");
+    background-attachment: fixed;
+    background-position: top;
+    background-repeat: repeat;
+    background-size: contain;
+  }
+
+}
+
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+
+  .style-guide-container{
+    background-image: url("/Images/medium-grid.svg");
+    background-attachment: fixed;
+    background-position: top;
+    background-repeat: repeat;
+    background-size: contain;
+  }
+
+}
+
+@media only screen and (max-width: 576px) {
+
+  .style-guide-container{
+    background-image: url("/Images/small-grid.svg");
+    background-attachment: fixed;
+    background-position: top;
+    background-repeat: repeat;
+    background-size: contain;
+  }
+
+}
+
+</style>
+
+{{ end }}

src/layouts/page/tea-cli.html

@@ -0,0 +1,92 @@
+{{ define "main" }}
+
+<section class="tea-cli">
+  <div class="container tea-cli-container two-boxes">
+    <div class="row">
+      <div class="col my-auto">
+        <h1>TEA CLI</h1>
+        <p class="lead">brew2 for web3 is here. The minds that changed the interwebs for the better back in 2009 have just done it again. tea is here to help make your dev experience a little more delightful. </p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+
+  .tea-cli-container{
+    background-image: url("/Images/x-large-grid.svg");
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+</style>
+
+{{- partial "clipboard-copy.html" -}}
+
+<section class="teal-bg two-boxes">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <h3 class="black text-center">Oh @#$%... the documentation <em>is</em> the script!?"</h3>
+        <p class="black text-center" style="background-color:none !important;">–Our latest developer discovering <strong>Executable Markdown</strong></p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .tea-cli-data{
+    font-size: 6.138vw;
+    font-family: "pp-neue-machina";
+  }
+</style>
+
+<section>
+  <div class="container two-boxes">
+    <div class="row one-box-down">
+      <h3>The new foundation of the internet.</h3>
+    </div>
+    <div class="row">
+      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
+        <h4>teaxyz/cmd</h4>
+        <p>A big reason Homebrew was a massive success was “viral contribution”. This is a new form of viral contribution. tea is a packaging primitive. We are making it super easy and viral for people to create new tools on top of tea and to satisfy that “I'm a part of this” urge that open source vitality plays up.</p>
+      </div>
+      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
+        <h4>executable markdown</h4>
+        <p>Markdown has become the ultimate documentation file format (white paper is written in it). Every project has comprehensive readmes. Every dev team documents their internal workspaces with markdown. We’re iterating the format by making it able to execute itself.</p>
+      </div>
+      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
+        <h4>universal interpreter</h4>
+        <p>Making a PM or tool that uses other packages sucks RN. This has led to self contained ecosystems where people make a packaging tool (eg. npm) and then everybody can only use tools within that ecosystem because everything else is too much friction. tea changes this.</p>
+      </div>
+      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
+        <h4>virtual environment</h4>
+        <p>devshops and open source projects need specific versions of tools and they need the whole team to be on those tools. Currently you either cross your fingers or use Docker. Docker sucks and slows down dev and hinders innovation. Docker is great for deployment but it sucks for dev. tea ensures that checking out a project uses the exact versions of things that project needs whatever platform they are developing on.</p>
+      </div>
+      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
+        <h4>pantries</h4>
+        <p>Introducing FQDs where you can provide the data as open graph, or a link to a YAML file. Fetching the FQD with accepts/package/YAML gives your the package YAML.</p>
+      </div>
+      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 one-box-down">
+        <h4>Executable Blog Posts</h4>
+        <p>Every blog post and tutorial on dev starts with brew install foo in tea’s future they will instead do sh <(curl tea.xyz) [<http://blog-post.com/article-url/>](<http://blog-post.com/article-url/>) (we will also release web-buttons that activate tea if installed or install it first otherwise).
+</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+<section>
+  <div class="container three-boxes">
+    <div class="row">
+      <div class="col">
+        <h3 class="text-center">And it's even better if you join the tea party...</h3>
+      </div>
+    </div>
+  </div>
+</section>
+<hr>
+{{- partial "full-width-cta.html" -}}
+
+{{ end }}

src/layouts/page/tea-protocol.html

@@ -0,0 +1,30 @@
+{{ define "main" }}
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <h1>tea protocol</h1>
+        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{- partial "full-width-cta" -}}
+
+{{ end }}

src/layouts/page/tea-qr.html

@@ -82,7 +82,7 @@
       </div>
 
       <div class="col-6 col-sm-6 col-lg align-self-center">
-        <a href="https://www.instagram.com/tea.xyz/">
+        <a href="#">
           <div class="com-card mb-4">
             <img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
           </div>

src/layouts/page/white-paper.html

@@ -1,78 +1,46 @@
 {{ define "main" }}
 
-<style media="screen">
-  .main-nav{
-    display:none;
+{{- partial "white-paper-gen-art.html" -}}
+
+<!-- Hero Section -->
+<div class="section two-boxes wp-hero-section">
+  <div class="container">
+    <div class="row">
+      <div class="col" style="position: relative; z-index: 2;">
+        <h1>White Paper</h1>
+        <div class="wp-lead-text-container animated-5 animatedFadeInUp fadeInUp p-4 black-bg">
+          <p class="lead" style="margin-bottom: 0px;">Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
+        </div>
+        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr>
+  <div class="row button-container">
+    <a href="/tea.white-paper.pdf" role="button" class="btn btn-primary auth-btn split-btn" id="nav-cta"><i class="icon-enter-arrow"></i>DOWNLOAD WHITEPAPER</a>
+    <a href="https://github.com/teaxyz/white-paper" role="button" class="btn btn-primary auth-btn split-btn split-right" id="nav-cta"><i class="icon-enter-arrow"></i>CONTRIBUTE ON GITHUB</a>
+  </div>
+<hr>
+
+<style>
+  .split-btn{
+    display: inline-block;
+    width: 50%;
   }
 
-  @media only screen and (max-width: 980px) {
-    .auth-btn {
-      width: 100%;
-      margin-bottom: 20px;
-    }
+  .split-right{
+    border-left: 0px !important;
   }
 
 </style>
 
-<nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto">
-    <div class="container-fluid top-nav">
-      <a class="navbar-brand" href="#"><img src="/Images/tea-main-logo.svg" style="width:100px;"></a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span>
-          <input type="checkbox" id="checkbox1" class="checkbox1 visuallyHidden">
-          <label for="checkbox1">
-            <div class="hamburger hamburger1">
-              <span class="bar bar1"></span>
-              <span class="bar bar2"></span>
-              <span class="bar bar3"></span>
-              <span class="bar bar4"></span>
-            </div>
-          </label></span>
-      </button>
-      <div class="collapse navbar-collapse pt-2 pb-2" id="navbarSupportedContent">
-        <ul class="navbar-nav ms-auto me-4 my-auto">
-          {{ range .Site.Menus.main }}
-          <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
-            <a class="nav-link{{ if $.IsMenuCurrent "main" . }} active" aria-current="page {{ end }}" href="{{ .URL }}">{{ .Name}}</a>
-          </li>
-          {{ end }}
-        </ul>
-      </div>
-      <a class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4"
-        href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" role="button">Authenticate with tea<span
-          class="badge rounded-pill bg-primary ms-3"><span id="count4">287</span></span></a>
-    </div>
-  </nav>
 
-<!-- Hero Section -->
-
-  <img style="display:none;" id="tea-steam-dark-1" src="/Images/tea-steam-dark-1.svg" alt="">
-  <img id="tea-steam-dark-2" src="/Images/tea-steam-dark-2.svg" alt="">
-  <div class="container mb-lg-2 mb-md-5 mb-sm-0 mb-0 mt-lg-2 mt-md-5 mt-sm-0 mt-0">
-    <div class="row hero my-auto">
-      <div style="z-index:100; display:flex; flex-direction:column;" class="col-lg-9 col-sm-12">
-        <div style="margin-top:auto; margin-bottom:auto;">
-          <h1 class="display-3 mb-4">We’re Open&#8208;Sourcing Our White Paper</h1>
-          <p class="mb-5 fs-sm-5 fs-lg-6 lead">Open&#8208;source is about the many coming together to create something
-            great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to
-            our white paper and help brew the future of the internet. This is our revolutionary undertaking to create
-            equitable open&#8208;source for web3, and we want you to be a part of laying its groundwork.<br><a
-              style="color:#54BAAB;" href="https://tea.xyz/tea.white-paper.pdf">Download our white paper</a>.</p>
-        </div>
-      </div>
-      <div style="display:flex; flex-direction:column;" class="col-lg-3 col-sm-12">
-        <div style="margin-top:auto; z-index:100;">
-          <a class="btn btn-primary mb-3" href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz"
-            role="button">Authenticate with tea</a><br>
-          <a class="btn btn-primary align-middle mb-sm-5 mb-md-5 mb-5" id="whitepaper-btn"
-            href="https://github.com/teaxyz/white-paper" role="button"><i class="bi bi-github me-2" style="font-size:16px; "></i>Contribute to Our White Paper</a>
-        </div>
-      </div>
-    </div>
+<section class="one-box">
+  <div class="container">
     <div class="row">
-      <hr>
-        <div class="col mb-4 mt-3">
+      <div class="col">
         <h4>Our white paper is available in multiple languages</h4>
         <p>Thanks to the tea community's generosity and time, our white paper is available in several world languages. Select your preferred language from the dropdown menu.</p>
         <div class="dropdown">
@@ -81,11 +49,19 @@
           </button>
           <ul class="dropdown-menu" id="language-selector"></ul>
         </div>
+          <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
       </div>
     </div>
   </div>
+</section>
 
-    <script>
+<section>
+  <div class="container" style="padding-top: 0px !important;">
+    <div class="row">
+      <div class="col">
+        <div id="adobe-dc-view" style="width: 100%;"></div>
+        <script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
+        <script type="text/javascript">
           const versions = [
             ['English', ''],
             ['Bahasa Indonesia', '_id'],
@@ -97,54 +73,66 @@
             ['官话', '_zh']
           ];
 
-      document.addEventListener('DOMContentLoaded', function () {
-        for (const lang of versions) {
+          let adobeDcView;
 
-          $('#language-selector').append("<li><a class=\"dropdown-item\" onclick=\"go(\'" + lang[1] + "')\">" + lang[0] + "</a></li>");
+          const getAdobeDcView = () => {
+            if (!adobeDcView) {
+              adobeDCView = new AdobeDC.View({
+                clientId: "fc933927b4e947c2aaf9a7b33b26f0b4",
+                divId: "adobe-dc-view"
+              });
+            }
+            return adobeDCView;
           }
-      }, false);
 
-      function go(suffix) {
-        const url = 'https://tea.xyz/tea.white-paper' + suffix + '.pdf';
-        document.getElementById('wp-iframe').setAttribute('src', url + '#toolbar=0&navpanes=0&view=fitH');
-        document.getElementById('mobile-wp-download').setAttribute('href', url);
+          const getWhitePaperUrl = (suffix = '') => {
+            return 'https://tea.xyz/tea.white-paper' + suffix + '.pdf';
+          }
+
+          document.addEventListener("adobe_dc_view_sdk.ready", function(){
+            //Must change clientId before final merge
+            try {
+              for (const lang of versions) {
+                $('#language-selector').append("<li><a class=\"dropdown-item\" onclick=\"viewWhitepaper(\'" + lang[1] + "')\">" + lang[0] + "</a></li>");
+              }
+              const adobeDCView = getAdobeDcView();
+
+              adobeDCView.previewFile({
+                content:{
+                  location: {
+                    url: getWhitePaperUrl(),
+                  }
+                },
+                metaData:{
+                  fileName: "tea.white-paper.pdf"
+                }
+              }, { embedMode: "IN_LINE" });
+            } catch (error) {
+              console.error('test:', error);
+            }
+          });
+
+
+          function viewWhitepaper(suffix) {
+            const adobeDCView = getAdobeDcView();
+            const url = getWhitePaperUrl(suffix);
+            adobeDCView.previewFile({
+              content:{
+                location: { url }
+              },
+              metaData:{
+                fileName: "tea.white-paper.pdf"
+              }
+            }, { embedMode: "IN_LINE" });
+            // document.getElementById('mobile-wp-download').setAttribute('href', url);
           }
         </script>
+      </div>
+    </div>
+  </div>
+</section>
 
-  <style>
-
-    .languages{
-      border: 2px solid white;
-      border-radius: 30px;
-      width:240px;
-      background-color:#1C1E21;
-    }
-
-    .languages:hover{
-      background-color:#23282c;
-    }
-
-    .languages:focus{
-      background-color:#1C1E21;
-    }
-
-    .dropdown-menu{
-      width:240px;
-      background-color:#23282c;
-      color:white;
-    }
-
-    .dropdown-item{
-      color:white;
-    }
-
-    .dropdown-item:hover{
-      background-color: #54BAAB;
-    }
-
-  </style>
-
-  <!-- Start PDF -->
+  <!-- Start PDF
 
   <div class="container pdf-iframe"
     style="margin-bottom:100px; overflow:auto; -webkit-overflow-scrolling:touch; z-index:2;">
@@ -152,8 +140,6 @@
     </iframe>
   </div>
 
-  <!-- Mobile-only -->
-
   <div class="container mobile-pdf" style="margin-bottom:100px;">
     <div class="row">
       <div class="col">
@@ -169,69 +155,6 @@
         </div>
       </div>
     </div>
-  </div>
-
-  <!-- Community Links -->
-  <div class="row community-container pt-5 pb-5 mt-5 mb-5">
-    <div class="container p-4" id="community">
-      <div class="row">
-        <div class="col">
-          <h3 style="text-align:center;" class="mb-5 display-5">Join the Community</h3>
-        </div>
-
-      </div>
-      <div class="row">
-
-        <div class="col-6 col-sm-6 col-lg">
-          <a href="https://discord.gg/KCZsXfJphn">
-            <div class="com-card mb-4">
-              <img src="/Images/discord.svg" alt="" class="community-icon">
-            </div>
-          </a>
-        </div>
-
-        <div class="col-6 col-sm-6 col-lg">
-          <a href="https://twitter.com/teaxyz_">
-            <div class="com-card mb-4">
-              <img src="/Images/twitter.svg" alt="" class="community-icon">
-            </div>
-          </a>
-        </div>
-
-        <div class="col-6 col-sm-6 col-lg">
-          <a href="https://github.com/teaxyz">
-            <div class="com-card mb-4">
-              <img src="/Images/github.svg" alt="" class="community-icon">
-            </div>
-          </a>
-        </div>
-
-        <div class="col-6 col-sm-6 col-lg">
-          <a href="https://t.me/tea_xyz">
-            <div class="com-card mb-4">
-              <img src="/Images/telegram.svg" alt="" class="community-icon">
-            </div>
-          </a>
-        </div>
-
-        <div class="col-6 col-sm-6 col-lg align-self-center">
-          <a href="https://reddit.com/r/teaxyz">
-            <div class="com-card mb-4">
-              <img src="/Images/reddit.svg" alt="" class="community-icon">
-            </div>
-          </a>
-        </div>
-
-        <div class="col-6 col-sm-6 col-lg align-self-center">
-          <a href="https://www.instagram.com/tea.xyz/">
-            <div class="com-card mb-4">
-              <img src="/Images/instagram-iconAsset 1.svg" alt="" class="community-icon">
-            </div>
-          </a>
-        </div>
-
-      </div>
-    </div>
-  </div>
+  </div>-->
 
 {{ end }}

src/layouts/partials/clipboard-copy.html

@@ -0,0 +1,197 @@
+<hr>
+  <div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
+    <input class="one-liner" type="text" value="sh <(curl tea.xyz)" id="shortcodeCopy" readonly>
+
+    <!-- The button used to copy the text -->
+
+    <button type="button" class="clipboard-copy" id="liveToastBtn" onclick="changeCopied()">copy</button>
+  </div>
+<hr>
+
+<style>
+
+  .button-container{
+    background-color: #1a1a1a;
+  }
+
+  @media only screen and (min-width: 992px) {
+
+    .one-liner{
+      width: 80%;
+      padding: 2.455vw 4.185vw;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 2vw;
+      border-left: 2px solid #949494;
+    }
+
+    .one-liner:focus{
+      border:none;
+      outline: none;
+      border-left: 2px solid #949494;
+    }
+
+    .clipboard-copy{
+      height: 8.371vw;
+      width: 18%;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 2.1vw;
+      float:right !important;
+      background-color: #1a1a1a !important;
+      border: none;
+      border-right: 2px solid #949494;
+      transition: 0.2s linear;
+    }
+
+    .clipboard-copy:hover{
+      background-color: #00ffd0 !important;
+      color: #1a1a1a !important;
+      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 768px) and (max-width: 992px) {
+
+    .button-container{
+      padding:0px 6.1vw !important;
+    }
+
+    .one-liner{
+      width: 80%;
+      padding: 2.455vw 5.040vw !important;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 2vw;
+      border-left: 2px solid #949494;
+    }
+
+    .one-liner:focus{
+      border:none;
+      outline: none;
+      border-left: 2px solid #949494;
+    }
+
+    .clipboard-copy{
+      height: 8.371vw;
+      width: 18%;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 2.1vw;
+      float:right !important;
+      background-color: #1a1a1a !important;
+      border: none;
+      border-right: 2px solid #949494;
+      transition: 0.2s linear;
+    }
+
+    .clipboard-copy:hover{
+      background-color: #00ffd0 !important;
+      color: #1a1a1a !important;
+      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 576px) and (max-width: 768px) {
+
+    .button-container{
+      padding: 0vw 8vw !important;
+    }
+
+    .one-liner{
+      width: 77%;
+      padding: 5vw 4vw;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 3.5vw;
+      border-left: 2px solid #949494;
+    }
+
+    .one-liner:focus{
+      border:none;
+      outline: none;
+      border-left: 2px solid #949494;
+    }
+
+    .clipboard-copy{
+      padding: 5vw 4vw;
+      width: 20%;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 3.5vw;
+      float:right;
+      background-color: #1a1a1a !important;
+      border: none;
+      border-right: 2px solid #949494;
+      transition: 0.2s linear;
+    }
+
+    .clipboard-copy:hover{
+      background-color: #00ffd0 !important;
+      color: #1a1a1a !important;
+      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    }
+
+  }
+
+  @media only screen and (max-width: 576px) {
+
+    .one-liner{
+      width: 100%;
+      padding: 7.5vw 7.5vw !important;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      text-align: center !important;
+      font-size: 4vw;
+      border-left: 2px solid #949494;
+      border-right: 2px solid #949494;
+    }
+
+    .one-liner:focus{
+      border:none;
+      outline: none;
+      border-left: 2px solid #949494;
+      border-right: 2px solid #949494;
+    }
+
+    .clipboard-copy{
+      display: none;
+    }
+
+  }
+
+</style>
+
+<script>
+
+    function changeCopied() {
+    // Get the text field
+    var copyText = document.getElementById("shortcodeCopy");
+
+    // Select the text field
+    copyText.select();
+    copyText.setSelectionRange(0, 99999); // For mobile devices
+
+     // Copy the text inside the text field
+    navigator.clipboard.writeText(copyText.value);
+
+
+    document.getElementById("liveToastBtn").innerHTML = "copied!";
+
+  }
+
+</script>

src/layouts/partials/clipboard-modal.html

@@ -0,0 +1,169 @@
+<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-lg-3 col-md-3 col-sm-12 col-12 modal-image">
+
+          </div>
+          <div class="col-lg-9 col-md-9 col-sm-12 col-12 modal-message">
+            <h4 class="modal-head"><i class="icon-tea-checkmark"></i> <br id="mobile-break"> Copied to clipboard, enjoy!</h4>
+            <p class="lead">But wait... using tea without authenticating is like buying a video game without the DLC.</p>
+            <p class="modal-text">By authenticating your GitHub, you'll be eligible for a variety of exciting rewards, including minted NFT certificates. Your authentication number is directly tied to the rarity of your certificate, so be sure to take a sip while it's hot!</p>
+            <button class="detail-btn-large" id="modal-cta"><i class="icon-enter-arrow"></i>AUTHENTICATE WITH TEA</button>
+            <div class="small grid-gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+
+  .modal-image{
+    background-image: url("/Images/gen-art/abstract-pattern.png");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  .modal-message{
+    padding-left: 2vw;
+  }
+
+  .btn-close{
+    position: absolute;
+    right: 1vw;
+    top: 1vw;
+  }
+
+  .lead{
+    margin-bottom: 1vw !important;
+  }
+
+  .modal-content{
+    background-color: #1a1a1a;
+    color:white;
+    font-family: "sono";
+    border-radius: 0px !important;
+    border: 2px solid #949494;
+    padding: 2vw 2vw 2vw 2vw;
+  }
+
+  @media only screen and (min-width: 1200px) {
+
+    .modal-dialog{
+      max-width: 60%;
+    }
+
+    #mobile-break{
+      display: none;
+    }
+
+    .modal-text{
+      margin-bottom: 2vw;
+    }
+
+    #modal-cta{
+      width: 100%;
+      margin-bottom: 1vw;
+    }
+
+  }
+
+  @media only screen and (min-width: 992px) and (max-width: 1200px) {
+
+    .modal-dialog{
+      max-width: 60%;
+    }
+
+    #mobile-break{
+      display: none;
+    }
+
+    .modal-text{
+      margin-bottom: 2vw;
+    }
+
+    #modal-cta{
+      width: 100%;
+      margin-bottom: 1vw;
+    }
+
+  }
+
+  @media only screen and (min-width: 768px) and (max-width: 992px) {
+
+    .modal-dialog{
+      max-width: 80%;
+    }
+
+    #mobile-break{
+      display: none;
+    }
+
+    .modal-text{
+      margin-bottom: 2vw;
+    }
+
+    #modal-cta{
+      width: 100%;
+      margin-bottom: 1vw;
+    }
+
+  }
+
+  @media only screen and (min-width: 576px) and (max-width: 768px) {
+
+    .modal-dialog{
+      max-width: 100%;
+    }
+
+    #mobile-break{
+      display: block;
+    }
+
+    .modal-text{
+      margin-bottom: 8vw;
+    }
+
+    #modal-cta{
+      width: 100%;
+      margin-bottom: 4vw;
+    }
+
+    .modal-head{
+      margin-bottom: 4vw;
+    }
+
+  }
+
+  @media only screen and (max-width: 576px) {
+
+    .modal-dialog{
+      max-width: 100%;
+    }
+
+    #mobile-break{
+      display: block;
+    }
+
+    .modal-text{
+      margin-bottom: 8vw;
+    }
+
+    #modal-cta{
+      width: 100%;
+      margin-bottom: 4vw;
+    }
+
+    .modal-head{
+      margin-bottom: 4vw;
+    }
+
+  }
+
+</style>

src/layouts/partials/comic-catalog.html

@@ -0,0 +1,83 @@
+<section class="nb-man-catalog">
+  <div class="container">
+    <h3>catalog</h3>
+  </div>
+  <hr>
+  <div class="accordion" id="accordionExample">
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingOne">
+        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+          Issue #1 // Who Will You Meet in the Shadows?
+        </button>
+      </h2>
+      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+        <div class="accordion-body">
+          <div class="row">
+            <div class="col-lg-3 col-md-4 col-sm-12 col-12">
+              <img class="comic-thumb" src="/Images/nebraska-man-cover-issue-1l.jpg" alt="">
+            </div>
+            <div class="col-lg-9 col-md-8 col-sm-12 col-12 my-auto">
+              <h4>Issue Title. Issue No. </h4>
+              <p class="small"> Release Date | Author Name | Illustrator Name</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              <div class="parallel-btn-container">
+                <button href="#" class="detail-btn-large"><i class="icon-enter-arrow"></i>DOWNLOAD ISSUE</button>
+                <button href="#" class="detail-btn-large"><i class="icon-enter-arrow"></i>READ IN-BROWSER</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingTwo">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+          Issue #2 // Teamwork Makes the Dream Work
+        </button>
+      </h2>
+      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+        <div class="accordion-body">
+          <div class="row">
+            <div class="col-lg-3 col-md-4 col-sm-12 col-12">
+              <img class="comic-thumb" src="/Images/nebraska-man-cover-issue-1l.jpg" alt="">
+            </div>
+            <div class="col-lg-9 col-md-8 col-sm-12 col-12 my-auto">
+              <h4>Issue Title. Issue No. </h4>
+              <p class="small"> Release Date | Author Name | Illustrator Name</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              <div class="parallel-btn-container">
+                <button href="#" class="detail-btn-large"><i class="icon-enter-arrow"></i>DOWNLOAD ISSUE</button>
+                <button href="#" class="detail-btn-large"><i class="icon-enter-arrow"></i>READ IN-BROWSER</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="headingThree">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+          Issue #3 // The Battle to Save the Internet
+        </button>
+      </h2>
+      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+        <div class="accordion-body">
+          <div class="row">
+            <div class="col-lg-3 col-md-4 col-sm-12 col-12">
+              <img class="comic-thumb" src="/Images/nebraska-man-cover-issue-1l.jpg" alt="">
+            </div>
+            <div class="col-lg-9 col-md-8 col-sm-12 col-12 my-auto">
+              <h4>Issue Title. Issue No. </h4>
+              <p class="small"> Release Date | Author Name | Illustrator Name</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              <div class="parallel-btn-container">
+                <button href="#" class="detail-btn-large"><i class="icon-enter-arrow"></i>DOWNLOAD ISSUE</button>
+                <button href="#" class="detail-btn-large"><i class="icon-enter-arrow"></i>READ IN-BROWSER</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

src/layouts/partials/detail-btn-large.html

@@ -0,0 +1,3 @@
+<a target="_blank" href="{{- . -}}">
+    <button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
+</a>

src/layouts/partials/detail-btn.html

@@ -0,0 +1,38 @@
+<style>
+.detail-btn{
+  display:inline-block;
+  font-family: "pp-neue-machina", sans-serif;
+  background-color: #1a1a1a;
+  border: .5px solid #ffffff;
+  color: #fff;
+  padding-top: 0.279vw;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 134px;
+  height: 2.232vw;
+  min-height: 34px;
+  transition: 0.1s linear;
+}
+
+.detail-btn:hover{
+  background-color: #8000ff;
+  box-shadow: inset 0vw 0vw 0vw 0.223vw #1a1a1a !important;
+}
+
+/* Icon Styling */
+
+.detail-btn .icon-enter-arrow{
+ display: inline-block;
+ position: relaitve;
+ margin-right: 0.558vw;
+ transition: 0.2s ease-in-out;
+}
+
+.detail-btn:hover .icon-enter-arrow{
+ display: inline-block;
+ transform: rotate(-45deg) !important;
+}
+
+</style>
+
+<button class="detail-btn"><i class="icon-enter-arrow"></i>details</button>

src/layouts/partials/floating-join-btn.html

@@ -0,0 +1,180 @@
+<style>
+
+@media only screen and (min-width: 1200px) {
+
+  .gf-container {
+    width: 20vw;
+    height: 4vw;
+    border-radius: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: .3vw;
+    position: fixed;
+    font-size: 1vw;
+    background-color: #1a1a1a !important;
+    border: 2px solid #949494;
+    color: #ffffff;
+    text-decoration: none;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    right: 15px;
+    top: 5.3vw;
+    cursor: pointer;
+    z-index: 4;
+    transition: 0.2s ease-in-out;
+  }
+
+  .gf-container:hover {
+    color:#1a1a1a;
+    box-shadow: inset 0vw 0vw 0vw 0.358vw #1a1a1a !important;
+    background-color: #00ffd0 !important;
+
+  }
+
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+
+  .gf-container {
+    width: 20vw;
+    height: 5vw;
+    border-radius: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: .3vw;
+    position: fixed;
+    font-size: 1.2vw;
+    background-color: #1a1a1a !important;
+    border: 2px solid #949494;
+    color: #ffffff;
+    text-decoration: none;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    right: 15px;
+    top: 6.5vw;
+    cursor: pointer;
+    z-index: 3;
+    transition: 0.2s ease-in-out;
+  }
+
+  .gf-container:hover {
+    color:#1a1a1a;
+    box-shadow: inset 0vw 0vw 0vw 0.358vw #1a1a1a !important;
+    background-color: #00ffd0 !important;
+
+  }
+
+}
+
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+
+  .gf-container {
+    width: 20vw;
+    height: 5vw;
+    border-radius: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 0.3vw;
+    position: fixed;
+    text-align:center;
+    font-size: 1.562vw;
+    background-color: #1a1a1a !important;
+    border: 2px solid #949494;
+    color: #ffffff;
+    text-decoration: none;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    right: 15px;
+    top: 12vw;
+    cursor: pointer;
+    z-index: 3;
+    transition: 0.2s ease-in-out;
+  }
+
+  .gf-container:hover {
+    color:#1a1a1a;
+    box-shadow: inset 0vw 0vw 0vw 0.358vw #1a1a1a !important;
+    background-color: #00ffd0 !important;
+
+  }
+
+}
+
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+
+  .gf-container {
+    width: 32vw;
+    height: 8vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
+    padding-top: 0.3vw;
+    position: fixed;
+    text-align:center;
+    font-size: 2.5vw;
+    background-color: #1a1a1a !important;
+    border: 2px solid #949494;
+    color: #ffffff;
+    text-decoration: none;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    right: 15px;
+    bottom: 2.5vw;
+    cursor: pointer;
+    z-index: 3;
+    transition: 0.2s ease-in-out;
+  }
+
+  .gf-container:hover {
+    color:#1a1a1a;
+    box-shadow: inset 0vw 0vw 0vw 0.358vw #1a1a1a !important;
+    background-color: #00ffd0 !important;
+
+  }
+
+}
+
+@media only screen and (max-width: 576px) {
+
+  .gf-container {
+    width: 48vw;
+    height: 12vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
+    position: fixed;
+    text-align:center;
+    padding-top:0.4vw;
+    font-size: 4vw;
+    background-color: #1a1a1a !important;
+    border: 2px solid #949494;
+    color: #ffffff;
+    text-decoration: none;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    right: 3vw;
+    bottom: 3vw !important;
+    cursor: pointer;
+    z-index: 4;
+    transition: 0.2s ease-in-out;
+  }
+
+  .gf-container:hover {
+    color:#1a1a1a;
+    box-shadow: inset 0vw 0vw 0vw 1vw #1a1a1a !important;
+    background-color: #00ffd0 !important;
+
+  }
+
+}
+
+</style>
+
+<a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" class="gf-container animated-5 animatedFadeInUp fadeInUp" style="background-color:#8EC7BF;">
+ AUTHENTICATE
+</a>

src/layouts/partials/footer-nav.html

@@ -0,0 +1,24 @@
+<ul class="nav justify-content-end">
+  <li class="nav-item">
+    <a class="nav-link footer-link small" aria-current="page" href="/careers/">Careers</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link footer-link small" href="/privacy-policy/">Privacy Policy</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link footer-link small" href="/terms-of-use/">Terms of Use</a>
+  </li>
+</ul>
+
+<style>
+  .footer-link{
+    text-transform: lowercase;
+    color: white;
+    padding: 0vw 0vw 0vw 2.232vw !important;
+  }
+
+  .footer-link:hover{
+    color: #00ffd0 !important;
+  }
+
+</style>

src/layouts/partials/footer.html

@@ -1,68 +1,45 @@
-<div class="container footer mb-5 mt-5">
-    <div class="row mb-5 mt-5">
+<hr>
+<div id="myData"></div>
+
+<section class="footer" id="community">
+  <div class="container">
+      <div class="row footer-top">
+        <div class="col-lg-8 footer-content">
+          <h4>Changing the way you build. And what happens after you build it.</h4>
+          <p>tea.cli is a delightful package manager that gets out of your way and sets you up for a joyful development process. <a class="teal" href="#">You can install it today</a>. Our web3 protocol will create an OSS ecosystem that is safer for all users, and fair for all maintainers. Read our <a class="teal" href="#">white paper</a> here.</p>
+          <img class="footer-grid" src="/Images/footer-grid-element.svg" alt="tea.grid">
+          <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
+        </div>
         <div class="col-lg-4">
-        <img src="/Images/tea-light.svg" alt="tea.xyz logo" style="width:100px;">
-        <p class="boilerplate mt-3 small">tea is revolutionizing open&#8208;source by leveraging blockchain and web3 to
-          ensure fairness and equitability for the developers who power the internet. Now tell me, will you answer the
-          call? A shot&#x27;s been heard around the web, and the tea army wants you to join the cause.</p>
-      </div>
-
-      <div class="col-lg-2 col-sm-6 col-6 mt-3">
-        <h6>Quick Links</h6>
-        <ul class="nav flex-column small">
-          <li class="nav-item">
-            <a class="nav-link ps-0" href="/#">Home</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link ps-0" href="/#why-tea">Why tea?</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link ps-0" href="/#features">Features</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link ps-0" href="/white-paper">White Paper</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link ps-0" href="https://medium.com/teaxyz">Blog</a>
-          </li>
+          <div class="card social-box" style="width: 100%; float:right;">
+            <ul class="list-group list-group-flush">
+              <a class="list-group-item" role="button" href="https://twitter.com/teaxyz_"><i class="icon-twitter social-icon"></i>Twitter</a>
+              <a class="list-group-item" role="button" href="https://discord.gg/KCZsXfJphn"><i class="icon-discord social-icon"></i>Discord</a>
+              <a class="list-group-item" role="button" href="https://github.com/teaxyz"><i class="icon-github social-icon"></i>GitHub</a>
+              <a class="list-group-item" role="button" href="https://reddit.com/r/teaxyz"><i class="icon-reddit social-icon"></i>Reddit</a>
+              <a class="list-group-item" role="button" href="https://t.me/tea_xyz"><i class="icon-telegram social-icon"></i>Telegram</a>
             </ul>
           </div>
-
-      <div class="col-lg-2 col-sm-6 col-6 mt-3 mb-3">
-        <h6>tea Links</h6>
-        <ul class="nav flex-column small">
-          <li class="nav-item">
-            <a class="nav-link ps-0" href="https://linktr.ee/teaxyz">Linktree</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link ps-0" href="/careers/">Careers</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link ps-0" href="/privacy-policy/">Privacy Policy</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link ps-0" href="/terms-of-use/">Terms of Use</a>
-          </li>
-        </ul>
         </div>
-
-      <div class="col-lg-4 mt-3">
-        <h6 class=" mb-4">Get updates to your inbox</h6>
-
-<!-- Start klaviyo Form Module -->
-
-        {{- partial "klaviyo-form.html" . -}}
-
-<!-- End Sendx Form -->
-
-        <p style="font-size: 16px; color: gray;">You can also share our <a style="color:#54BAAB;" href="https://linktr.ee/teaxyz">Linktree</a>.
-        </p>
+      </div>
+      <div class="row mb-4">
+        <h4 class="mb-4">sign up for tea'mails</h4>
+          <div class="col">
+            {{- partial "klaviyo-form.html" -}}
           </div>
       </div>
       <div class="row">
-      <p class="text-center" style="font-size:12px; color:#B7C7C8;">© 2022 tea inc.</p>
+        <div class="col-lg-6">
+          <p class="small">©2022 tea inc. You can also share our <a href="" class="teal">Linktree</a>.</p>
+        </div>
+        <div class="col-lg-6">
+          {{- partial "footer-nav.html" . -}}
         </div>
       </div>
+  </div>
+</section>
+
+<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
 
 <!-- JavaScript Bundle with Popper -->
 
@@ -153,14 +130,14 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     "everything",
     "<i>you<i>"
     ];
-    const cycle = document.querySelector("#cycle");
+    const cycle = document.querySelector(".cycle","#cycle");
     let i = 0;
     const cycleText = () => {
       cycle.innerHTML = textList[i];
       i = ++i % textList.length;
     };
     cycleText();
-    setInterval(cycleText, 1200);
+    setInterval(cycleText, 2400);
 
   </script>
 
@@ -169,39 +146,77 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     rdt('track', 'ViewContent');
   </script>
 
-  <!-- Launch Countdown Timer -->
+  <script>
+    var swiper = new Swiper(".mySwiper", {
+      slidesPerView: 1.5,
+      spaceBetween: 10,
+      freeMode: true,
+      loop: true,
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+    });
+  </script>
 
   <script>
-  // Set the date we're counting down to
-  const teaDemoSchedule = "2022-11-03T07:45:00.000-04:00"; // Lisbon is UTC+0
-  var countDownDate = new Date(teaDemoSchedule).getTime();
 
-  // Update the count down every 1 second
-  var x = setInterval(function() {
+    const url = 'https://tea.breezy.hr/json?verbose=true';
 
-    // Get today's date and time
-    var now = new Date().getTime();
+    fetch(url)
+    .then(res => res.json())
+    .then((out) => {
+      //Debugging + Reference
+      console.log(out);
+      //Job Description One
+      document.getElementById('typeOne').innerHTML = out[0].type.name;
+      document.getElementById('deptOne').innerHTML = out[0].department;
+      out[0].location.is_remote === true ? document.getElementById('locOne').innerHTML = 'Remote' : document.getElementById('locOne').innerHTML = out[0].location.name;
+      document.getElementById('jobOne').innerHTML = out[0].name;
+      document.getElementById('descOne').innerHTML = out[0].description;
+      document.getElementById('linkOne').href = out[0].url;
+      document.getElementById('typeTwo').innerHTML = out[1].type.name;
+      document.getElementById('deptTwo').innerHTML = out[1].department;
+      document.getElementById('jobTwo').innerHTML = out[1].name;
+      document.getElementById('descTwo').innerHTML = out[1].description;
+      out[1].location.is_remote === true ? document.getElementById('locTwo').innerHTML = 'Remote' : document.getElementById('locTwo').innerHTML = out[1].location.name;
+      document.getElementById('linkTwo').href = out[1].url;
+      document.getElementById('jobThree').innerHTML = out[2].name;
+      document.getElementById('typeThree').innerHTML = out[2].type.name;
+      document.getElementById('deptThree').innerHTML = out[2].department;
+      out[2].location.is_remote === true ? document.getElementById('locThree').innerHTML = 'Remote' : document.getElementById('locThree').innerHTML = out[2].location.name;
+      document.getElementById('descThree').innerHTML = out[2].description;
+      document.getElementById('linkThree').href = out[2].url;
+    })
+    .catch(err => { throw err });
+
+  </script>
+
+  <script>
+
+
+    const toastTrigger = document.getElementById('liveToastBtn')
+    const toastLiveExample = document.getElementById('liveToast')
+    if (toastTrigger) {
+      toastTrigger.addEventListener('click', () => {
+        const toast = new bootstrap.Toast(toastLiveExample)
+
+        toast.show()
+      })
+    }
+
+  </script>
+
+  <script>
+
+    fetch('stats.json')
+    .then(res => res.json())
+    .then((out) => {
+      //Debugging + Reference
+      console.log(out);
+      document.getElementById('stat-one').innerHTML = out[0].num_repos;
+      document.getElementById('stat-two').innerHTML = out[0].num_maintainers;
+    })
+    .catch(err => { throw err });
 
-    // Find the distance between now and the count down date
-    var distance = countDownDate - now;
-
-    // Time calculations for days, hours, minutes and seconds
-    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
-    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-    // Display the result in the element with id="demo"
-    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
-    + minutes + "m " + seconds + "s ";
-    document.getElementById("demoLarge").innerHTML = days + "d " + hours + "h "
-    + minutes + "m " + seconds + "s ";
-
-    // If the count down is finished, write some text
-    if (distance < 0) {
-      clearInterval(x);
-      document.getElementById("demo").innerHTML = "EXPIRED";
-      document.getElementById("demoLarge").innerHTML = "EXPIRED";
-    }
-  }, 1000);
   </script>

src/layouts/partials/full-width-cta-split.html

@@ -0,0 +1,18 @@
+<hr>
+  <div class="row button-container">
+    <a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0 split-btn" id="nav-cta"><i class="icon-enter-arrow"></i>NPM</a>
+    <a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0 split-btn split-right" id="nav-cta"><i class="icon-enter-arrow"></i>INSTALL</a>
+  </div>
+<hr>
+
+<style>
+  .split-btn{
+    display: inline-block;
+    width: 50%;
+  }
+
+  .split-right{
+    border-left: 0px !important;
+  }
+
+</style>

src/layouts/partials/full-width-cta.html

@@ -0,0 +1,5 @@
+<hr>
+  <div class="row button-container">
+    <a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0" id="nav-cta"><i class="icon-enter-arrow"></i>Authenticate with tea<span class="dev-count"style="float:right; margin-top:0.837vw;font-size:1vw;"><u id="count1"></u> devs authenticated</span></a>
+  </div>
+<hr>

src/layouts/partials/full-width-discord-cta.html

@@ -0,0 +1,5 @@
+<hr>
+  <div class="row button-container">
+    <a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta"><i class="icon-enter-arrow"></i>Join our Discord<span style="float:right; margin-top:0.837vw;font-size:1vw;"><u id="count1"></u> devs authenticated</span></a>
+  </div>
+<hr>

src/layouts/partials/head.html

@@ -44,6 +44,9 @@
       })();
     </script>
 
+    <script type="text/javascript" src="/js/jquery.min.1.7.js"></script>
+    <script type="text/javascript" src="/js/modernizr.2.5.3.min.js"></script>
+
     <!-- Enable Klaviyo Signup Form  -->
 
     <script async type="text/javascript" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=VAwqJH"></script>
@@ -52,9 +55,25 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
       integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="apple-touch-icon-precomposed" href="/favicon-180.png">
-    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/homepage.css">
+    <link rel="stylesheet" href="/css/typography.css">
+    <link rel="stylesheet" href="/css/navbar.css">
+    <link rel="stylesheet" href="/css/generative-art.css">
+    <link rel="stylesheet" href="/css/footer.css">
+    <link rel="stylesheet" href="/css/package-grid.css">
+    <link rel="stylesheet" href="/css/buttons.css">
+    <link rel="stylesheet" href="/css/animations.css">
+    <link rel="stylesheet" href="/css/products.css">
+    <link rel="stylesheet" href="/css/accordion.css">
+    <link rel="stylesheet" href="/css/nebraska-man.css">
+    <link rel="stylesheet" href="/css/white-paper.css">
+    <link rel="stylesheet" href="/css/spacing.css">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
+    />
     <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap" rel="stylesheet">
-
+    <link href="https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/icons.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Prompt:wght@700&display=swap"
@@ -64,12 +83,12 @@
     <meta name="twitter:image:alt" content="sh &lt;(curl tea.xyz)">
     <meta name="twitter:title" content="tea.">
     <meta name="twitter:description" content="something new is brewing.">
-    <meta name="twitter:image" content="https://tea.xyz/cover.png">
+    <meta name="twitter:image" content="/cover.png">
     <meta property="og:url" content="http://tea.xyz" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="tea.xyz" />
     <meta property="og:description" content="Equitable Open-Source for web3" />
-    <meta property="og:image" content="https://tea.xyz/cover.png" />
+    <meta property="og:image" content="/cover.png" />
     <meta property="og:image:alt" content="sh &lt;(curl tea.xyz)" />
     <meta name="facebook-domain-verification" content="0fsbdl7joh0gha23zbhtovtpn0z0cl" />
     <meta name="description" content="The tools that build the internet have steeped too long. For the past two decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never thanking, never mentioning, and certainly never paying. At tea, we’re brewing something to change that by enabling developers (you) to continue doing what you love, while earning what you deserve.">
@@ -83,5 +102,10 @@
         window.location.replace(`${window.location.origin}${window.location.pathname}`)
       }
     </script>
+
+    {{- partial "floating-join-btn.html" . -}}
+
+    {{- partial "toast.html" -}}
+
   </head>
 </head>

src/layouts/partials/header.html

@@ -1,182 +1,43 @@
+<div class="offcanvas black-bg offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasRightLabel">MENU</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
 
+      <ul class="navbar-nav ms-auto me-4 my-auto">
+        {{ range .Site.Menus.main }}
+        <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
+          <a class="top-nav-link nav-link{{ if $.IsMenuCurrent "main" . }} active" aria-current="page {{ end }}" href="{{ .URL }}">{{ .Name}}</a>
+        </li>
+        {{ end }}
+      </ul>
 
-<section class="countdown-section" id="countdown-section">
-  <button onclick="hideShow()" class="hide small" type="button" name="button">CLOSE</button>
-  <div class="countdown-container">
-    <div class="countdown-contents p-4">
-      <p class="text-center display-1" id="demo"></p>
-      <p class="text-center authenticate display-6">Something new is brewing in <a class="teal" href="/lisbon/" style="text-decoration:none;">Lisbon</a>.</p>
   </div>
 </div>
-</section>
-
 
 <style>
 
-       @media screen and (max-width: 576px) {
+  @media only screen and (max-width: 992px) {
 
-         .hide{
-           position: absolute;
-           background-color:#1a1a1a !important;
-           border:none !important;
-           right: 5px;
-           top: 5px;
-           text-transform: uppercase;
-           color: #00ffd0;
-           z-index: 100;
-           opacity: 0.3;
+    .offcanvas{
+      border-left: 2px solid #949494;
     }
 
-         .hide:hover{
-           opacity: 1;
+    .offcanvas-title{
+      font-size: 3vw;
     }
 
+    a.top-nav-link{
+      color: #00ffd0!important;
+      font-size: 6vw;
+      text-align: right;
     }
 
-       @media screen and (min-width: 576px) {
-
-         .hide{
-           position: absolute;
-           background-color:#1a1a1a !important;
-           border:none !important;
-           right: 20px;
-           top: 20px;
-           text-transform: uppercase;
-           color: #00ffd0;
-           z-index: 100;
-           opacity: 0.3;
-           transition: 0.2s ease-in-out;
+    .btn-close{
+      color: white !important;
     }
 
-         .hide:hover{
-           opacity: 1;
-         }
-
-       }
-
-
-       @font-face {
-         font-family: "pp-neue-machina";
-         src: url("/fonts/PPNeueMachina-InktrapLight.woff") format("woff");
-       }
-
-       .tea-logo{
-         width:20%;
-       }
-
-       #demo, .authenticate, #something-new, .hide{
-         font-family: "pp-neue-machina", sans-serif;
-       }
-
-       #demo,
-       .authenticate a{
-         color: #00ffd0;
-       }
-
-       .countdown-section{
-         background-color: #1a1a1a;
-         position: relative;
-         z-index: 100;
-         display: block;
-       }
-
-       .countdown-container{
-         height: 28vh;
-         position: relative;
-         width: 100%;
-       }
-
-       .countdown-contents{
-         width: 100%;
-         display: block;
-         position: absolute;
-         top: 50%;
-         -ms-transform: translateY(-50%);
-         transform: translateY(-50%);
-       }
-
-       .countdown{
-         margin-bottom: 0px !important;
-       }
-
-
-
-
-       /* Floating GitHub Icon */
-
-      .gf-container {
-        width: 80px;
-        height: 80px;
-        border-radius: 60px;
-        display: flex;
-        flex-direction: column;
-        position: fixed;
-        right: 15px;
-        bottom: 15px;
-        cursor: pointer;
-        box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
-        animation: pulse 2s infinite;
-        z-index: 200;
-      }
-
-      .gf-container:hover {
-        animation: none;
-      }
-
-      @-webkit-keyframes pulse {
-        0% {
-          -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
-        }
-
-        70% {
-          -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
-        }
-
-        100% {
-          -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
-        }
-      }
-
-      @keyframes pulse {
-        0% {
-          -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
-          box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
-        }
-
-        70% {
-          -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
-          box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
-        }
-
-        100% {
-          -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
-          box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
-        }
-      }
-
-      .github-icon {
-        width: 60%;
-        margin-top: auto;
-        margin-bottom: auto;
   }
 
 </style>
-
-    <script type="text/javascript">
-      function hideShow() {
-        var x = document.getElementById("countdown-section");
-        if (x.style.display === "none") {
-          x.style.display = "block";
-        } else {
-          x.style.display = "none";
-        }
-      }
-
-    </script>
-
-
-
-    <a href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" class="gf-container" style="background-color:#8EC7BF;">
-      <img src="/Images/github.svg" alt="" class="github-icon mx-auto">
-
-    </a>

src/layouts/partials/klaviyo-form.html

@@ -1,50 +1,56 @@
-<div class="klaviyo-form-WUxzRc"></div>
+<hr>
+<div class="klaviyo-form-RqTcUf"></div>
+<hr>
+<p class="small mt-4" style="color:#949494;"><strong>Privacy Policy:</strong> We will never share, sell, or otherwise distribute your information to third-parties. We take a minimalistic approach to email marketing–meaning we'll only send you stuff when there's something you <em>absolutely</em> need to know about. You can read more about our privacy policies <a href="/privacy-policy/">here</a>.</p>
+<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
 
 <style>
 
-  .kl-private-reset-css-Xuajs1{
-    display: block !important;
-    padding: 0px !important;
-    margin-top: auto !important;
-    margin-bottom: auto !important;
+  #email_52016048{
+    background-color: #1a1a1a !important;
+    border: none !important;
+    font-family: "pp-neue-machina", sans-serif !important;
+    outline: none !important;
+    font-size: 28px !important;
+    padding-left: 0px !important;
+    color: #949494 !important;
+    font-weight: 400 !important;
+    text-transform: uppercase;
+    padding-top:5px !important;
   }
 
-  .go3894874857{
-    width: 100% !important;
-    background-color: #54BAAB !important;
-    height: 45px !important;
-    border: none !important;
-    border-radius: 60px !important;
+  #email_52016048::placeholder{
+    font-size: 28px !important;
+    font-family: "pp-neue-machina", sans-serif !important;
+    color: #949494 !important;
+    font-weight: 400 !important;
+  }
+
+  #email_52016048:focus{
+    outline: none !important;
+    box-shadow: none !important;
+
+  }
+
+  button.needsclick.go3894874857.kl-private-reset-css-Xuajs1{
+    background-color: #1a1a1a !important;
+    padding-left: 2.5vw !important;
+    font-family: "pp-neue-machina", sans-serif !important;
+    font-size: 28px !important;
+    font-weight: 400 !important;
+    color: #949494 !important;
+    padding-right: 2.5vw !important;
+    border-left: 2px solid #949494 !important;
     transition: 0.2s ease-in-out !important;
-    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
-    font-weight: 700 !important;
-    font-size: 16px !important;
+    padding-top:5px !important;
   }
 
-  .go3894874857:hover{
-    background-color: #62CFBF !important;
+  button.needsclick.go3894874857.kl-private-reset-css-Xuajs1:hover{
+    box-shadow: inset 0px 0px 0px 5px #1a1a1a !important;
+    background-color: #00ffd0 !important;
+    color: #1a1a1a !important;
   }
 
-  ::placeholder{
-    font-size: 16px !important;
-  }
 
-  #email_48240998{
-    width: 100%;
-    height: 45px !important;
-    font-size: 16px !important;
-    margin-bottom: 10px !important;
-    border: none !important;
-    border-radius: 30px !important;
-    background-color: #3F4346 !important;
-    padding: 10px 30px !important;
-    color: white !important;
-    transition: 0.1s ease-in-out !important;
-  }
-
-  #email_48240998:focus{
-    border: 1px solid #54BAAB !important;
-    box-shadow: 0px 0px 4px rgba(84, 186, 171, 0.5) !important;
-  }
 
 </style>

src/layouts/partials/mobile-art-home.html

@@ -0,0 +1,108 @@
+<style>
+
+  #m-home-gen-art-1{
+    position:absolute;
+    width:57vw;
+    height: 19.3vw;
+    left: 6.8vw;
+    margin-top:164vw;
+    z-index: 1;
+    background-image: url("/Images/gen-art/orange-pattern.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-home-gen-art-2{
+    position:absolute;
+    width:36vw;
+    height: 19.3vw;
+    right: 6.8vw;
+    margin-top:154vw;
+    z-index: 3;
+    background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-home-gen-art-3{
+    position:absolute;
+    width:18vw;
+    height: 18vw;
+    border-radius:200px;
+    right: 40vw;
+    margin-top:167vw;
+    z-index: 3;
+    background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+    animation: rotation 10s infinite linear;
+  }
+
+  #m-home-gen-art-4{
+    position:absolute;
+    width:36vw;
+    height: 12vw;
+    right: 50vw;
+    margin-top:180vw;
+    z-index: 2;
+    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-home-gen-art-5{
+    position:absolute;
+    width:36vw;
+    height: 100vw;
+    right: 50vw;
+    margin-top:20vw;
+    z-index: 1;
+    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-home-gen-art-6{
+    position:absolute;
+    width:36vw;
+    height: 60vw;
+    right: 30vw;
+    margin-top:30vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/gen-art-_0020_DALL·E 2022-09-02 12.25.55 - crystals in polarized light under microscope.png.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  @keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+
+}
+
+@media only screen and (min-width: 576px) {
+
+  .gen-art-mobile{
+    display: none;
+  }
+
+}
+
+</style>
+
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-1"></div>
+<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-2"></div>
+<div class="gen-art-mobile" id="m-home-gen-art-3"></div>
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-4"></div>
+<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-5"></div>
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-6"></div>

src/layouts/partials/mobile-grid-element.html

@@ -0,0 +1 @@
+<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">

src/layouts/partials/navbar.html

@@ -1,18 +1,9 @@
 <nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto main-nav">
     <div class="container-fluid top-nav">
-      <a class="navbar-brand" href="#"><img src="/Images/tea-main-logo.svg" style="width:100px;"></a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span>
-          <input type="checkbox" id="checkbox1" class="checkbox1 visuallyHidden">
-          <label for="checkbox1">
-            <div class="hamburger hamburger1">
-              <span class="bar bar1"></span>
-              <span class="bar bar2"></span>
-              <span class="bar bar3"></span>
-              <span class="bar bar4"></span>
-            </div>
-          </label></span>
+      <a class="navbar-brand" href="/"><img class="nav-logo" src="/Images/tea-logo-2.svg"></a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
+        aria-controls="offcanvasRight" aria-expanded="false" aria-label="Toggle navigation">
+        MENU
       </button>
       <div class="collapse navbar-collapse pt-2 pb-2" id="navbarSupportedContent">
         <ul class="navbar-nav ms-auto me-4 my-auto">
@@ -22,7 +13,8 @@
           </li>
           {{ end }}
         </ul>
-        <a class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta" href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" role="button"><span id="cta-text">Authenticate with tea</span><span class="badge rounded-pill bg-primary ms-3"><span id="count1">287</span></span><span id="lp-text"></span></a>
+        <!--
+          <a class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta" href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" role="button"><span id="cta-text">Authenticate with tea</span><span class="badge rounded-pill bg-primary ms-3"><span id="count1">287</span></span><span id="lp-text"></span></a>-->
       </div>
     </div>
   </nav>

src/layouts/partials/nb-man-gen-art.html

@@ -0,0 +1,49 @@
+<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="nb-man-gen-art-1"></div>
+<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="nb-man-gen-art-2"></div>
+<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="nb-man-gen-art-3"></div>
+
+<style>
+
+  #nb-man-gen-art-1{
+    position:absolute;
+    width:34vw;
+    height: 32vw;
+    right: 5.8vw;
+    top:12.8vw;
+    z-index: 1;
+    background-image: url("/Images/gen-art/nb-man-cover-1.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #nb-man-gen-art-2{
+    position:absolute;
+    width:12vw;
+    height: 12vw;
+    border-radius: 200px;
+    right: 32vw !important;
+    top:36vw;
+    z-index: 1;
+    background-image: url("/Images/gen-art/nb-man-cover-2.jpg");
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #nb-man-gen-art-3{
+    position:absolute;
+    width:30vw;
+    height: 12vw;
+    right: 32vw !important;
+    top:29vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/nb-man-page-1.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+</style>

src/layouts/partials/package-grid.html

@@ -0,0 +1,217 @@
+<!-- Package Grid -->
+
+<section>
+
+  <!-- Package Grid Header -->
+  <hr>
+    <div class="container package-grid-header">
+      <section class="flex">
+        <h3>packages</h3>
+        {{- partial "sort-dropdown.html" -}}
+      </section>
+      <p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
+    </div>
+  <hr>
+  <div class="package-grid">
+
+    <!-- Start Package Grid -->
+
+    <div class="row package-row black-bg g-0">
+      <div id="packageGrid" class="package-grid">
+        {{ range $.Site.Data.packages }}
+          {{- partial "package-thumbnail.html" .}}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+  <hr>
+  <div id="loadMoreSection" class="container small">
+    <div id="loadMorePackagesBtn"><i class="icon-enter-arrow"></i> SHOW MORE</div>
+  </div>
+</section>
+
+<style>
+  .container.small {
+    padding-top: 1em;
+    padding-bottom: 1em;
+  }
+  .package-grid {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+  #loadMorePackagesBtn {
+    cursor: pointer;
+    font-size: 2rem;
+    font-family: "pp-neue-machina", sans-serif;
+    background-color: #1a1a1a;
+    color: #fff;
+    padding-top: 0.279vw;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: 0.1s linear;
+  }
+  #loadMorePackagesBtn .icon-enter-arrow {
+    display: inline-block;
+    position: relaitve;
+    transition: all 0.2s ease-in-out;
+  }
+  #loadMorePackagesBtn:hover .icon-enter-arrow{
+    display: inline-block;
+    transform: rotate(-45deg) !important;
+  }
+  #loadMoreSection.hidden {
+    display: none;
+  }
+  @media only screen and (max-width: 576px) {
+    #loadMoreSection {
+      display: none;
+    }
+  }
+
+  @media only screen and (min-width: 576px) {
+    .package-grid {
+      /* changes to 3 column thumbs */
+      grid-template-columns: auto auto auto;
+    }
+  }
+
+  @media only screen and (min-width: 992px) {
+    .package-grid {
+      /* changes to 4 column thumbs */
+      grid-template-columns: auto auto auto auto;
+    }
+  }
+
+  .card-thumbnail.hidden {
+    height: 0px;
+    padding: 0px;
+    margin: 0px;
+    border: 0px;
+    overflow: hidden;
+  }
+</style>
+
+<script language="javascript" type="text/javascript">
+  const sortOptions = {
+    popularity: 'popularity',
+    last_modified: 'last_modified',
+  }
+  let sortBy = sortOptions.popularity; // last_modified
+  let sortDirection = 'desc'; // asc
+  let limit = 16;
+
+  function getPackageThumbs() {
+    const grid = document.getElementById('packageGrid');
+    return Array.from(grid.children).filter((e) => e.dataset && e.dataset.name);
+  }
+
+  const packagesCount = getPackageThumbs().length;
+
+  function sortPackages() {
+    const packages = getPackageThumbs();
+
+    const sortedPackages = packages.sort((a, b) => {
+      if (sortBy === sortOptions.popularity) {
+        const aPop = +a.dataset.popularity;
+        const bPop = +b.dataset.popularity;
+        return sortDirection === 'asc' ? aPop-bPop : bPop - aPop;
+      } else { // last_modified
+        const aDate = new Date(a.dataset.last_modified);
+        const bDate = new Date(b.dataset.last_modified);
+        return sortDirection === 'asc' ? aDate-bDate : bDate - aDate;
+      }
+    });
+
+    const grid = document.getElementById('packageGrid');
+    grid.textContent = '';
+
+    for(const sp of sortedPackages) {
+      grid.appendChild(sp);
+    }
+
+    const isPopularity = sortBy === sortOptions.popularity;
+
+    setBtnStyles(sortOptions.popularity, isPopularity);
+    setBtnStyles(sortOptions.last_modified, !isPopularity);
+    refreshDisplayedPackages();
+  }
+
+  function refreshDisplayedPackages() {
+    const packages = getPackageThumbs();
+    let i = 0;
+    for(const sp of packages) {
+      if (i >= limit) {
+        sp.classList.add('hidden');
+      } else {
+        sp.classList.remove('hidden');
+      }
+      i++;
+    }
+  }
+
+  const loadMoreButton = document.getElementById('loadMorePackagesBtn');
+  loadMoreButton.addEventListener('click',() => {
+    limit += 16;
+    refreshDisplayedPackages();
+    if (limit >= packagesCount) {
+      const loadMoreSection = document.getElementById('loadMoreSection');
+      loadMoreSection.classList.add('hidden');
+    }
+  }, false);
+
+  function getSortBtns(type) {
+    const typeBtn = document.getElementById(`dropdown-${type}-btn`);
+    const typeDownBtn = document.getElementById(`${type}-down-btn`);
+    const typeUpBtn = document.getElementById(`${type}-up-btn`);
+    return { typeBtn, typeDownBtn, typeUpBtn };
+  }
+
+  function setBtnStyles(type, active) {
+    const { typeBtn, typeDownBtn, typeUpBtn } = getSortBtns(type);
+    if (active) {
+      typeBtn.classList.add('active');
+      if (sortDirection === 'asc') {
+        typeUpBtn.classList.add('active');
+        typeDownBtn.classList.remove('active');
+      } else {
+        typeDownBtn.classList.add('active');
+        typeUpBtn.classList.remove('active');
+      }
+    } else {
+      typeBtn.classList.remove('active');
+      typeDownBtn.classList.remove('active');
+      typeUpBtn.classList.remove('active');
+    }
+  }
+
+  function configureSortButton(type) {
+    const { typeBtn, typeDownBtn, typeUpBtn } = getSortBtns(type);
+    typeBtn.addEventListener('click',() => {
+      if (sortBy != type) {
+        sortBy = type;
+        sortPackages();
+      }
+    }, false);
+
+    typeDownBtn.addEventListener('click',() => {
+      if (sortBy != type || sortDirection != 'desc') {
+        sortBy = type;
+        sortDirection = 'desc';
+        sortPackages();
+      }
+    }, false);
+
+    typeUpBtn.addEventListener('click',() => {
+      if (sortBy != type || sortDirection != 'asc') {
+        sortBy = type;
+        sortDirection = 'asc';
+        sortPackages();
+      }
+    }, false);
+  }
+
+  configureSortButton(sortOptions.popularity);
+  configureSortButton(sortOptions.last_modified);
+
+  sortPackages();
+</script>

src/layouts/partials/package-thumbnail.html

@@ -0,0 +1,354 @@
+<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
+  <figure class="card-img-top" >
+    <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
+    <article class="card-thumb-label">
+      <i class="icon-tea-logo-iconasset-1"></i>
+      <h3>{{- .name -}}</h3>
+      {{ if not (eq .maintainer "") }}
+        <h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
+      {{end}}
+    </article>
+  </figure>
+  <div class="card-body thumbnail-body">
+    <div class="card-text-container">
+      <p class="card-text">
+        <span class="package-version-no">V&NonBreakingSpace;{{- .version -}}</span>
+        <!--
+        TODO: uncomment once install counts improve
+        <br>
+        <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
+      </p>
+    </div>
+    <a href="/packages/{{- .slug -}}/">
+      {{- partial "detail-btn.html" . -}}
+    </a>
+  </div>
+  <div class="card-body thumbnail-body-mobile">
+    <a href="/packages/{{- .slug -}}/">
+      <button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
+    </a>
+  </div>
+</div>
+
+<style>
+
+div.card.card-thumbnail{
+  background-color: #1a1a1a;
+  transition: all .3s;
+}
+
+.card-img-top {
+  position: relative;
+}
+
+.detail-btn{
+  position: relative;
+  float:right!important;
+  right: 0;
+}
+
+@media only screen and (min-width: 576px) {
+
+  .package-image{
+    box-shadow: 0px 0px 12px #0c0c0c !important;
+  }
+
+}
+
+
+
+@media only screen and (min-width: 992px) {
+
+  .card-thumb-label i{
+    font-size: 1.5vw;
+  }
+
+  .card-thumb-label {
+    position: absolute;
+    background: rgba(255,255,255,0.9);
+    left: 0;
+    bottom: 0vw;
+    padding: 1.116vw;
+    text-align: left;
+    width: 90%;
+    height: 40;
+  }
+
+  .card-thumb-label h3 {
+    color: black;
+    font-size: 1.8vw;
+    line-height: 1.8vw;
+    margin: 0px 0px 0.5vw 0vw;
+    padding: 0px;
+  }
+
+  .card-thumb-label h4 {
+    color: black;
+    font-size: .9vw;
+    line-height: 1vw;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .card-thumbnail{
+    background: none;
+    border-radius: 0px !important;
+    border: 1px solid #949494;
+    padding: 1.674vw;
+  }
+
+  .thumbnail-body{
+    display: flex;
+    border-radius: 0px !important;
+    padding: 0vw;
+    justify-content: space-between;
+  }
+
+  .card-img-top{
+    border-radius: 0px;
+    margin-bottom: 1.674vw;
+  }
+
+  .card-text{
+    font-size: 0.781vw;
+    float:left;
+    position: relative;
+    top:0.502vw;
+  }
+
+  .card-text-container{
+    float:left;
+    position: relative;
+    width:48%;
+  }
+
+  .thumbnail-body-mobile{
+    display: none;
+  }
+
+}
+
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+
+  .card-thumb-label i{
+    font-size: 2vw;
+  }
+
+  .card-thumb-label {
+    position: absolute;
+    background: rgba(255,255,255,0.9);
+    left: 0;
+    bottom: 0vw;
+    padding: 1.116vw;
+    text-align: left;
+    width: 90%;
+    height: 40%;
+  }
+
+  .card-thumb-label h3 {
+    color: black;
+    font-size: 2.8vw;
+    line-height: 2.8vw;
+    margin: 0px 0px 1vw 0vw;
+    padding: 0px;
+  }
+
+  .card-thumb-label h4 {
+    color: black;
+    font-size: 1.5vw;
+    line-height: 1.5vw;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .card-thumbnail{
+    background: none;
+    border-radius: 0px !important;
+    border: 1px solid #949494;
+    padding: 1.674vw;
+  }
+
+  .thumbnail-body{
+    display: flex;
+    border-radius: 0px !important;
+    padding: 0vw;
+    justify-content: space-between;
+  }
+
+  .card-img-top{
+    border-radius: 0px;
+    margin-bottom: 1.674vw;
+  }
+
+  .card-text{
+    font-size: 0.781vw;
+    float:left;
+    position: relative;
+    top:0.502vw;
+  }
+
+  .card-text-container{
+    float:left;
+    position: relative;
+    width:48%;
+  }
+
+  .thumbnail-body-mobile{
+    display: none;
+  }
+
+}
+
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+
+  .card-thumb-label i{
+    font-size: 2.5vw;
+  }
+
+  .card-thumb-label {
+    position: absolute;
+    background: rgba(255,255,255,0.9);
+    left: 0;
+    bottom: 0vw;
+    padding: 1.116vw;
+    text-align: left;
+    width: 90%;
+    height: 40%;
+  }
+
+  .card-thumb-label h3 {
+    color: black;
+    font-size: 3vw;
+    line-height: 3vw;
+    margin: 0px 0px 0.5vw 0vw;
+    padding: 0px;
+  }
+
+  .card-thumb-label h4 {
+    color: black;
+    font-size: 1.5vw;
+    line-height: 1.5vw;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .card-thumbnail{
+    background: none;
+    border-radius: 0px !important;
+    border: 1px solid #949494;
+    padding: 1.674vw;
+  }
+
+  .thumbnail-body{
+    display: flex;
+    border-radius: 0px !important;
+    padding: 0vw;
+    justify-content: space-between;
+  }
+
+  .card-img-top{
+    border-radius: 0px;
+    margin-bottom: 1.674vw;
+  }
+
+  .card-text{
+    font-size: 0.781vw;
+    float:left;
+    position: relative;
+    top:0.502vw;
+  }
+
+  .card-text-container{
+    float:left;
+    position: relative;
+    width:48%;
+  }
+
+  .thumbnail-body-mobile{
+    display: none;
+  }
+
+}
+
+@media only screen and (max-width: 576px) {
+
+  .card-thumb-label i{
+    font-size: 5vw;
+  }
+
+  .card-thumb-label {
+    position: absolute;
+    background: rgba(255,255,255,0.9);
+    left: 0;
+    bottom: 0;
+    padding: 3vw;
+    text-align: left;
+    width: 100%;
+    height: 50%;
+  }
+
+  .card-thumb-label h3 {
+    color: black;
+    font-size: 6.8vw;
+    line-height: 6.8vw;
+    margin: 0px 0px 1vw 0vw;
+    padding: 0px;
+  }
+
+  .card-thumb-label h4 {
+    color: black;
+    font-size: 3vw;
+    line-height: 3vw;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .card-thumbnail{
+    background: none;
+    border-radius: 0px !important;
+    border: none;
+  }
+
+  .thumbnail-body{
+    border-radius: 0px !important;
+    padding: 0vw;
+    display:none;
+  }
+
+  .thumbnail-body-mobile{
+    background-color: #8000ff;
+    padding: 1.25vw 0vw !important;
+  }
+
+  .card-img-top{
+    border-radius: 0px;
+    margin-bottom: 0vw;
+  }
+
+  .detail-btn-mobile{
+    background:none;
+    border:none;
+    color: white;
+    font-family: "pp-neue-machina", sans-serif;
+    font-size: 4vw;
+    width: 100%;
+    height: 100%;
+    text-transform: uppercase;
+    padding-top: 2vw !important;
+  }
+
+  .detail-btn-mobile .icon-enter-arrow{
+    display: inline-block;
+    position: relaitve;
+    margin-right: 2vw;
+    transition: 0.2s ease-in-out;
+  }
+
+  .detail-btn-mobile:hover .icon-enter-arrow{
+    display: inline-block;
+    transform: rotate(-45deg) !important;
+  }
+
+}
+
+</style>

src/layouts/partials/sort-direction.html

@@ -0,0 +1,15 @@
+<style>
+    .direction-arrows {
+        float: right;
+    }
+    .direction-arrows span {
+        opacity: 0.3;
+    }
+    .direction-arrows span.active {
+        opacity: 1;
+    }
+</style>
+<div class="direction-arrows">
+    <span id="{{- . -}}-down-btn">&uarr;</span>
+    <span id="{{- . -}}-up-btn">&darr;</span>
+</div>

src/layouts/partials/sort-dropdown.html

@@ -0,0 +1,90 @@
+<style>
+    .sorting-container{
+      display:inline-block;
+      font-family: "pp-neue-machina", sans-serif;
+      background-color: #1a1a1a;
+      border: 1px solid #ffffff;
+      color: #fff;
+      text-align: center;
+      text-decoration: none;
+      text-transform: uppercase;
+      max-width: 240px;
+      width: 100%;
+      height: 60px;
+      min-height: 34px;
+      transition: 0.1s linear;
+    }
+
+    .dropdown {
+        width: 100%;
+        height: auto;
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+    }
+
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: #1a1a1a;
+        width: 100%;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        z-index: 1;
+        color: white;
+        list-style: none;
+        padding: 0px;
+    }
+
+
+    .dropdown-content li {
+        position: relative;
+        padding: 0px 10px;
+        height: 40px;
+        width: 100%;
+        line-height: 40px;
+    }
+
+    .dropdown-content li .sort-btn {
+        height: 100%;
+        width: calc(100% - 40px);
+        opacity: 0.6;
+    }
+
+    .dropdown-content li .sort-btn.active {
+        font-weight: bold;
+        opacity: 1;
+    }
+
+    .dropdown-content li .direction-arrows {
+        position: absolute;
+        right: 10px;
+        top: 0px;
+    }
+
+
+    .dropdown-content li:hover {
+        background: #00ffd0;
+        color: black;
+
+    }
+    .dropdown:hover .dropdown-content {
+        display: block;
+    }
+
+    .dropdown-title {
+        height: 60px;
+        line-height: 60px;
+        padding-left: 10px;
+    }
+
+</style>
+
+<section class="sorting-container">
+    <div class="dropdown">
+        <div class="dropdown-title">SORT ORDER</div>
+        <ul class="dropdown-content flex column">
+            <li><div id="dropdown-popularity-btn" class="sort-btn">POPULARITY</div> {{- partial "sort-direction.html" "popularity"}}</li>
+            <li><div id="dropdown-last_modified-btn" class="sort-btn">MOST RECENT</div> {{- partial "sort-direction.html" "last_modified"}}</li>
+        </ul>
+    </div>
+</section>

src/layouts/partials/swiper.html

@@ -0,0 +1,23 @@
+<!-- Package Grid Header -->
+<hr>
+  <div class="container package-grid-header">
+    <h3>packages</h3>
+  </div>
+<hr>
+
+<!-- Slider main container -->
+
+  <div class="row" style="margin-bottom: 2vw !important;">
+    <div class="col">
+      <div class="swiper mySwiper">
+        <div class="swiper-wrapper">
+          {{ range $.Site.Data.packages }}
+            <div class="swiper-slide">
+            {{- partial "package-thumbnail.html" .}}
+            </div>
+          {{ end }}
+        </div>
+        <!--<div class="swiper-pagination"></div>-->
+      </div>
+    </div>
+  </div>

src/layouts/partials/tea-cli-accordion.html

@@ -0,0 +1,38 @@
+<div class="accordion" id="accordionExample">
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="headingOne">
+      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+        Accordion Item #1
+      </button>
+    </h2>
+    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="headingTwo">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+        Accordion Item #2
+      </button>
+    </h2>
+    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="headingThree">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+        Accordion Item #3
+      </button>
+    </h2>
+    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+      <div class="accordion-body">
+        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+      </div>
+    </div>
+  </div>
+</div>

src/layouts/partials/toast.html

@@ -0,0 +1,40 @@
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <i class="icon-tea-logo-iconasset-1 me-3 teal"></i>
+      <strong class="me-auto teal">Copied!</strong>
+      <small id="time"></small>
+      <button type="button" class="toast-close" data-bs-dismiss="toast" aria-label="Close">X</button>
+    </div>
+    <div class="toast-body">
+      Copied to clipboard. Now paste that command into your terminal.
+    </div>
+  </div>
+</div>
+
+<style>
+
+  #liveToast{
+    background-color:#1a1a1a !important;
+    color: white;
+    border-radius: 0px;
+    font-family: "sono";
+    border: 2px solid #949494;
+  }
+
+  .toast-header{
+    background-color:#1a1a1a;
+    color: white !important;
+  }
+
+  .toast-container{
+    z-index: 3;
+  }
+
+  .toast-close{
+    background-color: #1a1a1a;
+    color: white;
+    border: none;
+  }
+
+</style>

src/layouts/partials/white-paper-gen-art.html

@@ -0,0 +1,79 @@
+<!-- Mobile -->
+
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-wp-gen-art-1"></div>
+<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-wp-gen-art-2"></div>
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-wp-gen-art-3"></div>
+<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-wp-gen-art-4"></div>
+
+<style>
+
+  #m-wp-gen-art-1{
+    position:absolute;
+    width:29vw;
+    height: 19.3vw;
+    left: 6.8vw;
+    margin-top:164vw;
+    z-index: 3;
+    background-image: url("/Images/gen-art/orange-pattern.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-wp-gen-art-2{
+    position:absolute;
+    width:15vw;
+    height:15vw;
+    left: 29.8vw;
+    margin-top:155vw;
+    border-radius: 200px;
+    z-index: 3;
+    background-image: url("/Images/gen-art/dream-tree.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+    animation: rotation 10s infinite linear;
+  }
+
+  #m-wp-gen-art-3{
+    position:absolute;
+    width:38.5vw;
+    height:9.5vw;
+    right: 6.8vw;
+    margin-top:154.5vw;
+    z-index: 3;
+    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  #m-wp-gen-art-4{
+    position:absolute;
+    width:40vw;
+    height:40vw;
+    right: 12vw;
+    margin-top:20vw;
+    z-index: 0;
+    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+  }
+
+  @media only screen and (min-width: 576px) {
+    .gen-art-mobile{
+      display:none;
+    }
+  }
+
+</style>

src/static/Images/binance-logo-white.svg

@@ -0,0 +1,16 @@
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" width="452.286" height="90.465" viewBox="0 0 452.286 90.465">
+  <g id="Your_design" data-name="Your design" transform="translate(0)">
+    <path id="Path_30" data-name="Path 30" d="M34.635,38.012,52.2,20.449,69.782,38.027,80,27.8,52.2,0,24.41,27.795Z" transform="translate(-6.972)" fill="#fff"/>
+    <rect id="Rectangle_1872" data-name="Rectangle 1872" width="14.455" height="14.455" transform="translate(0 45.235) rotate(-45)" fill="#fff"/>
+    <path id="Path_31" data-name="Path 31" d="M34.629,73.407,52.2,90.977,69.776,73.4,80,83.61l-.007.007L52.2,111.419,24.4,83.632l-.014-.014Z" transform="translate(-6.966 -20.955)" fill="#fff"/>
+    <rect id="Rectangle_1873" data-name="Rectangle 1873" width="14.455" height="14.455" transform="translate(70.02 45.237) rotate(-45)" fill="#fff"/>
+    <path id="Path_32" data-name="Path 32" d="M69.53,59.155h0L59.162,48.78,51.5,56.447h0l-.886.879L48.794,59.14h0l-.014.014.014.021,10.368,10.36L69.53,59.162l.007-.007Z" transform="translate(-13.929 -13.926)" fill="#fff"/>
+    <path id="Path_33" data-name="Path 33" d="M148.92,30.68h22.207q8.288,0,12.518,4.244a11.082,11.082,0,0,1,3.308,8.131v.136a11.682,11.682,0,0,1-.514,3.63,11.133,11.133,0,0,1-1.358,2.858,10.789,10.789,0,0,1-1.979,2.229,12.526,12.526,0,0,1-2.415,1.643,16.241,16.241,0,0,1,6.552,4.287,11.026,11.026,0,0,1,2.386,7.5v.136a12.461,12.461,0,0,1-1.265,5.759,11.19,11.19,0,0,1-3.658,4.13,17.055,17.055,0,0,1-5.68,2.465,30.424,30.424,0,0,1-7.352.822H148.92Zm20.006,19.392a11,11,0,0,0,5.552-1.2A4.137,4.137,0,0,0,176.536,45v-.136A4.223,4.223,0,0,0,174.75,41.2a8.806,8.806,0,0,0-5.137-1.265H159.195V50.072ZM171.742,69.4a10.167,10.167,0,0,0,5.48-1.265,4.359,4.359,0,0,0,1.986-3.944v-.136a4.509,4.509,0,0,0-1.851-3.8q-1.851-1.429-5.959-1.429h-12.2V69.4Z" transform="translate(-42.517 -8.759)" fill="#fff"/>
+    <path id="Path_34" data-name="Path 34" d="M224.42,30.68h10.553V78.653H224.42Z" transform="translate(-64.071 -8.759)" fill="#fff"/>
+    <path id="Path_35" data-name="Path 35" d="M261.57,30.68h9.725L293.78,60.2V30.68h10.411V78.653h-8.974l-23.236-30.5v30.5H261.57Z" transform="translate(-74.677 -8.759)" fill="#fff"/>
+    <path id="Path_36" data-name="Path 36" d="M357.727,30.2h9.732l20.564,48.316H376.99L372.6,67.755H352.318l-4.387,10.761H337.17Zm11.1,28.238-6.373-15.562-6.374,15.562Z" transform="translate(-96.259 -8.622)" fill="#fff"/>
+    <path id="Path_37" data-name="Path 37" d="M424.28,30.68h9.739L456.49,60.2V30.68h10.418V78.653h-8.974L434.7,48.157v30.5H424.28Z" transform="translate(-121.128 -8.759)" fill="#fff"/>
+    <path id="Path_38" data-name="Path 38" d="M527.27,79.175a24.951,24.951,0,0,1-9.8-1.915,24.143,24.143,0,0,1-7.817-5.23,23.774,23.774,0,0,1-5.137-7.86A25.259,25.259,0,0,1,502.67,54.5v-.136a24.93,24.93,0,0,1,6.988-17.513,23.892,23.892,0,0,1,7.86-5.345,25.723,25.723,0,0,1,10.146-1.951,31.789,31.789,0,0,1,6.131.55,25.264,25.264,0,0,1,5,1.508,21.576,21.576,0,0,1,4.18,2.329,28.3,28.3,0,0,1,3.573,3.015l-6.717,7.745a25.2,25.2,0,0,0-5.716-3.98A14.6,14.6,0,0,0,527.57,39.3a13.276,13.276,0,0,0-10,4.387,14.94,14.94,0,0,0-2.858,4.759,16.184,16.184,0,0,0-1.029,5.795v.136a16.434,16.434,0,0,0,1.029,5.823,15.1,15.1,0,0,0,2.858,4.794,13.19,13.19,0,0,0,10.039,4.459,14.691,14.691,0,0,0,6.96-1.508,26.882,26.882,0,0,0,5.652-4.116l6.716,6.788a34.871,34.871,0,0,1-3.837,3.573,23.289,23.289,0,0,1-4.351,2.708,22.664,22.664,0,0,1-5.173,1.708A30.924,30.924,0,0,1,527.27,79.175Z" transform="translate(-143.507 -8.438)" fill="#fff"/>
+    <path id="Path_39" data-name="Path 39" d="M582,30.68h36.119v9.389H592.4V49.8h22.622v9.389H592.425V69.264H618.44v9.389H582Z" transform="translate(-166.154 -8.759)" fill="#fff"/>
+  </g>
+</svg>

src/static/Images/enter-icon.svg

@@ -0,0 +1,11 @@
+<svg id="enter-desktop" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.03" height="36.587" viewBox="0 0 40.03 36.587">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_449" data-name="Rectangle 449" width="40.03" height="36.587" fill="#fff"/>
+    </clipPath>
+  </defs>
+  <g id="Group_45" data-name="Group 45" clip-path="url(#clip-path)">
+    <path id="Path_11" data-name="Path 11" d="M36.734,27.14H1.036A1.036,1.036,0,0,1,0,26.1V1.036a1.037,1.037,0,0,1,2.073,0V25.067h34.66a1.037,1.037,0,0,1,0,2.073" transform="translate(0 0)" fill="#fff"/>
+    <path id="Path_12" data-name="Path 12" d="M38.13,26.6a3.1,3.1,0,0,1-.925.779L23.146,35.462a1,1,0,0,1-.5.158.923.923,0,0,1-.733-.361,1.312,1.312,0,0,1-.3-.879,1.166,1.166,0,0,1,.4-.97,4.48,4.48,0,0,1,.869-.543l13.36-7.717-13.36-7.742a4.425,4.425,0,0,1-.869-.542,1.2,1.2,0,0,1-.4-.992,1.271,1.271,0,0,1,.3-.869.938.938,0,0,1,.733-.351,1.137,1.137,0,0,1,.5.135l14.059,8.1a3.66,3.66,0,0,1,.925.778,2.011,2.011,0,0,1,.474,1.389v.134A2.1,2.1,0,0,1,38.13,26.6" transform="translate(1.425 0.966)" fill="#fff"/>
+  </g>
+</svg>

src/static/Images/footer-grid-element.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="961.504" height="157.742" viewBox="0 0 961.504 157.742">
+  <g id="Group_1224" data-name="Group 1224" transform="translate(-159.75 -8720.324)">
+    <path id="Rectangle_616" data-name="Rectangle 616" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(160 8720.574)" fill="#949494"/>
+    <path id="Rectangle_617" data-name="Rectangle 617" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(240.084 8720.574)" fill="#949494"/>
+    <path id="Rectangle_618" data-name="Rectangle 618" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(320.168 8720.574)" fill="#949494"/>
+    <path id="Rectangle_619" data-name="Rectangle 619" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(400.251 8720.574)" fill="#949494"/>
+    <path id="Rectangle_620" data-name="Rectangle 620" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(480.334 8720.574)" fill="#949494"/>
+    <path id="Rectangle_621" data-name="Rectangle 621" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(560.418 8720.574)" fill="#949494"/>
+    <path id="Rectangle_622" data-name="Rectangle 622" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(640.502 8720.574)" fill="#949494"/>
+    <path id="Rectangle_2829" data-name="Rectangle 2829" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(880.754 8720.574)" fill="#949494"/>
+    <path id="Rectangle_623" data-name="Rectangle 623" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(720.586 8720.574)" fill="#949494"/>
+    <path id="Rectangle_2827" data-name="Rectangle 2827" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(960.838 8720.574)" fill="#949494"/>
+    <path id="Rectangle_624" data-name="Rectangle 624" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(800.669 8720.574)" fill="#949494"/>
+    <path id="Rectangle_2825" data-name="Rectangle 2825" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(1040.92 8720.574)" fill="#949494"/>
+    <path id="Rectangle_616-2" data-name="Rectangle 616" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(160 8799.358)" fill="#949494"/>
+    <path id="Rectangle_617-2" data-name="Rectangle 617" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(240.084 8799.358)" fill="#949494"/>
+    <path id="Rectangle_618-2" data-name="Rectangle 618" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(320.168 8799.358)" fill="#949494"/>
+    <path id="Rectangle_619-2" data-name="Rectangle 619" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(400.251 8799.358)" fill="#949494"/>
+    <path id="Rectangle_620-2" data-name="Rectangle 620" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(480.334 8799.358)" fill="#949494"/>
+    <path id="Rectangle_621-2" data-name="Rectangle 621" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(560.418 8799.358)" fill="#949494"/>
+    <path id="Rectangle_622-2" data-name="Rectangle 622" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(640.502 8799.358)" fill="#949494"/>
+    <path id="Rectangle_2830" data-name="Rectangle 2830" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(880.754 8799.358)" fill="#949494"/>
+    <path id="Rectangle_623-2" data-name="Rectangle 623" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(720.586 8799.358)" fill="#949494"/>
+    <path id="Rectangle_2828" data-name="Rectangle 2828" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(960.838 8799.358)" fill="#949494"/>
+    <path id="Rectangle_624-2" data-name="Rectangle 624" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(800.669 8799.358)" fill="#949494"/>
+    <path id="Rectangle_2826" data-name="Rectangle 2826" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(1040.92 8799.358)" fill="#949494"/>
+  </g>
+</svg>