Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Landing page update #235

Merged
merged 3 commits into from
May 6, 2024
Merged

Landing page update #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f7c4e78
smol leap of landing page, one giant leap to launch
wtfsayo May 4, 2024
1edb5e7
big save
wtfsayo May 4, 2024
6540776
invoice preview
wtfsayo May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 112 additions & 0 deletions web-portal/frontend/components/billing/invoicePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import { Modal, Button, Divider } from "@mantine/core";
import {
useParams,
usePathname,
useRouter,
useSearchParams,
} from "next/navigation";
import { useAtomValue } from "jotai";
import { billingHistoryAtom } from "@frontend/utils/atoms";
import _ from "lodash";
import {
Document,
Page,
Text,
Image,
View,
StyleSheet,
PDFViewer,
} from "@react-pdf/renderer";
import logo from "@frontend/public/porter-footer-logo.png";
import { crimson } from "@frontend/utils/theme";
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: "row",
backgroundColor: "#F6EEE6",
},
section: {
flexGrow: 1,
},
text: {
fontSize: 12,
marginLeft: 20,
marginTop: 10,
},
image: {
top: 20,
left: "45%",
width: 267 * 0.3,
height: 150 * 0.3,
},
separator: {
borderBottomColor: "#3C2B27",
opacity: 0.9,
borderBottomWidth: "1.5",
width: "100%",
left: 18,
marginBottom: 10,
},
});

export default function InvoicePreview() {
const router = useRouter();
const params = useSearchParams();
const path = usePathname();
const invoiceId = params?.get("download") as string;

const billingHistoryData = useAtomValue(billingHistoryAtom);
const currentInvoice = _.find(billingHistoryData, {
id: invoiceId,
});

return (
<Modal
opened={Boolean(invoiceId)}
onClose={() => router.replace(path as string)}
title={"Download Invoice"}
size={"xl"}
centered
>
<PDFViewer width="100%" height={800}>
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Image src={logo.src} style={styles.image} alt="Porters Logo" />
<View style={{ marginTop: 40, ...styles.separator }} />

<Text style={styles.text}>
{`Transaction Id:`}{" "}
<Text style={{ ...styles.text, opacity: 0.5 }}>
{currentInvoice?.referenceId}
</Text>
</Text>
<Text style={styles.text}>
{`Amount:`}{" "}
<Text style={{ ...styles.text, opacity: 0.5 }}>
{currentInvoice?.amount}
</Text>
</Text>
<Text style={styles.text}>
{`Transaction Type:`}{" "}
<Text style={{ ...styles.text, opacity: 0.5 }}>
{currentInvoice?.transactionType}
</Text>
</Text>
{currentInvoice?.productId && (
<Text style={styles.text}>
{`Amount:`}{" "}
<Text style={{ ...styles.text, opacity: 0.5 }}>
{currentInvoice?.productId}
</Text>
</Text>
)}
<View style={{ marginTop: 20, ...styles.separator }} />
</View>
<View style={styles.section}></View>
</Page>
</Document>
</PDFViewer>
</Modal>
);
}
155 changes: 90 additions & 65 deletions web-portal/frontend/components/home/01-Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,102 @@
"use client";
import React from "react";
import {
Container,
Title,
Button,
Flex,
Group,
Text,
Box,
em,
Container,
Title,
Button,
Flex,
Group,
Text,
Box,
em,
} from "@mantine/core";
import Image from "next/image";
import logo from "@frontend/public/monochrome_logo.png";
import heroImage from "@frontend/public/hero_image.png";
import backgroundOne from "@frontend/public/background_1.png";
import Link from "next/link";
import { useMediaQuery } from "@mantine/hooks";
import { useViewportSize } from "@mantine/hooks";
import { crimson, redRose } from "@frontend/utils/theme";

