tietokonepaja/osuuskauppa
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move everything into a same index component

Browse Source
This commit is contained in:
Veikko Lintujärvi
2022-11-03 18:38:56 +02:00
parent 418ff0a2b2
commit b9a6f939b5
11 changed files with 164 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/Contact.tsx
View File

@@ -1,45 +0,0 @@
import React from 'react';
import Image from 'next/image';
import styles from '../styles/Contact.module.scss';
export const Contact = () => {
return (
<section className={styles.mainContainer}>
<Image
className={styles.keepersImage}
src='/elvira-iveta.png'
layout='responsive'
alt='shop keepers'
width={251}
height={251}
/>
<span className={styles.emailAddress}>
info@livonsaarenosuuskauppa.fi
</span>
<span className={styles.phone}>+358 40 0460600</span>
<div className={styles.someContainer}>
<a href='https://www.facebook.com/LivonsaarenOsuuskauppa/'>
<Image
className={styles.someIcon}
src='/fb-icon.png'
layout='responsive'
alt='facebook'
width={300}
height={300}
/>
</a>
<a href='https://www.instagram.com/livonsaaren_osuuskauppa/'>
<Image
className={styles.someIcon}
src='/insta-icon.png'
layout='responsive'
alt='facebook'
width={300}
height={300}
/>
</a>
</div>
<span className='separator' />
</section>
);
};

21
components/Header.tsx
View File

@@ -1,21 +0,0 @@
import React from 'react';
import styles from '../styles/Header.module.scss';
import Image from 'next/image';
export const Header = () => {
return (
<header className={styles.mainContainer}>
<span className={styles.addressText}>
Velkuantie 988, 21180 Livonsaari
</span>
<Image
src='/big-logo.webp'
layout='responsive'
alt='main'
width={528}
height={237}
/>
<h1 className={styles.subTitleText}>Kauppa&Ravintola&Kahvila&Baari</h1>
</header>
);
};

15
components/OpenHours.tsx
View File

@@ -1,15 +0,0 @@
import React from 'react';
import styles from '../styles/OpenHours.module.scss';
export const OpenHours = () => {
return (
<section className={styles.mainContainer}>
<h2 className={styles.openHoursBold}>Auki:</h2>
<span className={styles.openHours}>ma-la 12:00-19:00</span>
<p className={styles.openHoursDesc}>
kysynnän ja sään salliessa myös pidempään
</p>
<h2 className={styles.openHoursBold}>Tervetuloa!</h2>
</section>
);
};

20
components/PostService.tsx
View File

@@ -1,20 +0,0 @@
import React from 'react';
import styles from '../styles/PostService.module.scss';
export const PostService = () => {
return (
<section className={styles.mainContainer}>
<h1 className={styles.title}>Postin automaattipalvelu</h1>
<p className={styles.desc}>
Lähetä tai nouda paketti Postin pakettiautomaatista Livonsaaren
Osuuskaupasta
</p>
<span className={styles.info}>ma-la 12:00-19:00</span>
<span className={styles.info}>Velkuantie 988, 21180 Livonsaari</span>
<a href='https://www.smartpost.fi/' className={styles.link}>
Lisätietoja
</a>
<span className='separator' />
</section>
);
};

86
pages/index.tsx
View File

