+
+
+
+ );
+};
+
+export default Footer;
diff --git a/landingpage/src/components/FooterNavigation.tsx b/landingpage/src/components/FooterNavigation.tsx
new file mode 100644
index 0000000..54dea62
--- /dev/null
+++ b/landingpage/src/components/FooterNavigation.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import SiteLink from './ui/SiteLink';
+
+type navItem = {
+ _id: string;
+ label: string;
+ path: string;
+ isExternal?: boolean;
+ icon?: any;
+ attachment?: any;
+};
+
+type Props = {
+ navItems: {
+ _rawNavPanel1: navItem[];
+ _rawNavPanel2: navItem[];
+ _rawNavPanel3: navItem[];
+ _rawNavPanel4: navItem[];
+ };
+};
+
+const FooterNavigation = ({ navItems }: Props) => {
+ return (
+ <>
+
+
+
+
+
+
+ + Powered by Cartesi +
+
+
+
+
+ {navItems.navLinks2 && (
+
+
+ {navItems.navLinks2.map(
+ ({ _id, label, path, isExternal, icon }) => (
+
+ 
+
+ )
+ )}
+
+ )}
+ + © {year} Bug Buster. All rights reserved. +
+
+
+
+ {navItems._rawNavPanel1 &&
+ navItems._rawNavPanel1.map(
+ ({ _id, label, path, attachment, isExternal }) => (
+
+ {label}
+
+ )
+ )}
+
+
+ {navItems._rawNavPanel2 &&
+ navItems._rawNavPanel2.map(
+ ({ _id, label, path, attachment, isExternal }) => (
+
+ {label}
+
+ )
+ )}
+
+
+
+
+ );
+};
+
+export default FooterNavigation;
diff --git a/landingpage/src/components/Header.tsx b/landingpage/src/components/Header.tsx
new file mode 100644
index 0000000..f4a91ee
--- /dev/null
+++ b/landingpage/src/components/Header.tsx
@@ -0,0 +1,125 @@
+import React, { useRef } from 'react';
+import Logo from './Logo';
+import Container from './ui/Container';
+import { useCallback, useEffect, useState } from 'react';
+import { useScroll, motion } from 'framer-motion';
+import Navigation from './Navigation';
+import NavigationHamburger from './ui/NavigationHamburger';
+import InfoBar from './ui/InfoBar';
+import { InfoBarType } from '../types/types';
+import { useMediaQuery, useResizeObserver, useWindowSize } from 'usehooks-ts';
+
+type Props = {
+ isWhiteMobile?: boolean;
+ infobar?: InfoBarType;
+ setHeaderHeight?: any;
+ data?: any;
+};
+
+const Header = ({ isWhiteMobile, infobar, setHeaderHeight, data }: Props) => {
+ const { scrollY } = useScroll();
+ const [hidden, setHidden] = useState(false);
+ const [isTop, setIsTop] = useState(true);
+ const [isOpen, setIsOpen] = useState(false);
+ const [isClicked, setIsClicked] = useState(false);
+ const isDesktop = useMediaQuery('(min-width: 1024px)', {
+ initializeWithValue: false,
+ });
+
+ const update = useCallback(() => {
+ const current = scrollY?.get();
+ const previous = scrollY?.getPrevious();
+ if (current < previous) {
+ setHidden(false);
+ } else if (current > 50 && current > previous) {
+ !isOpen && setHidden(true);
+ }
+
+ setIsTop(current <= 50);
+ }, [scrollY, isOpen]);
+
+ useEffect(() => {
+ scrollY?.on('change', update);
+ return () => {
+ scrollY?.clearListeners();
+ };
+ }, [scrollY, update]);
+
+ useEffect(() => {
+ if (!isDesktop) {
+ setIsOpen(false);
+ }
+ }, [isDesktop]);
+
+ const variants = {
+ initial: { opacity: 1, y: 0 },
+ visible: { opacity: 1, y: 0 },
+ hidden: { opacity: 0, y: '-100%' },
+ };
+
+ const ref = useRef
+ {navItems._rawNavPanel3 &&
+ navItems._rawNavPanel3.map(
+ ({ _id, label, path, isExternal, icon }) => (
+
+ 
+
+ )
+ )}
+
+
+ {navItems._rawNavPanel4 &&
+ navItems._rawNavPanel4.map(
+ ({ _id, label, path, isExternal, icon }) => (
+
+
+
+ )
+ )}
+
+
+ {
+ setIsClicked(true);
+ setIsOpen(!isOpen);
+ }}
+ isOpen={isOpen}
+ top={infobar?.enabled ? 4 : 0}
+ />
+
+
+
+
+ {navLinks2.map(({ _id, label, path, isExternal, icon }) => (
+
+
+ {label}
+
+ ))}
+
+ )}
+
+
+
+
+
+ {isDesktop && cta && (
+
+ {title}
++ +
+ )} +
+ {list.items.map(({ _id, title, description, image }) => (
+
+ {!isDesktop && cta && (
+
+
+
+
+ ))}
+
+
+ {title}
+{description}
++ +
+ )} +
+
+
+
+ {title}
+{subtitle}
+
+
+
+
+ {data.map(({ _id, title, image, description, cta }) => (
+
+ )}
+
+
+
+
+ ))}
+
+ 
+
+
+
+
+
+
+
+
+
+ {title}
+{description}
++ +
+
+
+
+
+ {title}
+
+
+
+ {cta && (
+
+ {description}
++ +
+ )} +
+
+
+ {list.items.map(
+ ({ _id, title, description, image }, index: number) => (
+
+
+
+
+ )
+ )}
+
+
+
+
+ {title}
+ +
+ {badge &&
+
+
+ {headline}
+
+
+
+ {children}
+
+ );
+};
+
+export default Container;
diff --git a/landingpage/src/components/ui/Content.tsx b/landingpage/src/components/ui/Content.tsx
new file mode 100644
index 0000000..67c3fc0
--- /dev/null
+++ b/landingpage/src/components/ui/Content.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+type Props = {
+ infobar?: boolean;
+ headerHeight: number;
+ children: React.ReactNode;
+};
+
+const Content = ({ infobar = false, headerHeight, children }: Props) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default Content;
diff --git a/landingpage/src/components/ui/DropdownMenu.tsx b/landingpage/src/components/ui/DropdownMenu.tsx
new file mode 100644
index 0000000..beda92c
--- /dev/null
+++ b/landingpage/src/components/ui/DropdownMenu.tsx
@@ -0,0 +1,178 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef
+ {children}
+
+ );
+};
+
+export default EntryContent;
diff --git a/landingpage/src/components/ui/EyebrowTitle.tsx b/landingpage/src/components/ui/EyebrowTitle.tsx
new file mode 100644
index 0000000..eef6d9f
--- /dev/null
+++ b/landingpage/src/components/ui/EyebrowTitle.tsx
@@ -0,0 +1,25 @@
+import { createElement } from "react";
+import { cn } from "../../lib/utils";
+
+type Props = {
+ as?: keyof JSX.IntrinsicElements;
+ label: string;
+ center?: boolean;
+ className?: string;
+};
+
+const EyebrowTitle = ({ as, label, center = true, className }: Props) => {
+ const component = as || "div";
+
+ return createElement(component, {
+ className: cn(
+ `${
+ center ? "items-center" : ""
+ } before:bg-tertiary before:w-1/3 before:h-[0.3rem] flex flex-col gap-5 text-[0.75rem] md:text-sm uppercase tracking-wide text-tertiary font-semibold inline-flex font-heading mb-6 lg:mb-8`,
+ className
+ ),
+ children: label,
+ });
+};
+
+export default EyebrowTitle;
diff --git a/landingpage/src/components/ui/HeroContainer.tsx b/landingpage/src/components/ui/HeroContainer.tsx
new file mode 100644
index 0000000..e5db588
--- /dev/null
+++ b/landingpage/src/components/ui/HeroContainer.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+type Props = {
+ backgroundImage?: string;
+ height?: string;
+ minHeight?: string;
+ children: React.ReactNode;
+};
+
+const HeroContainer = ({
+ children,
+ backgroundImage = "url('/images/bg.png')",
+ height = "100vh",
+ minHeight,
+ className,
+}: Props & React.HTMLAttributes
+ {children}
+
+ );
+};
+
+export default HeroContainer;
diff --git a/landingpage/src/components/ui/IconArrowLeft.tsx b/landingpage/src/components/ui/IconArrowLeft.tsx
new file mode 100644
index 0000000..a7af7ea
--- /dev/null
+++ b/landingpage/src/components/ui/IconArrowLeft.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+type Props = {
+ style?: React.CSSProperties;
+};
+
+const IconArrowLeft = ({ style }: Props) => {
+ return (
+
+ );
+};
+
+export default IconArrowLeft;
diff --git a/landingpage/src/components/ui/IconArrowRight.tsx b/landingpage/src/components/ui/IconArrowRight.tsx
new file mode 100644
index 0000000..51aa473
--- /dev/null
+++ b/landingpage/src/components/ui/IconArrowRight.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+type Props = {
+ style?: React.CSSProperties;
+};
+
+const IconArrowRight = ({ style }: Props) => {
+ return (
+
+ );
+};
+
+export default IconArrowRight;
diff --git a/landingpage/src/components/ui/IconCard.tsx b/landingpage/src/components/ui/IconCard.tsx
new file mode 100644
index 0000000..f47f188
--- /dev/null
+++ b/landingpage/src/components/ui/IconCard.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+type Props = {
+ icon: string;
+};
+
+const IconCard = ({
+ icon,
+ className,
+
+ title,
+ ...rest
+}: Props & React.HTMLAttributes
+ 
+
+ );
+};
+
+export default IconCard;
diff --git a/landingpage/src/components/ui/IconChevron.tsx b/landingpage/src/components/ui/IconChevron.tsx
new file mode 100644
index 0000000..3e8fbcf
--- /dev/null
+++ b/landingpage/src/components/ui/IconChevron.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+type Props = {
+ style?: string;
+};
+
+const IconChevron = ({ style }: Props) => {
+ return (
+
+ );
+};
+
+export default IconChevron;
diff --git a/landingpage/src/components/ui/IconCollapse.tsx b/landingpage/src/components/ui/IconCollapse.tsx
new file mode 100644
index 0000000..808f348
--- /dev/null
+++ b/landingpage/src/components/ui/IconCollapse.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+type Props = {
+ open: boolean;
+};
+
+const IconCollapse = ({ open }: Props) => {
+ return (
+
+
+ {data.badge !== "" && (
+
+ {data.badge}
+
+ )}
+ {data.text}
+
+
+
+ );
+};
+
+export default InfoBar;
diff --git a/landingpage/src/components/ui/Layout.tsx b/landingpage/src/components/ui/Layout.tsx
new file mode 100644
index 0000000..a8b4f63
--- /dev/null
+++ b/landingpage/src/components/ui/Layout.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { Routes } from '../../types/types';
+import Header from '../Header';
+import Content from './Content';
+import Footer from '../Footer';
+
+type Props = {
+ children: React.ReactNode;
+ headerWhiteMobile?: boolean;
+};
+
+const data = {
+ infobar: {
+ enabled: false,
+ badge: '',
+ text: '',
+ url: '',
+ },
+ appCTA: {
+ label: 'Bust Some Bugs',
+ link: Routes.app,
+ isExternal: false,
+ },
+ navItems: {
+ navLinks2: [
+ {
+ _id: 'nav-1',
+ path: Routes.github,
+ label: 'GitHub',
+ icon: {
+ asset: {
+ url: '/images/icon-github.svg',
+ url2: '/images/icon-github-white.svg',
+ },
+ },
+ isExternal: true,
+ },
+ {
+ _id: 'nav-2',
+ path: Routes.x,
+ label: 'X.com',
+ icon: {
+ asset: {
+ url: '/images/icon-x.svg',
+ url2: '/images/icon-x-white.svg',
+ },
+ },
+ isExternal: true,
+ },
+ {
+ _id: 'nav-3',
+ path: Routes.telegram,
+ label: 'Telegram',
+ icon: {
+ asset: {
+ url: '/images/icon-telegram.svg',
+ url2: '/images/icon-telegram-white.svg',
+ },
+ },
+ isExternal: true,
+ },
+ ],
+ },
+};
+
+const Layout = ({ children, headerWhiteMobile = false }: Props) => {
+ const infobar = {
+ enabled: data.infobar ? data.infobar?.enabled : false,
+ badge: data.infobar?.badge,
+ text: data.infobar?.text,
+ url: data.infobar?.url,
+ };
+
+ const [headerHeight, setHeaderHeight] = useState(0);
+
+ return (
+
+ {data.badge !== "" && (
+
+ {data.badge}
+
+ )}
+ {data.text}
+
+
+
+ {children}
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/landingpage/src/components/ui/Loading.tsx b/landingpage/src/components/ui/Loading.tsx
new file mode 100644
index 0000000..cde62a3
--- /dev/null
+++ b/landingpage/src/components/ui/Loading.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+type Props = {
+ className?: string;
+ classNameSvg?: string;
+};
+
+const Loading = ({ className, classNameSvg }: Props) => {
+ return (
+
+
+
+ );
+};
+
+export default Loading;
diff --git a/landingpage/src/components/ui/NavigationHamburger.tsx b/landingpage/src/components/ui/NavigationHamburger.tsx
new file mode 100644
index 0000000..e058a0a
--- /dev/null
+++ b/landingpage/src/components/ui/NavigationHamburger.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+import { motion } from 'framer-motion';
+
+type Props = {
+ isOpen?: boolean;
+ isWhiteMobile?: boolean;
+ top?: number;
+};
+
+const NavigationHamburger = ({
+ isOpen = false,
+ isWhiteMobile,
+ top = 0,
+ onClick,
+ ...rest
+}: Props & React.HTMLAttributes
+ {children}
+
+ );
+};
+
+const SectionCard = ({
+ children,
+ className,
+ ...rest
+}: Props & React.HTMLAttributes
+ {children}
+
+ );
+};
+
+SectionCard.CardInner = SectionCardInner;
+export default SectionCard;
diff --git a/landingpage/src/components/ui/SectionCardDark.tsx b/landingpage/src/components/ui/SectionCardDark.tsx
new file mode 100644
index 0000000..bded661
--- /dev/null
+++ b/landingpage/src/components/ui/SectionCardDark.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+type Props = {
+ children: React.ReactNode;
+};
+
+const SectionCardDarkInner = ({
+ children,
+ className,
+ ...rest
+}: Props & React.HTMLAttributes
+ {children}
+
+ );
+};
+
+const SectionCardDark = ({
+ children,
+ className,
+ ...rest
+}: Props & React.HTMLAttributes
+ {children}
+
+ );
+};
+
+SectionCardDark.CardInner = SectionCardDarkInner;
+export default SectionCardDark;
diff --git a/landingpage/src/components/ui/SectionCardLight.tsx b/landingpage/src/components/ui/SectionCardLight.tsx
new file mode 100644
index 0000000..759d629
--- /dev/null
+++ b/landingpage/src/components/ui/SectionCardLight.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+type Props = {
+ children: React.ReactNode;
+};
+
+const SectionCardLightInner = ({
+ children,
+ className,
+ ...rest
+}: Props & React.HTMLAttributes
+ {children}
+
+ );
+};
+
+const SectionCardLight = ({
+ children,
+ className,
+ ...rest
+}: Props & React.HTMLAttributes
+ {children}
+
+ );
+};
+
+SectionCardLight.CardInner = SectionCardLightInner;
+export default SectionCardLight;
diff --git a/landingpage/src/components/ui/Select.tsx b/landingpage/src/components/ui/Select.tsx
new file mode 100644
index 0000000..876be14
--- /dev/null
+++ b/landingpage/src/components/ui/Select.tsx
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import IconChevron from './IconChevron';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef
+
+
+ );
+};
+
+export default NotFoundPage;
diff --git a/landingpage/src/pages/index.tsx b/landingpage/src/pages/index.tsx
new file mode 100644
index 0000000..4e93f44
--- /dev/null
+++ b/landingpage/src/pages/index.tsx
@@ -0,0 +1,174 @@
+import React from 'react';
+import { Routes } from '../types/types';
+import Meta from '../components/Meta';
+import Layout from '../components/ui/Layout';
+import Hero from '../components/homepage/Hero';
+import HeroContainer from '../components/ui/HeroContainer';
+import About from '../components/homepage/About';
+import Technology from '../components/homepage/Technology';
+import Resources from '../components/homepage/Resources';
+
+const data = {
+ pageContent: {
+ seoMeta: {
+ metaTitle: 'Bug Buster - A Trustless Bug Bounty Platform',
+ metaDescription:
+ 'Bug Buster accepts software written in any major programming language. Through a friendly web interface, hackers can test their exploits right on the browser, without even having to sign Web3 transactions! Once the hacker finds a valid exploit, they can finally send a transaction requesting the reward to be transferred to their account. All major wallets are supported!',
+ ogImage: {
+ asset: {
+ url: '/preview-image.webp',
+ },
+ },
+ noindex: false,
+ },
+ hero: {
+ title: 'Your decentralized basefor onchain bounties',
+ subtitle:
+ 'Bug Buster is on a mission to help secure developer code with streamlined bounties onchain. Submit and sponsor a bounty, or hack for rewards and clout.',
+ cta1: {
+ label: 'Bust Some Bugs',
+ link: Routes.app,
+ isExternal: false,
+ },
+ },
+ about: {
+ title:
+ 'Exterminate bugs from your apps efficiently and transparently, with no need for disputes or mediation. Every bug busted means safer code for web3.',
+ list: {
+ items: [
+ {
+ _id: '7fCW3tKCC6QpTStVdxgsRt',
+ title: 'For software developers',
+ description:
+ 'Tap into a global network of hackers and secure your app from malicious exploits. Bug Buster’s sponsored bounties incentivize the community to clean up your code. You can even pay hackers in your native token.',
+ image: {
+ asset: {
+ url: '/images/icon-developers.svg',
+ },
+ },
+ },
+ {
+ _id: '3sHUQpCYe2kYVYih0DrK9F',
+ title: 'For hackers',
+ description:
+ 'Big bug bounties await you! Discover vulnerabilities, sharpen your cybersecurity skills, and earn respect from developers. It’s simple: If you meet the requirements and submit a valid exploit, you earn rewards. No hassle, no disputes.',
+ image: {
+ asset: {
+ url: '/images/icon-hackers.svg',
+ },
+ },
+ },
+ ],
+ },
+ },
+ technology: {
+ headline: 'Bug Buster creates more secure code for web3',
+ block: {
+ title: 'Here’s how it works ',
+ description:
+ 'There are many ways to become a hero. Eliminate bugs, achieve safer code, and unlock new levels of web3 excellence.',
+ disclaimer:
+ '* If no valid exploit is found by the operation’s deadline, hacker heroes fall back and regroup.',
+ list: {
+ items: [
+ {
+ _id: 'SuVDnHmzCDIF81ojvyGdy',
+ title: 'The Mission',
+ description:
+ "
+
+
+
+ 404
+Page Not found
++ + Go home now + +
+Developers, set the parameters of your test. What part of your software do you want to debug?
Tips:
- Bug Buster accepts applications written in any major programming language
- Bounties rely on assertion scripts to determine the validity of exploits