diff --git a/.vscode/settings.json b/.vscode/settings.json index 688e5862..1d6fe9de 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,7 +7,7 @@ } ], "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "editor.formatOnSave": true, "editor.formatOnPaste": false, diff --git a/public/cli-background.svg b/public/cli-background.svg new file mode 100644 index 00000000..afb5a124 --- /dev/null +++ b/public/cli-background.svg @@ -0,0 +1,29 @@ + + + + + + + + + \ No newline at end of file diff --git a/public/earth.svg b/public/earth.svg new file mode 100644 index 00000000..2d1c9360 --- /dev/null +++ b/public/earth.svg @@ -0,0 +1,552 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/footer-background.svg b/public/footer-background.svg new file mode 100644 index 00000000..682ad673 --- /dev/null +++ b/public/footer-background.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/CLabs.svg b/src/assets/icons/CLabs.svg new file mode 100644 index 00000000..edaedc47 --- /dev/null +++ b/src/assets/icons/CLabs.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/CLabsText.svg b/src/assets/icons/CLabsText.svg new file mode 100644 index 00000000..42710043 --- /dev/null +++ b/src/assets/icons/CLabsText.svg @@ -0,0 +1,25 @@ + + + diff --git a/src/assets/icons/arweave.svg b/src/assets/icons/arweave.svg new file mode 100644 index 00000000..82c0dec9 --- /dev/null +++ b/src/assets/icons/arweave.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/cloud-check.svg b/src/assets/icons/cloud-check.svg new file mode 100644 index 00000000..00f26ab9 --- /dev/null +++ b/src/assets/icons/cloud-check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/folder-code.svg b/src/assets/icons/folder-code.svg new file mode 100644 index 00000000..7528a76c --- /dev/null +++ b/src/assets/icons/folder-code.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/git-fork.svg b/src/assets/icons/git-fork.svg new file mode 100644 index 00000000..172bc51a --- /dev/null +++ b/src/assets/icons/git-fork.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/git-issue.svg b/src/assets/icons/git-issue.svg new file mode 100644 index 00000000..ccd8d400 --- /dev/null +++ b/src/assets/icons/git-issue.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/git-pull-request.svg b/src/assets/icons/git-pull-request.svg new file mode 100644 index 00000000..acfe9574 --- /dev/null +++ b/src/assets/icons/git-pull-request.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/graph-bar.svg b/src/assets/icons/graph-bar.svg new file mode 100644 index 00000000..56672364 --- /dev/null +++ b/src/assets/icons/graph-bar.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/spiral-arrow.svg b/src/assets/icons/spiral-arrow.svg new file mode 100644 index 00000000..45428166 --- /dev/null +++ b/src/assets/icons/spiral-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg new file mode 100644 index 00000000..d2471d52 --- /dev/null +++ b/src/assets/icons/user.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/Repo.svg b/src/assets/images/Repo.svg new file mode 100644 index 00000000..e12e141d --- /dev/null +++ b/src/assets/images/Repo.svg @@ -0,0 +1,279 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/add-bounty.png b/src/assets/images/add-bounty.png new file mode 100644 index 00000000..d57fdb81 Binary files /dev/null and b/src/assets/images/add-bounty.png differ diff --git a/src/assets/images/developer1.png b/src/assets/images/developer1.png new file mode 100644 index 00000000..1663fdc2 Binary files /dev/null and b/src/assets/images/developer1.png differ diff --git a/src/assets/images/developer2.png b/src/assets/images/developer2.png new file mode 100644 index 00000000..f3216d4d Binary files /dev/null and b/src/assets/images/developer2.png differ diff --git a/src/assets/images/developer3.png b/src/assets/images/developer3.png new file mode 100644 index 00000000..882228c6 Binary files /dev/null and b/src/assets/images/developer3.png differ diff --git a/src/assets/images/developer4.png b/src/assets/images/developer4.png new file mode 100644 index 00000000..90607f2e Binary files /dev/null and b/src/assets/images/developer4.png differ diff --git a/src/assets/images/earth.svg b/src/assets/images/earth.svg new file mode 100644 index 00000000..2d1c9360 --- /dev/null +++ b/src/assets/images/earth.svg @@ -0,0 +1,552 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/line.svg b/src/assets/images/line.svg new file mode 100644 index 00000000..02d23908 --- /dev/null +++ b/src/assets/images/line.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/p-logo.svg b/src/assets/images/p-logo.svg new file mode 100644 index 00000000..4f38cf98 --- /dev/null +++ b/src/assets/images/p-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/src/assets/images/pl-discord.png b/src/assets/images/pl-discord.png new file mode 100644 index 00000000..2a917a86 Binary files /dev/null and b/src/assets/images/pl-discord.png differ diff --git a/src/assets/images/pl-repo.png b/src/assets/images/pl-repo.png new file mode 100644 index 00000000..2431014a Binary files /dev/null and b/src/assets/images/pl-repo.png differ diff --git a/src/assets/images/pl-viewblock.png b/src/assets/images/pl-viewblock.png new file mode 100644 index 00000000..b1b32b89 Binary files /dev/null and b/src/assets/images/pl-viewblock.png differ diff --git a/src/assets/images/profile-page.png b/src/assets/images/profile-page.png new file mode 100644 index 00000000..c12b388f Binary files /dev/null and b/src/assets/images/profile-page.png differ diff --git a/src/assets/images/repo-create.gif b/src/assets/images/repo-create.gif new file mode 100644 index 00000000..de3bdd0c Binary files /dev/null and b/src/assets/images/repo-create.gif differ diff --git a/src/assets/images/reward-completed.png b/src/assets/images/reward-completed.png new file mode 100644 index 00000000..2b697dc2 Binary files /dev/null and b/src/assets/images/reward-completed.png differ diff --git a/src/assets/images/reward.png b/src/assets/images/reward.png new file mode 100644 index 00000000..9a64b327 Binary files /dev/null and b/src/assets/images/reward.png differ diff --git a/src/components/Landing/BackedByArweave.tsx b/src/components/Landing/BackedByArweave.tsx new file mode 100644 index 00000000..866dcc7f --- /dev/null +++ b/src/components/Landing/BackedByArweave.tsx @@ -0,0 +1,112 @@ +import SVG from 'react-inlinesvg' + +import ArweaveIcon from '@/assets/icons/arweave.svg' +import CloudCheckIcon from '@/assets/icons/cloud-check.svg' +import FolderCodeIcon from '@/assets/icons/folder-code.svg' +import GraphBarIcon from '@/assets/icons/graph-bar.svg' +import Line from '@/assets/images/line.svg' + +const features = [ + { + title: 'Simple back-up', + description: 'Back-up existing code, on a platform backed by permanent storage', + icon: FolderCodeIcon + }, + { + title: 'Full ownership', + description: 'You code is fully owned by you, from creation to shipping', + icon: CloudCheckIcon + }, + { + title: 'Transparent metrics', + description: 'Immutable Contribution Graphs that cannot be altered', + icon: GraphBarIcon + } +] + +export default function BackedByArweave() { + return ( +
+
+
Own
+
+ All stored permanently on + Arweave + , owned by you +
+
+ Complete transparency on how your code repos are being stored +
+
+
+ + +
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+ +
+ {features.map((feature, index) => ( +
+
+
+
+ +
+
{feature.title}
+
+
+ {feature.description} +
+
+ {index < features.length - 1 && ( +
+ + + +
+ )} +
+ ))} +
+
+ +
+
Explore Arweave
+
+
+ ) +} diff --git a/src/components/Landing/Bounties.tsx b/src/components/Landing/Bounties.tsx new file mode 100644 index 00000000..a0e32103 --- /dev/null +++ b/src/components/Landing/Bounties.tsx @@ -0,0 +1,64 @@ +import AddBounty from '@/assets/images/add-bounty.png' +import Reward from '@/assets/images/reward.png' +import RewardCompleted from '@/assets/images/reward-completed.png' + +const items = [ + { + title: 'Create repos and bounties, all in one place', + image: AddBounty + }, + { + title: 'Earn manage bounty submissions', + image: Reward + }, + { + title: 'Get paid the instant your PR is accepted', + image: RewardCompleted + } +] +export default function Bounties() { + return ( +
+
+
Bounties
+
+ Earn + from your work +
+
+ Your contributions don’t just shape the future, they’re rewarded in real time. Whether it’s open source + projects, repository maintenance, or code reviews  +
+
+
+ {items.map((item, idx) => ( +
+
+ {item.title} +
+ +
+ +
+
+ ))} +
+
+
+
+ Explore projects +
+
+
+
Learn more
+
+
+
+ ) +} diff --git a/src/components/Landing/Builders.tsx b/src/components/Landing/Builders.tsx new file mode 100644 index 00000000..88221f50 --- /dev/null +++ b/src/components/Landing/Builders.tsx @@ -0,0 +1,76 @@ +import SVG from 'react-inlinesvg' + +import RepoCreate from '@/assets/images/repo-create.gif' + +const features = [ + { + title: 'Seamless Repository/Project Creation', + description: 'Create a repo with one click and dive in without the hassle', + className: 'border-l-4 border-0 border-sky-300' + }, + { + title: 'Transparent collaboration', + description: 'Intuitive Issue Tracker & Pull Request System to make merges easy', + className: '' + }, + { + title: 'Straightforward design', + description: 'From a simple onboarding to cross-project collaboration', + className: '' + } +] + +export default function Builders() { + return ( +
+
+
+
Build
+
+
+
+
+ Built + for builders +
+
+ Protocol.land is the go-to decentralized infrastructure whether you&aposre a solo developer, a startup + team, or a thriving community +
+
+
+
+ {features.map((feature, index) => ( +
+
+
+ {feature.title} +
+
+ {feature.description} +
+
+
+ ))} +
+
+
+
+ +
+
+
+
+
+
+
Jump In
+
+
+
+
+
+ ) +} diff --git a/src/components/Landing/Cli.tsx b/src/components/Landing/Cli.tsx new file mode 100644 index 00000000..47c70da6 --- /dev/null +++ b/src/components/Landing/Cli.tsx @@ -0,0 +1,76 @@ +import copyTextToClipboard from '@uiw/copy-to-clipboard' +import { useState } from 'react' +import { FiArrowUpRight } from 'react-icons/fi' +import { IoCheckmarkSharp } from 'react-icons/io5' +import { PiCopy } from 'react-icons/pi' + +export default function Cli() { + const [isCopied, setIsCopied] = useState(false) + + function copyCommand() { + copyTextToClipboard('npm install --global @protocol.land/git-remote-helper', (_isCopied) => { + if (_isCopied) { + setIsCopied(_isCopied) + const timeout = setTimeout(() => { + setIsCopied(false) + clearTimeout(timeout) + }, 1000) + } + }) + } + + return ( +
+
+
+
+
+
+ Install the Protocol.Land CLI +
+
+
+
+
+ npm install --global @protocol.land/git-remote-helper +
+
+
+
+ {!isCopied ? ( + + ) : ( + + )} + {isCopied && ( +
Copied!
+ )} +
+
+
+
+ Ensure that you have npm installed on your device before installing Protocol.Land CLI +
+
+
+
+ Install Guide +
+
+ +
+
+
+
+
+
+ ) +} diff --git a/src/components/Landing/DeveloperCommunity.tsx b/src/components/Landing/DeveloperCommunity.tsx new file mode 100644 index 00000000..1650396d --- /dev/null +++ b/src/components/Landing/DeveloperCommunity.tsx @@ -0,0 +1,128 @@ +import SVG from 'react-inlinesvg' + +import Developer1 from '@/assets/images/developer1.png' +import Developer2 from '@/assets/images/developer2.png' +import Developer3 from '@/assets/images/developer3.png' +import Developer4 from '@/assets/images/developer4.png' +import Earth from '@/assets/images/earth.svg' +import PLDiscord from '@/assets/images/pl-discord.png' +import ProfilePage from '@/assets/images/profile-page.png' + +export default function DeveloperCommunity() { + return ( +
+
+
+
+
+
+ Engage with a developer community{' '} +
+
+ {[Developer1, Developer2, Developer3, Developer4].map((developer, index) => ( + + ))} +
+
+
+
+ {[Developer1, Developer2, Developer3, Developer4].map((developer, index) => ( + + ))} +
+
+
+ Built for builders, by builders. Our community is here to assist you with technical queries, conceptual + doubt, or just to chat.{' '} +
+
+ Discover innovative projects and earn tokens for your contributions. Your expertise doesn’t just shape the + future, it’s rewarded in real time. +
+
+
+
+
+ Collaborate with builders from leading projects +
+
+ Build industry standard experience +
+
+ Receive support from real people +
+
+
+
+
+ Join the Discord +
+
+
+
+
+
+
+ + + +
+ +
+ + + + + + + + + +
+
+
+
+
+
+
+
+
+ Join the Discord +
+
+
+ ) +} diff --git a/src/components/Landing/Features.tsx b/src/components/Landing/Features.tsx new file mode 100644 index 00000000..bd6f233b --- /dev/null +++ b/src/components/Landing/Features.tsx @@ -0,0 +1,64 @@ +import SVG from 'react-inlinesvg' + +import GitForkIcon from '@/assets/icons/git-fork.svg' +import GitIssueIcon from '@/assets/icons/git-issue.svg' +import GitPullRequestIcon from '@/assets/icons/git-pull-request.svg' +import UserProfileIcon from '@/assets/icons/user.svg' + +const features = [ + { + icon: GitIssueIcon, + title: 'Issue tracking', + description: 'Keep track of tasks, bugs, development for your project', + className: 'md:w-64' + }, + { + icon: GitPullRequestIcon, + title: 'Pull Requests', + description: 'Submit changes to your repository hosted in Protocol.Land', + className: 'md:w-60' + }, + { + icon: GitForkIcon, + title: 'Forking', + description: 'Seamlessly create a copy of your repository', + className: 'md:w-56' + }, + { + icon: UserProfileIcon, + title: 'User Profiles', + description: 'Create your unique profile connected to your wallet address', + className: 'md:w-60' + } +] + +export default function Features() { + return ( +
+
+
+ {features.map((feature) => ( +
+
+
+ +
+
+
+
+ {feature.title} +
+
+ {feature.description} +
+
+
+ ))} +
+
+
+ ) +} diff --git a/src/components/Landing/Footer.tsx b/src/components/Landing/Footer.tsx new file mode 100644 index 00000000..a2b926a8 --- /dev/null +++ b/src/components/Landing/Footer.tsx @@ -0,0 +1,43 @@ +import SVG from 'react-inlinesvg' + +import CLabsIcon from '@/assets/icons/CLabs.svg' +import CLabsTextIcon from '@/assets/icons/CLabsText.svg' + +export default function Footer() { + return ( +
+
+
In collaboration with
+ +
+ +
+
Arweave
+
+
+ Building on the Permaweb +
+
+ +
+ +
+
+
+ Protocol.land © 2024 + All Rights Reserved +
+ Privacy Policy +
+
+
+ ) +} diff --git a/src/components/Landing/Header.tsx b/src/components/Landing/Header.tsx new file mode 100644 index 00000000..520ac82b --- /dev/null +++ b/src/components/Landing/Header.tsx @@ -0,0 +1,52 @@ +import SVG from 'react-inlinesvg' + +import SpiralArrowIcon from '@/assets/icons/spiral-arrow.svg' +import Repo from '@/assets/images/Repo.svg' + +export default function Header() { + return ( +
+
+
+ Code collaboration, reimagined +
+ +
+ Decentralized, source controlled, code collaboration where you own your code. +
+ +
+
+
+
+ Create a repo +
+
+
+
See docs
+
+
+
+
+ +
+ Try it below! +
+ +
+
+ +
+ +
+
+ ) +} diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx new file mode 100644 index 00000000..5822cec9 --- /dev/null +++ b/src/components/Landing/Landing.tsx @@ -0,0 +1,29 @@ +import BackedByArweave from './BackedByArweave' +import Bounties from './Bounties' +import Builders from './Builders' +import Cli from './Cli' +import DeveloperCommunity from './DeveloperCommunity' +import Features from './Features' +import Footer from './Footer' +import Header from './Header' +import Navbar from './Navbar' +import OpenSource from './OpenSource' + +export default function Landing() { + return ( +
+
+ +
+ + + + + + + +
+
+ ) +} diff --git a/src/components/Landing/Navbar.tsx b/src/components/Landing/Navbar.tsx new file mode 100644 index 00000000..1f6281f9 --- /dev/null +++ b/src/components/Landing/Navbar.tsx @@ -0,0 +1,30 @@ +import SVG from 'react-inlinesvg' + +import Logo from '@/assets/images/p-logo.svg' + +export default function Navbar() { + return ( +
+
+
+ +
+
Protocol.Land
+
+
+
+
+ Connect Wallet +
+
+
+
+ ) +} diff --git a/src/components/Landing/OpenSource.tsx b/src/components/Landing/OpenSource.tsx new file mode 100644 index 00000000..c9d8f99e --- /dev/null +++ b/src/components/Landing/OpenSource.tsx @@ -0,0 +1,38 @@ +import SVG from 'react-inlinesvg' + +import Line from '@/assets/images/line.svg' +import PLRepo from '@/assets/images/pl-repo.png' +import PLViewblock from '@/assets/images/pl-viewblock.png' + +export default function OpenSource() { + return ( +
+
+
+ Open-source, from platform to on-chain +
+
+
+
+
+ +
+
+ Platform (Protocol.Land) +
+
+
+ +
+
+
+ +
+
+ On-chain (Arscan) +
+
+
+
+ ) +} diff --git a/src/index.css b/src/index.css index d419d2f8..8c4bfa98 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter&family=Lekton&family=Manrope&display=swap'); + .wmde-markdown ol, .wmde-markdown ul, .wmde-markdown menu, @@ -24,6 +26,26 @@ @apply visible z-50; } + .underlined { + position: relative; + margin-right: 1rem; + } + + .underlined:after { + content: ''; + position: absolute; + bottom: -40px; + z-index: -1; + left: 0; + width: 100%; + height: 50px; + border: solid 4px white; + border-color: white transparent transparent transparent; + border-radius: 50%; + clip-path: inset(0 0 50% 0); + rotate: -2deg; + } + input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 2d1d17fc..e5fdb2ea 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom' import { Button } from '@/components/common/buttons' import CreateProfileModal from '@/components/CreateProfileModal/CreateProfileModal' +import Landing from '@/components/Landing/Landing' import { PL_REPO_ID } from '@/helpers/constants' import { trackGoogleAnalyticsEvent, trackGoogleAnalyticsPageView } from '@/helpers/google-analytics' import { useGlobalStore } from '@/stores/globalStore' @@ -21,6 +22,7 @@ export default function Home() { const [isCreateProfileModalOpen, setIsCreateProfileModalOpen] = React.useState(false) const { connect } = useConnection() const navigate = useNavigate() + const strategy = React.useMemo(() => localStorage.getItem('wallet_kit_strategy_id'), []) React.useEffect(() => { trackGoogleAnalyticsPageView('pageview', '/', 'Home Page Visit') @@ -48,7 +50,7 @@ export default function Home() { } async function handleInstallButtonClick() { - const NPM_URL = 'https://www.npmjs.com/package/@7i7o/git-remote-proland' + const NPM_URL = 'https://www.npmjs.com/package/@protocol.land/git-remote-helper' trackGoogleAnalyticsEvent('CLI', 'Install Git remote CLI button click', 'Git CLI') @@ -59,6 +61,10 @@ export default function Home() { navigate(`/repository/${PL_REPO_ID}`) } + if (!strategy || !authState.isLoggedIn) { + return + } + return (
diff --git a/tailwind.config.js b/tailwind.config.js index 76064aeb..78b914ab 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,6 +3,14 @@ export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { + fontFamily: { + lekton: ['Lekton', 'sans-serif'], + inter: ['Inter', 'sans-serif'], + manrope: ['Manrope', 'sans-serif'] + }, + dropShadow: { + default: '0 50px 60px rgba(109, 171, 213, 0.4)' + }, colors: { 'liberty-dark': { 50: '#4C61A2', diff --git a/vite.config.ts b/vite.config.ts index f23ac759..900d689c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -26,7 +26,7 @@ export default defineConfig({ resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), - '@codemirror': path.resolve(__dirname, 'node_modules/@codemirror/'), + '@codemirror': path.resolve(__dirname, 'node_modules/@codemirror/') } }, build: {