@@ -1,17 +1,83 @@
import { Contact } from '../components/Contact'; import styles from '../styles/Index.module.scss';
import { Header } from '../components/Header'; import Image from 'next/image';
import { OpenHours } from '../components/OpenHours';
import { PostService } from '../components/PostService';
import styles from '../styles/Home.module.scss';
export default function Home() { export default function Index() {
return ( return (
<div className={styles.outerContainer}> <div className={styles.outerContainer}>
<div className={styles.innerContainer}> <div className={styles.innerContainer}>
<Header /> <header className={styles.sectionContainer}>
<OpenHours /> <span className={styles.addressText}>
<Contact /> Velkuantie 988, 21180 Livonsaari
<PostService /> </span>
<Image
src='/big-logo.webp'
layout='responsive'
alt='main'
width={528}
height={237}
/>
<h1 className={styles.title}>Kauppa&Ravintola&Kahvila&Baari</h1>
</header>
<section className={styles.sectionContainer}>
<h2 className={styles.openHoursTitle}>Auki:</h2>
<span className={styles.openHours}>ma-la 12:00-19:00</span>
<p className={styles.openHoursDesc}>
kysynnän ja sään salliessa myös pidempään
</p>
<h2 className={styles.openHoursBold}>Tervetuloa!</h2>
</section>{' '}
<section className={styles.sectionContainer}>
<Image
className={styles.keepersImage}
src='/elvira-iveta.png'
layout='responsive'
alt='shop keepers'
width={251}
height={251}
/>
<span className={styles.emailAddress}>
info@livonsaarenosuuskauppa.fi
</span>
<span className={styles.phone}>+358 40 0460600</span>
<div className={styles.socialMediaContainer}>
<a href='https://www.facebook.com/LivonsaarenOsuuskauppa/'>
<Image
className={styles.socialMediaIcon}
src='/fb-icon.png'
layout='responsive'
alt='facebook'
width={300}
height={300}
/>
</a>
<a href='https://www.instagram.com/livonsaaren_osuuskauppa/'>
<Image
className={styles.socialMediaIcon}
src='/insta-icon.png'
layout='responsive'
alt='facebook'
width={300}
height={300}
/>
</a>
</div>
<span className='separator' />
</section>
<section className={styles.sectionContainer}>
<h1 className={styles.title}>Postin automaattipalvelu</h1>
<p className={styles.postServiceDesc}>
Lähetä tai nouda paketti Postin pakettiautomaatista Livonsaaren
Osuuskaupasta
</p>
<span className={styles.postServiceInfo}>ma-la 12:00-19:00</span>
<span className={styles.postServiceInfo}>
Velkuantie 988, 21180 Livonsaari
</span>
<a href='https://www.smartpost.fi/' className={styles.link}>
Lisätietoja
</a>
<span className='separator' />
</section>
</div> </div>
</div> </div>
); );

28
styles/Contact.module.scss
View File

@@ -1,28 +0,0 @@
.mainContainer {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.keepersImage {
max-width: 150px;
margin-top: 1.5rem;
}
.emailAddress,
.phone {
margin-top: 1rem;
}
.someContainer {
display: flex;
justify-content: space-around;
margin-top: 1rem;
}
.someIcon {
max-width: 30px;
margin: 15px;
margin-bottom: 0;
}

19
styles/Header.module.scss
View File

@@ -1,19 +0,0 @@
.mainContainer {
display: flex;
flex-direction: column;
align-items: center;
}
.addressText {
font-weight: lighter;
margin-top: 1rem;
font-size: 1.1rem;
}
.subTitleText {
font-size: 2rem;
margin-top: 0;
margin-bottom: 0;
font-weight: 600;
color: #686868;
}

12
styles/Home.module.scss
View File

@@ -1,12 +0,0 @@
.outerContainer {
display: flex;
align-items: center;
flex-direction: column;
}
.innerContainer {
display: flex;
align-items: center;
flex-direction: column;
max-width: 50%;
}

88
styles/Index.module.scss Normal file
View File

@@ -0,0 +1,88 @@
.outerContainer {
display: flex;
align-items: center;
flex-direction: column;
}
.innerContainer {
display: flex;
align-items: center;
flex-direction: column;
max-width: 50%;
}
.sectionContainer {
display: flex;
flex-direction: column;
align-items: center;
}
.address {
font-weight: lighter;
margin-top: 1rem;
font-size: 1.1rem;
}
.title {
font-size: 2rem;
margin-top: 0;
margin-bottom: 0;
font-weight: 600;
color: #686868;
}
.openHoursTitle {
font-weight: bold;
margin: 0;
font-size: 1.2rem;
}
.openHoursText {
margin-top: 0.5rem;
}
.openHoursDesc {
max-width: 15rem;
text-align: center;
}
.keepersImage {
max-width: 150px;
margin-top: 1.5rem;
}
.emailAddress,
.phone {
margin-top: 1rem;
}
.socialMediaContainer {
display: flex;
justify-content: space-around;
margin-top: 1rem;
}
.socialMediaIcon {
max-width: 30px;
margin: 15px;
margin-bottom: 0;
}
.postServiceDesc {
margin-top: 0.5rem;
margin-bottom: 0;
}
.postServiceInfo {
margin-top: 0.7rem;
}
.link {
color: #0274be;
text-decoration: none;
font-weight: bold;
}
.link:hover {
color: #3a3a3a;
}

22
styles/OpenHours.module.scss
View File

@@ -1,22 +0,0 @@
.mainContainer {
margin-top: 1.5rem;
font-size: 1.2rem;
display: flex;
align-items: center;
flex-direction: column;
}
.openHoursBold {
font-weight: bold;
margin: 0;
font-size: 1.2rem;
}
.openHours {
margin-top: 0.5rem;
}
.openHoursDesc {
max-width: 15rem;
text-align: center;
}

34
styles/PostService.module.scss
View File

@@ -1,34 +0,0 @@
.mainContainer {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.title {
font-size: 2rem;
margin-bottom: 0;
margin-top: 0;
font-weight: 600;
color: #686868;
}
.desc {
margin-top: 0.5rem;
margin-bottom: 0;
}
.info {
margin-top: 0.7rem;
}
.link {
color: #0274be;
text-decoration: none;
font-weight: bold;
margin-top: 0.7rem;
}
.link:hover {
color: #3a3a3a;
}