Skip to content

Commit 5979d10

Browse files
LeThanhPhongLTVLeThanhPhongLTV
authored
fix(card): Fix Bravo card | JIRA: PT-136 (#72)
1 parent c75f259 commit 5979d10

File tree

1 file changed

+56
-68
lines changed

1 file changed

+56
-68
lines changed

‎src/modules/cards/views/index.vue

Lines changed: 56 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -369,74 +369,64 @@
369369
class="text-center bg-gradient-to-r from-[#2dce89] to-[#2dcecc]"
370370
>
371371
<template #header>
372-
<h3 class="font-semibold text-slate-50 py-4.5">BRAVO PACK</h3>
372+
<h3 class="font-semibold text-white py-4">BRAVO PACK</h3>
373373
</template>
374-
<div class="px-16 flex flex-col items-center pt-4">
375-
<div class="text-white text-5xl pt-4 pb-2 font-semibold">$49</div>
374+
<div class="flex flex-col items-center p-6">
375+
<div class="text-white text-[44px] font-semibold">$49</div>
376376
<span class="text-white">per application</span>
377377

378-
<div class="table w-1/3 my-6">
378+
<div class="table w-1/3 my-4">
379379
<div class="table-row-group">
380-
<div class="table-row h-14">
380+
<div class="table-row h-16">
381381
<div class="table-cell w-10 justify-center align-middle">
382-
<div class="flex pl-4">
383-
<font-awesome-icon
384-
class="rounded-full p-1.5 text-slate-500 bg-white"
385-
:icon="['fas', 'terminal']"
386-
size="xs"
387-
/>
382+
<div class="w-6 h-6 rounded-full text-slate-500 bg-white">
383+
<font-awesome-icon :icon="['fas', 'terminal']" size="xs" />
388384
</div>
389385
</div>
390386
<div class="table-cell w-10 justify-center align-middle">
391-
<div class="pl-2 mr-8">
387+
<div class="pl-2">
392388
<span class="text-sm text-white">Complete documentation</span>
393389
</div>
394390
</div>
395391
</div>
396392

397-
<div class="table-row h-14">
393+
<div class="table-row h-16">
398394
<div class="table-cell w-10 justify-center align-middle">
399-
<div class="flex pl-4">
400-
<font-awesome-icon
401-
class="rounded-full p-1.5 text-slate-500 bg-white"
402-
:icon="['fas', 'pen-fancy']"
403-
size="xs"
404-
/>
395+
<div class="w-6 h-6 rounded-full text-slate-500 bg-white">
396+
<font-awesome-icon :icon="['fas', 'pen-fancy']" size="xs" />
405397
</div>
406398
</div>
407399
<div class="table-cell w-10 justify-center align-middle">
408-
<div class="pl-2 mr-8">
400+
<div class="pl-2">
409401
<span class="text-sm text-white">Working materials in Sketch</span>
410402
</div>
411403
</div>
412404
</div>
413405

414-
<div class="table-row h-14">
406+
<div class="table-row h-16">
415407
<div class="table-cell w-10 justify-center align-middle">
416-
<div class="flex pl-4">
417-
<font-awesome-icon
418-
class="rounded-full p-1.5 text-slate-500 bg-white"
419-
:icon="['fas', 'hard-drive']"
420-
size="xs"
421-
/>
408+
<div class="w-6 h-6 rounded-full text-slate-500 bg-white">
409+
<font-awesome-icon :icon="['fas', 'hard-drive']" size="xs" />
422410
</div>
423411
</div>
424412
<div class="table-cell w-10 justify-center align-middle">
425-
<div class="pl-2 mr-8">
413+
<div class="pl-2">
426414
<span class="text-sm text-white">2GB cloud storage</span>
427415
</div>
428416
</div>
429417
</div>
430418
</div>
431419
</div>
432-
<div class="mb-3">
433-
<el-button type="primary" class="py-5 w-32 font-semibold text-normal"
420+
<div>
421+
<el-button type="primary" class="py-5 w-[142,56px] font-semibold text-normal"
434422
>Start free trial</el-button
435423
>
436424
</div>
437425
</div>
438-
<el-divider class="border-[#2bc6a1]" />
439-
<el-link :underline="false" class="text-white text-base hover:text-slate-200 pb-4"
426+
<el-divider class="border-[#2bc6a1] my-5" />
427+
<el-link
428+
:underline="false"
429+
class="text-white text-base font-normal hover:text-slate-200 pb-5"
440430
>Request a demo</el-link
441431
>
442432
</el-card>
@@ -487,74 +477,72 @@
487477
<div class="mt-7">
488478
<el-card :body-style="{ padding: '0px' }" class="text-center border-white">
489479
<template #header>
490-
<h3 class="font-semibold text-indigo-500 py-4.5">BRAVO PACK</h3>
480+
<h4 class="font-semibold text-primary-blue py-4">BRAVO PACK</h4>
491481
</template>
492-
<div class="px-16 flex flex-col items-center pt-4">
493-
<div class="text-slate-500 text-5xl pt-4 pb-2 font-semibold">$49</div>
494-
<span class="text-normal">per application</span>
482+
<div class="flex flex-col items-center p-6">
483+
<div class="text-normal text-[44px] font-semibold">$49</div>
484+
<span class="text-muted font-normal">per application</span>
495485

496-
<div class="table w-1/3 my-6">
486+
<div class="table w-1/3 my-4">
497487
<div class="table-row-group">
498-
<div class="table-row h-14">
488+
<div class="table-row h-16">
499489
<div class="table-cell w-10 justify-center align-middle">
500-
<div class="flex pl-4">
501-
<font-awesome-icon
502-
class="rounded-full p-1.5 text-white bg-gradient-to-l from-indigo-500 to-indigo-400"
503-
:icon="['fas', 'terminal']"
504-
size="xs"
505-
/>
490+
<div
491+
class="w-6 h-6 rounded-full text-white bg-gradient-to-l from-indigo-500 to-indigo-400"
492+
>
493+
<font-awesome-icon :icon="['fas', 'terminal']" size="xs" />
506494
</div>
507495
</div>
508496
<div class="table-cell w-10 justify-center align-middle">
509-
<div class="pl-2 mr-8">
510-
<span class="text-sm text-normal">Complete documentation</span>
497+
<div class="pl-2">
498+
<span class="text-sm font-normal text-muted">Complete documentation</span>
511499
</div>
512500
</div>
513501
</div>
514502

515-
<div class="table-row h-14">
503+
<div class="table-row h-16">
516504
<div class="table-cell w-10 justify-center align-middle">
517-
<div class="flex pl-4">
518-
<font-awesome-icon
519-
class="rounded-full p-1.5 text-white bg-gradient-to-l from-indigo-500 to-indigo-400"
520-
:icon="['fas', 'pen-fancy']"
521-
size="xs"
522-
/>
505+
<div
506+
class="w-6 h-6 rounded-full text-white bg-gradient-to-l from-indigo-500 to-indigo-400"
507+
>
508+
<font-awesome-icon :icon="['fas', 'pen-fancy']" size="xs" />
523509
</div>
524510
</div>
525511
<div class="table-cell w-10 justify-center align-middle">
526-
<div class="pl-2 mr-8">
527-
<span class="text-sm text-normal">Working materials in Sketch</span>
512+
<div class="pl-2">
513+
<span class="text-sm font-normal text-muted"
514+
>Working materials in Sketch</span
515+
>
528516
</div>
529517
</div>
530518
</div>
531519

532-
<div class="table-row h-14">
520+
<div class="table-row h-16">
533521
<div class="table-cell w-10 justify-center align-middle">
534-
<div class="flex pl-4">
535-
<font-awesome-icon
536-
class="rounded-full p-1.5 text-white bg-gradient-to-l from-indigo-500 to-indigo-400"
537-
:icon="['fas', 'hard-drive']"
538-
size="xs"
539-
/>
522+
<div
523+
class="w-6 h-6 rounded-full text-white bg-gradient-to-l from-indigo-500 to-indigo-400"
524+
>
525+
<font-awesome-icon :icon="['fas', 'hard-drive']" size="xs" />
540526
</div>
541527
</div>
542528
<div class="table-cell w-10 justify-center align-middle">
543-
<div class="pl-2 mr-8">
544-
<span class="text-sm text-normal">2GB cloud storage</span>
529+
<div class="pl-2">
530+
<span class="text-sm font-normal text-muted">2GB cloud storage</span>
545531
</div>
546532
</div>
547533
</div>
548534
</div>
549535
</div>
550-
<div class="mb-3">
551-
<el-button class="py-5 w-32 font-semibold text-normal" type="primary"
536+
<div>
537+
<el-button class="py-5 w-[142,56px] font-semibold text-normal" type="primary"
552538
>Start free trial</el-button
553539
>
554540
</div>
555541
</div>
556-
<el-divider />
557-
<el-link :underline="false" class="text-normal text-base hover:text-slate-500 pb-4"
542+
<el-divider class="my-5" />
543+
<el-link
544+
:underline="false"
545+
class="text-muted hover:text-muted font-normal text-base pb-5"
558546
>Request a demo</el-link
559547
>
560548
</el-card>

0 commit comments

Comments
 (0)