Piteball
/
skolplattformen-backup
mirror of https://github.com/kolplattformen/skolplattformen.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add Prettier

This commit is contained in:
Rickard Natt och Dag 2021-02-05 10:09:42 +01:00
parent 464f77dac2
commit 7069ee8c21
No known key found for this signature in database
GPG Key ID: C3958EFC7F24E8DF
33 changed files with 2536 additions and 2476 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/site/.prettierrc Normal file
View File

@ -0,0 +1,10 @@
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false
}

352
packages/site/components/AppShots.js
View File

@ -1,176 +1,176 @@
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import SwiperCore, { Pagination, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
SwiperCore.use([Pagination, Autoplay]);
import SectionTitle from "./SectionTitle";
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";
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="app">
<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">
<img src={img1} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img2} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img3} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img4} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img5} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img1} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img2} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img3} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img4} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img5} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img1} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img2} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img3} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img4} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img5} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img1} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img2} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img3} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img4} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img5} alt="" />
</div>
</SwiperSlide>
</Swiper>
<div
id="appshot-paginations"
className="swiper-pagination d-flex justify-content-center align-items-center"
/>
</div>
</Container>
</section>
);
};
export default AppShots;
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import SwiperCore, { Pagination, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
SwiperCore.use([Pagination, Autoplay])
import SectionTitle from './SectionTitle'
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'
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="app">
<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">
<img src={img1} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img2} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img3} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img4} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img5} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img1} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img2} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img3} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img4} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img5} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img1} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img2} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img3} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img4} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img5} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img1} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img2} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img3} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img4} alt="" />
</div>
</SwiperSlide>
<SwiperSlide>
<div className="single-app-image">
<img src={img5} alt="" />
</div>
</SwiperSlide>
</Swiper>
<div
id="appshot-paginations"
className="swiper-pagination d-flex justify-content-center align-items-center"
/>
</div>
</Container>
</section>
)
}
export default AppShots

191
packages/site/components/Banner.js
View File

@ -1,93 +1,98 @@
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
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 bannerMoc from "../assets/img/banner/mockup.png";
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å. Stövlarna. Frånvaruanmälan nummer 17 i februari. Vad vikarien heter den här veckan.
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>
<b>Appen är klar och kommer att dyka upp på App Store och Google Play Store vilken dag som helst.</b>
</p>
<a href="#" className="btn">
App Store
</a>
<a href="#" className="btn">
Mer info
</a>
</div>
</Col>
<Col md={4} lg={5} className=" offset-lg-1 offse-xl-2">
<div className="banner-image">
<img src={bannerMoc} alt="" />
</div>
</Col>
</Row>
</Container>
</div>
</div>
);
};
export default Banner;
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
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 bannerMoc from '../assets/img/banner/mockup.png'
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å. Stövlarna. Frånvaruanmälan nummer 17 i februari. Vad
vikarien heter den här veckan. 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>
<b>
Appen är klar och kommer att dyka upp på App Store och
Google Play Store vilken dag som helst.
</b>
</p>
<a href="#" className="btn">
App Store
</a>
<a href="#" className="btn">
Mer info
</a>
</div>
</Col>
<Col md={4} lg={5} className=" offset-lg-1 offse-xl-2">
<div className="banner-image">
<img src={bannerMoc} alt="" />
</div>
</Col>
</Row>
</Container>
</div>
</div>
)
}
export default Banner

118
packages/site/components/BannerTwo.js
View File

@ -1,57 +1,61 @@
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
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 bannerMoc from "../assets/img/banner/mockup.png";
const BannerTwo = () => {
return (
<div className="banner-area-inner">
<div className="banner-inner-area banner-area1 banner2">
<Container>
<Row className="align-items-center">
<Col md={8} lg={6} xl={5}>
<div className="banner-text-inner">
<h1>Välkommen till den öppna skolplattformen</h1>
<p>
Vi tröttnade på att vänta på att Skolplattformen skulle bli användbar så vi tog saken i egna händer och byggde en egen. Appen hämtar samma information som på den gamla Skolplattformen men visar den på ett snabbare och lättare sätt.
</p>
<a href="#" className="btn">
App Store
</a>
<a href="#" className="btn">
Se Exempel
</a>
</div>
</Col>
<div className="col-lg-5 offset-lg-1 col-md-4 offse-xl-2">
<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>
<div className="banner-image">
<img src={bannerMoc} alt="" />
</div>
</div>
</Row>
</Container>
</div>
</div>
);
};
export default BannerTwo;
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
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 bannerMoc from '../assets/img/banner/mockup.png'
const BannerTwo = () => {
return (
<div className="banner-area-inner">
<div className="banner-inner-area banner-area1 banner2">
<Container>
<Row className="align-items-center">
<Col md={8} lg={6} xl={5}>
<div className="banner-text-inner">
<h1>Välkommen till den öppna skolplattformen</h1>
<p>
Vi tröttnade på att vänta på att Skolplattformen skulle bli
användbar så vi tog saken i egna händer och byggde en egen.
Appen hämtar samma information som på den gamla
Skolplattformen men visar den på ett snabbare och lättare
sätt.
</p>
<a href="#" className="btn">
App Store
</a>
<a href="#" className="btn">
Se Exempel
</a>
</div>
</Col>
<div className="col-lg-5 offset-lg-1 col-md-4 offse-xl-2">
<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>
<div className="banner-image">
<img src={bannerMoc} alt="" />
</div>
</div>
</Row>
</Container>
</div>
</div>
)
}
export default BannerTwo

168
packages/site/components/BlogHome.js
View File

@ -1,84 +1,84 @@
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import BlogPost from "./BlogPost";
import SectionTitle from "./SectionTitle";
import img1 from "../assets/img/blog/blog1.png";
import img2 from "../assets/img/blog/blog2.png";
import img3 from "../assets/img/blog/blog3.png";
const BLOG_HOME_DATA = [
{
title: "Pre and Post Launch Mobile App Marketing Pitfalls to Avoid",
content:
"There are many variations of passages of available but majority have alteration in some by inject humour or random words.",
link: "/news-details",
date: "30",
month: "Sep",
author: "Admin",
commentCount: "2",
image: img1,
btnClass: "blog-btn"
},
{
title: "Pre and Post Launch Mobile App Marketing Pitfalls to Avoid",
content:
"There are many variations of passages of available but majority have alteration in some by inject humour or random words.",
link: "/news-details",
date: "30",
month: "Sep",
author: "Admin",
commentCount: "2",
image: img2,
btnClass: "blog-btn"
},
{
title: "Pre and Post Launch Mobile App Marketing Pitfalls to Avoid",
content:
"There are many variations of passages of available but majority have alteration in some by inject humour or random words.",
link: "/news-details",
date: "30",
month: "Sep",
author: "Admin",
commentCount: "2",
image: img3,
btnClass: "blog-btn"
}
];
const BlogHome = () => {
return (
<section className="border-top pt-115 pb-80" id="blog">
<Container>
<Row className="justify-content-center">
<Col md={12} lg={8}>
<SectionTitle
title="Our News & Articles"
text="Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit lorem ipsum anim id est laborum perspiciatis unde."
/>
</Col>
</Row>
<Row>
{BLOG_HOME_DATA.map((blogPost, index) => (
<Col md={4} lg={4} key={`blog-post-${index}`}>
<BlogPost
postLink={blogPost.link}
postAuthor={blogPost.author}
postDate={blogPost.date}
postMonth={blogPost.month}
postCommentCount={blogPost.commentCount}
postTitle={blogPost.title}
postContent={blogPost.content}
postImage={blogPost.image}
btnClass={blogPost.btnClass}
/>
</Col>
))}
</Row>
</Container>
</section>
);
};
export default BlogHome;
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import BlogPost from './BlogPost'
import SectionTitle from './SectionTitle'
import img1 from '../assets/img/blog/blog1.png'
import img2 from '../assets/img/blog/blog2.png'
import img3 from '../assets/img/blog/blog3.png'
const BLOG_HOME_DATA = [
{
title: 'Pre and Post Launch Mobile App Marketing Pitfalls to Avoid',
content:
'There are many variations of passages of available but majority have alteration in some by inject humour or random words.',
link: '/news-details',
date: '30',
month: 'Sep',
author: 'Admin',
commentCount: '2',
image: img1,
btnClass: 'blog-btn',
},
{
title: 'Pre and Post Launch Mobile App Marketing Pitfalls to Avoid',
content:
'There are many variations of passages of available but majority have alteration in some by inject humour or random words.',
link: '/news-details',
date: '30',
month: 'Sep',
author: 'Admin',
commentCount: '2',
image: img2,
btnClass: 'blog-btn',
},
{
title: 'Pre and Post Launch Mobile App Marketing Pitfalls to Avoid',
content:
'There are many variations of passages of available but majority have alteration in some by inject humour or random words.',
link: '/news-details',
date: '30',
month: 'Sep',
author: 'Admin',
commentCount: '2',
image: img3,
btnClass: 'blog-btn',
},
]
const BlogHome = () => {
return (
<section className="border-top pt-115 pb-80" id="blog">
<Container>
<Row className="justify-content-center">
<Col md={12} lg={8}>
<SectionTitle
title="Our News & Articles"
text="Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit lorem ipsum anim id est laborum perspiciatis unde."
/>
</Col>
</Row>
<Row>
{BLOG_HOME_DATA.map((blogPost, index) => (
<Col md={4} lg={4} key={`blog-post-${index}`}>
<BlogPost
postLink={blogPost.link}
postAuthor={blogPost.author}
postDate={blogPost.date}
postMonth={blogPost.month}
postCommentCount={blogPost.commentCount}
postTitle={blogPost.title}
postContent={blogPost.content}
postImage={blogPost.image}
btnClass={blogPost.btnClass}
/>
</Col>
))}
</Row>
</Container>
</section>
)
}
export default BlogHome

110
packages/site/components/BlogPost.js
View File

@ -1,55 +1,55 @@
import React from "react";
import Link from "next/link";
const BlogPost = (props) => {
return (
<div className="single-blog-inner">
<div className="post-image">
<Link href={props.postLink}>
<a>
<img src={props.postImage} alt="" />
</a>
</Link>
<div className="post-date">
<p>
<span>{props.postDate}</span>
{props.postMonth}
</p>
</div>
</div>
<div className="post-content">
<div className="post-details">
<div className="post-info d-flex">
<Link href={props.postLink}>
<a>
<span>By</span>
{props.postAuthor}
</a>
</Link>
<Link href={props.postLink}>
<a>
<span>{props.postCommentCount}</span> Comment
</a>
</Link>
</div>
<div className="post-title">
<h3>
<Link href={props.postLink}>
<a>{props.postTitle}</a>
</Link>
</h3>
</div>
<p>{props.postContent}</p>
<Link href={props.postLink}>
<a className={props.btnClass}>Read More</a>
</Link>
</div>
</div>
</div>
);
};
export default BlogPost;
import React from 'react'
import Link from 'next/link'
const BlogPost = (props) => {
return (
<div className="single-blog-inner">
<div className="post-image">
<Link href={props.postLink}>
<a>
<img src={props.postImage} alt="" />
</a>
</Link>
<div className="post-date">
<p>
<span>{props.postDate}</span>
{props.postMonth}
</p>
</div>
</div>
<div className="post-content">
<div className="post-details">
<div className="post-info d-flex">
<Link href={props.postLink}>
<a>
<span>By</span>
{props.postAuthor}
</a>
</Link>
<Link href={props.postLink}>
<a>
<span>{props.postCommentCount}</span> Comment
</a>
</Link>
</div>
<div className="post-title">
<h3>
<Link href={props.postLink}>
<a>{props.postTitle}</a>
</Link>
</h3>
</div>
<p>{props.postContent}</p>
<Link href={props.postLink}>
<a className={props.btnClass}>Read More</a>
</Link>
</div>
</div>
</div>
)
}
export default BlogPost

