New index, new colors

AstroCorp · Oct 9, 2024 · cd66246 · cd66246
1 parent 34aa07c
commit cd66246
Show file tree

Hide file tree

Showing 14 changed files with 90 additions and 35 deletions.
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -13,41 +13,43 @@ const currentLocale = computed({
 </script>
 
 <template>
-	<footer class="text-white">
-		<div class="bg-green-900/95 px-2 py-8 text-center md:text-left">
+	<footer class="bg-acebooks-green-800 text-white">
+		<div class="px-2 py-8 text-center md:text-left">
 			<div class="mx-auto md:w-3/4 flex flex-col md:flex-row">
 				<div>
-					<h3 class="text-lg font-semibold text-white mb-2">{{ t('footer.legal') }}</h3>
-					<ul class="text-gray-300/95">
-						<li class="mb-2 hover:text-white">
+					<h3 class="text-lg font-semibold mb-2">{{ t('footer.legal') }}</h3>
+					<ul>
+						<li class="mb-2 hover:text-acebooks-green-500">
 							<NuxtLinkLocale to="/legal/cookies-notice">{{ t('footer.cookies') }}</NuxtLinkLocale>
 						</li>
-						<li class="mb-2 hover:text-white">
+						<li class="mb-2 hover:text-acebooks-green-500">
 							<NuxtLinkLocale to="/legal/privacy-notice">{{ t('footer.privacy') }}</NuxtLinkLocale>
 						</li>
-						<li class="hover:text-white">
+						<li class="hover:text-acebooks-green-500">
 							<NuxtLinkLocale to="/legal/terms-and-conditions">{{ t('footer.terms') }}</NuxtLinkLocale>
 						</li>
 					</ul>
 				</div>
 
 				<div class="mt-10 md:mt-0 md:ml-24">
-					<h3 class="text-lg font-semibold text-white mb-2">{{ t('footer.support') }}</h3>
-					<ul class="text-gray-300/95">
-						<li class="mb-2 hover:text-white">
+					<h3 class="text-lg font-semibold  mb-2">{{ t('footer.support') }}</h3>
+					<ul>
+						<li class="mb-2 hover:text-acebooks-green-500">
 							<NuxtLinkLocale to="/legal/faqs">{{ t('footer.faqs') }}</NuxtLinkLocale>
 						</li>
-						<li class="hover:text-white">
+						<li class="hover:text-acebooks-green-500">
 							<a :href="`mailto:${config.public.mailUsername}`">{{ t('footer.contact') }}</a>
 						</li>
 					</ul>
 				</div>
 			</div>
 		</div>
 
-		<div class="bg-black px-2 py-4">
+		<div class="bg-acebooks-green-950 px-2 py-4">
 			<div class="mx-auto md:w-3/4 flex flex-col-reverse md:flex-row items-center">
-				<div class="w-full md:w-4/5 mt-4 md:mt-0 text-center md:text-left">Copyright &copy; {{ new Date().getFullYear() }} Ace Books. {{ t('footer.copyright') }}</div>
+				<div class="w-full md:w-4/5 mt-4 md:mt-0 text-center md:text-left">
+					Copyright &copy; {{ new Date().getFullYear() }} Ace Books. {{ t('footer.copyright') }}
+				</div>
 
 				<div class="w-full md:w-1/5 flex flex-row justify-center md:justify-end">
 					<Dropdown v-model="currentLocale" :items="locales.map(localeObj => ({ text: localeObj.name || localeObj.code, value: localeObj.code }))">

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -35,7 +35,7 @@ onBeforeMount(() => {
 		}"
 	>
 		<header
-			class="fixed w-full sm:h-auto z-20 transition-all bg-green-900 bg-opacity-0 duration-200"
+			class="fixed w-full sm:h-auto z-20 transition-all bg-acebooks-green-950 bg-opacity-0 duration-200"
 			:class="{
 				'h-full': applyNavStyle,
 				'bg-opacity-75 backdrop-blur-sm': applyNavBackground || applyNavStyle,
@@ -73,9 +73,9 @@ onBeforeMount(() => {
 					>
 						<li class="sm:inline-flex sm:w-auto w-full items-center justify-center">
 							<NuxtLinkLocale to="/login">
-								<MainButton class="p-2">
+								<Button class="p-2" variant="primary">
 									{{ t('header.sign_in') }}
-								</MainButton>
+								</Button>
 							</NuxtLinkLocale>
 						</li>
 					</ul>

diff --git a/src/components/common/MainButton.vue → src/components/common/Button.vue b/src/components/common/MainButton.vue → src/components/common/Button.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 defineProps<{
 	class: string;
+	variant: 'primary' | 'secondary';
 }>();
 </script>
 

diff --git a/src/error.vue b/src/error.vue
@@ -39,12 +39,13 @@ useHead({
 			<article class="flex flex-col items-center text-center">
 				<h1 class="text-9xl text-white text-opacity-60 mb-6 text-shadow shadow-black/40">{{ error.statusCode }}</h1>
 
-				<MainButton
+				<Button
+					variant="primary"
 					@click="handleError"
 					class="text-white px-4 py-3 border-2 rounded-md uppercase bg-white bg-opacity-0 hover:bg-opacity-20 transition duration-300 ease-in-out"
 				>
 					{{ t('error.button') }}
-				</MainButton>
+				</Button>
 			</article>
 
 			<NuxtImg src="/images/bg.webp" placeholder preload loading="lazy" class="absolute top-0 left-0 -z-10 w-full h-full object-cover" />

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -31,9 +31,9 @@ useHead({
 				<p class="text-sm mt-2 mb-6 text-shadow shadow-black/75">{{ t('home.p') }}</p>
 
 				<NuxtLinkLocale to="/register">
-					<MainButton class="px-4 py-3 uppercase">
+					<Button class="px-4 py-3 uppercase" variant="primary">
 						{{ t('home.button') }}
-					</MainButton>
+					</Button>
 				</NuxtLinkLocale>
 
 				<NuxtImg src="/images/bg.webp" placeholder preload loading="lazy" class="absolute top-0 left-0 -z-10 w-full h-full object-cover" />
@@ -61,22 +61,45 @@ useHead({
 			</div>
 		</div>
 
-		<div id="content" class="flex flex-col bg-gray-100">
-			<div class="bg-gray-100 p-16 flex flex-col md:flex-row justify-center items-center">
-				<NuxtImg src="/images/info_1.webp" placeholder preload loading="lazy" class="w-96 lg:w-auto h-48 lg:h-64 rounded aspect-[25/14]" />
+		<div id="content" class="flex flex-col px-6 md:px-0 md:w-2/3 md:mx-auto">
+			<div class="text-center my-16">
+				<h2 class="text-3xl font-semibold tracking-wider mb-3 uppercase">Sobre nosotros</h2>
+				<p class="font-thin leading-7">Ace Books es un lector online que te permite llevar tu biblioteca personal a la nube. Puedes subir tus propios libros y organizarlos a tu gusto. Desde la forma en que organizas tu biblioteca hasta la experiencia de lectura. Accede a tus libros desde cualquier dispositivo, en cualquier momento, y retoma la lectura justo donde la dejaste.</p>
+			</div>
+
+			<div class="flex flex-col lg:flex-row justify-center">
+				<div class="lg:w-1/3">
+					<NuxtImg src="/images/info_1.webp" placeholder preload loading="lazy" class="rounded w-full h-full object-cover" />
+				</div>
 
-				<div class="w-96 min-w-96 pt-10 md:p-10">
-					<h2 class="text-2xl font-semibold mb-2">Tu propia biblioteca</h2>
-					<p>Almacena, ordena y disfruta de todos tus libros como quieras, trabajamos para que tengas la mejor experiencia posible.</p>
+				<div class="my-16 lg:my-0 lg:px-4 xl:px-6 lg:w-1/3">
+					<NuxtImg src="/images/info_2.webp" placeholder preload loading="lazy" class="rounded w-full  h-full object-cover" />
+				</div>
+
+				<div class="lg:w-1/3">
+					<NuxtImg src="/images/info_3.webp" placeholder preload loading="lazy" class="rounded w-full  h-full object-cover" />
 				</div>
 			</div>
 
-			<div class="bg-gray-200 p-16 flex flex-col md:flex-row-reverse justify-center items-center">
-				<NuxtImg src="/images/info_2.webp" placeholder preload loading="lazy" class="w-96 lg:w-auto h-48 lg:h-64 rounded aspect-[25/14]" />
+			<div class="flex flex-col xl:flex-row my-16">
+				<div class="xl:w-1/2 text-right">
+					<h3 class="text-2xl font-semibold tracking-wider uppercase mb-4">Tu propia biblioteca</h3>
+					<p class="leading-7">Cuando tu colección crece más que tu espacio, Ace Books amplía tus horizontes. Sube tus libros, organízalos como quieras y accede desde cualquier dispositivo. Tu colección vive en la nube, siempre disponible para ti. Personaliza tu experiencia de lectura y retoma tus historias justo donde las dejaste. Con Ace Books, tú decides cómo y cuándo disfrutar de tus libros, sin límites ni restricciones.</p>
+				</div>
+
+				<div class="h-0.5 w-full xl:w-0.5 my-16 xl:my-0 xl:mx-8 xl:h-full bg-acebooks-green-200"></div>
 
-				<div class="w-96 min-w-96 pt-10 md:p-10">
-					<h2 class="text-2xl font-semibold mb-2">Siempre disponible</h2>
-					<p>Puedes acceder a tu biblioteca para disfrutar de tus libros desde cualquier dispositivo, ya sea un ordenador, tablet o smartphone.</p>
+				<div class="xl:w-1/2">
+					<h3 class="text-2xl font-semibold tracking-wider uppercase mb-4">Un sin fin de opciones</h3>
+					<ul class="list-inside list-disc leading-7">
+						<li>Admitimos una gran variedad de formatos.</li>
+						<li>Organiza tus libros como desees.</li>
+						<li>Accede desde cualquier dispositivo.</li>
+						<li>Personaliza tu experiencia de lectura.</li>
+						<li>Retoma tus historias justo donde las dejaste.</li>
+						<li>Anota todo lo que necesites.</li>
+						<li>¡Y mucho más!</li>
+					</ul>
 				</div>
 			</div>
 		</div>

diff --git a/src/pages/legal/cookies-notice.vue b/src/pages/legal/cookies-notice.vue
@@ -28,7 +28,7 @@ useHead({
 	<div class="flex flex-col justify-between min-h-screen">
 		<Header />
 
-		<div class="relative px-4 pt-14 h-64 flex flex-col items-center justify-center bg-green-900/95 text-white">
+		<div class="relative px-4 pt-14 h-64 flex flex-col items-center justify-center bg-acebooks-green-900 text-white">
 			<h1 class="text-2xl">{{ t('cookies.title') }}</h1>
 			<div class="border my-2 border-white/40 w-1/6"></div>
 			<time class="trext-lg">{{ t('cookies.date') }}</time>

diff --git a/src/pages/legal/faqs.vue b/src/pages/legal/faqs.vue
@@ -28,7 +28,7 @@ useHead({
 	<div class="flex flex-col justify-between min-h-screen">
 		<Header />
 
-		<div class="relative px-4 pt-14 h-64 flex flex-col items-center justify-center bg-green-900/95 text-white">
+		<div class="relative px-4 pt-14 h-64 flex flex-col items-center justify-center bg-acebooks-green-900 text-white">
 			<h1 class="text-2xl">{{ t('cookies.title') }}</h1>
 			<div class="border my-2 border-white/40 w-1/6"></div>
 			<time class="trext-lg">{{ t('cookies.date') }}</time>

diff --git a/src/pages/legal/privacy-notice.vue b/src/pages/legal/privacy-notice.vue
@@ -28,7 +28,7 @@ useHead({
 	<div class="flex flex-col justify-between min-h-screen">
 		<Header />
 
-		<div class="relative px-4 pt-14 h-64 flex flex-col items-center justify-center bg-green-900/95 text-white">
+		<div class="relative px-4 pt-14 h-64 flex flex-col items-center justify-center bg-acebooks-green-900 text-white">
 			<h1 class="text-2xl">{{ t('privacy.title') }}</h1>
 			<div class="border my-2 border-white/40 w-1/6"></div>
 			<time class="trext-lg">{{ t('privacy.date') }}</time>

diff --git a/src/pages/legal/terms-and-conditions.vue b/src/pages/legal/terms-and-conditions.vue
@@ -28,7 +28,7 @@ useHead({
 	<div class="flex flex-col justify-between min-h-screen">
 		<Header />
 
-		<div class="relative px-4 pt-14 h-64 flex flex-col items-center justify-center bg-green-900/95 text-white">
+		<div class="relative px-4 pt-14 h-64 flex flex-col items-center justify-center bg-acebooks-green-900 text-white">
 			<h1 class="text-2xl">{{ t('terms.title') }}</h1>
 			<div class="border my-2 border-white/40 w-1/6"></div>
 			<time class="trext-lg">{{ t('terms.date') }}</time>

diff --git a/src/public/images/bg.webp b/src/public/images/bg.webp
diff --git a/src/public/images/info_1.webp b/src/public/images/info_1.webp
diff --git a/src/public/images/info_2.webp b/src/public/images/info_2.webp
diff --git a/src/public/images/info_3.webp b/src/public/images/info_3.webp
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -34,6 +34,34 @@ export default {
 			animation: {
 				'pulse-v2': 'pulse-effect 1.2s ease infinite !important',
 			},
+			colors: {
+				'acebooks-green': {
+					'50': '#effef6',
+					'100': '#d9ffea',
+					'200': '#b5fdd6',
+					'300': '#7cf9b7',
+					'400': '#3cec90',
+					'500': '#12d570',
+					'600': '#08b159',
+					'700': '#0b8a48',
+					'800': '#0e6d3d',
+					'900': '#0c4d2d',
+					'950': '#01321a',
+				},
+				'acebooks-brown': {
+					'50': '#f7f5ef',
+					'100': '#ebe6d6',
+					'200': '#d8cdb0',
+					'300': '#c2af82',
+					'400': '#b0955f',
+					'500': '#a18251',
+					'600': '#8a6944',
+					'700': '#6d5038',
+					'800': '#5e4535',
+					'900': '#523c31',
+					'950': '#2f2019',
+				},
+			},
 		},
 	},
 	plugins: [