Merge pull request #100 from MarckFp/95-create-landing-page

Create a Landing Page
MarckFp · Jun 3, 2024 · 741ab94 · 741ab94
2 parents 16beb01 + fab9516
commit 741ab94
Show file tree

Hide file tree

Showing 23 changed files with 406 additions and 131 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -27,10 +27,10 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.4.0",
-    "@event-calendar/core": "^3.0.1",
-    "@event-calendar/day-grid": "^3.0.1",
-    "@event-calendar/list": "^3.0.1",
-    "@event-calendar/time-grid": "^3.0.1",
+    "@event-calendar/core": "^3.0.2",
+    "@event-calendar/day-grid": "^3.0.2",
+    "@event-calendar/list": "^3.0.2",
+    "@event-calendar/time-grid": "^3.0.2",
     "@faker-js/faker": "^8.4.1",
     "@playwright/test": "^1.44.1",
     "@sveltejs/adapter-static": "^3.0.1",
@@ -49,7 +49,9 @@
     "eslint-plugin-svelte": "^2.39.0",
     "flowbite": "^2.3.0",
     "flowbite-svelte": "^0.46.1",
+    "flowbite-svelte-blocks": "^1.1.1",
     "flowbite-svelte-icons": "^1.6.1",
+    "flowbite-typography": "^1.0.3",
     "husky": "^9.0.11",
     "postcss": "^8.4.38",
     "prettier": "^3.3.0",

diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="light" lang="en">
+<html class="dark" lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<!-- Meta Tags -->

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -1,4 +1,42 @@
 {
+	"landing": {
+		"title": "The app to make your Public Preaching Turns better!",
+		"title-desc": "PPOC Gen helps you create, manage and automate schedules for your public preaching with exhibitors.",
+		"get-started": "Get started",
+		"feature-title": "Designed for congregations of every size",
+		"feature-desc": "PPOC Gen focus to help congregations automate turns so we could spend more time preaching and less time managing with tons of features:",
+		"free": "Free",
+		"free-desc": "Since the app don't require any servers it's totally free for everyone",
+		"performant": "High Performant",
+		"performant-desc": "Our app is designed to stored thousands of turns without amazing loading times",
+		"granular": "Granular",
+		"granular-desc": "With our priority system you can define in a granular way how often the app should use a publisher in the schedules",
+		"configurable": "Configurable",
+		"configurable-desc": "Customize by configuring order of the first week day, order by firstname or lastname, language, light or dark theme...",
+		"automatic": "Automatic",
+		"automatic-desc": "Decide if you want to generate the turns automatically using our algorith or manually by yourself",
+		"export": "Export with ease",
+		"export-desc": "We support multiple exporting formats so you can visualize your turns in different ways (currently, PDF and ICS formats)",
+		"faq": "Frequently asked questions",
+		"faq-free": "Is it free?",
+		"faq-free-answer": "Yes! You can enjoy our app for free. This is thanks to storing the data in your device instead of depending on servers",
+		"faq-difference": "What's the difference between a turn and a schedule?",
+		"faq-difference-answer": "For our point of view, a schedule is how often you preach with the exhibitors on a specific place (ie: every Monday at 12:00am at X place). In the other hand a turn is the exact day when that schedule happens (ie: Monday 3 of June at 12:00 at X place)",
+		"faq-data": "Do you collect any data?",
+		"faq-data-answer": "No we don't. The only information we have is the country of origin of our visitors, but the rest of the information is stored in your device and we cannot access",
+		"faq-more-cong": "Is it possible to have more than one congregation?",
+		"faq-more-cong-answer": "Not yet. Probably in a future we decide to support this feature but it adds complexity. However the app is configured to support multiple congregations. In the meanwhile we suggest you to use multiple browsers and it should work",
+		"faq-sync": "Is the data sync between devices?",
+		"faq-sync-answer": "Unfortunately no. You can always export and import data like you used to do with JW Library but it's not sync between devices or browsers. This helps us to make this app free of use",
+		"faq-error": "Can I suggest a feature or report an error?",
+		"faq-error-answer": "Yes you can! You can always go to ",
+		"faq-error-answer-2": " and open an issue. Be precise and don't hesitate to propose things! Unfortunately I'm the only developer should things will maybe delay",
+		"faq-support": "Is there any way we can support you?",
+		"faq-support-answer": "Even though it flatters me, I don't accept any type of payments. If you wish to support me donate that money instead to ",
+		"faq-maintenance": "Who is in charge of maintaining the app?",
+		"faq-maintenance-answer": "Currently, I'm the only developer working on this project. Even though I try to maintain the app as smooth as possible I cannot assure the app works 100% of the times",
+		"you-can-also": "You can also read the official documentation in: "
+	},
 	"errors": {
 		"404": "Something's missing",
 		"404-msg": "Sorry, we can't find that page. You'll find lots to explore on the home page.",

diff --git a/src/i18n/es.json b/src/i18n/es.json
@@ -1,4 +1,42 @@
 {
+	"landing": {
+		"title": "¡La app para hacer mejores turnos de predicación pública!",
+		"title-desc": "PPOC Gen ayuda a crear, administrar y automatizar horarios para la predicación pública con exhibidores.",
+		"get-started": "Empezar",
+		"feature-title": "Diseñado para congregaciones de todo tipo de tamaños",
+		"feature-desc": "PPOC Gen se centra en ayudar a congregaciones a automatizar los turnos para invertir más tiempo en predicar y menos en administrar, con multiples funcionalidades como:",
+		"free": "Grátis",
+		"free-desc": "Ya que la app no necesita ningún servidor, es totalmente grátis para todos",
+		"performant": "Alto rendimiento",
+		"performant-desc": "Nuestra app está diseñada para almacenar miles de turnos con tiempos de carga increibles",
+		"granular": "Granular",
+		"granular-desc": "Con nuestro sistema de prioridades puede definir de manera granular con cuanta frecuencia la app debe usar a un publicador en un horario en concreto",
+		"configurable": "Configurable",
+		"configurable-desc": "Personaliza la app configurando el primer día de la semana, si ordenar por nombre o apellido, idioma, tema claro u oscuro...",
+		"automatic": "Automatico",
+		"automatic-desc": "Decide si desea generar turnos de manera completamente automática usando nuestros algoritmos o manualmente por usted mismo",
+		"export": "Exporta con facilidad",
+		"export-desc": "Soportamos diferentes formatos para exportar, de tal manera puede visualizar sus turnos de diversas maneras (actualmente PDF e ICS)",
+		"faq": "Preguntas frecuentes",
+		"faq-free": "¿Es grátis?",
+		"faq-free-answer": "!Sí¡ Puedes disfrutar de nuestra app grátis. Esto es gracias a que podemos almacenar todos los datos en su dispositivo en vez de depender de servidores",
+		"faq-difference": "¿Cúal es la diferencia entre turno y horario?",
+		"faq-difference-answer": "Desde nuestro punto de vista, un horario es con cuanta frecuencia predicas con los exhibidores en un lugar en especifico (por ejemplo, todos los lunes a las 12:00 en el lugar X). Por otra parte, un turno es la fecha exacta en la que un horario occurre (por ejemplo, Lunes 3 a las 12:00 en el lugar X)",
+		"faq-data": "¿Recolectais datos?",
+		"faq-data-answer": "No, no lo hacemos. La única información que disponemos es el país de origen de los visitantes, pero el resto de la información es almacenada en su dispositivo y no podemos acceder a ella",
+		"faq-more-cong": "¿Es posible tener más de una congregación?",
+		"faq-more-cong-answer": "No, por momento. Probablemente en un futuro decidamos soportar esta funcionalidad pero añade cierta complejidad. Sin embargo, la app está configurada para soportar multiples congregaciones. Por el momento le sugerimos usar distintos navegadores",
+		"faq-sync": "¿Se sincronizan los datos entre dispositivos?",
+		"faq-sync-answer": "Desafortunadamente, no. Siempre puedes exportar e importar datos como está acostumbrado con JW Library, pero no se sincronizan entre dispositivos o navegadores. Esto nos ayuda a que la app sea de uso gratuito",
+		"faq-error": "¿Puedo sugerir una nueva funcionalidad o reportar un error?",
+		"faq-error-answer": "¡Sí, claro que puede! Puedes ir a ",
+		"faq-error-answer-2": " y abrir un 'issue'. Sea preciso y ¡no dude en proponer cosas nuevas! Desafortunadamente soy el único desarrollador y podría demorarme en contestar",
+		"faq-support": "¿Hay alguna manera que podamos ayudarle?",
+		"faq-support-answer": "Aunque me alaga, no acepto ningún tipo de pago. Si desea apoyarme siempre puede donar el dinero a ",
+		"faq-maintenance": "¿Quién está a cargo de mantener la app?",
+		"faq-maintenance-answer": "Actualmente, soy el único desarrollador trabajando en este proyecto. Y aunque trato de mantener la app para que funcione de la manera más fluida posible, no puedo asegurar que funcione en el 100% de las ocasiones",
+		"you-can-also": "También puedes ver la documentación online en: "
+	},
 	"errors": {
 		"404": "Página no encontrada",
 		"404-msg": "Lo siento, no pudimos encontrar esa página. Puedes explorar más de la app en la página de inicio.",

diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
@@ -32,63 +32,63 @@
 
 {#if mobile}
 	<BottomNav {activeUrl} position="fixed" classInner="grid-cols-6">
-		<BottomNavItem href="{base}/" activeClass="w-full px-3">
-			<img src="favicon.svg" class="h-6 w-6 shrink-0" alt="PPOC Gen Logo" />
+		<BottomNavItem href="{base}/app" activeClass="w-full px-3">
+			<img src="{base}/favicon.svg" class="h-6 min-h-6 w-6 min-w-6 shrink-0" alt="PPOC Gen Logo" />
 		</BottomNavItem>
-		<BottomNavItem href="{base}/publishers" data-testid="navbar-publishers">
+		<BottomNavItem href="{base}/app/publishers" data-testid="navbar-publishers">
 			<UsersGroupOutline size="lg" color="red" class="dark:text-primary-400" />
 		</BottomNavItem>
-		<BottomNavItem href="{base}/schedules" data-testid="navbar-schedules">
+		<BottomNavItem href="{base}/app/schedules" data-testid="navbar-schedules">
 			<CalendarMonthOutline size="lg" color="red" class="dark:text-primary-400" />
 		</BottomNavItem>
-		<BottomNavItem href="{base}/turns" data-testid="navbar-turns">
+		<BottomNavItem href="{base}/app/turns" data-testid="navbar-turns">
 			<EditOutline size="lg" color="red" class="dark:text-primary-400" />
 		</BottomNavItem>
-		<BottomNavItem href="{base}/incidences" data-testid="navbar-incidences">
+		<BottomNavItem href="{base}/app/incidences" data-testid="navbar-incidences">
 			<BellRingOutline size="lg" color="red" class="dark:text-primary-400" />
 		</BottomNavItem>
-		<BottomNavItem href="{base}/settings" data-testid="navbar-settings">
+		<BottomNavItem href="{base}/app/settings" data-testid="navbar-settings">
 			<CogOutline size="lg" color="red" class="dark:text-primary-400" />
 		</BottomNavItem>
 	</BottomNav>
 	<DarkMode class="hidden" />
 {:else}
 	<Navbar let:NavContainer class="dark:bg-gray-700 print:hidden">
 		<NavContainer class="rounded-lg border bg-white px-5 py-2 dark:bg-gray-600">
-			<NavBrand href="{base}/">
-				<img src="favicon.svg" class="me-3 h-6 rounded-lg sm:h-9" alt="PPOC Gen Logo" />
+			<NavBrand href="{base}/app">
+				<img src="{base}/favicon.svg" class="me-3 h-6 rounded-lg sm:h-9" alt="PPOC Gen Logo" />
 				<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">PPOC Gen</span>
 			</NavBrand>
 			<div class="flex md:order-2">
 				<DarkMode class="black ml-2 dark:border-gray-800 dark:text-primary-200" />
 				<NavHamburger data-testid="navbar-hamburger" />
 			</div>
 			<NavUl class="order-1">
-				<NavLi href="{base}/publishers" data-testid="navbar-publishers">
+				<NavLi href="{base}/app/publishers" data-testid="navbar-publishers">
 					<div class="flex flex-row dark:text-white">
 						{$_('navbar.publishers')}
 						<UsersGroupOutline size="lg" color="red" class="dark:text-primary-400" />
 					</div>
 				</NavLi>
-				<NavLi href="{base}/schedules" data-testid="navbar-schedules">
+				<NavLi href="{base}/app/schedules" data-testid="navbar-schedules">
 					<div class="flex flex-row dark:text-white">
 						{$_('navbar.schedules')}
 						<CalendarMonthOutline size="lg" color="red" class="dark:text-primary-400" />
 					</div></NavLi
 				>
-				<NavLi href="{base}/turns" data-testid="navbar-turns">
+				<NavLi href="{base}/app/turns" data-testid="navbar-turns">
 					<div class="flex flex-row dark:text-white">
 						{$_('navbar.turns')}
 						<EditOutline size="lg" color="red" class="dark:text-primary-400" />
 					</div></NavLi
 				>
-				<NavLi href="{base}/incidences" data-testid="navbar-incidences">
+				<NavLi href="{base}/app/incidences" data-testid="navbar-incidences">
 					<div class="flex flex-row dark:text-white">
 						{$_('navbar.incidences')}
 						<BellRingOutline size="lg" color="red" class="dark:text-primary-400" />
 					</div></NavLi
 				>
-				<NavLi href="{base}/settings" data-testid="navbar-settings">
+				<NavLi href="{base}/app/settings" data-testid="navbar-settings">
 					<div class="flex flex-row dark:text-white">
 						{$_('navbar.settings')}
 						<CogOutline size="lg" color="red" class="dark:text-primary-400" />

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -2,6 +2,7 @@
 	import {base} from '$app/paths'
 	import {DarkMode} from 'flowbite-svelte'
 	import {_} from 'svelte-i18n'
+	import '../app.css'
 </script>
 
 <DarkMode class="hidden" />