Skip to content

Commit

Permalink
Creates a good Landing Page (#150)
Browse files Browse the repository at this point in the history
  • Loading branch information
gbdubs authored Jan 20, 2024
1 parent b743bc9 commit f21dbd5
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 34 deletions.
6 changes: 5 additions & 1 deletion frontend/components/standard/Nav.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,15 @@ const menuStyles = computed(() => {
const menuItems = computed(() => {
const result: MenuItem[] = [
{
to: 'https://pacta.rmi.org',
external: true,
label: tt('About'),
},
{
to: localePath('/'),
label: tt('Home'),
},
]
if (isAdmin.value) {
result.push({
Expand Down
23 changes: 21 additions & 2 deletions frontend/lang/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"Metadata": "Metadata",
"Number of Rows": "Number of Rows",
"Save Changes": "Save Changes",
"Refresh": "Refresh",
"Refresh": "Refresh"
},
"components/analysis/ListView": {
"Created At": "Created At",
Expand Down Expand Up @@ -221,7 +221,8 @@
},
"components/standard/Nav": {
"Admin": "Admin",
"Home": "Home",
"About": "About PACTA",
"Home": "Portfolio Analysis Tool",
"My Data": "My Data",
"Sign In": "Sign In",
"Sign Out": "Sign Out"
Expand Down Expand Up @@ -384,5 +385,23 @@
"Secondary Target ID": "Secondary Target ID",
"Secondary Target Owner": "Secondary Target Owner",
"Secondary Target Type": "Secondary Target Type"
},
"pages/index": {
"Heading": "PACTA for Investors",
"Subheading": "Measure the alignment of financial portfolios with climate scenarios",
"Description": "The Paris Agreement Capital Transition Assessment (PACTA) is an open-source and free of charge online software platform that enables users to measure the alignment of financial portfolios with climate scenarios as well as analyze specific companies.",
"Section1Heading": "How PACTA Works",
"Section1Paragraph1": "PACTA compares what needs to happen in climate-relevant sectors in order to minimize global temperature rises with financial institutions' exposure to companies in these sectors. It uses a dynamic, forward-looking approach, based on the 5-year production plans of companies in a financial institution's portfolio.",
"Section1Paragraph2": "The methodology measures alignment per sector or per technology, ensuring sector specific needs are included. For example, some sectors need to move more quickly than others; some need to reform (such as power generation); and others need to phase out (for instance, fossil fuels).",
"Section2Heading": "Portfolio Analysis Tool",
"Section2Paragraph1": "The PACTA tool to analyze listed equity and corporate bond portfolios was relaunched in March 2021 with a new interactive format. For the first time, investors can now analyze multiple portfolios simultaneously, save their results online, and receive interactive results on their alignment with the Paris climate goals.",
"Section2Paragraph2": "The tool is free to use, and requires a csv file including the ISIN, value and currency of the investment to run the analysis. For more information on how to format your portfolios for analysis, please see the Input User Guide.",
"Input User Guide": "Input User Guide",
"Section2Paragraph3": "All uploaded data and results are only visible to the user that uploaded them, and strict audit logs are maintained for your piece of mind. Portfolios can be deleted from the platform at any time by the user that uploaded them.",
"Sign In": "Sign In or Create an Account to Access the Tool",
"Get Started": "Get Started, Upload Portfolio(s)",
"Section4Heading": "About This Tool",
"Section4Paragraph1": "PACTA was originally developed by 2° Investing Initiative (2DII) with backing from UN Principles for Responsible Investment. In June 2022, 2DII transferred stewardship of PACTA to RMI, formerly Rocky Mountain Institute. In 2024, the PACTA for Investors tool was modernized by Silicon Ally, a software development non-profit. The code for this tool, as well as the analysis code for PACTA is open source.",
"Section4CTA": "Learn More About PACTA"
}
}
122 changes: 91 additions & 31 deletions frontend/pages/index.vue
Original file line number Diff line number Diff line change
@@ -1,40 +1,100 @@
<script setup lang="ts">
const isAuthenticated = useIsAuthenticated()
const { $msal: { signOut } } = useNuxtApp()
const { signIn } = useSignIn()
const { t } = useI18n()
const localePath = useLocalePath()
const tt = (s: string) => t(`pages/index.${s}`)
</script>

<template>
<StandardContent>
<TitleBar title="RMI PACTA" />
<p>
TODO(#80) This will eventually be the site for RMI's PACTA, but now it's mostly just a placeholder.
</p>
<p>
This project is open source. You can view the code at <a href="https://github.com/RMI-PACTA/app">github.com/RMI-PACTA/app</a>.
</p>

<PVButton
v-if="!isAuthenticated"
label="Sign In"
icon="pi pi-sign-in"
icon-pos="right"
@click="signIn"
/>
<template v-else>
<LinkButton
label="Get Started"
icon="pi pi-arrow-right"
icon-pos="right"
to="/upload"
/>
<PVButton
class="p-button-outlined"
label="Sign Out"
icon="pi pi-sign-out"
icon-pos="right"
@click="signOut"
/>
</template>
<div class="border-round p-3">
<h1 class="text-5xl mt-0 mb-2 ">
{{ tt('Heading') }}
</h1>
<div class="text-2xl mt-0 mb-4">
{{ tt('Subheading') }}
</div>
<p class="">
{{ tt('Description') }}
</p>
</div>
<div class="flex gap-3 flex-wrap">
<div class="border-primary border-2 border-round p-3 flex flex-column gap-3 flex-1">
<h2 class="m-0">
{{ tt('Section1Heading') }}
</h2>
<p>{{ tt('Section1Paragraph1') }}</p>
<p>{{ tt('Section1Paragraph2') }}</p>
</div>
<div
class="w-12 md:w-6 xl:w-5 flex p-2 border-2 border-round align-items-center justify-content-center"
>
<PVImage
preview
src="/img/how-it-works.jpg"
:pt="{
root: {
'class': 'max-w-full',
},
image : {
'class': 'max-w-full',
}
}"
/>
</div>
</div>
<div class="flex gap-3 flex-column p-3">
<h2 class="m-0">
{{ tt('Section2Heading') }}
</h2>
<p>{{ tt('Section2Paragraph1') }}</p>
<p>
{{ tt('Section2Paragraph2') }}
<LinkButton
:to="localePath('/input-user-guide')"
class="p-button-xs align-self-center py-0 ml-2 p-button-outlined"
:label="tt('Input User Guide')"
icon="pi pi-arrow-right"
icon-pos="right"
/>
</p>
<p>{{ tt('Section2Paragraph3') }}</p>
<div class="flex justify-content-center mt-2">
<PVButton
v-if="!isAuthenticated"
:label="tt('Sign In')"
icon="pi pi-sign-in"
icon-pos="right"
class="max-w-30rem"
@click="signIn"
/>
<LinkButton
v-else
:label="tt('Get Started')"
icon="pi pi-arrow-right"
icon-pos="right"
class="max-w-30rem"
to="/upload"
/>
</div>
</div>
<div class="flex gap-3 flex-column p-3">
<h2 class="m-0">
{{ tt('Section4Heading') }}
</h2>
<p>
{{ tt('Section4Paragraph1') }}
<LinkButton
to="pacta.rmi.org"
class="p-button-xs align-self-center py-0 ml-2 p-button-outlined"
:label="tt('Section4CTA')"
icon="pi pi-arrow-right"
icon-pos="right"
/>
</p>
</div>
</StandardContent>
</template>
2 changes: 2 additions & 0 deletions frontend/plugins/primevue.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Column from 'primevue/column'
import DataTable from 'primevue/datatable'
import Dialog from 'primevue/dialog'
import Dropdown from 'primevue/dropdown'
import Image from 'primevue/image'
import InputNumber from 'primevue/inputnumber'
import InputText from 'primevue/inputtext'
import InputSwitch from 'primevue/inputswitch'
Expand Down Expand Up @@ -42,6 +43,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
vueApp.component('PVDialog', Dialog)
vueApp.component('PVDropdown', Dropdown)
vueApp.component('PVFileUpload', FileUpload)
vueApp.component('PVImage', Image)
vueApp.component('PVInputNumber', InputNumber)
vueApp.component('PVInputText', InputText)
vueApp.component('PVInputSwitch', InputSwitch)
Expand Down
Binary file added frontend/public/img/how-it-works.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f21dbd5

Please sign in to comment.