-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.jsx
156 lines (145 loc) · 7.29 KB
/
page.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
import Image from "next/image";
import Link from "next/link";
import Script from "next/script";
import TranslationsProvider from './components/TranslationsProvider';
const i18nNamespaces = ['home'];
import initTranslations from '../i18n';
import HomeArticle from "./components/HomeArticle";
import AOS from 'aos';
export async function generateSchemas(t, locale) {
const baseUrl = "https://blackmaps.com.ar"
const schema_url = locale && locale !== 'default' ? `${baseUrl}/${locale}` : baseUrl;
return {
"@context": "https://schema.org",
"@type": "Organization",
"name": "Black Maps",
"description": t('schema_description'),
"founder": {
"@type": "Person",
"name": "Agustín Sánchez"
},
"image": "https://blackmaps.com.ar/image/og-home.png",
"url": schema_url,
"sameAs": ["https://x.com/maps_black"],
"logo": "https://blackmaps.com.ar/image/app-icon-1024.webp",
"ContactPoint": {
"@type": "ContactPoint",
"email": "ayuda@blackmaps.com.ar",
"contactType": "Customer Service",
"availableLanguage": ["Spanish", "English"]
}
}
}
export async function generateMetadata({ params: { locale } }) {
const { t } = await initTranslations(locale, i18nNamespaces);
const baseUrl = "https://blackmaps.com.ar";
const canonicalUrl = locale && locale !== 'default' ? `${baseUrl}/${locale !== 'es' ? locale : ''}` : baseUrl;
return {
title: t('meta_title'),
description: t('meta_description'),
keywords: [t('kw0'), "Twitter", "BlackMaps", t('kw3'), t('kw4')],
openGraph: {
title: t('meta_title'),
description: t('meta_description'),
images: "https://blackmaps.com.ar/image/og-home.png",
},
twitter: {
card: "summary_large_image",
title: t('meta_title'),
description: t('meta_description'),
creator: "@maps_black",
creatorId: "1274191176267071490",
images: ["https://blackmaps.com.ar/image/og-home.png"],
},
alternates: {
canonical: canonicalUrl,
languages: {
'x-default': "https://blackmaps.com.ar",
'en': "https://blackmaps.com.ar/en",
}
}
};
}
export default async function Home({ params: { locale } }) {
const { t, resources } = await initTranslations(locale, i18nNamespaces);
const schemas = await generateSchemas(t, locale);
const schemaJSON = JSON.stringify(schemas);
return (
<TranslationsProvider
namespaces={i18nNamespaces}
locale={locale}
resources={resources}>
<Script
id="org-schema"
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(schemaJSON),
}}
/>
<main className="flex flex-col items-center justify-center w-full">
<section className="min-h-[calc(100svh+20px)] hero flex items-center justify-center w-full bg-hero-light dark:bg-hero-dark">
<div className="hero-overlay bg-opacity-60"></div>
<div className="hero-content text-center text-neutral-content">
<div className="max-w-lg sm:p-0 p-12">
<p className="text-5xl font-bold">🌍</p>
<h1 className="mb-5 text-5xl font-bold">{t('hero_title')}</h1>
<h2 className="mb-5 text-xl">
{t('hero_subtitle')}
</h2>
<div className="links flex gap-3 justify-center flex-wrap">
<Link href="/maps" title="Galería de Mapas" className="gap-2 flex items-center justify-center hover:scale-105 active:scale-95 transition dark:text-white text-[#1d1d1d] active:bg-[#bbb] dark:active:bg-[#2d2d2d] dark:bg-[#3d3d3d] bg-[#aaa] rounded-xl p-2 font-bold flex-shrink-1">
{t('hero_link_maps')}
</Link>
<a href="https://x.com/maps_black" className="gap-2 flex items-center justify-center hover:scale-105 active:scale-95 transition dark:text-white text-[#1d1d1d] active:bg-[#bbb] dark:active:bg-[#2d2d2d] dark:bg-[#3d3d3d] bg-[#aaa] rounded-xl p-2 font-bold flex-shrink-1" rel="noopener noreferrer" target="_blank">{t('hero_link_twitter')}</a>
<a href="#about" className="gap-2 flex items-center justify-center hover:scale-105 active:scale-95 transition dark:text-white text-[#1d1d1d] active:bg-[#bbb] dark:active:bg-[#2d2d2d] dark:bg-[#3d3d3d] bg-[#aaa] rounded-xl p-2 font-bold flex-shrink-1">{t('hero_link_about')}</a>
<Link href="/contact" title="Formulario de Contacto" className="gap-2 flex items-center justify-center hover:scale-105 active:scale-95 transition dark:text-white text-[#1d1d1d] active:bg-[#bbb] dark:active:bg-[#2d2d2d] dark:bg-[#3d3d3d] bg-[#aaa] rounded-xl p-2 font-bold flex-shrink-1">
{t('hero_link_contact')}
</Link>
</div>
</div>
</div>
</section>
<section id="about" className="flex flex-col gap-12 w-full items-start md:items-center justify-center p-8">
<h2 className="text-7xl font-bold text-center mx-auto underline" data-aos="fade-up">{t('about_title')}</h2>
<HomeArticle
title={t('first_question')}
image={{
source: "/image/first-map.webp",
alternate: t('first_map_alternate')
}}
locale={locale}
alignement="right"
aos="fade-up"
>
{t('first_answer')}
</HomeArticle>
<HomeArticle
title={t('second_question')}
image={{
source: "/image/agus-p1.webp",
alternate: t('agus_image_alternate')
}}
locale={locale}
alignement="left"
aos="fade-up"
>
{t('second_answer')}
</HomeArticle>
<HomeArticle
title={t('third_question')}
image={{
source: "/image/map-example-1.webp",
alternate: "Mapa de Black Maps llamado: Club de ESTADOS UNIDOS 🇺🇸 más buscado en Google por país (desde 2004)"
}}
locale={locale}
alignement="right"
aos="fade-up"
>
{t('third_answer')}
</HomeArticle>
<p className="hidden seo-declaration-title">{t('meta_title')}</p>
</section>
</main >
</TranslationsProvider>
);
}