diff --git a/.github/actions/spell-checker/ignore_words.txt b/.github/actions/spell-checker/ignore_words.txt index f4002b04..2eb3b1ee 100755 --- a/.github/actions/spell-checker/ignore_words.txt +++ b/.github/actions/spell-checker/ignore_words.txt @@ -3,6 +3,7 @@ 2fa 8f 8fdevelop +abi abtesting ach activedirectory @@ -182,9 +183,9 @@ ipaddress ipfs ipns iq +ir iran iraq -ir isr january javascript @@ -262,8 +263,8 @@ object-oriented objects ofac ok -onboarding onboarded +onboarding onchain online openssl @@ -343,10 +344,11 @@ roguelike rollup rollups rsa +ru ruby russia -ru s3 +saas saml sandbox sanitizer @@ -409,11 +411,11 @@ sunsetting svg swift swiss +sy syria syslog system-admin systemctl -sy table tag tags @@ -429,6 +431,7 @@ thursday’s tld tls token +toolset tooltip tooltips totp @@ -517,4 +520,4 @@ zendesk's zero-trust zimbabwe zip -zw \ No newline at end of file +zw diff --git a/.github/workflows/release-by-develop-hash.yml b/.github/workflows/release-by-develop-hash.yml index 7491206f..3343b629 100644 --- a/.github/workflows/release-by-develop-hash.yml +++ b/.github/workflows/release-by-develop-hash.yml @@ -21,8 +21,8 @@ jobs: merge-by-develop-hash: runs-on: ubuntu-latest env: - RELEASE_BRANCH: "main" - PREPARE_RELEASE_BRANCH: "prepare_release" + RELEASE_BRANCH: main + PREPARE_RELEASE_BRANCH: prepare_release steps: - name: Date safe-guard verification run: | @@ -117,13 +117,15 @@ jobs: - name: Dispatch Event env: - PAT: ${{ secrets.PAT }} + PAT: ${{ secrets.GITHUB_TOKEN }} ENDPOINT: 'https://api.github.com/repos/fleek-platform/website/dispatches' - EVENT_NAME: 'release-by-develop-hash-completed' + EVENT_NAME: 'Release' run: | if ! curl -H "Accept: application/vnd.github+json" \ -H "Authorization: token $PAT" \ --request POST \ - --data '{ "event_type": "$EVENT_NAME" }' $ENDPOINT; then + --data "{ \"event_type\": \"$EVENT_NAME\" }" $ENDPOINT; then echo "⚠️ Warning: Failed to dispatch $EVENT_NAME. Since this triggers the indexer listener, you should dispatch the action manually. If this issue persists, report it internally." + else + echo "✅ Dispatched event $EVENT_NAME" fi diff --git a/.github/workflows/search-indexer.yml b/.github/workflows/search-indexer.yml index b6be9f7e..2b20bfa0 100644 --- a/.github/workflows/search-indexer.yml +++ b/.github/workflows/search-indexer.yml @@ -1,16 +1,21 @@ name: 🚜 Search (Indexer) on: repository_dispatch: - types: release-by-develop-hash-completed + types: Release + workflow_dispatch: jobs: meilisearch: name: MeiliSearch Service runs-on: ubuntu-latest + env: + RELEASE_BRANCH: main environment: production steps: - name: Checkout Repository uses: actions/checkout@v4 + with: + ref: ${{ env.RELEASE_BRANCH }} - name: Install Dependencies run: npm ci @@ -56,3 +61,10 @@ jobs: env: PRIVATE_MEILISEARCH_DOCUMENTS_ADMIN_API_KEY: ${{ secrets.PRIVATE_MEILISEARCH_DOCUMENTS_ADMIN_API_KEY}} PUBLIC_MEILISEARCH_HOST: ${{ vars.PUBLIC_MEILISEARCH_HOST }} + + - name: Billing Indexation + run: | + npm run search:index_billing + env: + PRIVATE_MEILISEARCH_DOCUMENTS_ADMIN_API_KEY: ${{ secrets.PRIVATE_MEILISEARCH_DOCUMENTS_ADMIN_API_KEY}} + PUBLIC_MEILISEARCH_HOST: ${{ vars.PUBLIC_MEILISEARCH_HOST }} diff --git a/.tailwind/tailwind.custom.config.mjs b/.tailwind/tailwind.custom.config.mjs index 7662338c..a0db5d68 100644 --- a/.tailwind/tailwind.custom.config.mjs +++ b/.tailwind/tailwind.custom.config.mjs @@ -81,11 +81,21 @@ export default function (usePx) { "100%": { transform: "rotate(-9deg)", }, - } + }, + 'fade-in': { + '0%': { opacity: 0 }, + '100%': { opacity: 1 }, + }, + 'fade-in-down': { + '0%': { transform: 'translateY(2%)', opacity: 0 }, + '100%': { transform: 'translateY(0)', opacity: 1 }, + }, }, animation: { "blur-out": "blur 0.6s ease-out", "rock": "rock 1.2s infinite", + 'fade-in': 'fade-in 100ms ease-out', + 'fade-in-down': 'fade-in-down 120ms ease-out', }, }, }, diff --git a/README.md b/README.md index f9aba33c..793a3188 100644 --- a/README.md +++ b/README.md @@ -45,12 +45,13 @@ This repository contains the source code and assets for the Fleek.xyz website, w - [Production Service Setup](#production-service-setup) - [Search](#🔎-search) - [Health Check](#health-check) - - [Indexer](#indexer) + - [Indexer](#indexer) - [Put markdown content](#put-markdown-content-development) - [Query via cURL](#query-via-curl) - [Multi-Index Search](#multi-index-search) - [Delete Indexes](#💣-delete-indexes) - - [Images (optimization)](#-images-optimization) + - [Manual Indexation](#manual-indexation-cicd) + - [Images (optimization)](#-images-optimization) - [Migration](#-migration) - [Migrate Gatsby content](#migrate-gatsby-content) - [Custom data](#custom-data) @@ -845,7 +846,7 @@ curl \ -X GET '://
:/health' ``` -### Indexer +## Indexer The Indexer's job referred to as indexation is the process of organizing and storing data in a structured manner to facilitate efficient search and retrieval. @@ -928,6 +929,16 @@ npm run search:serve ⚠️ You'll see a warning message "No master key was found" that can be ignored for local environment development work. If for some reason you want to have a master key, modify the `search:serve` script to include it. +### Manual Indexation (CI/CD) + +The indexation service should trigger on `push` to `main` branch. Alternatively, the repo admin can trigger the job manually. + +1) Open the Job runner [here](https://github.com/fleek-platform/website/actions/workflows/search-indexer.yml) + +2) Locate the row "This workflow has a workflow_dispatch event trigger." and open the **Run workflow** dropdown. In the option "Use workflow from" select `main` branch. + +The Job will index data that exists in the selected `main` branch. Learn how to release to production (main branch) [here](#🚀-release-to-production). + ## 📸 Images (Optimization) The build process can optimize the images but that requires the user to use the correct image components. Use the instructions provided to optimize the images. diff --git a/Services/ProxyServer/DeprecatedContentSitesRedirect/README.md b/Services/ProxyServer/DeprecatedContentSitesRedirect/README.md index a3873067..3869031e 100644 --- a/Services/ProxyServer/DeprecatedContentSitesRedirect/README.md +++ b/Services/ProxyServer/DeprecatedContentSitesRedirect/README.md @@ -170,3 +170,26 @@ Ref: - Nginx location match tester https://nginx.viraptor.info + +## Certificate auto-renewal + +The certificates are auto-renewed by the certbot process. Cronjob's are located at: + +``` +/etc/cron.d/certbot +``` + +Here's an example of a `renew_hook`, for Lets Encrypt renewal. + +```sh +# Trigger when renew successful +renew_hook = systemctl reload nginx +``` + +The configuration file is located at `/etc/letsencrypt/renewal/docs.fleek.xyz.conf`. + +Alternatively, executable scripts can be stored in: + +``` +/etc/letsencrypt/renewal-hooks/deploy/ +``` diff --git a/package-lock.json b/package-lock.json index 29f7dd91..f1613031 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,10 +20,12 @@ "@types/react": "^18.2.74", "@types/react-dom": "^18.2.24", "astro": "^4.15.3", + "class-variance-authority": "^0.7.0", "framer-motion": "^11.0.24", "hono": "^4.4.11", "lodash-es": "^4.17.21", "pixi.js": "^7.2.4", + "posthog-js": "^1.165.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.6.4", @@ -34,6 +36,7 @@ "rehype-pretty-code": "^0.13.1", "remark-directive": "^3.0.0", "swiper": "^11.1.0", + "tailwind-merge": "^2.5.2", "tailwindcss": "^3.4.3", "typescript": "^5.4.3" }, @@ -4295,6 +4298,27 @@ "node": ">=8" } }, + "node_modules/class-variance-authority": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz", + "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "2.0.0" + }, + "funding": { + "url": "https://joebell.co.uk" + } + }, + "node_modules/class-variance-authority/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/classnames": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", @@ -4869,9 +4893,10 @@ } }, "node_modules/dset": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/dset/-/dset-3.1.3.tgz", - "integrity": "sha512-20TuZZHCEZ2O71q9/+8BwKwZ0QtD9D8ObhrihJPr+vLLYlSuAU3/zL4cSlgbfeoGHTjCSJBa7NGcrF9/Bx/WJQ==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/dset/-/dset-3.1.4.tgz", + "integrity": "sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==", + "license": "MIT", "engines": { "node": ">=4" } @@ -5217,6 +5242,11 @@ "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==", "dev": true }, + "node_modules/fflate": { + "version": "0.4.8", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz", + "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==" + }, "node_modules/figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -8424,9 +8454,10 @@ "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==" }, "node_modules/path-to-regexp": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz", - "integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==" + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz", + "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==", + "license": "MIT" }, "node_modules/path-type": { "version": "4.0.0", @@ -8767,6 +8798,16 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "node_modules/posthog-js": { + "version": "1.165.0", + "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.165.0.tgz", + "integrity": "sha512-rUfRJobvOz3Q9Er+zwb32Eq2qs+ToBe/B4k4IoKzmyszI7240Rf4xVWRB0ky8LvmdZfCeYX5knS2Uv3pnn/d5A==", + "dependencies": { + "fflate": "^0.4.8", + "preact": "^10.19.3", + "web-vitals": "^4.0.1" + } + }, "node_modules/preact": { "version": "10.23.2", "resolved": "https://registry.npmjs.org/preact/-/preact-10.23.2.tgz", @@ -10614,6 +10655,16 @@ "node": ">=8" } }, + "node_modules/tailwind-merge": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz", + "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz", @@ -11484,6 +11535,11 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/web-vitals": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.3.tgz", + "integrity": "sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q==" + }, "node_modules/webidl-conversions": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", diff --git a/package.json b/package.json index 4f67fe88..aad838f6 100644 --- a/package.json +++ b/package.json @@ -61,10 +61,12 @@ "@types/react": "^18.2.74", "@types/react-dom": "^18.2.24", "astro": "^4.15.3", + "class-variance-authority": "^0.7.0", "framer-motion": "^11.0.24", "hono": "^4.4.11", "lodash-es": "^4.17.21", "pixi.js": "^7.2.4", + "posthog-js": "^1.165.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.6.4", @@ -75,6 +77,7 @@ "rehype-pretty-code": "^0.13.1", "remark-directive": "^3.0.0", "swiper": "^11.1.0", + "tailwind-merge": "^2.5.2", "tailwindcss": "^3.4.3", "typescript": "^5.4.3" }, diff --git a/public/images/circles.png b/public/images/circles.png index c279bead..3f488ce9 100644 Binary files a/public/images/circles.png and b/public/images/circles.png differ diff --git a/public/images/landing-page/hero/hero.webp b/public/images/landing-page/hero/hero.webp new file mode 100644 index 00000000..d2b7fa81 Binary files /dev/null and b/public/images/landing-page/hero/hero.webp differ diff --git a/public/images/landing-page/partners/berachain.svg b/public/images/landing-page/partners/berachain.svg new file mode 100644 index 00000000..7e4ddf55 --- /dev/null +++ b/public/images/landing-page/partners/berachain.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/images/landing-page/partners/ens.svg b/public/images/landing-page/partners/ens.svg new file mode 100644 index 00000000..8b4f3891 --- /dev/null +++ b/public/images/landing-page/partners/ens.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/images/landing-page/partners/filecoin.svg b/public/images/landing-page/partners/filecoin.svg new file mode 100644 index 00000000..0088676f --- /dev/null +++ b/public/images/landing-page/partners/filecoin.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/landing-page/partners/polygon.svg b/public/images/landing-page/partners/polygon.svg new file mode 100644 index 00000000..ea1163bb --- /dev/null +++ b/public/images/landing-page/partners/polygon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/landing-page/partners/protocollabs.svg b/public/images/landing-page/partners/protocollabs.svg new file mode 100644 index 00000000..f66badf5 --- /dev/null +++ b/public/images/landing-page/partners/protocollabs.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/landing-page/partners/velodrome.svg b/public/images/landing-page/partners/velodrome.svg new file mode 100644 index 00000000..040f501e --- /dev/null +++ b/public/images/landing-page/partners/velodrome.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/BestOnchain.tsx b/src/components/BestOnchain.tsx deleted file mode 100644 index d4683150..00000000 --- a/src/components/BestOnchain.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import Container from './Container'; -import PageSection from './PageSection'; -import type { RoundedType } from '@components/PageSection'; -import ButtonGray from './ButtonGray'; -import { PricingInfo } from '../content/pricing/config'; -import Text from './Text'; -// @ts-ignore -import imgBolt from '@images/bolt.png?w=120&format=webp'; -import ButtonYellow from './ButtonYellow'; -import PricingCard from './PricingCard'; - -type Formatting = { - rounded?: RoundedType; -}; - -const BestOnchain: React.FC = ({ rounded }) => { - return ( - - -
-
-

