refactor(site): byt till tailwind för styling (#128)

packages/site/assets/css/custom.css

@@ -1,10 +0,0 @@
-/*==================================================================================
-    Custom Stylesheet (Any custom styling you want to apply should be defined here).
-====================================================================================*/
-
-.contrast {
-    background-color: rgba(255, 255, 255, 0.6);
-    margin: -25px;
-    padding: 25px;
-    border-radius: 50px;
-}

packages/site/assets/img/base.svg

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin slice" height="525">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #f7f6f9;
-        fill-rule: evenodd;
-      }
-    </style>
-  </defs>
-  <path d="M0.010,99.994 C0.010,99.994 479.879,-0.006 947.044,-0.006 C1426.709,-0.006 1894.000,99.994 1894.000,99.994 L1894.000,525.001 L0.010,525.001 L0.010,99.994 Z" class="cls-1"/>
-</svg>

packages/site/assets/img/footer-bg.svg

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" viewBox="0 0 1894 525">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #f7f6f9;
-        fill-rule: evenodd;
-      }
-    </style>
-  </defs>
-  <path d="M0.010,99.994 C0.010,99.994 479.879,-0.006 947.044,-0.006 C1426.709,-0.006 1894.000,99.994 1894.000,99.994 L1894.000,525.001 L0.010,525.001 L0.010,99.994 Z" class="cls-1"/>
-</svg>

packages/site/components/AppShots.js

@@ -1,173 +1,38 @@
-import { Col, Container, Row } from 'react-bootstrap'
-import SwiperCore, { Autoplay, Pagination } from 'swiper'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import Image from 'next/image'
-import img1 from '../assets/img/feature/app-img.png'
-import img2 from '../assets/img/feature/app-img2.png'
-import img3 from '../assets/img/feature/app-img3.png'
-import img4 from '../assets/img/feature/app-img4.png'
-import img5 from '../assets/img/feature/app-img5.png'
+import screenshotChildren from '../assets/img/screenshots/screenshot_children.png'
+import screenshotChildCalendar from '../assets/img/screenshots/screenshot_child_calendar.png'
+import screenshotChildClass from '../assets/img/screenshots/screenshot_child_class.png'
+import screenshotChildNews from '../assets/img/screenshots/screenshot_child_news.jpg'
+import screenshotChildNotifications from '../assets/img/screenshots/screenshot_child_notifications.png'
+import screenshotLogin from '../assets/img/screenshots/screenshot_login.png'
 import SectionTitle from './SectionTitle'
 
-SwiperCore.use([Pagination, Autoplay])
-
 const AppShots = () => {
-  const swiperParams = {
-    speed: 1000,
-    spaceBetween: 30,
-    autoplay: {
-      delay: 3000,
-      disableOnInteraction: false,
-    },
-    pagination: {
-      el: '#appshot-paginations',
-      type: 'bullets',
-      clickable: 'true',
-    },
-    slidesPerView: 5,
-    // Responsive breakpoints
-    breakpoints: {
-      0: {
-        slidesPerGroup: 2,
-        slidesPerView: 2,
-      },
-      767: {
-        slidesPerGroup: 3,
-        slidesPerView: 3,
-      },
-      991: {
-        slidesPerGroup: 2,
-        slidesPerView: 3,
-      },
-      1499: {
-        slidesPerGroup: 5,
-        slidesPerView: 5,
-      },
-    },
-  }
-
   return (
-    <section className="pt-120 pb-155 app-shot-one" id="screenshots">
-      <Container>
-        <Row className="justify-content-center">
-          <Col md={12} lg={8}>
-            <SectionTitle
-              title="Så här ser appen ut"
-              text="Alla fina illustrationer är gjorda av illustratören och läraren Karin Nygårds. Texterna är påhittade och nyheterna är tagna från andra källor för att skydda personuppgifter."
-            />
-          </Col>
-        </Row>
-      </Container>
-      <Container fluid>
-        <div className="app-shot-one__carousel">
-          <Swiper className="app-carousel" {...swiperParams}>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img1} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img2} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img3} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img4} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img5} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img1} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img2} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img3} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img4} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img5} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img1} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img2} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img3} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img4} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img5} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img1} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img2} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img3} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img4} alt="" />
-              </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className="single-app-image">
-                <Image width="300" height="649" src={img5} alt="" />
-              </div>
-            </SwiperSlide>
-          </Swiper>
-          <div
-            id="appshot-paginations"
-            className="swiper-pagination d-flex justify-content-center align-items-center"
-          />
-        </div>
-      </Container>
+    <section
+      className="max-w-6xl px-5 md:px-0 py-8 md:py-32 mx-auto"
+      id="screenshots"
+    >
+      <div className="max-w-2xl mx-auto">
+        <SectionTitle
+          title="Så här ser appen ut"
+          text="Alla fina illustrationer är gjorda av illustratören och läraren Karin Nygårds. Texterna är påhittade och nyheterna är tagna från andra källor för att skydda personuppgifter."
+        />
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-6 gap-x-4">
+        <img src={screenshotLogin} alt="Inloggning med BankID" />
+        <img
+          src={screenshotChildren}
+          alt="Lista med dina barn i Stockholms Stad"
+        />
+        <img src={screenshotChildNews} alt="Barnets nyheter" />
+        <img
+          src={screenshotChildNotifications}
+          alt="Lista med barnets aviseringar"
+        />
+        <img src={screenshotChildCalendar} alt="Barnets kalender" />
+        <img src={screenshotChildClass} alt="Barnets klasskompisar" />
+      </div>
     </section>
   )
 }