166
packages/site/components/Clients.js
View File

@ -1,83 +1,83 @@
import React from "react";
import SwiperCore, { Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
SwiperCore.use([Autoplay]);
import img1 from "../assets/img/partner2.png";
const Clients = () => {
const params = {
spaceBetween: 100,
loop: true,
autoplay: {
delay: 3000
},
breakpoints: {
0: {
slidesPerView: 1,
spaceBetween: 0
},
500: {
spaceBetween: 50,
slidesPerView: 3
},
768: {
spaceBetween: 50,
slidesPerView: 4
},
992: {
slidesPerView: 5
}
}
};
return (
<section className="pt-120 pb-120">
<div className="container">
<div className="row">
<div className="col">
<div className="partner-carousel-wrap">
<Swiper className="partner-carousel" {...params}>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</div>
</section>
);
};
export default Clients;
import React from 'react'
import SwiperCore, { Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
SwiperCore.use([Autoplay])
import img1 from '../assets/img/partner2.png'
const Clients = () => {
const params = {
spaceBetween: 100,
loop: true,
autoplay: {
delay: 3000,
},
breakpoints: {
0: {
slidesPerView: 1,
spaceBetween: 0,
},
500: {
spaceBetween: 50,
slidesPerView: 3,
},
768: {
spaceBetween: 50,
slidesPerView: 4,
},
992: {
slidesPerView: 5,
},
},
}
return (
<section className="pt-120 pb-120">
<div className="container">
<div className="row">
<div className="col">
<div className="partner-carousel-wrap">
<Swiper className="partner-carousel" {...params}>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-partner">
<img src={img1} alt="" />
</SwiperSlide>
</Swiper>
</div>
</div>
</div>
</div>
</section>
)
}
export default Clients

56
packages/site/components/CtaOne.js
View File

@ -1,29 +1,27 @@
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
const CtaOne = () => {
return (
<section className="border-top pt-110 pb-150">
<Container>
<Row className="justify-content-center">
<Col md={12} lg={10}>
<div className="download-app-inner text-center">
<h2 className="h1">
Ladda ner appen idag &<br />
spara flera minuter varje dag
</h2>
<h3>
Du kommer inte att ångra dig.
</h3>
<a href="#" className="btn">
App Store
</a>
</div>
</Col>
</Row>
</Container>
</section>
);
};
export default CtaOne;
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
const CtaOne = () => {
return (
<section className="border-top pt-110 pb-150">
<Container>
<Row className="justify-content-center">
<Col md={12} lg={10}>
<div className="download-app-inner text-center">
<h2 className="h1">
Ladda ner appen idag &<br />
spara flera minuter varje dag
</h2>
<h3>Du kommer inte att ångra dig.</h3>
<a href="#" className="btn">
App Store
</a>
</div>
</Col>
</Row>
</Container>
</section>
)
}
export default CtaOne

71
packages/site/components/CtaThree.js
View File

@ -1,34 +1,37 @@
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import img1 from "../assets/img/icons/solution1.svg";
import img2 from "../assets/img/girls.png";
const CtaThree = () => {
return (
<section className="pt-120 pb-120">
<Container>
<Row>
<Col lg={5} sm={5}>
<div className="user-interact-inner">
<h2>Se summering för alla dina barn på ett ställe</h2>
<p>
Vi har räknat, det tar flera minuter att få en uppfattning om vad som händer i skolan imorgon för dina barn. I vår app kan du direkt se allt som är aktuellt för alla barnen på en och samma skärm.
</p>
<a href="#" className="btn">
App Store
</a>
</div>
</Col>
<Col lg={7} sm={7}>
<div className="user-interact-image type2">
<img src={img2} alt="" />
</div>
</Col>
</Row>
</Container>
</section>
);
};
export default CtaThree;
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import img1 from '../assets/img/icons/solution1.svg'
import img2 from '../assets/img/girls.png'
const CtaThree = () => {
return (
<section className="pt-120 pb-120">
<Container>
<Row>
<Col lg={5} sm={5}>
<div className="user-interact-inner">
<h2>Se summering för alla dina barn på ett ställe</h2>
<p>
Vi har räknat, det tar flera minuter att få en uppfattning om
vad som händer i skolan imorgon för dina barn. I vår app kan du
direkt se allt som är aktuellt för alla barnen på en och samma
skärm.
</p>
<a href="#" className="btn">
App Store
</a>
</div>
</Col>
<Col lg={7} sm={7}>
<div className="user-interact-image type2">
<img src={img2} alt="" />
</div>
</Col>
</Row>
</Container>
</section>
)
}
export default CtaThree

70
packages/site/components/CtaTwo.js
View File

@ -1,34 +1,36 @@
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import img1 from "../assets/img/boys.png";
import img2 from "../assets/img/icons/goal.svg";
const CtaTwo = () => {
return (
<section className="bg-2 pt-120 pb-120">
<Container>
<Row>
<Col lg={7} sm={7}>
<div className="user-interact-image">
<img src={img1} alt="" />
</div>
</Col>
<Col lg={5} sm={5}>
<div className="user-interact-inner">
<h2>Lika säkert</h2>
<p>
Ingen information om dina barn skickas till oss, all kommunikatoin går direkt mellan din telefon och Skolplattformens servrar. Du loggar in med BankID som vanligt.
</p>
<a href="#" className="btn">
App Store
</a>
</div>
</Col>
</Row>
</Container>
</section>
);
};
export default CtaTwo;
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import img1 from '../assets/img/boys.png'
import img2 from '../assets/img/icons/goal.svg'
const CtaTwo = () => {
return (
<section className="bg-2 pt-120 pb-120">
<Container>
<Row>
<Col lg={7} sm={7}>
<div className="user-interact-image">
<img src={img1} alt="" />
</div>
</Col>
<Col lg={5} sm={5}>
<div className="user-interact-inner">
<h2>Lika säkert</h2>
<p>
Ingen information om dina barn skickas till oss, all
kommunikatoin går direkt mellan din telefon och Skolplattformens
servrar. Du loggar in med BankID som vanligt.
</p>
<a href="#" className="btn">
App Store
</a>
</div>
</Col>
</Row>
</Container>
</section>
)
}
export default CtaTwo

30
packages/site/components/FeatureCard.js
View File

@ -1,15 +1,15 @@
import React from "react";
const FeatureCard = (props) => {
return (
<div className="single-feature-inner text-center">
<div className="feature-icon">
<img src={props.image} className="svg" alt="" />
</div>
<h5>{props.title}</h5>
<p>{props.text}</p>
</div>
);
};
export default FeatureCard;
import React from 'react'
const FeatureCard = (props) => {
return (
<div className="single-feature-inner text-center">
<div className="feature-icon">
<img src={props.image} className="svg" alt="" />
</div>
<h5>{props.title}</h5>
<p>{props.text}</p>
</div>
)
}
export default FeatureCard

247
packages/site/components/Features.js
View File

@ -1,124 +1,123 @@
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import SwiperCore, { Pagination, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
SwiperCore.use([Pagination, Autoplay]);
import SectionTitle from "./SectionTitle";
import FeatureCard from "./FeatureCard";
import img1 from "../assets/img/icons/project-management.svg";
import img2 from "../assets/img/icons/solution.svg";
import img3 from "../assets/img/icons/planning.svg";
import img4 from "../assets/img/icons/goal.svg";
const FEATURES_DATA = [
{
title: "Öppen källkod",
text:
"Har du egna förslag på förbättringar? Du kan hjälpa till.",
image: img1
},
{
title: "Bygger på ny teknik",
text:
"Till skillnad från den gamla skolplattformen så bygger den öppna på senaste tekniken.",
image: img2
},
{
title: "Det här är bara början",
text:
"Vi hoppas med denna app inspirera till fler initiativ i hela den offentliga digitaliseringen.",
image: img4
},
{
title: "Kan byggas ut till fler skolsystem",
text:
"Just nu stöds bara Stockholm Stads skolplattform men med din hjälp kan fler skolplattformar integreras så att du slipper logga in i flera appar om du har barn i olika skolor.",
image: img3
},
{
title: "Skolan är allas vårt ansvar",
text:
"Vi insåg att klaga inte hjälper så mycket så vi tog tag i problemet istället. Häng med!",
image: img1
},
];
const Features = () => {
const swiperParams = {
slidesPerView: 3,
slidesPerGroup: 3,
centeredSlides: true,
spaceBetween: 30,
autoplay: {
delay: 3000
},
pagination: {
el: "#features-paginations",
type: "bullets",
clickable: true
},
loop: true,
breakpoints: {
0: {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 0
},
575: {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 0
},
768: {
slidesPerGroup: 2,
slidesPerView: 2
},
991: {
slidesPerView: 2,
slidesPerGroup: 2
},
992: {
slidesPerGroup: 3,
slidesPerView: 3
}
}
};
return (
<section className="pb-110" id="features">
<Container>
<Row className="justify-content-center">
<Col md={12} lg={8}>
<SectionTitle
title="Enkelhet och snabbhet"
text="Vi vill att det ska vara enkelt att få en överblick över vad som händer i skolan. Vi har gjort allt för att ge dig en enkel och snabb översikt över alla dina barn och det som är aktuellt just nu i skolan."
/>
</Col>
</Row>
<Row className="justify-content-center">
<Col xl={10} lg={12}>
<Swiper className="feature-carousel" {...swiperParams}>
{FEATURES_DATA.map((feature, index) => (
<SwiperSlide key={`feature-post-${index}`}>
<FeatureCard
title={feature.title}
text={feature.text}
image={feature.image}
/>
</SwiperSlide>
))}
</Swiper>
<div
id="features-paginations"
className="swiper-pagination d-flex justify-content-center align-items-center"
/>
</Col>
</Row>
</Container>
</section>
);
};
export default Features;
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import SwiperCore, { Pagination, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
SwiperCore.use([Pagination, Autoplay])
import SectionTitle from './SectionTitle'
import FeatureCard from './FeatureCard'
import img1 from '../assets/img/icons/project-management.svg'
import img2 from '../assets/img/icons/solution.svg'
import img3 from '../assets/img/icons/planning.svg'
import img4 from '../assets/img/icons/goal.svg'
const FEATURES_DATA = [
{
title: 'Öppen källkod',
text: 'Har du egna förslag på förbättringar? Du kan hjälpa till.',
image: img1,
},
{
title: 'Bygger på ny teknik',
text:
'Till skillnad från den gamla skolplattformen så bygger den öppna på senaste tekniken.',
image: img2,
},
{
title: 'Det här är bara början',
text:
'Vi hoppas med denna app inspirera till fler initiativ i hela den offentliga digitaliseringen.',
image: img4,
},
{
title: 'Kan byggas ut till fler skolsystem',
text:
'Just nu stöds bara Stockholm Stads skolplattform men med din hjälp kan fler skolplattformar integreras så att du slipper logga in i flera appar om du har barn i olika skolor.',
image: img3,
},
{
title: 'Skolan är allas vårt ansvar',
text:
'Vi insåg att klaga inte hjälper så mycket så vi tog tag i problemet istället. Häng med!',
image: img1,
},
]
const Features = () => {
const swiperParams = {
slidesPerView: 3,
slidesPerGroup: 3,
centeredSlides: true,
spaceBetween: 30,
autoplay: {
delay: 3000,
},
pagination: {
el: '#features-paginations',
type: 'bullets',
clickable: true,
},
loop: true,
breakpoints: {
0: {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 0,
},
575: {
slidesPerView: 1,
slidesPerGroup: 1,
spaceBetween: 0,
},
768: {
slidesPerGroup: 2,
slidesPerView: 2,
},
991: {
slidesPerView: 2,
slidesPerGroup: 2,
},
992: {
slidesPerGroup: 3,
slidesPerView: 3,
},
},
}
return (
<section className="pb-110" id="features">
<Container>
<Row className="justify-content-center">
<Col md={12} lg={8}>
<SectionTitle
title="Enkelhet och snabbhet"
text="Vi vill att det ska vara enkelt att få en överblick över vad som händer i skolan. Vi har gjort allt för att ge dig en enkel och snabb översikt över alla dina barn och det som är aktuellt just nu i skolan."
/>
</Col>
</Row>
<Row className="justify-content-center">
<Col xl={10} lg={12}>
<Swiper className="feature-carousel" {...swiperParams}>
{FEATURES_DATA.map((feature, index) => (
<SwiperSlide key={`feature-post-${index}`}>
<FeatureCard
title={feature.title}
text={feature.text}
image={feature.image}
/>
</SwiperSlide>
))}
</Swiper>
<div
id="features-paginations"
className="swiper-pagination d-flex justify-content-center align-items-center"
/>
</Col>
</Row>
</Container>
</section>
)
}
export default Features

339
packages/site/components/Footer.js
View File

@ -1,165 +1,174 @@
import React from "react";
import footerBg from "../assets/img/footer-bg.png";
import footerLogo from "../assets/img/logo.png";
const Footer = () => {
return (
<footer className="footer">
<div className="footerbg">
<img src={footerBg} className="svg" alt="" />
</div>
<div className="footer-top pt-120 pb-110">
<div className="container">
<div className="row">
<div className="col-lg-3 col-sm-6">
<div className="footer-widget">
<div className="footer-logo">
<a href="index.html">
<img src={footerLogo} alt="" />
</a>
</div>
<p>
Skolplattformen utvecklas av föräldrar för föräldrar. Vill du hjälpa till? Kom till vår <a href="https://github.com/kolplattformen">Github</a>, där finns all källkod och även uppgifter att ta tag i, vi behöver hjälp med allt från illustrationer, UX, Design och programmering. Vi har även en Discord där vi hjälps åt.
</p>
<div className="footer-social-area">
<ul className="social-icons social-icons-light nav">
<li>
<a href="#" target="_blank">
<i className="fa fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i className="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i className="fa fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i className="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-3 col-sm-6">
<div className="footer-widget">
<div className="widget-header">
<h5>Vilka är vi?</h5>
</div>
<div className="widget-body">
<ul className="address-list">
<li>
<span>
<i className="fa fa-twitter"></i>
</span>
<a href="https://twitter.com/@landgren">Christian Landgren</a>
</li>
<li>
<span>
<i className="fa fa-twitter"></i>
</span>
<a href="https://twitter.com/@erikhellman">Erik Hellman</a>
</li>
<li>
<span>
<i className="fa fa-twitter"></i>
</span>
<a href="https://twitter.com/@johanobrink">Johan Öbrink</a>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-3 col-sm-6">
<div className="footer-widget">
<div className="widget-header">
<h5>Extra Links</h5>
</div>
</div>
<div className="widget-body">
<div className="extra-link">
<div className="link-left">
<ul>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Our Team</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">How It Works</a>
</li>
</ul>
</div>
<div className="link-right">
<ul>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Support</a>
</li>
<li>
<a href="#">Clients</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-sm-6">
<div className="footer-widget">
<div className="widget-body">
<div className="twetter-post-inner">
<div className="footer-post-details">
@iteam1337 Digitalisering på riktigt. <br />
<a href="https://iteam.se">https://iteam.se</a>
</div>
<div className="twetter-post">
<span>
<i className="fa fa-twitter"></i>
</span>
Iteam, en sponsor
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom">
<div className="footer-text text-center">
<p>© copyright 2021 by not free beer HB</p>
</div>
</div>
</footer>
);
};
export default Footer;
import React from 'react'
import footerBg from '../assets/img/footer-bg.png'
import footerLogo from '../assets/img/logo.png'
const Footer = () => {
return (
<footer className="footer">
<div className="footerbg">
<img src={footerBg} className="svg" alt="" />
</div>
<div className="footer-top pt-120 pb-110">
<div className="container">
<div className="row">
<div className="col-lg-3 col-sm-6">
<div className="footer-widget">
<div className="footer-logo">
<a href="index.html">
<img src={footerLogo} alt="" />
</a>
</div>
<p>
Skolplattformen utvecklas av föräldrar för föräldrar. Vill du
hjälpa till? Kom till vår{' '}
<a href="https://github.com/kolplattformen">Github</a>, där
finns all källkod och även uppgifter att ta tag i, vi behöver
hjälp med allt från illustrationer, UX, Design och
programmering. Vi har även en Discord där vi hjälps åt.
</p>
<div className="footer-social-area">
<ul className="social-icons social-icons-light nav">
<li>
<a href="#" target="_blank">
<i className="fa fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i className="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i className="fa fa-google-plus"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i className="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-3 col-sm-6">
<div className="footer-widget">
<div className="widget-header">
<h5>Vilka är vi?</h5>
</div>
<div className="widget-body">
<ul className="address-list">
<li>
<span>
<i className="fa fa-twitter"></i>
</span>
<a href="https://twitter.com/@landgren">
Christian Landgren
</a>
</li>
<li>
<span>
<i className="fa fa-twitter"></i>
</span>
<a href="https://twitter.com/@erikhellman">
Erik Hellman
</a>
</li>
<li>
<span>
<i className="fa fa-twitter"></i>
</span>
<a href="https://twitter.com/@johanobrink">
Johan Öbrink
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="col-lg-3 col-sm-6">
<div className="footer-widget">
<div className="widget-header">
<h5>Extra Links</h5>
</div>
</div>
<div className="widget-body">
<div className="extra-link">
<div className="link-left">
<ul>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Our Team</a>
</li>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">How It Works</a>
</li>
</ul>
</div>
<div className="link-right">
<ul>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Support</a>
</li>
<li>
<a href="#">Clients</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="col-lg-3 col-sm-6">
<div className="footer-widget">
<div className="widget-body">
<div className="twetter-post-inner">
<div className="footer-post-details">
@iteam1337 Digitalisering på riktigt. <br />
<a href="https://iteam.se">https://iteam.se</a>
</div>
<div className="twetter-post">
<span>
<i className="fa fa-twitter"></i>
</span>
Iteam, en sponsor
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="footer-bottom">
<div className="footer-text text-center">
<p>© copyright 2021 by not free beer HB</p>
</div>
</div>
</footer>
)
}
export default Footer

124
packages/site/components/FunFacts.js
View File

@ -1,62 +1,62 @@
import React, { useState } from "react";
import { Container, Row, Col } from "react-bootstrap";
import CountUp from "react-countup";
import VisibilitySensor from "react-visibility-sensor";
const FUNFACTS_DATA = [
{
count: "1000000000",
title: "kronor kostade orginalet"
},
{
count: "7",
title: "år att utveckla"
},
{
count: "10",
title: "kronor kostar vår app :)"
},
{
count: "5",
title: "veckors utveckling"
}
];
const FunFacts = () => {
const [counter, setCounter] = useState({
startCounter: false
});
const onVisibilityChange = (isVisible) => {
if (isVisible) {
setCounter({ startCounter: true });
}
};
return (
<section className="border-top pt-120 pb-80">
<Container>
<Row>
{FUNFACTS_DATA.map((funfact, index) => (
<Col md={3} sm={6} key={`funfact-post-${index}`}>
<div className="single-counter text-center">
<span className="counter">
<VisibilitySensor
onChange={onVisibilityChange}
offset={{ top: 10 }}
delayedCall
>
<CountUp end={counter.startCounter ? funfact.count : 0} />
</VisibilitySensor>
</span>
<p>{funfact.title}</p>
</div>
</Col>
))}
</Row>
</Container>
</section>
);
};
export default FunFacts;
import React, { useState } from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import CountUp from 'react-countup'
import VisibilitySensor from 'react-visibility-sensor'
const FUNFACTS_DATA = [
{
count: '1000000000',
title: 'kronor kostade orginalet',
},
{
count: '7',
title: 'år att utveckla',
},
{
count: '10',
title: 'kronor kostar vår app :)',
},
{
count: '5',
title: 'veckors utveckling',
},
]
const FunFacts = () => {
const [counter, setCounter] = useState({
startCounter: false,
})
const onVisibilityChange = (isVisible) => {
if (isVisible) {
setCounter({ startCounter: true })
}
}
return (
<section className="border-top pt-120 pb-80">
<Container>
<Row>
{FUNFACTS_DATA.map((funfact, index) => (
<Col md={3} sm={6} key={`funfact-post-${index}`}>
<div className="single-counter text-center">
<span className="counter">
<VisibilitySensor
onChange={onVisibilityChange}
offset={{ top: 10 }}
delayedCall
>
<CountUp end={counter.startCounter ? funfact.count : 0} />
</VisibilitySensor>
</span>
<p>{funfact.title}</p>
</div>
</Col>
))}
</Row>
</Container>
</section>
)
}
export default FunFacts

192
packages/site/components/Header.js
View File

@ -1,94 +1,98 @@
import React, { useState, useEffect } from "react";
import NavLinks from "./NavLinks";
import headerLogo from "../assets/img/logo.png";
const HeaderHome = (props) => {
const [sticky, setSticky] = useState(false);
const handleScroll = () => {
if (window.scrollY > 70) {
setSticky(true);
} else if (window.scrollY < 70) {
setSticky(false);
}
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
mobileMenu();
return () => {
mobileMenu();
window.removeEventListener("scroll", handleScroll);
};
});
const mobileMenu = () => {
document
.querySelector(".side-menu__toggler")
.addEventListener("click", function (e) {
document.querySelector(".side-menu__block").classList.toggle("active");
e.preventDefault();
});
//Close Mobile Menu
let sideMenuCloser = document.querySelectorAll(
".side-menu__close-btn, .side-menu__block-overlay"
);
sideMenuCloser.forEach((sideMenuCloserBtn) => {
sideMenuCloserBtn.addEventListener("click", function (e) {
document.querySelector(".side-menu__block").classList.remove("active");
e.preventDefault();
});
});
};
return (
<header className={`header ${props.extraClassName}`}>
<div
className={`main-header ${sticky === true ? "sticky fadeInDown" : " "}`}
>
<div className="main-menu-wrap">
<div className="container">
<div className="row align-items-center">
<div className="col-xl-3 col-lg-3 col-md-4 col-6">
<div className="logo">
<a href="/">
<img src={headerLogo} alt="Skolplattformen" />
</a>
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-4 col-6 menu-button">
<div className="menu--inner-area clearfix">
<div className="menu-wraper">
<nav>
<div className="header-menu">
<div
id="menu-button"
className="menu-opened side-menu__toggler"
>
<i className="fa fa-bars"></i>
</div>
<NavLinks />
</div>
</nav>
</div>
</div>
</div>
<div className="col-lg-3 col-md-4 col-sm-5 d-md-block d-none">
<div className="urgent-call text-right">
<a href="#" className="btn" onclick="alert('Håll ut! Appen kommer snart på App Store och Google Play')">
Ladda ner
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
);
};
export default HeaderHome;
import React, { useState, useEffect } from 'react'
import NavLinks from './NavLinks'
import headerLogo from '../assets/img/logo.png'
const HeaderHome = (props) => {
const [sticky, setSticky] = useState(false)
const handleScroll = () => {
if (window.scrollY > 70) {
setSticky(true)
} else if (window.scrollY < 70) {
setSticky(false)
}
}
useEffect(() => {
window.addEventListener('scroll', handleScroll)
mobileMenu()
return () => {
mobileMenu()
window.removeEventListener('scroll', handleScroll)
}
})
const mobileMenu = () => {
document
.querySelector('.side-menu__toggler')
.addEventListener('click', function (e) {
document.querySelector('.side-menu__block').classList.toggle('active')
e.preventDefault()
})
//Close Mobile Menu
let sideMenuCloser = document.querySelectorAll(
'.side-menu__close-btn, .side-menu__block-overlay'
)
sideMenuCloser.forEach((sideMenuCloserBtn) => {
sideMenuCloserBtn.addEventListener('click', function (e) {
document.querySelector('.side-menu__block').classList.remove('active')
e.preventDefault()
})
})
}
return (
<header className={`header ${props.extraClassName}`}>
<div
className={`main-header ${sticky === true ? 'sticky fadeInDown' : ' '}`}
>
<div className="main-menu-wrap">
<div className="container">
<div className="row align-items-center">
<div className="col-xl-3 col-lg-3 col-md-4 col-6">
<div className="logo">
<a href="/">
<img src={headerLogo} alt="Skolplattformen" />
</a>
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-4 col-6 menu-button">
<div className="menu--inner-area clearfix">
<div className="menu-wraper">
<nav>
<div className="header-menu">
<div
id="menu-button"
className="menu-opened side-menu__toggler"
>
<i className="fa fa-bars"></i>
</div>
<NavLinks />
</div>
</nav>
</div>
</div>
</div>
<div className="col-lg-3 col-md-4 col-sm-5 d-md-block d-none">
<div className="urgent-call text-right">
<a
href="#"
className="btn"
onclick="alert('Håll ut! Appen kommer snart på App Store och Google Play')"
>
Ladda ner
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
)
}
export default HeaderHome

208
packages/site/components/HeaderTwo.js
View File

@ -1,102 +1,106 @@
import React, { useState, useEffect } from "react";
import NavLinks from "./NavLinks";
import headerLogo from "../assets/img/logo.png";
import headerLogoSticky from "../assets/img/logo.png";
const HeaderHome = (props) => {
const [sticky, setSticky] = useState(false);
const handleScroll = () => {
if (window.scrollY > 70) {
setSticky(true);
} else if (window.scrollY < 70) {
setSticky(false);
}
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
mobileMenu();
return () => {
mobileMenu();
window.removeEventListener("scroll", handleScroll);
};
});
const mobileMenu = () => {
document
.querySelector(".side-menu__toggler")
.addEventListener("click", function (e) {
document.querySelector(".side-menu__block").classList.toggle("active");
e.preventDefault();
});
//Close Mobile Menu
let sideMenuCloser = document.querySelectorAll(
".side-menu__close-btn, .side-menu__block-overlay"
);
sideMenuCloser.forEach((sideMenuCloserBtn) => {
sideMenuCloserBtn.addEventListener("click", function (e) {
document.querySelector(".side-menu__block").classList.remove("active");
e.preventDefault();
});
});
};
return (
<header className={`header ${props.extraClassName}`}>
<div
className={`main-header inner-header header-2 ${
sticky === true ? "sticky fadeInDown" : " "
}`}
>
<div className="main-menu-wrap">
<div className="container">
<div className="row align-items-center">
<div className="col-xl-3 col-lg-3 col-md-4 col-6">
<div className="logo">
<a href="/">
<img class="main-logo2" src={headerLogo} alt="jironis" />
<img
class="sticky-logo"
src={headerLogoSticky}
alt="jironis"
/>
</a>
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-4 col-6 menu-button">
<div className="menu--inner-area clearfix">
<div className="menu-wraper">
<nav>
<div className="header-menu">
<div
id="menu-button"
className="menu-opened side-menu__toggler"
>
<i className="fa fa-bars"></i>
</div>
<NavLinks />
</div>
</nav>
</div>
</div>
</div>
<div className="col-lg-3 col-md-4 col-sm-5 d-md-block d-none">
<div className="urgent-call text-right">
<a href="#" className="btn" onclick="alert('Håll ut! Appen kommer snart på App Store och Google Play')">
Ladda ner
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
);
};
export default HeaderHome;
import React, { useState, useEffect } from 'react'
import NavLinks from './NavLinks'
import headerLogo from '../assets/img/logo.png'
import headerLogoSticky from '../assets/img/logo.png'
const HeaderHome = (props) => {
const [sticky, setSticky] = useState(false)
const handleScroll = () => {
if (window.scrollY > 70) {
setSticky(true)
} else if (window.scrollY < 70) {
setSticky(false)
}
}
useEffect(() => {
window.addEventListener('scroll', handleScroll)
mobileMenu()
return () => {
mobileMenu()
window.removeEventListener('scroll', handleScroll)
}
})
const mobileMenu = () => {
document
.querySelector('.side-menu__toggler')
.addEventListener('click', function (e) {
document.querySelector('.side-menu__block').classList.toggle('active')
e.preventDefault()
})
//Close Mobile Menu
let sideMenuCloser = document.querySelectorAll(
'.side-menu__close-btn, .side-menu__block-overlay'
)
sideMenuCloser.forEach((sideMenuCloserBtn) => {
sideMenuCloserBtn.addEventListener('click', function (e) {
document.querySelector('.side-menu__block').classList.remove('active')
e.preventDefault()
})
})
}
return (
<header className={`header ${props.extraClassName}`}>
<div
className={`main-header inner-header header-2 ${
sticky === true ? 'sticky fadeInDown' : ' '
}`}
>
<div className="main-menu-wrap">
<div className="container">
<div className="row align-items-center">
<div className="col-xl-3 col-lg-3 col-md-4 col-6">
<div className="logo">
<a href="/">
<img class="main-logo2" src={headerLogo} alt="jironis" />
<img
class="sticky-logo"
src={headerLogoSticky}
alt="jironis"
/>
</a>
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-4 col-6 menu-button">
<div className="menu--inner-area clearfix">
<div className="menu-wraper">
<nav>
<div className="header-menu">
<div
id="menu-button"
className="menu-opened side-menu__toggler"
>
<i className="fa fa-bars"></i>
</div>
<NavLinks />
</div>
</nav>
</div>
</div>
</div>
<div className="col-lg-3 col-md-4 col-sm-5 d-md-block d-none">
<div className="urgent-call text-right">
<a
href="#"
className="btn"
onclick="alert('Håll ut! Appen kommer snart på App Store och Google Play')"
>
Ladda ner
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
)
}
export default HeaderHome

108
packages/site/components/Layout.js
View File

@ -1,54 +1,54 @@
import React, { useState, useEffect } from "react";
import Head from "next/head";
import { Link as ScrollLink, animateScroll as scroll } from "react-scroll";
import favImg from "../assets/img/favicon.png";
const Layout = (props) => {
const [scrollTop, setScrollTop] = useState(false);
const handleScrollTop = () => {
if (window.scrollY > 70) {
setScrollTop(true);
} else if (window.scrollY < 70) {
setScrollTop(false);
}
};
useEffect(() => {
window.addEventListener("scroll", handleScrollTop);
return () => {
window.removeEventListener("scroll", handleScrollTop);
};
});
return (
<div>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{props.pageTitle}</title>
<link rel="shortcut icon" type="image/png" href={favImg} />
<link
href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700"
rel="stylesheet"
/>
</Head>
<div className="page-wrapper" id="wrapper">
{props.children}
</div>
{scrollTop === true ? (
<div class="back-to-top show" style={{ cursor: "pointer" }}>
<ScrollLink
to="wrapper"
smooth={true}
duration={500}
className="scroll-to-top"
>
<i class="fa fa-chevron-up"></i>
</ScrollLink>
</div>
) : null}
</div>
);
};
export default Layout;
import React, { useState, useEffect } from 'react'
import Head from 'next/head'
import { Link as ScrollLink, animateScroll as scroll } from 'react-scroll'
import favImg from '../assets/img/favicon.png'
const Layout = (props) => {
const [scrollTop, setScrollTop] = useState(false)
const handleScrollTop = () => {
if (window.scrollY > 70) {
setScrollTop(true)
} else if (window.scrollY < 70) {
setScrollTop(false)
}
}
useEffect(() => {
window.addEventListener('scroll', handleScrollTop)
return () => {
window.removeEventListener('scroll', handleScrollTop)
}
})
return (
<div>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{props.pageTitle}</title>
<link rel="shortcut icon" type="image/png" href={favImg} />
<link
href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700"
rel="stylesheet"
/>
</Head>
<div className="page-wrapper" id="wrapper">
{props.children}
</div>
{scrollTop === true ? (
<div class="back-to-top show" style={{ cursor: 'pointer' }}>
<ScrollLink
to="wrapper"
smooth={true}
duration={500}
className="scroll-to-top"
>
<i class="fa fa-chevron-up"></i>
</ScrollLink>
</div>
) : null}
</div>
)
}
export default Layout

104
packages/site/components/MobileMenu.js
View File

@ -1,50 +1,54 @@
import React from "react";
import NavLinks from "./NavLinks";
const MobileMenu = () => {
return (
<div className="side-menu__block">
<div className="side-menu__block-overlay custom-cursor__overlay">
<div className="cursor"></div>
<div className="cursor-follower"></div>
</div>
<div className="side-menu__block-inner ">
<div className="side-menu__top justify-content-end">
<a href="#" className="side-menu__toggler side-menu__close-btn">
<i className="fa fa-times"></i>
</a>
</div>
<nav className="mobile-nav__container">
<NavLinks />
</nav>
<div className="side-menu__sep"></div>
<div className="side-menu__content">
<p>
Skolplattformen.org är en öppen programvara som byggs av frustrerade föräldrar. Hjälp till du också. Kontakta oss nedan:
</p>
<p>
<a href="mailto:info@skolplattformen.org">info@skolplattformen.org</a> <br />
<a href="tel:+46707755831">+46 70 775 58 31</a>
</p>
<div className="side-menu__social">
<a href="#">
<i className="fa fa-facebook-square"></i>
</a>
<a href="#">
<i className="fa fa-twitter"></i>
</a>
<a href="#">
<i className="fa fa-instagram"></i>
</a>
<a href="#">
<i className="fa fa-pinterest-p"></i>
</a>
</div>
</div>
</div>
</div>
);
};
export default MobileMenu;
import React from 'react'
import NavLinks from './NavLinks'
const MobileMenu = () => {
return (
<div className="side-menu__block">
<div className="side-menu__block-overlay custom-cursor__overlay">
<div className="cursor"></div>
<div className="cursor-follower"></div>
</div>
<div className="side-menu__block-inner ">
<div className="side-menu__top justify-content-end">
<a href="#" className="side-menu__toggler side-menu__close-btn">
<i className="fa fa-times"></i>
</a>
</div>
<nav className="mobile-nav__container">
<NavLinks />
</nav>
<div className="side-menu__sep"></div>
<div className="side-menu__content">
<p>
Skolplattformen.org är en öppen programvara som byggs av frustrerade
föräldrar. Hjälp till du också. Kontakta oss nedan:
</p>
<p>
<a href="mailto:info@skolplattformen.org">
info@skolplattformen.org
</a>{' '}
<br />
<a href="tel:+46707755831">+46 70 775 58 31</a>
</p>
<div className="side-menu__social">
<a href="#">
<i className="fa fa-facebook-square"></i>
</a>
<a href="#">
<i className="fa fa-twitter"></i>
</a>
<a href="#">
<i className="fa fa-instagram"></i>
</a>
<a href="#">
<i className="fa fa-pinterest-p"></i>
</a>
</div>
</div>
</div>
</div>
)
}
export default MobileMenu

150
packages/site/components/NavLinks.js
View File

@ -1,75 +1,75 @@
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { Link as ScrollLink, animateScroll as scroll } from "react-scroll";
const NavLinks = () => {
// const [dropdownStatus, setDropdownStatus] = useState(false);
const handleDropdownStatus = (e) => {
// setDropdownStatus(!dropdownStatus);
let clickedItem = e.currentTarget.parentNode;
clickedItem.querySelector(".dropdown-list").classList.toggle("show");
};
return (
<ul className="main-nav__navigation-box">
<li className="dropdown">
<Link href="/">
<>
<a>Hem</a>
<i className="fa fa-angle-down" onClick={handleDropdownStatus}></i>
</>
</Link>
<ul className="dropdown-list">
<li>
<Link href="/">
<a>Home One</a>
</Link>
</li>
<li>
<Link href="/index-2">
<a>Home Two</a>
</Link>
</li>
</ul>
</li>
<li>
<ScrollLink
activeClass="current"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Funktioner
</ScrollLink>
</li>
<li>
<ScrollLink
activeClass="current"
to="app"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Screenshots
</ScrollLink>
</li>
<li>
<ScrollLink
activeClass="current"
to="pricing"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Vad kostar det?
</ScrollLink>
</li>
</ul>
);
};
export default NavLinks;
import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import { Link as ScrollLink, animateScroll as scroll } from 'react-scroll'
const NavLinks = () => {
// const [dropdownStatus, setDropdownStatus] = useState(false);
const handleDropdownStatus = (e) => {
// setDropdownStatus(!dropdownStatus);
let clickedItem = e.currentTarget.parentNode
clickedItem.querySelector('.dropdown-list').classList.toggle('show')
}
return (
<ul className="main-nav__navigation-box">
<li className="dropdown">
<Link href="/">
<>
<a>Hem</a>
<i className="fa fa-angle-down" onClick={handleDropdownStatus}></i>
</>
</Link>
<ul className="dropdown-list">
<li>
<Link href="/">
<a>Home One</a>
</Link>
</li>
<li>
<Link href="/index-2">
<a>Home Two</a>
</Link>
</li>
</ul>
</li>
<li>
<ScrollLink
activeClass="current"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Funktioner
</ScrollLink>
</li>
<li>
<ScrollLink
activeClass="current"
to="app"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Screenshots
</ScrollLink>
</li>
<li>
<ScrollLink
activeClass="current"
to="pricing"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Vad kostar det?
</ScrollLink>
</li>
</ul>
)
}
export default NavLinks

54
packages/site/components/PageBanner.js
View File

@ -1,27 +1,27 @@
import React from "react";
const PageBanner = (props) => {
return (
<div className="page-title-wrap">
<div className="container">
<div className="row">
<div className="col">
<div className="page-title-content text-center">
<ul className="mb-0 list-unstyle nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">{props.pageName}</a>
</li>
</ul>
<h1 className="h2">{props.pageName}</h1>
</div>
</div>
</div>
</div>
</div>
);
};
export default PageBanner;
import React from 'react'
const PageBanner = (props) => {
return (
<div className="page-title-wrap">
<div className="container">
<div className="row">
<div className="col">
<div className="page-title-content text-center">
<ul className="mb-0 list-unstyle nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">{props.pageName}</a>
</li>
</ul>
<h1 className="h2">{props.pageName}</h1>
</div>
</div>
</div>
</div>
</div>
)
}
export default PageBanner

64
packages/site/components/Pagination.js
View File

@ -1,32 +1,32 @@
import React from "react";
const Pagination = () => {
return (
<ul className="theme-pagination pt-sans pagination align-items-center">
<li className="">
<a href="#">
<i className="fa fa-angle-left"></i>
</a>
</li>
<li className="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">
<i className="fa fa-angle-right"></i>
</a>
</li>
</ul>
);
};
export default Pagination;
import React from 'react'
const Pagination = () => {
return (
<ul className="theme-pagination pt-sans pagination align-items-center">
<li className="">
<a href="#">
<i className="fa fa-angle-left"></i>
</a>
</li>
<li className="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">
<i className="fa fa-angle-right"></i>
</a>
</li>
</ul>
)
}
export default Pagination

607
packages/site/components/Pricing.js
View File

@ -1,302 +1,305 @@
import React, { useState } from "react";
const Pricing = () => {
const [pricing, setPricing] = useState(false);
const handleClick = (e) => {
e.preventDefault();
setPricing(!pricing);
};
return (
<section className="pb-90" id="pricing">
<div className="container">
<div className="row justify-content-center">
<div className="col-md-12 col-lg-8">
<div className="section-title text-center">
<h2>Vad kostar det och varför är det inte gratis?</h2>
<p>
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. Därför kostar det 10kr att ladda ner appen. Det är en engångskostnad och hjälper oss att göra appen bättre.
</p>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="price-content">
{pricing === false ? (
<div id="month">
<div className="row">
<div className="col-md-6 col-lg-4">
<div className="single-price-plan text-center">
<div className="single-price-top">
<h4>Engångskostnad</h4>
<span>10kr</span>
</div>
<div className="single-price-body">
<div className="price-list">
<ul>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
BankID inloggning
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
Se nyheter
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
Se notifieringar
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
Kontaktuppgifter till andra föräldrar
</li>
<li>
<span>
<i
className="fa fa-times"
aria-hidden="true"
></i>
</span>
Gratis support
</li>
<li>
<span>
<i
className="fa fa-times"
aria-hidden="true"
></i>
</span>
Pushnotifieringar
</li>
</ul>
</div>
<a href="#" className="btn">
App Store
</a>
</div>
</div>
</div>
</div>
</div>
) : null}
{pricing === true ? (
<div id="year">
<div className="row">
<div className="col-md-6 col-lg-4">
<div className="single-price-plan text-center">
<div className="single-price-top">
<h4>Standard</h4>
<span>$200</span>
</div>
<div className="single-price-body">
<div className="price-list">
<ul>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 pages
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
500 gb storage
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 sdd Database
</li>
<li>
<span>
<i
className="fa fa-times"
aria-hidden="true"
></i>
</span>
Free coustom domain
</li>
<li>
<span>
<i
className="fa fa-times"
aria-hidden="true"
></i>
</span>
24/7 free support
</li>
</ul>
</div>
<a href="#" className="btn">
Get Started
</a>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4">
<div className="single-price-plan active text-center">
<div className="single-price-top">
<h4>Business</h4>
<span>$300</span>
</div>
<div className="single-price-body">
<div className="price-list">
<ul>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 pages
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
500 gb storage
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 sdd Database
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
Free coustom domain
</li>
<li>
<span>
<i
className="fa fa-times"
aria-hidden="true"
></i>
</span>
24/7 free support
</li>
</ul>
</div>
<a href="#" className="btn">
Get Started
</a>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4">
<div className="single-price-plan text-center">
<div className="single-price-top">
<h4>Professional</h4>
<span>$400</span>
</div>
<div className="single-price-body">
<div className="price-list">
<ul>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 pages
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
500 gb storage
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 sdd Database
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
Free coustom domain
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
24/7 free support
</li>
</ul>
</div>
<a href="#" className="btn">
Get Started
</a>
</div>
</div>
</div>
</div>
</div>
) : null}
</div>
</div>
</div>
</div>
</section>
);
};
export default Pricing;
import React, { useState } from 'react'
const Pricing = () => {
const [pricing, setPricing] = useState(false)
const handleClick = (e) => {
e.preventDefault()
setPricing(!pricing)
}
return (
<section className="pb-90" id="pricing">
<div className="container">
<div className="row justify-content-center">
<div className="col-md-12 col-lg-8">
<div className="section-title text-center">
<h2>Vad kostar det och varför är det inte gratis?</h2>
<p>
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.
Därför kostar det 10kr att ladda ner appen. Det är en
engångskostnad och hjälper oss att göra appen bättre.
</p>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="price-content">
{pricing === false ? (
<div id="month">
<div className="row">
<div className="col-md-6 col-lg-4">
<div className="single-price-plan text-center">
<div className="single-price-top">
<h4>Engångskostnad</h4>
<span>10kr</span>
</div>
<div className="single-price-body">
<div className="price-list">
<ul>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
BankID inloggning
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
Se nyheter
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
Se notifieringar
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
Kontaktuppgifter till andra föräldrar
</li>
<li>
<span>
<i
className="fa fa-times"
aria-hidden="true"
></i>
</span>
Gratis support
</li>
<li>
<span>
<i
className="fa fa-times"
aria-hidden="true"
></i>
</span>
Pushnotifieringar
</li>
</ul>
</div>
<a href="#" className="btn">
App Store
</a>
</div>
</div>
</div>
</div>
</div>
) : null}
{pricing === true ? (
<div id="year">
<div className="row">
<div className="col-md-6 col-lg-4">
<div className="single-price-plan text-center">
<div className="single-price-top">
<h4>Standard</h4>
<span>$200</span>
</div>
<div className="single-price-body">
<div className="price-list">
<ul>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 pages
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
500 gb storage
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 sdd Database
</li>
<li>
<span>
<i
className="fa fa-times"
aria-hidden="true"
></i>
</span>
Free coustom domain
</li>
<li>
<span>
<i
className="fa fa-times"
aria-hidden="true"
></i>
</span>
24/7 free support
</li>
</ul>
</div>
<a href="#" className="btn">
Get Started
</a>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4">
<div className="single-price-plan active text-center">
<div className="single-price-top">
<h4>Business</h4>
<span>$300</span>
</div>
<div className="single-price-body">
<div className="price-list">
<ul>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 pages
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
500 gb storage
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 sdd Database
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
Free coustom domain
</li>
<li>
<span>
<i
className="fa fa-times"
aria-hidden="true"
></i>
</span>
24/7 free support
</li>
</ul>
</div>
<a href="#" className="btn">
Get Started
</a>
</div>
</div>
</div>
<div className="col-md-6 col-lg-4">
<div className="single-price-plan text-center">
<div className="single-price-top">
<h4>Professional</h4>
<span>$400</span>
</div>
<div className="single-price-body">
<div className="price-list">
<ul>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 pages
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
500 gb storage
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
10 sdd Database
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
Free coustom domain
</li>
<li>
<span>
<i
className="fa fa-check"
aria-hidden="true"
></i>
</span>
24/7 free support
</li>
</ul>
</div>
<a href="#" className="btn">
Get Started
</a>
</div>
</div>
</div>
</div>
</div>
) : null}
</div>
</div>
</div>
</div>
</section>
)
}
export default Pricing

24
packages/site/components/SectionTitle.js
View File

@ -1,12 +1,12 @@
import React from "react";
const SectionTitle = (props) => {
return (
<div className="section-title text-center">
<h2>{props.title}</h2>
<p>{props.text}</p>
</div>
);
};
export default SectionTitle;
import React from 'react'
const SectionTitle = (props) => {
return (
<div className="section-title text-center">
<h2>{props.title}</h2>
<p>{props.text}</p>
</div>
)
}
export default SectionTitle

232
packages/site/components/Sidebar.js
View File

@ -1,116 +1,116 @@
import React from "react";
import postImg1 from "../assets/img/blog/latest-blog1.png";
import postImg2 from "../assets/img/blog/latest-blog2.png";
import postImg3 from "../assets/img/blog/latest-blog3.png";
const Sidebar = () => {
return (
<aside>
<div className="single-sidebar-widget mb-30">
<div className="search-bar-widget">
<div className="search-form parsley-validate">
<form action="#" method="POST">
<input type="text" placeholder="Search here..." required />
</form>
</div>
</div>
</div>
<div className="single-sidebar-widget mb-30">
<div className="sidebar-title">
<h5>Latest Posts</h5>
</div>
<div className="sidebar-body latest-post">
<ul>
<li>
<div className="latest-post-wrap media">
<div className="latest-post-img">
<img src={postImg1} alt="" />
</div>
<div className="latest-post-body media-body">
<p>
<a href="#">Basic rules of running web agency</a>
</p>
</div>
</div>
</li>
<li>
<div className="latest-post-wrap media">
<div className="latest-post-img">
<img src={postImg2} alt="" />
</div>
<div className="latest-post-body media-body">
<p>
<a href="#">Introducing latest app features</a>
</p>
</div>
</div>
</li>
<li>
<div className="latest-post-wrap media">
<div className="latest-post-img">
<img src={postImg3} alt="" />
</div>
<div className="latest-post-body media-body">
<p>
<a href="#">Become the best sale marketer</a>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div className="single-sidebar-widget mb-30">
<div className="sidebar-title">
<h5>Categories</h5>
</div>
<div className="sidebar-body categories-inner">
<ul>
<li>
<a href="#">Business</a>
</li>
<li>
<a href="#">Introductions</a>
</li>
<li>
<a href="#">One Page Template</a>
</li>
<li>
<a href="#">Parallax Effects</a>
</li>
<li>
<a href="#">New Technologies</a>
</li>
<li>
<a href="#">Video Backgrounds</a>
</li>
</ul>
</div>
</div>
<div className="single-sidebar-widget mb-30">
<div className="sidebar-title">
<h5>Tags</h5>
</div>
<div className="sidebar-body tag-inner">
<a href="#">Business,</a>
<a href="#">Agency,</a>
<a href="#">Technology,</a>
<a href="#">Parallax,</a>
<a href="#">nnovative,</a>
<a href="#">Professional,</a>
<a href="#">Experience,</a>
</div>
</div>
</aside>
);
};
export default Sidebar;
import React from 'react'
import postImg1 from '../assets/img/blog/latest-blog1.png'
import postImg2 from '../assets/img/blog/latest-blog2.png'
import postImg3 from '../assets/img/blog/latest-blog3.png'
const Sidebar = () => {
return (
<aside>
<div className="single-sidebar-widget mb-30">
<div className="search-bar-widget">
<div className="search-form parsley-validate">
<form action="#" method="POST">
<input type="text" placeholder="Search here..." required />
</form>
</div>
</div>
</div>
<div className="single-sidebar-widget mb-30">
<div className="sidebar-title">
<h5>Latest Posts</h5>
</div>
<div className="sidebar-body latest-post">
<ul>
<li>
<div className="latest-post-wrap media">
<div className="latest-post-img">
<img src={postImg1} alt="" />
</div>
<div className="latest-post-body media-body">
<p>
<a href="#">Basic rules of running web agency</a>
</p>
</div>
</div>
</li>
<li>
<div className="latest-post-wrap media">
<div className="latest-post-img">
<img src={postImg2} alt="" />
</div>
<div className="latest-post-body media-body">
<p>
<a href="#">Introducing latest app features</a>
</p>
</div>
</div>
</li>
<li>
<div className="latest-post-wrap media">
<div className="latest-post-img">
<img src={postImg3} alt="" />
</div>
<div className="latest-post-body media-body">
<p>
<a href="#">Become the best sale marketer</a>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div className="single-sidebar-widget mb-30">
<div className="sidebar-title">
<h5>Categories</h5>
</div>
<div className="sidebar-body categories-inner">
<ul>
<li>
<a href="#">Business</a>
</li>
<li>
<a href="#">Introductions</a>
</li>
<li>
<a href="#">One Page Template</a>
</li>
<li>
<a href="#">Parallax Effects</a>
</li>
<li>
<a href="#">New Technologies</a>
</li>
<li>
<a href="#">Video Backgrounds</a>
</li>
</ul>
</div>
</div>
<div className="single-sidebar-widget mb-30">
<div className="sidebar-title">
<h5>Tags</h5>
</div>
<div className="sidebar-body tag-inner">
<a href="#">Business,</a>
<a href="#">Agency,</a>
<a href="#">Technology,</a>
<a href="#">Parallax,</a>
<a href="#">nnovative,</a>
<a href="#">Professional,</a>
<a href="#">Experience,</a>
</div>
</div>
</aside>
)
}
export default Sidebar

262
packages/site/components/Testimonials.js
View File

@ -1,125 +1,137 @@
import React, { useState } from "react";
import SwiperCore, { Autoplay, Thumbs, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import img1 from "../assets/img/wass.png";
import img2 from "../assets/img/karin.jpg";
import img3 from "../assets/img/per.jpg";
import img4 from "../assets/img/niels.jpg";
SwiperCore.use([Autoplay, Thumbs, Navigation]);
const Testimonials = () => {
const [thumbsSwiper, setThumbsSwiper] = useState(null);
const testimmonialsParams = {
slidesPerView: 1,
spaceBetween: 0,
navigation: {
nextEl: "#testi-swiper-button-next",
prevEl: "#testi-swiper-button-prev"
},
autoplay: {
delay: 3000
}
};
const thumbnailsParam = {
slidesPerView: 3,
spaceBetween: 20,
autoplay: {
delay: 3000
},
breakpoints: {
0: {
slidesPerView: 2
},
500: {
slidesPerView: 2
},
768: {
slidesPerView: 2
},
992: {
slidesPerView: 3
}
}
};
return (
<section className="pt-120 pb-110 bg-2">
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="testimonial-author-arousel text-center">
<div className="testimonial-author-inner">
<Swiper
className="author-carousel"
onSwiper={setThumbsSwiper}
{...thumbnailsParam}
>
<SwiperSlide className="single-author-imge">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-author-imge">
<img src={img2} alt="" />
</SwiperSlide>
<SwiperSlide className="single-author-imge">
<img src={img3} alt="" />
</SwiperSlide>
<SwiperSlide className="single-author-imge">
<img src={img4} alt="" />
</SwiperSlide>
</Swiper>
</div>
</div>
<div className="testimonial-author-comment text-center">
<Swiper
className="author-comment-carousel"
thumbs={{ swiper: thumbsSwiper }}
{...testimmonialsParams}
>
<SwiperSlide className="single-author-comment">
<h4>
"Det känns bra att mänskligheten nu befrias från upphandlingshaveriets bojor. Framtiden är här! Och den kostade nästan ingenting. Öppen data är kärlek."
</h4>
<p>Fredrik Wass, förälder</p>
</SwiperSlide>
<SwiperSlide className="single-author-comment">
<h4>
"Oftast när jag behöver kolla upp något är jag stressad och på språng. Om det tar tid att logga in och leta så struntar jag till sist i det."
</h4>
<p>Karin Nygårds, lärare och förälder</p>
</SwiperSlide>
<SwiperSlide className="single-author-comment">
<h4>
Christian Landgren la upp en bild på sin ”Skrota Skolplattformen”-keps, det fick mig att dra igång en Facebook-grupp som utvecklades till ett slags hackathon där Christian och några gjorde en app av Skolplattformen, så som den borde vara. Så nu behövs inte den där kepsen längre, här är appen.
</h4>
<p>Per Strömbeck, förälder</p>
</SwiperSlide>
<SwiperSlide className="single-author-comment">
<h4>
Digitala lösningar inom skolan är som på många andra områden inom det offentliga varken användarvänliga eller effektiva. Med öppen källkod och öppen data kan vi få snabbare och billigare få till bättre lösningar. Och dessutom öka insynen i hur systemen som formar vår vardag fungerar. Öppna Skolplattformen är ett bra exempel på detta!
</h4>
<p>Niels PaarupPetersen, Riksdagsledamot C</p>
</SwiperSlide>
</Swiper>
<div className="testimonial-author-comment-nav">
<button id="testi-swiper-button-prev">
<i className="fa fa-angle-left"></i>
</button>
<button id="testi-swiper-button-next">
<i className="fa fa-angle-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default Testimonials;
import React, { useState } from 'react'
import SwiperCore, { Autoplay, Thumbs, Navigation } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import img1 from '../assets/img/wass.png'
import img2 from '../assets/img/karin.jpg'
import img3 from '../assets/img/per.jpg'
import img4 from '../assets/img/niels.jpg'
SwiperCore.use([Autoplay, Thumbs, Navigation])
const Testimonials = () => {
const [thumbsSwiper, setThumbsSwiper] = useState(null)
const testimmonialsParams = {
slidesPerView: 1,
spaceBetween: 0,
navigation: {
nextEl: '#testi-swiper-button-next',
prevEl: '#testi-swiper-button-prev',
},
autoplay: {
delay: 3000,
},
}
const thumbnailsParam = {
slidesPerView: 3,
spaceBetween: 20,
autoplay: {
delay: 3000,
},
breakpoints: {
0: {
slidesPerView: 2,
},
500: {
slidesPerView: 2,
},
768: {
slidesPerView: 2,
},
992: {
slidesPerView: 3,
},
},
}
return (
<section className="pt-120 pb-110 bg-2">
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="testimonial-author-arousel text-center">
<div className="testimonial-author-inner">
<Swiper
className="author-carousel"
onSwiper={setThumbsSwiper}
{...thumbnailsParam}
>
<SwiperSlide className="single-author-imge">
<img src={img1} alt="" />
</SwiperSlide>
<SwiperSlide className="single-author-imge">
<img src={img2} alt="" />
</SwiperSlide>
<SwiperSlide className="single-author-imge">
<img src={img3} alt="" />
</SwiperSlide>
<SwiperSlide className="single-author-imge">
<img src={img4} alt="" />
</SwiperSlide>
</Swiper>
</div>
</div>
<div className="testimonial-author-comment text-center">
<Swiper
className="author-comment-carousel"
thumbs={{ swiper: thumbsSwiper }}
{...testimmonialsParams}
>
<SwiperSlide className="single-author-comment">
<h4>
"Det känns bra att mänskligheten nu befrias från
upphandlingshaveriets bojor. Framtiden är här! Och den
kostade nästan ingenting. Öppen data är kärlek."
</h4>
<p>Fredrik Wass, förälder</p>
</SwiperSlide>
<SwiperSlide className="single-author-comment">
<h4>
"Oftast när jag behöver kolla upp något är jag stressad och
på språng. Om det tar tid att logga in och leta så struntar
jag till sist i det."
</h4>
<p>Karin Nygårds, lärare och förälder</p>
</SwiperSlide>
<SwiperSlide className="single-author-comment">
<h4>
Christian Landgren la upp en bild på sin ”Skrota
Skolplattformen”-keps, det fick mig att dra igång en
Facebook-grupp som utvecklades till ett slags hackathon där
Christian och några gjorde en app av Skolplattformen, så som
den borde vara. Så nu behövs inte den där kepsen längre, här
är appen.
</h4>
<p>Per Strömbeck, förälder</p>
</SwiperSlide>
<SwiperSlide className="single-author-comment">
<h4>
Digitala lösningar inom skolan är som på många andra områden
inom det offentliga varken användarvänliga eller effektiva.
Med öppen källkod och öppen data kan vi få snabbare och
billigare få till bättre lösningar. Och dessutom öka insynen
i hur systemen som formar vår vardag fungerar. Öppna
Skolplattformen är ett bra exempel på detta!
</h4>
<p>Niels PaarupPetersen, Riksdagsledamot C</p>
</SwiperSlide>
</Swiper>
<div className="testimonial-author-comment-nav">
<button id="testi-swiper-button-prev">
<i className="fa fa-angle-left"></i>
</button>
<button id="testi-swiper-button-next">
<i className="fa fa-angle-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
export default Testimonials

84
packages/site/components/Video.js
View File

@ -1,42 +1,42 @@
import React, { useState } from "react";
import ModalVideo from "react-modal-video";
const Video = () => {
const [open, setOpen] = useState({
isOpen: false
});
const openModal = (e) => {
e.preventDefault();
setOpen({
isOpen: true
});
};
return (
<section className="app-video">
<ModalVideo
channel="youtube"
isOpen={open.isOpen}
videoId="Kl5B6MBAntI"
onClose={() => setOpen({ isOpen: false })}
/>
<div className="container">
<div className="row">
<div className="col-12">
<div className="theme-video-wrap">
<span
onClick={openModal}
style={{ cursor: "pointer" }}
className="video-btn"
data-popup="video"
>
<i className="fa fa-play"></i>
</span>
</div>
</div>
</div>
</div>
</section>
);
};
export default Video;
import React, { useState } from 'react'
import ModalVideo from 'react-modal-video'
const Video = () => {
const [open, setOpen] = useState({
isOpen: false,
})
const openModal = (e) => {
e.preventDefault()
setOpen({
isOpen: true,
})
}
return (
<section className="app-video">
<ModalVideo
channel="youtube"
isOpen={open.isOpen}
videoId="Kl5B6MBAntI"
onClose={() => setOpen({ isOpen: false })}
/>
<div className="container">
<div className="row">
<div className="col-12">
<div className="theme-video-wrap">
<span
onClick={openModal}
style={{ cursor: 'pointer' }}
className="video-btn"
data-popup="video"
>
<i className="fa fa-play"></i>
</span>
</div>
</div>
</div>
</div>
</section>
)
}
export default Video

4
packages/site/next.config.js
View File

@ -1,2 +1,2 @@
const withImages = require('next-images')
module.exports = withImages();
const withImages = require('next-images')
module.exports = withImages()

3
packages/site/package.json
View File

@ -21,5 +21,8 @@
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"devDependencies": {
"prettier": "2.2.1"
}
}

24
packages/site/pages/_app.js
View File

@ -1,12 +1,12 @@
import "bootstrap/dist/css/bootstrap.min.css";
import "react-modal-video/css/modal-video.min.css";
import "../assets/css/font-awesome.min.css";
import "swiper/swiper-bundle.min.css";
import "../assets/css/style.css";
import "../assets/css/responsive.css";
import "../assets/css/custom.css";
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
import 'bootstrap/dist/css/bootstrap.min.css'
import 'react-modal-video/css/modal-video.min.css'
import '../assets/css/font-awesome.min.css'
import 'swiper/swiper-bundle.min.css'
import '../assets/css/style.css'
import '../assets/css/responsive.css'
import '../assets/css/custom.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

82
packages/site/pages/index-2.js
View File

@ -1,41 +1,41 @@
import React from "react";
import Layout from "../components/Layout";
import HeaderTwo from "../components/HeaderTwo";
import MobileMenu from "../components/MobileMenu";
import BannerTwo from "../components/BannerTwo";
import FunFacts from "../components/FunFacts";
import CtaTwo from "../components/CtaTwo";
import CtaThree from "../components/CtaThree";
import Video from "../components/Video";
import Pricing from "../components/Pricing";
import AppShots from "../components/AppShots";
import Features from "../components/Features";
import Testimonials from "../components/Testimonials";
import BlogHome from "../components/BlogHome";
import Clients from "../components/Clients";
import CtaOne from "../components/CtaOne";
import Footer from "../components/Footer";
const HomePageTwo = () => {
return (
<Layout pageTitle="Jironis">
<HeaderTwo />
<MobileMenu />
<BannerTwo />
<Features />
<FunFacts />
<CtaTwo />
<CtaThree />
<Video />
<AppShots />
<Pricing />
<Testimonials />
<Clients />
<BlogHome />
<CtaOne />
<Footer />
</Layout>
);
};
export default HomePageTwo;
import React from 'react'
import Layout from '../components/Layout'
import HeaderTwo from '../components/HeaderTwo'
import MobileMenu from '../components/MobileMenu'
import BannerTwo from '../components/BannerTwo'
import FunFacts from '../components/FunFacts'
import CtaTwo from '../components/CtaTwo'
import CtaThree from '../components/CtaThree'
import Video from '../components/Video'
import Pricing from '../components/Pricing'
import AppShots from '../components/AppShots'
import Features from '../components/Features'
import Testimonials from '../components/Testimonials'
import BlogHome from '../components/BlogHome'
import Clients from '../components/Clients'
import CtaOne from '../components/CtaOne'
import Footer from '../components/Footer'
const HomePageTwo = () => {
return (
<Layout pageTitle="Jironis">
<HeaderTwo />
<MobileMenu />
<BannerTwo />
<Features />
<FunFacts />
<CtaTwo />
<CtaThree />
<Video />
<AppShots />
<Pricing />
<Testimonials />
<Clients />
<BlogHome />
<CtaOne />
<Footer />
</Layout>
)
}
export default HomePageTwo

74
packages/site/pages/index.js
View File

@ -1,37 +1,37 @@
import React from "react";
import Layout from "../components/Layout";
import Header from "../components/Header";
import MobileMenu from "../components/MobileMenu";
import Banner from "../components/Banner";
import FunFacts from "../components/FunFacts";
import CtaTwo from "../components/CtaTwo";
import CtaThree from "../components/CtaThree";
import Video from "../components/Video";
import Pricing from "../components/Pricing";
import AppShots from "../components/AppShots";
import Features from "../components/Features";
import Testimonials from "../components/Testimonials";
import BlogHome from "../components/BlogHome";
import Clients from "../components/Clients";
import CtaOne from "../components/CtaOne";
import Footer from "../components/Footer";
const HomePage = () => {
return (
<Layout pageTitle="Skolplattformen">
<Header />
<MobileMenu />
<Banner />
<Features />
<FunFacts />
<CtaTwo />
<CtaThree />
<AppShots />
<Pricing />
<Testimonials />
<Footer />
</Layout>
);
};
export default HomePage;
import React from 'react'
import Layout from '../components/Layout'
import Header from '../components/Header'
import MobileMenu from '../components/MobileMenu'
import Banner from '../components/Banner'
import FunFacts from '../components/FunFacts'
import CtaTwo from '../components/CtaTwo'
import CtaThree from '../components/CtaThree'
import Video from '../components/Video'
import Pricing from '../components/Pricing'
import AppShots from '../components/AppShots'
import Features from '../components/Features'
import Testimonials from '../components/Testimonials'
import BlogHome from '../components/BlogHome'
import Clients from '../components/Clients'
import CtaOne from '../components/CtaOne'
import Footer from '../components/Footer'
const HomePage = () => {
return (
<Layout pageTitle="Skolplattformen">
<Header />
<MobileMenu />
<Banner />
<Features />
<FunFacts />
<CtaTwo />
<CtaThree />
<AppShots />
<Pricing />
<Testimonials />
<Footer />
</Layout>
)
}
export default HomePage

470
packages/site/pages/news-details.js
View File

@ -1,235 +1,235 @@
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import Link from "next/link";
import Layout from "../components/Layout";
import HeaderTwo from "../components/HeaderTwo";
import MobileMenu from "../components/MobileMenu";
import PageBanner from "../components/PageBanner";
import Sidebar from "../components/Sidebar";
import Footer from "../components/Footer";
import img1 from "../assets/img/blog/list1.png";
import authorImage from "../assets/img/blog/blog-author.png";
import commentAuthor1 from "../assets/img/blog/comment-author.png";
import commentAuthor2 from "../assets/img/blog/comment-author2.png";
const NewsDetails = () => {
return (
<Layout pageTitle="Blog Details || Jironis || App Landing React Template">
<HeaderTwo />
<MobileMenu />
<PageBanner pageName="News Details" />
<section className="pt-120 pb-150">
<Container>
<Row>
<Col lg={8}>
<div className="blog-details-inner">
<div className="single-blog-inner">
<div className="post-image">
<Link href="/news-details">
<a>
<img src={img1} alt="" />
</a>
</Link>
<div className="post-date">
<p>
<span>30</span>Sep
</p>
</div>
</div>
<div className="post-content">
<div className="post-details">
<div className="post-info d-flex">
<a href="#">
<span>By</span>Admin
</a>
<a href="#">
<span>2</span> Comeent
</a>
</div>
<div className="post-title">
<h3>
<a href="blog-details.html">
Pre and Post Launch Mobile App Marketing Pitfalls to
Avoid
</a>
</h3>
</div>
<p>
There are many variations of passages of Lorem Ipsum
available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which
don't look even slightly believable. If you are going to
use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of
text. All the Lorem Ipsum generators on the Internet
tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a
handful of model sentence structures, to generate Lorem
Ipsum which looks reasonable. The generated Lorem Ipsum
is therefore always free from repetition, injected
humour, or non-characteristic words etc.
</p>
<p className="mb-0">
t is a long established fact that a reader will be
distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content
here', making it look like readable English. Many
desktop publishing packages and web page editors now use
Lorem Ipsum as their default model text, and a search
for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose
injected humour and the like.
</p>
</div>
</div>
</div>
<div className="post-tag-share d-flex align-items-center">
<div className="post-tag">
<h5>Tags:</h5>
<a href="#">Business,</a>
<a href="#">Agency,</a>
<a href="#">Technology</a>
</div>
<div className="post-share">
<ul className="social-list mb--0 list-unstyled">
<li>
<a href="#">
<i className="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-pinterest"></i>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
<div className="post-author-inner midea">
<img src={authorImage} alt="" />
<div className="author-details">
<h4>Christine Eve</h4>
<p>
Lorem Ipsum is simply dummy text of the rinting and
typesetting been the industry standard dummy text ever
sincer nullam condimentum purus.
</p>
<a href="#">View All Posts</a>
</div>
</div>
<div className="post-comment">
<h3>2 Comments</h3>
<ul className="post-comments p-0 m-0 list-unstyled">
<li>
<div className="comment-author-details media">
<img src={commentAuthor1} alt="" />
<div className="comment-author-content">
<h5>David Martin</h5>
<h6>20 oct, 2018 - 4:00 pm</h6>
<p>
Lorem Ipsum is simply dummy text of the rinting and
typesetting been the industry standard dummy text
ever sincer condimentum purus. In non ex at ligula
fringilla lobortis et aliquet.
</p>
<a href="#" className="btn">
Reply
</a>
</div>
</div>
</li>
<li className="d-flex">
<div className="comment-author-details media">
<img src={commentAuthor2} alt="" />
<div className="comment-author-content">
<h5>Jasseca Brown</h5>
<h6>20 oct, 2018 - 4:00 pm</h6>
<p>
Lorem Ipsum is simply dummy text of the rinting and
typesetting been the industry standard dummy text
ever sincer condimentum purus. In non ex at ligula
fringilla lobortis et aliquet.
</p>
<a href="#" className="btn">
Reply
</a>
</div>
</div>
</li>
</ul>
</div>
<div className="contact-form contact-page-form parsley-validate">
<h3>Leave a Comment</h3>
<form action="#">
<div className="row">
<div className="col-md-6">
<input
type="text"
name="name"
placeholder="Full Name"
className="theme-input-style"
required
/>
</div>
<div className="col-md-6">
<input
type="email"
name="email"
placeholder="Email Address"
className="theme-input-style"
required
/>
</div>
</div>
<div className="row">
<div className="col-md-12">
<textarea
name="message"
placeholder="Write Message"
className="theme-input-style"
></textarea>
<div className="submite-btn">
<button type="submit" className="btn">
Send Message
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</Col>
<Col lg={4}>
<Sidebar />
</Col>
</Row>
</Container>
</section>
<Footer />
</Layout>
);
};
export default NewsDetails;
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import Link from 'next/link'
import Layout from '../components/Layout'
import HeaderTwo from '../components/HeaderTwo'
import MobileMenu from '../components/MobileMenu'
import PageBanner from '../components/PageBanner'
import Sidebar from '../components/Sidebar'
import Footer from '../components/Footer'
import img1 from '../assets/img/blog/list1.png'
import authorImage from '../assets/img/blog/blog-author.png'
import commentAuthor1 from '../assets/img/blog/comment-author.png'
import commentAuthor2 from '../assets/img/blog/comment-author2.png'
const NewsDetails = () => {
return (
<Layout pageTitle="Blog Details || Jironis || App Landing React Template">
<HeaderTwo />
<MobileMenu />
<PageBanner pageName="News Details" />
<section className="pt-120 pb-150">
<Container>
<Row>
<Col lg={8}>
<div className="blog-details-inner">
<div className="single-blog-inner">
<div className="post-image">
<Link href="/news-details">
<a>
<img src={img1} alt="" />
</a>
</Link>
<div className="post-date">
<p>
<span>30</span>Sep
</p>
</div>
</div>
<div className="post-content">
<div className="post-details">
<div className="post-info d-flex">
<a href="#">
<span>By</span>Admin
</a>
<a href="#">
<span>2</span> Comeent
</a>
</div>
<div className="post-title">
<h3>
<a href="blog-details.html">
Pre and Post Launch Mobile App Marketing Pitfalls to
Avoid
</a>
</h3>
</div>
<p>
There are many variations of passages of Lorem Ipsum
available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which
don't look even slightly believable. If you are going to
use a passage of Lorem Ipsum, you need to be sure there
isn't anything embarrassing hidden in the middle of
text. All the Lorem Ipsum generators on the Internet
tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a
handful of model sentence structures, to generate Lorem
Ipsum which looks reasonable. The generated Lorem Ipsum
is therefore always free from repetition, injected
humour, or non-characteristic words etc.
</p>
<p className="mb-0">
t is a long established fact that a reader will be
distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of
letters, as opposed to using 'Content here, content
here', making it look like readable English. Many
desktop publishing packages and web page editors now use
Lorem Ipsum as their default model text, and a search
for 'lorem ipsum' will uncover many web sites still in
their infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose
injected humour and the like.
</p>
</div>
</div>
</div>
<div className="post-tag-share d-flex align-items-center">
<div className="post-tag">
<h5>Tags:</h5>
<a href="#">Business,</a>
<a href="#">Agency,</a>
<a href="#">Technology</a>
</div>
<div className="post-share">
<ul className="social-list mb--0 list-unstyled">
<li>
<a href="#">
<i className="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-pinterest"></i>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
<div className="post-author-inner midea">
<img src={authorImage} alt="" />
<div className="author-details">
<h4>Christine Eve</h4>
<p>
Lorem Ipsum is simply dummy text of the rinting and
typesetting been the industry standard dummy text ever
sincer nullam condimentum purus.
</p>
<a href="#">View All Posts</a>
</div>
</div>
<div className="post-comment">
<h3>2 Comments</h3>
<ul className="post-comments p-0 m-0 list-unstyled">
<li>
<div className="comment-author-details media">
<img src={commentAuthor1} alt="" />
<div className="comment-author-content">
<h5>David Martin</h5>
<h6>20 oct, 2018 - 4:00 pm</h6>
<p>
Lorem Ipsum is simply dummy text of the rinting and
typesetting been the industry standard dummy text
ever sincer condimentum purus. In non ex at ligula
fringilla lobortis et aliquet.
</p>
<a href="#" className="btn">
Reply
</a>
</div>
</div>
</li>
<li className="d-flex">
<div className="comment-author-details media">
<img src={commentAuthor2} alt="" />
<div className="comment-author-content">
<h5>Jasseca Brown</h5>
<h6>20 oct, 2018 - 4:00 pm</h6>
<p>
Lorem Ipsum is simply dummy text of the rinting and
typesetting been the industry standard dummy text
ever sincer condimentum purus. In non ex at ligula
fringilla lobortis et aliquet.
</p>
<a href="#" className="btn">
Reply
</a>
</div>
</div>
</li>
</ul>
</div>
<div className="contact-form contact-page-form parsley-validate">
<h3>Leave a Comment</h3>
<form action="#">
<div className="row">
<div className="col-md-6">
<input
type="text"
name="name"
placeholder="Full Name"
className="theme-input-style"
required
/>
</div>
<div className="col-md-6">
<input
type="email"
name="email"
placeholder="Email Address"
className="theme-input-style"
required
/>
</div>
</div>
<div className="row">
<div className="col-md-12">
<textarea
name="message"
placeholder="Write Message"
className="theme-input-style"
></textarea>
<div className="submite-btn">
<button type="submit" className="btn">
Send Message
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</Col>
<Col lg={4}>
<Sidebar />
</Col>
</Row>
</Container>
</section>
<Footer />
</Layout>
)
}
export default NewsDetails

214
packages/site/pages/news.js
View File

@ -1,107 +1,107 @@
import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import Layout from "../components/Layout";
import HeaderTwo from "../components/HeaderTwo";
import MobileMenu from "../components/MobileMenu";
import PageBanner from "../components/PageBanner";
import BlogPost from "../components/BlogPost";
import Pagination from "../components/Pagination";
import Sidebar from "../components/Sidebar";
import Footer from "../components/Footer";
import img1 from "../assets/img/blog/list1.png";
import img2 from "../assets/img/blog/list2.png";
import img3 from "../assets/img/blog/list3.png";
import img4 from "../assets/img/blog/list4.png";
const BLOG_DATA = [
{
title: "Pre and Post Launch Mobile App Marketing Pitfalls to Avoid",
content:
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of you need to be sure there isn't anything embarrassing hidden in the middle of text.",
link: "/news-details",
date: "30",
month: "Sep",
author: "Admin",
commentCount: "2",
image: img1,
btnClass: "btn"
},
{
title: "Pre and Post Launch Mobile App Marketing Pitfalls to Avoid",
content:
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of you need to be sure there isn't anything embarrassing hidden in the middle of text.",
link: "/news-details",
date: "30",
month: "Sep",
author: "Admin",
commentCount: "2",
image: img2,
btnClass: "btn"
},
{
title: "Pre and Post Launch Mobile App Marketing Pitfalls to Avoid",
content:
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of you need to be sure there isn't anything embarrassing hidden in the middle of text.",
link: "/news-details",
date: "30",
month: "Sep",
author: "Admin",
commentCount: "2",
image: img3,
btnClass: "btn"
},
{
title: "Pre and Post Launch Mobile App Marketing Pitfalls to Avoid",
content:
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of you need to be sure there isn't anything embarrassing hidden in the middle of text.",
link: "/news-details",
date: "30",
month: "Sep",
author: "Admin",
commentCount: "2",
image: img4,
btnClass: "btn"
}
];
const NewsPage = () => {
return (
<Layout pageTitle="Blog Page || Jironis || App Landing React Template">
<HeaderTwo />
<MobileMenu />
<PageBanner pageName="All News" />
<section className="pt-120 pb-150">
<Container>
<Row>
<Col lg={8}>
<div className="blog-list-inner">
{BLOG_DATA.map((blogPost, index) => (
<BlogPost
key={`blog-post-${index}`}
postLink={blogPost.link}
postAuthor={blogPost.author}
postDate={blogPost.date}
postMonth={blogPost.month}
postCommentCount={blogPost.commentCount}
postTitle={blogPost.title}
postContent={blogPost.content}
postImage={blogPost.image}
btnClass={blogPost.btnClass}
/>
))}
</div>
<Pagination />
</Col>
<Col lg={4}>
<Sidebar />
</Col>
</Row>
</Container>
</section>
<Footer />
</Layout>
);
};
export default NewsPage;
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import Layout from '../components/Layout'
import HeaderTwo from '../components/HeaderTwo'
import MobileMenu from '../components/MobileMenu'
import PageBanner from '../components/PageBanner'
import BlogPost from '../components/BlogPost'
import Pagination from '../components/Pagination'
import Sidebar from '../components/Sidebar'
import Footer from '../components/Footer'
import img1 from '../assets/img/blog/list1.png'
import img2 from '../assets/img/blog/list2.png'
import img3 from '../assets/img/blog/list3.png'
import img4 from '../assets/img/blog/list4.png'
const BLOG_DATA = [
{
title: 'Pre and Post Launch Mobile App Marketing Pitfalls to Avoid',
content:
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of you need to be sure there isn't anything embarrassing hidden in the middle of text.",
link: '/news-details',
date: '30',
month: 'Sep',
author: 'Admin',
commentCount: '2',
image: img1,
btnClass: 'btn',
},
{
title: 'Pre and Post Launch Mobile App Marketing Pitfalls to Avoid',
content:
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of you need to be sure there isn't anything embarrassing hidden in the middle of text.",
link: '/news-details',
date: '30',
month: 'Sep',
author: 'Admin',
commentCount: '2',
image: img2,
btnClass: 'btn',
},
{
title: 'Pre and Post Launch Mobile App Marketing Pitfalls to Avoid',
content:
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of you need to be sure there isn't anything embarrassing hidden in the middle of text.",
link: '/news-details',
date: '30',
month: 'Sep',
author: 'Admin',
commentCount: '2',
image: img3,
btnClass: 'btn',
},
{
title: 'Pre and Post Launch Mobile App Marketing Pitfalls to Avoid',
content:
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of you need to be sure there isn't anything embarrassing hidden in the middle of text.",
link: '/news-details',
date: '30',
month: 'Sep',
author: 'Admin',
commentCount: '2',
image: img4,
btnClass: 'btn',
},
]
const NewsPage = () => {
return (
<Layout pageTitle="Blog Page || Jironis || App Landing React Template">
<HeaderTwo />
<MobileMenu />
<PageBanner pageName="All News" />
<section className="pt-120 pb-150">
<Container>
<Row>
<Col lg={8}>
<div className="blog-list-inner">
{BLOG_DATA.map((blogPost, index) => (
<BlogPost
key={`blog-post-${index}`}
postLink={blogPost.link}
postAuthor={blogPost.author}
postDate={blogPost.date}
postMonth={blogPost.month}
postCommentCount={blogPost.commentCount}
postTitle={blogPost.title}
postContent={blogPost.content}
postImage={blogPost.image}
btnClass={blogPost.btnClass}
/>
))}
</div>
<Pagination />
</Col>
<Col lg={4}>
<Sidebar />
</Col>
</Row>
</Container>
</section>
<Footer />
</Layout>
)
}
export default NewsPage