update mass landing layout

website/app.vue

@@ -17,6 +17,6 @@ useCalcViewport()
 @import "vue3-lottie/dist/style.css";
 
 body {
-  @apply bg-zinc-900 text-zinc-50;
+  @apply bg-base-900 text-base-50;
 }
 </style>

website/components/Landing/Images.ts

@@ -5,33 +5,38 @@ interface Images {
 	left?: string
 	right?: string
 	scale?: number
-	characterName?: string
-	characterAuthor?: string
 }
 
-export const heroImages: Images[] = [
-	{
-		file: "renzo.jpg",
-		top: "5.5rem",
-		right: "25vw",
-		characterName: "Renzo",
-		characterAuthor: "@ozzydevs",
-	},
-	{
-		file: "ivo.png",
-		bottom: "5rem",
-		right: "8vw",
-		characterName: "Ivo",
-		characterAuthor: "@ozzydevs",
-	},
-	{
-		file: "vulpo.jpg",
-		bottom: "15rem",
-		right: "22vw",
-		characterName: "Vulpo",
-		characterAuthor: "@ozzydevs",
-	},
-]
+export const heroImages: { left: Images[]; right: Images[] } = {
+	left: [
+		{
+			file: "renzo.jpg",
+			left: "25vw",
+		},
+		{
+			file: "ivo.png",
+			left: "8vw",
+		},
+		{
+			file: "vulpo.jpg",
+			left: "22vw",
+		},
+	],
+	right: [
+		{
+			file: "renzo.jpg",
+			right: "25vw",
+		},
+		{
+			file: "ivo.png",
+			right: "8vw",
+		},
+		{
+			file: "vulpo.jpg",
+			right: "22vw",
+		},
+	],
+}
 
 export const secondSectImages: Images[] = [
 	{ file: "ozzy-sniff.png", bottom: "2rem", left: "12vw" },

website/components/Landing/LandingHero.vue

@@ -7,7 +7,7 @@ const profileContainer = ref<HTMLDivElement>()
 
 onMounted(() => {
 	ctx.value = gsap.context((self) => {
-		const artItems = self.selector!(".art-item")
+		const artItems = self.selector!(".art-item-right")
 		const scrollWrapper = self.selector!(".profile-container #wrapper")
 
 		// Trigger on-scroll
@@ -16,9 +16,8 @@ onMounted(() => {
 				scrollTrigger: {
 					trigger: scrollWrapper,
 					start: "top top",
-					end: "+=1000",
-					scrub: 0.75,
-          markers: true
+					end: "+=900",
+					scrub: 0.65,
 				},
 			})
 			.to(artItems[2], { y: -145 })
@@ -43,27 +42,37 @@ onUnmounted(() => ctx.value.revert())
 			</div>
 		</article>
 		<div class="profile-container" ref="profileContainer" aria-hidden="true">
-			<div id="wrapper" class="relative top-5">
-				<figure
-					v-for="item in heroImages"
-					class="art-item"
-					:style="{
-						top: item.top ?? undefined,
-						bottom: item.bottom ?? undefined,
-						right: item.right ?? undefined,
-					}"
-				>
-					<NuxtImg
-						:src="`/images/hero/${item.file}`"
-						sizes="lg:400px"
-						quality="75"
-						preload
-					/>
-					<figcaption class="label">
-						{{ item.characterName }} |
-						<strong>{{ item.characterAuthor }}</strong>
-					</figcaption>
-				</figure>
+			<div
+				v-for="item in heroImages.left"
+				class="art-item-left"
+				:style="{
+					top: item.top ?? undefined,
+					bottom: item.bottom ?? undefined,
+					left: item.left ?? undefined,
+				}"
+			>
+				<NuxtImg
+					:src="`/images/hero/${item.file}`"
+					sizes="lg:275px xl:400px"
+					quality="75"
+					preload
+				/>
+			</div>
+			<div
+				v-for="item in heroImages.right"
+				class="art-item-right"
+				:style="{
+					top: item.top ?? undefined,
+					bottom: item.bottom ?? undefined,
+					right: item.right ?? undefined,
+				}"
+			>
+				<NuxtImg
+					:src="`/images/hero/${item.file}`"
+					sizes="lg:275px xl:400px"
+					quality="75"
+					preload
+				/>
 			</div>
 		</div>
 	</section>
@@ -74,7 +83,7 @@ onUnmounted(() => ctx.value.revert())
 	@apply relative;
 	background: linear-gradient(
 		173.6deg,
-		rgba(33, 218, 255, 0.65) 0%,
+		rgba(2, 237, 254, 0.65) 0%,
 		rgba(154, 33, 255, 0.65) 10%,
 		rgba(255, 33, 222, 0.1) 50%,
 		rgba(225, 33, 255, 0) 80%
@@ -83,7 +92,7 @@ onUnmounted(() => ctx.value.revert())
 }
 
 .login-button {
-	@apply text-lg px-6 py-2 rounded-full border-2 border-zinc-300 duration-200;
+	@apply text-lg px-6 py-2 rounded-full border-2 border-base-300 duration-200;
 	transition-property: border;
 
 	&:hover {
@@ -92,19 +101,18 @@ onUnmounted(() => ctx.value.revert())
 }
 
 .profile-container {
-	@apply absolute top-0 right-0;
+	@apply absolute inset-0 scale-[0.9] top-5 select-none;
 }
 
 .art-item {
-	@apply relative;
-	width: 400px !important;
-
-	img {
-		@apply rounded-2xl;
-	}
+	&-left,
+	&-right {
+		@apply absolute;
+		width: 400px !important;
 
-	.label {
-		@apply absolute text-sm top-0 px-5 py-2.5 bg-opacity-10 backdrop-blur-md bg-black rounded-tl-2xl rounded-tr-2xl w-full;
+		img {
+			@apply rounded-2xl pointer-events-none;
+		}
 	}
 }
 </style>

website/components/Landing/LandingSecond.vue

@@ -54,6 +54,6 @@ onUnmounted(() => ctx.value.revert())
 }
 
 .mf-box {
-	@apply flex justify-center items-center mx-auto w-[12rem] h-[12rem] rounded-xl bg-zinc-600;
+	@apply flex justify-center items-center mx-auto w-[12rem] h-[12rem] rounded-xl bg-base-600;
 }
 </style>

website/components/Landing/LandingThird.vue

@@ -73,7 +73,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .card {
 	&-container {
-		@apply my-16 grid grid-cols-3 gap-6 mx-auto max-w-[1440px];
+		@apply my-16 grid grid-cols-1 lg:grid-cols-2 gap-6 mx-auto max-w-[1440px];
 
 		&.active > .card-item::before {
 			opacity: 1;
@@ -104,7 +104,7 @@ onMounted(() => {
 }
 
 #card-contents {
-	@apply bg-zinc-900 p-5 absolute inset-0.5 bottom-10 z-[1] m-[0.01rem];
+	@apply bg-base-900 p-5 absolute inset-0.5 bottom-10 z-[1] m-[0.01rem];
 	height: 99.125%;
 	border-radius: inherit;
 }

website/components/Login/LoginForm.vue

@@ -49,10 +49,10 @@ const password = ref("")
 }
 
 .form-label {
-  @apply absolute -top-4 text-zinc-500 font-inter uppercase font-bold opacity-75;
+  @apply absolute -top-4 text-base-500 font-inter uppercase font-bold opacity-75;
 }
 
 .form-textbox {
-  @apply px-4 py-3 text-white border-none outline-none rounded-md bg-zinc-800;
+  @apply px-4 py-3 text-white border-none outline-none rounded-md bg-base-800;
 }
 </style>

website/components/TheBaseNavbar.vue

@@ -39,7 +39,7 @@ onUnmounted(() => window.removeEventListener("scroll", handleScroll))
 				<li class="font-inter">
 					<NuxtLink
 						to="/login"
-						class="px-5 py-2.5 rounded-3xl hover:bg-purple-700 border-zinc-200 border font-bold"
+						class="px-5 py-2.5 rounded-3xl hover:bg-purple-700 border-base-200 border font-bold"
 					>
 						Sign In
 					</NuxtLink>
@@ -56,7 +56,7 @@ onUnmounted(() => window.removeEventListener("scroll", handleScroll))
 	transition-duration: 300ms;
 
 	&.scrolled {
-		@apply backdrop-blur-md border-zinc-500;
+		@apply backdrop-blur-md border-base-500;
 		background-color: rgba(24, 5, 72, 0.775);
 	}
 }

website/package.json

@@ -16,6 +16,7 @@
 		"@nuxtjs/apollo": "^5.0.0-alpha.5",
 		"@nuxtjs/color-mode": "^3.2.0",
 		"@pinia/nuxt": "^0.4.6",
+		"@tailwindcss/typography": "^0.5.9",
 		"autoprefixer": "^10.4.13",
 		"gsap": "^3.11.4",
 		"nuxt": "^3.0.0",

website/pages/index.vue

@@ -1,5 +1,9 @@
+<script setup lang="ts">
+const d = "MyFursona is a platform where you create and manage characters"
+</script>
+
 <template>
-	<Container title="MyFursona | A place where everyone belongs!">
+	<Container title="MyFursona | A place where every fur belongs!" :description="d">
 		<LandingHero />
     <LandingSecond />
     <LandingThird />

website/tailwind.config.js

@@ -24,9 +24,9 @@ module.exports = {
 				body: {
 					fontFamily: theme("fontFamily.open-sans"),
 				},
-        "#__nuxt": {
-          minHeight: '100vh',
-        }
+				"#__nuxt": {
+					minHeight: "100vh",
+				},
 			})
 		}),
 	],
@@ -36,6 +36,21 @@ module.exports = {
 				inter: ["Inter", ...defaultTheme.fontFamily.sans],
 				"open-sans": ["Open Sans", ...defaultTheme.fontFamily.sans],
 			},
+			colors: {
+				"base": {
+					DEFAULT: "#634E97",
+					50: "#FCFBFD",
+					100: "#EBE7F3",
+					200: "#C9BFDE",
+					300: "#A696C9",
+					400: "#836EB4",
+					500: "#634E97",
+					600: "#4D3D75",
+					700: "#362B54",
+					800: "#201A32",
+					900: "#0B0911",
+				},
+			},
 		},
 	},
 }

yarn.lock

@@ -1165,6 +1165,16 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@tailwindcss/typography@^0.5.9":
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"
+  integrity sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@trysound/[email protected]":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
@@ -3596,6 +3606,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -3636,6 +3651,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.pick@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
@@ -4605,6 +4625,14 @@ postcss-reduce-transforms@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
+[email protected]:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"