- Plus the Best of Onchain -

-
- fleek bolt icon -
- Storage, Compute, Domains, CDN & More -
- fleek bolt icon -
-
-
-
- onchain - onchain -
- - - ); -}; - -export default BestOnchain; diff --git a/src/components/BuildUseCases.tsx b/src/components/BuildUseCases.tsx index b40612c8..ea7c2a3b 100644 --- a/src/components/BuildUseCases.tsx +++ b/src/components/BuildUseCases.tsx @@ -1,18 +1,11 @@ import CardsWithDottedLinesBackground from '@components/CardsWithDottedLinesBackground'; -import type { RoundedType } from '@components/PageSection'; - -interface Props { - rounded?: RoundedType; -} -// TODO: Should the card declaration be in the settings? -const BuildUseCases: React.FC = (props) => ( +const BuildUseCases: React.FC = () => ( = (props) => ( 'Use the React boilerplate for optimal user interface aesthetics.', icon: { src: '/svg/react-icon.svg', alt: 'NextJs App' }, cta: { - url: 'https://app.fleek.xyz/templates/clmf7apqf0007l808mo2f6937/', + url: 'https://app.fleek.xyz/templates/clx3g4dwk0008qy2i5d6aobe4/', text: 'try it', }, image: '/svg/react-template.svg', @@ -45,7 +38,7 @@ const BuildUseCases: React.FC = (props) => ( 'Deploy the Astro boilerplate for an efficient, modern web experience.', icon: { src: '/svg/react-icon.svg', alt: 'React App' }, cta: { - url: 'https://app.fleek.xyz/templates/clmf7io4a0009ic08ya3sjwyj/', + url: 'https://app.fleek.xyz/templates/clx3f5nem000333n7acqcxiwj/', text: 'try it', }, image: '/svg/astro-template.svg', diff --git a/src/components/CardWrapper.tsx b/src/components/CardWrapper.tsx deleted file mode 100644 index 8f40a6e4..00000000 --- a/src/components/CardWrapper.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import GlowWrapper from '@components/GlowWrapper'; -import clsx from 'clsx'; - -interface Props { - className?: string; - noInnerPadding?: boolean; - image?: string; - header?: boolean; -} - -const CardWrapper: React.FC> = (props) => { - return ( - -
- {props.image && ( -
- -
- )} -
- {props.children} -
-
- - ); -}; - -export default CardWrapper; diff --git a/src/components/CardsWithDottedLinesBackground.tsx b/src/components/CardsWithDottedLinesBackground.tsx index 67507a1c..c6af79f4 100644 --- a/src/components/CardsWithDottedLinesBackground.tsx +++ b/src/components/CardsWithDottedLinesBackground.tsx @@ -1,12 +1,7 @@ -import Container from '@components/Container'; -import GridLayout from '@components/GridLayout'; -import PageSection from '@components/PageSection'; -import TemplateAppCard from '@components/TemplateAppCard'; -import TextGlowHoverEffect from './TextGlowHoverEffect'; import Link, { Target } from '@components/Link'; -import type { RoundedType } from '@components/PageSection'; -import ButtonGray from './ButtonGray'; -import Text from './Text'; +import { Container } from './v2/LandingPage/Container/Container'; +import { Text } from './v2/LandingPage/Text/Text'; +import { Button } from './v2/Button/Button'; interface Card { title: string; @@ -35,68 +30,61 @@ interface Props { url: string; text: string; }; - rounded?: RoundedType; } const CardsWithDottedLinesBackground: React.FC = (props) => ( - - - -
-
-

- {props.headline} -

- {props.copy &&

{props.copy}

} -
-
- bg-squiggle - bg-squiggle -
- {props.cardSections.map((section) => ( -
-
- {section.cards.map( - ({ title, description, icon, cta, image }) => ( - - - - ), - )} -
-
- ))} - {props.cta && ( -
- - - {props.cta.text} - + +
+
+ {props.headline} + {props.copy &&

{props.copy}

} +
+
+
+ {props.cardSections.map((section) => ( +
+
+ {section.cards.map(({ title, description, cta, image }) => ( + +
+ {title} +
+
+

+ {title} +

+

{description}

+
-
- )} + ))} +
-
+ ))} + {props.cta && ( + + )}
- - +
+
); diff --git a/src/components/DeployOnFleek.tsx b/src/components/DeployOnFleek.tsx index 8ab8a2fa..417197af 100644 --- a/src/components/DeployOnFleek.tsx +++ b/src/components/DeployOnFleek.tsx @@ -1,23 +1,79 @@ -import type { RoundedType } from '@components/PageSection'; -import Container from './Container'; -import PageSection from '@components/PageSection'; -import DeployWithImage from './DeployWithImage'; +import { down } from '@utils/screens'; +import { Text } from './v2/LandingPage/Text/Text'; +import { Container } from './v2/LandingPage/Container/Container'; -interface Props { - rounded?: RoundedType; -} +const IconList = [ + { + icon: '/svg/git-integration-icon.svg', + description: 'Git integration, actions & check runs', + }, + { + icon: '/svg/zig-zag-icon.svg', + description: 'Deploy previews with every pull request', + }, + { + icon: '/svg/ns-icon.svg', + description: 'automatic updates on every push, with zero downtime ', + }, +]; -const DeployOnFleek: React.FC = ({ rounded }) => ( - Deploy Apps in a Flash} - copy="Link your repo and go live. Deploy from a Git Provider or the Fleek CLI." - cta={{ url: 'https://app.fleek.xyz/', text: 'try it out' }} - rounded={rounded} - /> -); +type CardProp = { + icon: string; + description: string; +}; -export default DeployOnFleek; +const Card: React.FC = (props) => { + return ( +
+
+ {props.description} +
+ {props.description} +
+ ); +}; + +const DeployOnFleek: React.FC = () => { + return ( + +
+
+
+ Deploy apps in a flash + + Link your repo and go live. Deploy from a Git Provider or the + Fleek CLI. + +
+ Deploy to repo +
+ {IconList.map((item, index) => { + return ( + + ); + })} +
+
+ Deploy to repo +
+ + ); +}; -// className="pb-64 pt-24 xl:py-40" +export default DeployOnFleek; diff --git a/src/components/DeployWithImage.tsx b/src/components/DeployWithImage.tsx deleted file mode 100644 index 4df9cd4c..00000000 --- a/src/components/DeployWithImage.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import clsx from 'clsx'; - -import Container from '@components/Container'; -import PageSection from '@components/PageSection'; -import GridLayout from '@components/GridLayout'; -import Button from '@components/Button'; -import TextGlowHoverEffect from '@components/TextGlowHoverEffect'; - -import type { RoundedType } from '@components/PageSection'; -import Link, { Target } from '@components/Link'; - -import { down } from '@utils/screens'; -import Text from './Text'; - -const IconList = [ - { - icon: '/svg/git-integration-icon.svg', - description: 'Git integration, actions & check runs', - }, - { - icon: '/svg/zig-zag-icon.svg', - description: 'Deploy previews with every pull request', - }, - { - icon: '/svg/ns-icon.svg', - description: 'automatic updates on every push, with zero downtime ', - }, -]; - -type OptionalProps = - | { - // TODO: Verify as original was import type { StaticImageData } from "next/image"; - image: string; - children?: never; - } - | { - image?: never; - children?: React.ReactNode; - }; - -type Props = { - kicker: string; - headline: string | JSX.Element; - copy: string; - cta?: { - url: string; - text: string; - }; - floatingImageEffect?: boolean; - inverse?: boolean; - className?: string; - rounded?: RoundedType; -}; - -type CardProp = { - icon: string; - description: string; -}; - -const Card: React.FC = (props) => { - return ( -
-
-
- -
-
-
- {props.description} -
-
- ); -}; - -const DeployWithImage: React.FC = (props) => { - return ( - - -
-
-

- {props.headline} -

- -

- {props.copy} -

- -
- {IconList.map((item, index) => { - return ( - - ); - })} -
-
-
- -
-
-

- {props.headline} -

- -

- {props.copy} -

-
-
- - - ); -}; - -export default DeployWithImage; diff --git a/src/components/DocsCards.tsx b/src/components/DocsCards.tsx deleted file mode 100644 index d3f18175..00000000 --- a/src/components/DocsCards.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import clsx from 'clsx'; -import GridLayout from '@components/GridLayout'; -import PageSection from '@components/PageSection'; -import CardWrapper from '@components/CardWrapper'; -import Text from '@components/Text'; - -type Feature = { - title: string; - description: string; - icon: string; - className?: string; - url: string; -}; - -type BlackFeatureCardsProps = { - title: string; - features: Array; - className?: string; -}; - -const BlackFeatureCards: React.FC = ({ - title, - features, - className, -}) => ( -
- -
-
- {title} -
-
-
- bg-squiggle - {features.map((feature, index) => ( - - -
- globe with bolt - - {feature.title} - - - {feature.description} - -
- - - ))} -
- -
-); - -export default BlackFeatureCards; diff --git a/src/components/ExplainerBlocks.tsx b/src/components/ExplainerBlocks.tsx index a9d638b4..02feb6b0 100644 --- a/src/components/ExplainerBlocks.tsx +++ b/src/components/ExplainerBlocks.tsx @@ -1,9 +1,8 @@ import React from 'react'; -import ExplainerCard from '@components/ExplainerCard'; -import Container from './Container'; -import PageSection from './PageSection'; +import { Container } from './v2/LandingPage/Container/Container'; +import { Text } from './v2/LandingPage/Text/Text'; -const List1 = [ +const List = [ { icon: '/svg/edge-icon.svg', title: 'Build Seamlessly', @@ -19,78 +18,81 @@ const List1 = [ { icon: '/svg/concentric-circles-icon.svg', title: 'Deploy Globally', - description: 'The Fleek Edge helps your app load lightning fast worldwide.', + description: 'Fleek automatically deploys your app to 100+ edge locations.', }, -]; -const List2 = [ { icon: '/svg/ddos-icon.svg', title: 'DDoS Protection', - description: - 'Using either the Platform, CLI, or SDK you can build how you want.', + description: 'Effortlessly protect your site from DDoS attacks.', }, { icon: '/svg/monitoring-icon.svg', title: 'Monitoring & Alerting', - description: - 'Invite your team, share deploy previews, test builds and more.', + description: 'Get insights and alerts for your app & infra usage.', }, { icon: '/svg/ssl-icon.svg', title: 'Domains & SSL', - description: 'The Fleek Edge helps your app load lightning fast worldwide.', + description: + 'Seamless domain management & free SSL certificates (Lets Encrypt).', }, ]; -type props = { - index: number; - header: string; +type CardProp = { + icon: string; + title: string; + description: string; }; -const ExplainerBlocks: React.FC = ({ index, header }) => { - function ListSelector() { - if (index == 1) { - return List1; - } else if (index == 2) { - return List2; - } - return List2; - } - - var List = ListSelector(); - +const ExplainerCard: React.FC = (props) => { return ( - - -
- {/* */} -

- {header} -

- {/* */} -
-
- {List.map((item, index) => { - return ( - - ); - })} +
+
+ {props.title} +
+
+

+ {props.title} +

+
+
+

+ {props.description} +

+
+
+ ); +}; - -
- +const ExplainerBlocks: React.FC = () => { + return ( + +
+ Enjoy the (developer) experience +
+
+ {List.map((item, index) => { + return ( + + ); + })} + bg-squiggle +
); }; diff --git a/src/components/ExplainerCard.tsx b/src/components/ExplainerCard.tsx deleted file mode 100644 index b322f955..00000000 --- a/src/components/ExplainerCard.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { Props } from 'astro'; -import React from 'react'; -import Text from './Text'; - -type CardProp = { - icon: string; - title: string; - description: string; -}; - -const ExplainerCard: React.FC = (props) => { - return ( -
-
-
- -
-
-

- {props.title} -

-
-
-

- {props.description} -

-
-
-
- ); -}; - -export default ExplainerCard; diff --git a/src/components/HostingOnFleek.tsx b/src/components/HostingOnFleek.tsx deleted file mode 100644 index 49a42aa0..00000000 --- a/src/components/HostingOnFleek.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import ImageWithCopy from '@components/ImageWithCopy'; -import type { RoundedType } from '@components/PageSection'; -interface Props { - rounded?: RoundedType; -} - -const HostingOnFleek: React.FC = ({ rounded }) => ( - Plus the Best of Onchain} - copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu libero ac nunc mollis accumsan at non purus." - cta={{ url: 'https://app.fleek.xyz/', text: 'try it out' }} - rounded={rounded} - > -
- Hosting on Fleek -
- -); - -export default HostingOnFleek; diff --git a/src/components/ImpressUsers.tsx b/src/components/ImpressUsers.tsx index fa906b40..5f638d60 100644 --- a/src/components/ImpressUsers.tsx +++ b/src/components/ImpressUsers.tsx @@ -1,17 +1,5 @@ -import clsx from 'clsx'; - -import Container from '@components/Container'; -import PageSection from '@components/PageSection'; -import GridLayout from '@components/GridLayout'; -import Button from '@components/Button'; -import TextGlowHoverEffect from '@components/TextGlowHoverEffect'; -import { GrShare } from 'react-icons/gr'; - -import type { RoundedType } from '@components/PageSection'; -import Link, { Target } from '@components/Link'; - -import { down } from '@utils/screens'; -import Text from './Text'; +import { Container } from './v2/LandingPage/Container/Container'; +import { Text } from './v2/LandingPage/Text/Text'; const IconList = [ { @@ -28,31 +16,6 @@ const IconList = [ }, ]; -type OptionalProps = - | { - // TODO: Verify as original was import type { StaticImageData } from "next/image"; - image: string; - children?: never; - } - | { - image?: never; - children?: React.ReactNode; - }; - -type Props = { - kicker?: string; - headline?: string | JSX.Element; - copy?: string; - cta?: { - url: string; - text: string; - }; - floatingImageEffect?: boolean; - inverse?: boolean; - className?: string; - rounded?: RoundedType; -}; - type CardProp = { icon: string; description: string; @@ -60,86 +23,73 @@ type CardProp = { const Card: React.FC = (props) => { return ( -
-
-
- -
- -
- {props.description} -
-
+
+ {props.description} + {props.description}
); }; -const ImpressUsers: React.FC = ({ rounded }) => { +const ImpressUsers: React.FC = () => { return ( - - -
-
diff --git a/src/layouts/LandingPage.astro b/src/layouts/LandingPage.astro new file mode 100644 index 00000000..9400dbc7 --- /dev/null +++ b/src/layouts/LandingPage.astro @@ -0,0 +1,101 @@ +--- +import '@styles/globals.css'; +import { getSiteUrl } from '@utils/url'; +import settings from '@base/settings.json'; +import PostHog from '@components/PostHog.astro'; +const baseUrl = getSiteUrl(); +--- + + + + + + + + + + + + + + + {settings.site.metadata.default.title} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index b9d6f979..29cad6ed 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,37 +1,26 @@ --- -import Layout from '@layouts/Page.astro'; -import GlobeWithFloatingCards from '@components/GlobeWithFloatingCards'; +import LandingPageHtml from '@layouts/LandingPage.astro'; +import { Navbar } from '@components/v2/Navbar/Navbar'; +import { Hero } from '@components/v2/LandingPage/Hero/Hero'; +import { Partners } from '@components/v2/LandingPage/Partners/Partners'; import DeployOnFleek from '@components/DeployOnFleek'; -import HostingOnFleek from '@components/HostingOnFleek'; import ImpressUsers from '@components/ImpressUsers'; -import JoinOurFriends from '@components/JoinOurFriends'; import BuildUseCases from '@components/BuildUseCases'; import ExplainerBlocks from '@components/ExplainerBlocks'; -import SeamlessUI from '@components/SeamlessUI'; -import BestOnchain from '@components/BestOnchain'; import PricingLanding from '@components/PricingLanding'; import ReadyToLive from '@components/ReadyToLive'; -import settings from '@base/settings.json'; +import Footer from '@components/v2/Footer/Footer'; --- - -
- - - - - - - - - - - - -
- + + + + + + + + + + +