feat: improve card ui

KeziahMoselle · Apr 8, 2024 · d678857 · d678857
1 parent 4ac24e2
commit d678857
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 12 deletions.
diff --git a/frontend/astro.config.mjs b/frontend/astro.config.mjs
@@ -12,7 +12,7 @@ export default defineConfig({
     }
   }),
   integrations: [
-    vue(),
+    vue({ appEntrypoint: '/src/pages/_app' }),
     tailwind({
       applyBaseStyles: false,
     }),

diff --git a/frontend/package.json b/frontend/package.json
@@ -36,6 +36,7 @@
     "vee-validate": "^4.12.6",
     "vue": "^3.4.21",
     "vue-sonner": "^1.1.2",
+    "vue3-marquee": "^4.2.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/components/molecules/EldenRing/BuildCard.vue b/frontend/src/components/molecules/EldenRing/BuildCard.vue
@@ -2,21 +2,23 @@
   import type { ErBuild } from '~/payload-types'
   import Tag from '@/components/molecules/EldenRing/Tag.vue'
   import { ThumbsUpIcon } from 'lucide-vue-next'
-import EquipmentImage from '@/components/molecules/EldenRing/EquipmentImage.vue';
+  import EquipmentImage from '@/components/molecules/EldenRing/EquipmentImage.vue';
+
+  import { Vue3Marquee } from 'vue3-marquee'
 
   defineProps<{
     build?: ErBuild
   }>()
 </script>
 
 <template>
-  <article class="z-0 relative pr-5 pt-3 pb-5 border border-accent bg-background max-w-[451px]">
+  <article class="z-0 relative pr-5 pt-3 pb-5 border border-accent bg-background max-w-[451px] overflow-hidden">
     <img
       class="-z-10 absolute inset-0 object-cover object-center h-full w-full"
       src="/build-background.png"
       alt=""
       loading="lazy" />
-    <!-- Build title and like -->
+    <!-- Build title and Actions -->
     <header class="flex justify-between">
       <div class="relative h-[44px]">
         <div
@@ -25,7 +27,16 @@ import EquipmentImage from '@/components/molecules/EldenRing/EquipmentImage.vue'
             flex items-center gap-x-4
           ">
           <img class="h-6 w-auto" src="https://pub-3a5ef743ff2748219f5eb6a3adad2be7.r2.dev/test%2Fbleed.png" alt="bleed" />
-          <h3>Bleed build</h3>
+          <p class="-ml-4 w-40">
+            <Vue3Marquee
+                gradient
+                :gradient-color="[29, 29, 24]"
+                gradient-length="10%"
+                animate-on-overflow-only
+            >
+              <h3 class="ml-4">Bleed build</h3>
+            </Vue3Marquee>
+          </p>
         </div>
         <img class="w-full h-[44px]" src="/build-title.png" alt="" />
       </div>
@@ -43,15 +54,15 @@ import EquipmentImage from '@/components/molecules/EldenRing/EquipmentImage.vue'
     </div>
 
     <!-- Build preview -->
-    <div class="grid ml-8 mt-8 gap-2 md:grid-cols-3">
+    <div class="grid ml-8 mt-8 gap-2 grid-cols-2 md:grid-cols-3">
       <EquipmentImage
         src="https://pub-3a5ef743ff2748219f5eb6a3adad2be7.r2.dev/test%2Fmainhand.png"
         alt="Mainhand 1" />
       <EquipmentImage
         src="https://pub-3a5ef743ff2748219f5eb6a3adad2be7.r2.dev/test%2Fmainhand.png"
         alt="Mainhand 2" />
 
-      <div class="grid grid-cols-2 gap-2 grid-rows-2">
+      <div class="grid gap-2 col-span-4 grid-cols-4 md:col-span-1 md:grid-cols-2">
         <EquipmentImage
           v-for="(_, i) in Array.from({ length: 4 })"
           :src="`https://pub-3a5ef743ff2748219f5eb6a3adad2be7.r2.dev/test%2Ftalisman${i + 1}.png`"

diff --git a/frontend/src/pages/_app.ts b/frontend/src/pages/_app.ts
@@ -0,0 +1,6 @@
+import type { App } from 'vue';
+import Vue3Marquee from 'vue3-marquee'
+
+export default (app: App) => {
+  app.use(Vue3Marquee, { name: 'Marquee' });
+};
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
@@ -6,7 +6,7 @@ import TranslateImages from '@/components/atoms/TranslateImages.vue'
 
 <Layout title="Home">
 	<div class="relative">
-		<img class="-z-10 absolute top-0" src="/hero/gideon.webp" alt="" />
+		<img class="-z-10 absolute top-0 w-full max-h-screen object-cover object-top" src="/hero/gideon.webp" alt="" />
 	</div>
 	<section class="container px-4">
 		<h1 class="text-center font-display text-3xl md:text-7xl md:leading-xl my-20 md:mt-44">
@@ -43,10 +43,10 @@ import TranslateImages from '@/components/atoms/TranslateImages.vue'
 	<section class="mb-16">
 		<h2 class="type-h2 text-center mb-16">Most popular builds</h2>
 
-		<div class="container--xl grid gap-5 md:grid-cols-3">
-			<BuildCard />
-			<BuildCard />
-			<BuildCard />
+		<div class="container--xl grid gap-5 justify-center md:grid-cols-3">
+			<BuildCard client:idle />
+			<BuildCard client:idle />
+			<BuildCard client:idle />
 		</div>
 
 		<div class="flex justify-center mt-16">