export function HeroSection() {
const isMobile = useMediaQuery(`(max-width: ${em(750)})`);
export default function HeroSection() {
const { width } = useViewportSize();
const isMobile = width < 768;

return (
<Container size="md">
<Flex align="center" justify="space-between" gap={100} mb={40} p={10}>
<Image src={logo.src} alt="hello" width={160} height={58} />
{!isMobile && (
<Flex
align="center"
justify="space-evenly"
w={800}
wrap="wrap"
color="umbra.1"
>
<Title order={3} fw={700}>
Home
</Title>
<Title order={3} fw={500}>
Tools
</Title>
<Title order={3} fw={500}>
Pricing
</Title>
<Title order={3} fw={500}>
Swap
</Title>
<Title order={3} fw={500}>
Documentation
</Title>
</Flex>
)}
</Flex>
<Flex align="center" justify="space-between" gap={100}>
<Box>
<Title>Your Gateway to Web3</Title>
<Text c="umbra" opacity={0.5} mt="md" maw={isMobile ? 400 : 500}>
Accelerate your Web3 journey with our plug-and-play platform
offering comprehensive analytics, Web3-native developer suite and
hassle-free access to POKT’s Decentralised RPC Service – simplifying
your build from concept to execution.
</Text>
return (
<Container size="md" mt={20}>
<Flex align="center" justify="space-between" gap={100} my={20}>
<Image src={logo.src} alt="hello" width={160} height={58} />
{!isMobile && (
<Flex
align="center"
justify="space-evenly"
w={800}
wrap="wrap"
color="umbra.1"
>
<Title size={20} fw={700}>
Home
</Title>
<Title size={20} fw={500}>
Tools
</Title>
<Title size={20} fw={500}>
Pricing
</Title>
<Title size={20} fw={500}>
Swap
</Title>
<Title size={20} fw={500}>
Documentation
</Title>
</Flex>
)}
</Flex>
<Flex align="center" justify="space-between" gap={100}>
<Box>
<Title
style={{
fontFamily: redRose.style.fontFamily,
fontWeight: 600,
fontSize: 36,
}}
>
Your Gateway to Web3
</Title>
<Text
c="umbra"
opacity={0.9}
mt="md"
maw={isMobile ? 400 : 500}
style={{
fontFamily: crimson.style.fontFamily,
fontSize: 20,
}}
>
Accelerate your Web3 journey with our plug-and-play
platform offering comprehensive analytics, Web3-native
developer suite and hassle-free access to POKT’s
Decentralised RPC Service – simplifying your build from
concept to execution.
</Text>

<Group mt={30}>
<Link href="#">
<Button>Coming Soon</Button>
</Link>
</Group>
</Box>
{!isMobile && (
<Box>
<Image src={heroImage.src} alt="hello" width={400} height={400} />
</Box>
)}
</Flex>
</Container>
);
<Group mt={30}>
<Link href="#">
<Button>Coming Soon</Button>
</Link>
</Group>
</Box>
{!isMobile && (
<Box>
{/* TODO: Add backgroundOne image */}
<Image
src={heroImage.src}
alt="hello"
width={400}
height={400}
/>
</Box>
)}
</Flex>
</Container>
);
}
30 changes: 30 additions & 0 deletions web-portal/frontend/components/home/02-Partners.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Container, Flex, Stack, Title } from "@mantine/core";

import raidguildLogo from "@frontend/public/raidguild-logo.png";
import poktLogo from "@frontend/public/pokt-logo.png";
import Image from "next/image";
import SectionTitle from "./common/SectionTitle";

export default function Partners() {
return (
<Container size="md" mt={"xl"}>
<SectionTitle title="Our Partners" />
<Flex
wrap="wrap"
p={40}
gap={60}
align="center"
justify="center"
opacity={0.5}
>
<Image
src={raidguildLogo.src}
alt="svg"
width={148}
height={39}
/>
<Image src={poktLogo.src} alt="svg" width={120} height={33} />
</Flex>
</Container>
);
}
43 changes: 43 additions & 0 deletions web-portal/frontend/components/home/03-Why-Porters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { Container, Grid } from "@mantine/core";
import SectionTitle from "./common/SectionTitle";
import heroImage from "@frontend/public/hero_image.png";
import FeatureBlock from "./common/FeatureBlock";
import devCentricity from "@frontend/public/centricity.png";
import depin from "@frontend/public/depin.png";
import scale from "@frontend/public/scale.png";
import noRamp from "@frontend/public/no-ramp.png";

export default function WhyOurRPC() {
return (
<Container size="md" mt={"xl"}>
<SectionTitle title="Why Our RPC?" />
<Grid align="center" justify="center" m={40}>
<FeatureBlock
image={depin.src}
title="DePIN Made Easy"
description="Connect your project to POKT’s powerful DePIN network. The PORTERS gateway abstracts away the Protocol enabling easy access to unstoppable decentralized data."
/>
<FeatureBlock
image={devCentricity.src}
title="Developer Centricity"
description="PORTERS offers a plug-and-play developer experience.
We make collaboration and sharing easy for everyone without sacrificing security and permissions management."
/>

<FeatureBlock
image={scale.src}
title="Scalable Tooling"
description="PORTERS provides scalable and robust developer tooling.
Adjusting RPC usage to your needs when you need it. Never worry about data availability or API key permissions again."
/>

<FeatureBlock
image={noRamp.src}
title="No Ramps Needed"
description="At PORTERS we want you to be flexible. You can simply swap your favourite token to PORTERS and get your RPC endpoint funded instantly.
No credit card needed, no hidden fees, and no vendor lock-in."
/>
</Grid>
</Container>
);
}
9 changes: 9 additions & 0 deletions web-portal/frontend/components/home/04-Supported-Chains.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Container } from "@mantine/core";
import SectionTitle from "./common/SectionTitle";
export default function SupportedChains() {
return (
<Container size="md" mt={"xl"}>
<SectionTitle title="Supported Chains" />
</Container>
);
}
Loading
Loading