Skip to content

Commit de7d670

Browse files
lujjjhlujjjh
authored
Migrate to App Router (#74)
* Migrate to App Router * Optimize Google Fonts
1 parent 06278e2 commit de7d670

File tree

31 files changed

+363
-300
lines changed

31 files changed

+363
-300
lines changed

‎app/[locale]/layout.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import GlobalStyle from 'components/GlobalStyle'
2+
import StyledComponentsRegistry from 'components/styled-components-regsitry'
3+
import { NextIntlClientProvider } from 'next-intl'
4+
import { getLocale } from 'next-intl/server'
5+
6+
export default async function Layout({ children }: { children: React.ReactNode }) {
7+
const locale = await getLocale()
8+
9+
return (
10+
<html lang={locale}>
11+
<head>
12+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
13+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
14+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
15+
</head>
16+
<body>
17+
<StyledComponentsRegistry>
18+
<GlobalStyle />
19+
<NextIntlClientProvider>{children}</NextIntlClientProvider>
20+
</StyledComponentsRegistry>
21+
</body>
22+
</html>
23+
)
24+
}

‎app/[locale]/page.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { getTranslations } from 'next-intl/server'
2+
3+
import Features from 'components/features'
4+
import Footer from 'components/footer'
5+
import Header from 'components/header'
6+
import Hero from 'components/hero'
7+
8+
export const generateMetadata = async () => {
9+
const t = await getTranslations('index')
10+
11+
return {
12+
title: t('title'),
13+
description: t('description')
14+
}
15+
}
16+
17+
export default function Home() {
18+
return (
19+
<>
20+
<Header />
21+
22+
<Hero />
23+
24+
<Features />
25+
26+
<Footer />
27+
</>
28+
)
29+
}

‎components/GlobalStyle.ts‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1+
'use client'
2+
3+
import { PT_Sans } from 'next/font/google'
14
import { createGlobalStyle, css } from 'styled-components'
25

6+
const ptSans = PT_Sans({
7+
subsets: ['latin'],
8+
weight: ['400', '700'],
9+
fallback: []
10+
})
11+
312
const GlobalStyle = createGlobalStyle`${css`
413
:root {
514
--color-background-hsl: 217 20% 98%;
@@ -14,16 +23,19 @@ const GlobalStyle = createGlobalStyle`${css`
1423
1524
--max-width: 1400px;
1625
17-
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
18-
'Helvetica Neue', sans-serif;
19-
--font-family-title: 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
26+
--font-family:
27+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
28+
sans-serif;
29+
--font-family-title:
30+
${ptSans.style.fontFamily}, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
2031
'Open Sans', 'Helvetica Neue', sans-serif;
2132
2233
--border-radius-sm: 0.25rem;
2334
--border-radius-md: 0.375rem;
2435
--border-radius-lg: 0.625rem;
2536
26-
--shadow-md: 0.3px 0.5px 0.7px hsl(var(--color-shadow-hsl) / 0.21),
37+
--shadow-md:
38+
0.3px 0.5px 0.7px hsl(var(--color-shadow-hsl) / 0.21),
2739
0.8px 1.6px 2.1px -0.7px hsl(var(--color-shadow-hsl) / 0.23),
2840
1.9px 3.7px 5px -1.3px hsl(var(--color-shadow-hsl) / 0.26),
2941
4.3px 8.7px 11.6px -2px hsl(var(--color-shadow-hsl) / 0.29);

‎components/circle-background/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client'
2+
13
import styled from 'styled-components'
24

35
const Wrapper = styled.div`

‎components/cookie-consent/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client'
2+
13
import { useTranslations } from 'next-intl'
24
import { useEffect, useState } from 'react'
35
import styled from 'styled-components'

‎components/features/index.tsx‎

Lines changed: 1 addition & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { RichTagsFunction, useTranslations } from 'next-intl'
22
import Image from 'next/image'
3-
import styled from 'styled-components'
43

54
import MaxWidthWrapper from 'components/max-width-wrapper'
65

@@ -10,124 +9,7 @@ import feature2Dark from './feature-2-dark.png'
109
import feature2 from './feature-2.png'
1110
import feature3Dark from './feature-3-dark.png'
1211
import feature3 from './feature-3.png'
13-
14-
const Wrapper = styled.div``
15-
16-
const FeatureWrapper = styled.div`
17-
position: relative;
18-
padding: 6.25rem 0;
19-
box-sizing: border-box;
20-
min-height: 600px;
21-
display: flex;
22-
align-items: center;
23-
overflow: hidden;
24-
25-
&:nth-child(odd) {
26-
background-color: var(--color-white);
27-
}
28-
29-
${MaxWidthWrapper} {
30-
margin-inline-start: 52vw;
31-
margin-inline-end: auto;
32-
}
33-
34-
&:nth-child(even) {
35-
${MaxWidthWrapper} {
36-
margin-inline-end: 52vw;
37-
margin-inline-start: auto;
38-
}
39-
}
40-
41-
&:nth-child(odd) ${MaxWidthWrapper} {
42-
padding-inline-start: 0;
43-
}
44-
45-
&:nth-child(even) ${MaxWidthWrapper} {
46-
padding-inline-end: 0;
47-
}
48-
49-
@media (max-width: 960px) {
50-
flex-direction: column;
51-
52-
&:nth-child(odd) ${MaxWidthWrapper}, &:nth-child(even) ${MaxWidthWrapper} {
53-
margin: 0;
54-
padding: 0 2rem;
55-
box-sizing: border-box;
56-
width: 100%;
57-
}
58-
}
59-
`
60-
61-
const FeatureImageWrapper = styled.div`
62-
position: absolute;
63-
right: 50vw;
64-
top: 3.75rem;
65-
66-
&:lang(ar),
67-
&:lang(he) {
68-
right: revert;
69-
left: 50vw;
70-
}
71-
72-
${FeatureWrapper}:nth-child(even) > & {
73-
right: revert;
74-
left: 50vw;
75-
76-
&:lang(ar),
77-
&:lang(he) {
78-
right: 50vw;
79-
left: revert;
80-
}
81-
}
82-
83-
@media (max-width: 960px) {
84-
position: static;
85-
margin-bottom: -20rem;
86-
}
87-
`
88-
89-
const Heading = styled.div`
90-
margin-bottom: 1.5rem;
91-
font-size: 2.25rem;
92-
line-height: 1.3;
93-
font-family: var(--font-family-title);
94-
font-weight: bold;
95-
white-space: pre-wrap;
96-
97-
strong {
98-
position: relative;
99-
color: var(--color-primary-dark);
100-
line-height: 1.3;
101-
width: fit-content;
102-
transition: opacity 0.5s 0.2s ease;
103-
will-change: opacity;
104-
white-space: nowrap;
105-
106-
&::after {
107-
position: absolute;
108-
content: '';
109-
left: 0;
110-
right: 0;
111-
bottom: 0.2em;
112-
height: 0.3em;
113-
background-color: var(--color-primary);
114-
opacity: 0.2;
115-
}
116-
}
117-
118-
@media (max-width: 960px) {
119-
text-align: center;
120-
}
121-
`
122-
123-
const Description = styled.div`
124-
opacity: 0.8;
125-
white-space: pre-wrap;
126-
127-
p:not(:last-child) {
128-
margin: 0 0 0.5rem;
129-
}
130-
`
12+
import { Description, FeatureImageWrapper, FeatureWrapper, Heading, Wrapper } from './styles'
13113

13214
const Features = () => {
13315
const images = [

‎components/features/styles.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
'use client'
2+
3+
import { styled } from 'styled-components'
4+
import MaxWidthWrapper from '../max-width-wrapper'
5+
6+
export const Wrapper = styled.div``
7+
8+
export const FeatureWrapper = styled.div`
9+
position: relative;
10+
padding: 6.25rem 0;
11+
box-sizing: border-box;
12+
min-height: 600px;
13+
display: flex;
14+
align-items: center;
15+
overflow: hidden;
16+
17+
&:nth-child(odd) {
18+
background-color: var(--color-white);
19+
}
20+
21+
${MaxWidthWrapper} {
22+
margin-inline-start: 52vw;
23+
margin-inline-end: auto;
24+
}
25+
26+
&:nth-child(even) {
27+
${MaxWidthWrapper} {
28+
margin-inline-end: 52vw;
29+
margin-inline-start: auto;
30+
}
31+
}
32+
33+
&:nth-child(odd) ${MaxWidthWrapper} {
34+
padding-inline-start: 0;
35+
}
36+
37+
&:nth-child(even) ${MaxWidthWrapper} {
38+
padding-inline-end: 0;
39+
}
40+
41+
@media (max-width: 960px) {
42+
flex-direction: column;
43+
44+
&:nth-child(odd) ${MaxWidthWrapper}, &:nth-child(even) ${MaxWidthWrapper} {
45+
margin: 0;
46+
padding: 0 2rem;
47+
box-sizing: border-box;
48+
width: 100%;
49+
}
50+
}
51+
`
52+
53+
export const FeatureImageWrapper = styled.div`
54+
position: absolute;
55+
right: 50vw;
56+
top: 3.75rem;
57+
58+
&:lang(ar),
59+
&:lang(he) {
60+
right: revert;
61+
left: 50vw;
62+
}
63+
64+
${FeatureWrapper}:nth-child(even) > & {
65+
right: revert;
66+
left: 50vw;
67+
68+
&:lang(ar),
69+
&:lang(he) {
70+
right: 50vw;
71+
left: revert;
72+
}
73+
}
74+
75+
@media (max-width: 960px) {
76+
position: static;
77+
margin-bottom: -20rem;
78+
}
79+
`
80+
81+
export const Heading = styled.div`
82+
margin-bottom: 1.5rem;
83+
font-size: 2.25rem;
84+
line-height: 1.3;
85+
font-family: var(--font-family-title);
86+
font-weight: bold;
87+
white-space: pre-wrap;
88+
89+
strong {
90+
position: relative;
91+
color: var(--color-primary-dark);
92+
line-height: 1.3;
93+
width: fit-content;
94+
transition: opacity 0.5s 0.2s ease;
95+
will-change: opacity;
96+
white-space: nowrap;
97+
98+
&::after {
99+
position: absolute;
100+
content: '';
101+
left: 0;
102+
right: 0;
103+
bottom: 0.2em;
104+
height: 0.3em;
105+
background-color: var(--color-primary);
106+
opacity: 0.2;
107+
}
108+
}
109+
110+
@media (max-width: 960px) {
111+
text-align: center;
112+
}
113+
`
114+
115+
export const Description = styled.div`
116+
opacity: 0.8;
117+
white-space: pre-wrap;
118+
119+
p:not(:last-child) {
120+
margin: 0 0 0.5rem;
121+
}
122+
`

0 commit comments

Comments
 (0)