feat: 🎸 Gratis (#312)

2021-04-21 19:21:15 +02:00 · 2021-04-21 19:21:15 +02:00 · ac8581d0b9
parent 1fecf43dc3
commit ac8581d0b9
9 changed files with 140 additions and 8 deletions
--- a/packages/site/components/Banner.tsx
+++ b/packages/site/components/Banner.tsx
@ -13,6 +13,7 @@ import playstore from '../assets/img/playstore.png'
 import Link from './Link'
 import { H1 } from './Typography'
 import { useIntl } from 'react-intl'
+import { ButtonLinkPatreon } from './ButtonLink'

 const Banner = () => {
  const intl = useIntl()
@ -63,6 +64,14 @@ const Banner = () => {
            </div>
            <H1>{intl.formatMessage({ id: 'general.title' })}</H1>
            <p>{intl.formatMessage({ id: 'general.description' })}</p>
+            {!!intl.formatMessage({ id: 'general.flashtitle' }) && (
+              <>
+                <h2 className="text-2xl md:text-4xl font-bold leading-tight text-gray-800">
+                  {intl.formatMessage({ id: 'general.flashtitle' })}
+                </h2>
+                <p>{intl.formatMessage({ id: 'general.flashtext' })}</p>
+              </>
+            )}
            <p className="flex items-center py-4 sm:flex-row space-x-2 lg:space-x-4">
              <Link.External
                className="inline-block"
@ -87,16 +96,21 @@ const Banner = () => {
                />
              </Link.External>
            </p>
+            <p className="flex items-center py-4 sm:flex-row space-x-2 lg:space-x-4">
+              <ButtonLinkPatreon>
+                {intl.formatMessage({ id: 'navigation.patreon' })}
+              </ButtonLinkPatreon>
+            </p>
            <p className="flex flex-col mt-5 sm:items-center sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
              <NextLink href="/integritet">
                <a className="inline-block px-4 py-2 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full lg:px-8 lg:py-4 hover:bg-indigo-800 hover:text-white">
-                  Integritetspolicy
+                  {intl.formatMessage({ id: 'navigation.integrity' })}
                </a>
              </NextLink>

              <NextLink href="/qa">
                <a className="inline-block px-4 py-2 font-bold text-indigo-800 border-2 border-indigo-800 rounded-full lg:px-8 lg:py-4 hover:bg-indigo-800 hover:text-white">
-                  Frågor och svar
+                  {intl.formatMessage({ id: 'navigation.qna' })}
                </a>
              </NextLink>
            </p>
--- a/packages/site/components/ButtonLink.tsx
+++ b/packages/site/components/ButtonLink.tsx
@ -38,4 +38,21 @@ export const ButtonLinkInternal = ({
  )
 }

+interface ButtonLinkPatreonProps {
+  children: ReactNode
+}
+
+export const ButtonLinkPatreon = ({ children }: ButtonLinkPatreonProps) => {
+  return (
+    <a
+      href="https://www.patreon.com/oppnaskolplattformen"
+      className="inline-block py-2 px-4 md:px-8 md:py-4 font-bold text-white border-2 bg-red-500 rounded-full hover:bg-white hover:border-red-500 hover:text-red-500"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  )
+}
+
 export default ButtonLink
--- a/packages/site/components/DownloadButtons.tsx
+++ b/packages/site/components/DownloadButtons.tsx
@ -1,4 +1,4 @@
-import ButtonLink from './ButtonLink'
+import ButtonLink, { ButtonLinkPatreon } from './ButtonLink'

 const DownloadButtons = () => {
  return (
@ -16,6 +16,9 @@ const DownloadButtons = () => {
      >
        Play Store
      </ButtonLink>
+      <ButtonLinkPatreon>
+        Stöd oss på Patreon!
+      </ButtonLinkPatreon>
    </div>
  )
 }
--- a/packages/site/components/FunFacts.tsx
+++ b/packages/site/components/FunFacts.tsx
@ -12,12 +12,12 @@ const FUNFACTS_DATA = [
    title: 'år att utveckla',
  },
  {
-    count: 12,
+    count: 0,
    title: 'kronor kostar vår app :)',
  },
  {
-    count: 5,
-    title: 'veckors utveckling',
+    count: 27,
+    title: 'utvecklare har bidragit',
  },
 ]

--- a/packages/site/components/PricingTemp.tsx
+++ b/packages/site/components/PricingTemp.tsx
@ -0,0 +1,73 @@
+import { formatPrice } from '../utils/intl'
+import DownloadButtons from './DownloadButtons'
+import Icon from './Icon'
+import SectionTitle from './SectionTitle'
+
+const price = 0
+
+const baseFeatures = [
+  {
+    included: true,
+    title: 'BankID-inloggning',
+  },
+  {
+    included: true,
+    title: 'Se nyheter',
+  },
+  {
+    included: true,
+    title: 'Se notifieringar',
+  },
+  {
+    included: false,
+    title: 'Gratis support',
+  },
+  {
+    included: false,
+    title: 'Pushnotifieringar',
+  },
+]
+
+const Pricing = () => {
+  return (
+    <section className="px-5 py-8 md:px-0 md:py-32" id="vad-kostar-det">
+      <div className="max-w-2xl mx-auto">
+        <SectionTitle
+          title="Hur kan det vara gratis?"
+          text={`
+            Vi som bygger appen vill gärna fortsätta vidareutveckla den och även ha möjlighet att ge ersättning
+            till de som hjälper till. Vi har dock bestämt oss för att, på försök, låta denna ersättning komma
+            från frivilliga donationer via Patreon.
+          `}
+        />
+      </div>
+      <div className="flex">
+        <div className="flex flex-col items-center inline-block px-5 py-8 mx-auto text-center shadow-lg rounded-md">
+          <h3 className="text-3xl text-gray-800">Tillfälligt</h3>
+          <div className="mt-5 text-6xl text-pink-500">
+            {formatPrice(price)}
+          </div>
+          <ul className="my-5">
+            {baseFeatures.map(({ included, title }) => (
+              <li className="flex items-center space-x-1" key={title}>
+                {included ? (
+                  <div className="w-5 text-green-500">
+                    <Icon.Check />
+                  </div>
+                ) : (
+                  <div className="w-5 text-red-500">
+                    <Icon.Times />
+                  </div>
+                )}
+                <span>{title}</span>
+              </li>
+            ))}
+          </ul>
+          <DownloadButtons />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Pricing
--- a/packages/site/content/locale/en.ts
+++ b/packages/site/content/locale/en.ts
@ -3,12 +3,21 @@ const en = {
  'navigation.functions': 'Functions',
  'navigation.screenshots': 'Screenshots',
  'navigation.whatdoesitcost': 'What does it cost?',
+  'navigation.patreon': 'Support us on Patreon!',
+  'navigation.integrity': 'Privacy policy',
+  'navigation.qna': 'FAQ',
  'general.title': 'Öppna skolplattformen',
  'general.description': `Whether you have three or seven children - there is a lot to keep in mind. Absence report number 17 in February. What is the name of the substitute
        this week. The gym clothes. A poorly functioning school platform
        who eats time and energy? There is no room for that. So we have
        built a better one. With all the information you need as a parent.
        Faster and above all - much less hassle.`,
+  'general.flashtitle': `The app is free 🎉`,
+  'general.flashtext': `We decided to conduct a little experiment.
+        Is it possible to make the app free and still support our efforts
+        through Patreon? We'll see... Until April 29:th, the app is free
+        on both iOS and Android. After that we have to decide if it was a
+        good idea or not. So tip yor friends! And please support us on Patreon ❤️`,
 }

 export default en
--- a/packages/site/content/locale/sv.ts
+++ b/packages/site/content/locale/sv.ts
@ -3,6 +3,9 @@ const sv = {
  'navigation.functions': 'Funktioner',
  'navigation.screenshots': 'Screenshots',
  'navigation.whatdoesitcost': 'Vad kostar det?',
+  'navigation.patreon': 'Stöd oss på Patreon!',
+  'navigation.integrity': 'Integritetspolicy',
+  'navigation.qna': 'Frågor och svar',
  'general.title': 'Öppna skolplattformen',
  'general.description': `Oavsett om du har tre eller sju barn – det är mycket att hålla
        reda på. Frånvaroanmälan nummer 17 i februari. Vad vikarien heter
@ -10,6 +13,12 @@ const sv = {
        som äter tid och ork? Det finns inte plats för det. Så vi har
        byggt en bättre. Med all information du behöver som förälder.
        Snabbare och framförallt – mycket mindre krångel.`,
+  'general.flashtitle': `Appen är gratis 🎉`,
+  'general.flashtext': `Vi bestämde oss för att göra ett litet experiment.
+        Skulle det gå att låta appen vara gratis och istället dra in pengar
+        via Patreon? Vi får väl se... Fram till den 29 april är appen gratis
+        för både iOS och Android. Därefter måste vi bestämma oss för om det
+        var en bra idé. Så tipsa alla dina vänner! Och stöd oss gärna på Patreon ❤️`,
 }

 export default sv
--- a/packages/site/pages/index.tsx
+++ b/packages/site/pages/index.tsx
@ -4,7 +4,7 @@ import CtaThree from '../components/CtaThree'
 import CtaTwo from '../components/CtaTwo'
 import Features from '../components/Features'
 import FunFacts from '../components/FunFacts'
-import Pricing from '../components/Pricing'
+import PricingTemp from '../components/PricingTemp'
 import Testimonials from '../components/Testimonials'
 import TimelineLatest from '../components/TimelineLatest'

@ -18,7 +18,7 @@ const HomePage = () => {
      <CtaTwo />
      <CtaThree />
      <AppShots />
-      <Pricing />
+      <PricingTemp />
      <Testimonials />
    </>
  )
--- a/packages/site/styles/global.css
+++ b/packages/site/styles/global.css
@ -34,6 +34,13 @@ p {
  z-index: -1;
 }

+a.patreon {
+  background-color: rgb(255, 66, 77);
+  color: #fff;
+  border-radius: 25px;
+  padding: 8px 20px;
+}
+
@media (max-width: 1024px) {
  .header:before {
    display: none;