packages/site/components/Banner.js

@@ -1,117 +1,114 @@
-import Link from 'next/link'
-import { Col, Container, Row } from 'react-bootstrap'
-import bannerMoc from '../assets/img/banner/mockup.png'
-import shape1 from '../assets/img/banner/shaps1.png'
-import shape2 from '../assets/img/banner/shaps2.png'
-import shape3 from '../assets/img/banner/shaps3.png'
-import shape4 from '../assets/img/banner/shaps4.png'
-import shape5 from '../assets/img/banner/shaps5.png'
-import shape6 from '../assets/img/banner/shaps6.png'
-import shape7 from '../assets/img/banner/shaps7.png'
+import phone from '../assets/img/banner/phone_login.png'
+import shape1 from '../assets/img/banner/shape1.png'
+import shape2 from '../assets/img/banner/shape2.png'
+import shape3 from '../assets/img/banner/shape3.png'
+import shape4 from '../assets/img/banner/shape4.png'
+import shape5 from '../assets/img/banner/shape5.png'
+import shape6 from '../assets/img/banner/shape6.png'
+import shape7 from '../assets/img/banner/shape7.png'
 import Image from 'next/image'
 import appstore from '../assets/img/appstore.svg'
 import playstore from '../assets/img/playstore.png'
+import { H1 } from './Typography'
+import Link from './Link'
+import NextLink from 'next/link'
 
 const Banner = () => {
   return (
-    <div className="banner-area-inner">
-      <div className={`banner-inner-area banner-area1`}>
-        <Container>
-          <Row className="align-items-center">
-            <Col md={8} lg={6} xl={5}>
-              <div className="banner-text-inner">
-                <div className="banner-shape-wrap">
-                  <div className="banner-shape-inner">
-                    <img
-                      src={shape1}
-                      alt=""
-                      className="shape shape1 rotate3d"
-                    />
-                    <img
-                      src={shape2}
-                      alt=""
-                      className="shape shape2 rotate2d"
-                    />
-                    <img
-                      src={shape3}
-                      alt=""
-                      className="shape shape3 rotate-2d"
-                    />
-                    <img
-                      src={shape4}
-                      alt=""
-                      className="shape shape4 rotate3d"
-                    />
-                    <img
-                      src={shape5}
-                      alt=""
-                      className="shape shape5 rotate2d"
-                    />
-                    <img
-                      src={shape6}
-                      alt=""
-                      className="shape shape6 rotate-2d"
-                    />
-                    <img
-                      src={shape7}
-                      alt=""
-                      className="shape shape7 rotate3d"
-                    />
-                  </div>
-                </div>
-
-                <h1>Öppna Skolplattformen</h1>
-                <p>
-                  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 den här veckan. Gympakläderna. En dåligt fungerande
-                  Skolplattform 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.
-                </p>
-                <p className="app-store-buttons">
-                  <a
-                    href="https://apps.apple.com/se/app/%C3%B6ppna-skolplattformen/id1543853468"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <img
-                      alt="Ladda ner i App Store"
-                      src={appstore}
-                      className="appstore ios"
-                    />
-                  </a>
-                  <a 
-                    href="https://play.google.com/store/apps/details?id=org.skolplattformen.app"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <img
-                      alt="Ladda ner i Google Play Store"
-                      src={playstore}
-                      className="appstore android"
-                    />
-                  </a>
-                </p>
-                <p>
-                  <Link href="/integritet">
-                    <a className="btn">Integritetspolicy</a>
-                  </Link>
-
-                  <Link href="/qa">
-                    <a className="btn">Frågor och svar</a>
-                  </Link>
-                </p>
+    <div className="header">
+      <div className="relative max-w-6xl mx-auto mt-5 mb-20 md:pt-32 md:mb-52">
+        <div className="px-5 grid grid-cols-1 md:grid-cols-2 md:px-0 gap-12">
+          <div>
+            <div className="hidden select-none md:block">
+              <div>
+                <img
+                  src={shape1}
+                  alt=""
+                  className="absolute left-64 top-8 motion-safe:animate-pulse"
+                />
+                <img
+                  src={shape2}
+                  alt=""
+                  className="absolute left-9 top-20 -z-1 motion-safe:animate-pulse"
+                />
+                <img
+                  src={shape3}
+                  alt=""
+                  className="absolute -bottom-2 left-8 motion-safe:animate-pulse"
+                />
+                <img
+                  src={shape4}
+                  alt=""
+                  className="absolute top-20 right-20 motion-safe:animate-bounce-slow"
+                />
+                <img
+                  src={shape5}
+                  alt=""
+                  className="absolute top-1/2 left-1/2 motion-safe:animate-pulse"
+                />
+                <img
+                  src={shape6}
+                  alt=""
+                  className="absolute left-96 top-32 motion-safe:animate-bounce-slow"
+                />
+                <img
+                  src={shape7}
+                  alt=""
+                  className="absolute bottom-48 right-8 -z-1 motion-safe:animate-bounce-slow"
+                />
               </div>
-            </Col>
-            <Col md={4} lg={5} className="offset-lg-1 offset-xl-2">
-              <div className="banner-image">
-                <Image src={bannerMoc} width="300" height="584" alt="" />
-              </div>
-            </Col>
-          </Row>
-        </Container>
+            </div>
+            <H1>Öppna Skolplattformen</H1>
+            <p>
+              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
+              den här veckan. Gympakläderna. En dåligt fungerande Skolplattform
+              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.
+            </p>
+            <p className="flex items-center sm:flex-row md:space-x-2">
+              <Link.External
+                className="inline-block"
+                href="https://apps.apple.com/se/app/%C3%B6ppna-skolplattformen/id1543853468"
+                target="_blank"
+              >
+                <img
+                  alt="Ladda ner i App Store"
+                  src={appstore}
+                  className="w-auto h-12"
+                />
+              </Link.External>
+              <Link.External
+                className="inline-block"
+                href="https://play.google.com/store/apps/details?id=org.skolplattformen.app"
+                target="_blank"
+              >
+                <img
+                  alt="Ladda ner i Google Play Store"
+                  src={playstore}
+                  className="h-16 md:h-20"
+                />
+              </Link.External>
+            </p>
+            <p className="flex flex-col sm:items-center mt-5 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 md:px-8 md:py-4 hover:bg-indigo-800 hover:text-white">
+                  Integritetspolicy
+                </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 md:px-8 md:py-4 hover:bg-indigo-800 hover:text-white">
+                  Frågor och svar
+                </a>
+              </NextLink>
+            </p>
+          </div>
+          <div className="flex justify-center motion-safe:animate-bounce-slow">
+            <Image src={phone} width="350" height="712" alt="" />
+          </div>
+        </div>
       </div>
     </div>
   )