6199f78cfb
- FeatureCard: px-7 pt-8 pb-8 (design: padding [32,28]), h-full for equal heights - HeroSection: py-20 on mobile, gap-20 between columns, screenshot 380px - PrivacyBanner: py-14, gap-20, stat items min-w-[100px] - SeeItLiveSection: py-24, max-w-[640px] header, block img - FeaturesSection: gap-[72px] section, flex wrapper for equal-height cards - ScreenshotsSection: lg:h-[340px] images, px-6 py-5 info, gap-2 - HowItWorksSection: gap-20 columns, gap-10 steps, divide-y billing items, p-10 card - SupportSection: py-24, gap-16, flex wrappers for equal-height cards - ContactSection: py-20, gap-20, p-9 form card, gap-5 fields - AppFooter: pt-14 pb-7, border-b [#1E293B], pt-5 bottom bar
29 lines
924 B
Vue
29 lines
924 B
Vue
<script setup lang="ts">
|
||
import type { Component } from 'vue'
|
||
|
||
defineProps<{
|
||
icon: Component
|
||
iconColor: string
|
||
iconBg: string
|
||
title: string
|
||
description: string
|
||
}>()
|
||
</script>
|
||
|
||
<template>
|
||
<!-- Design: cornerRadius 14, padding [32, 28], gap 14 -->
|
||
<div class="flex flex-col gap-3.5 bg-[#F8FAFC] border border-[#E2E8F0] rounded-2xl px-7 pt-8 pb-8 h-full">
|
||
<!-- Icon box: 44×44, cornerRadius 10 -->
|
||
<div
|
||
class="w-11 h-11 rounded-[10px] flex items-center justify-center shrink-0"
|
||
:style="{ backgroundColor: iconBg }"
|
||
>
|
||
<component :is="icon" :size="22" :stroke-width="1.75" :style="{ color: iconColor }" />
|
||
</div>
|
||
<!-- Title: 16px semibold -->
|
||
<h3 class="text-[#0F172A] font-semibold text-base leading-snug">{{ title }}</h3>
|
||
<!-- Description: 13px, lineHeight 1.65 -->
|
||
<p class="text-[#64748B] text-[13px] leading-[1.65]">{{ description }}</p>
|
||
</div>
|
||
</template>
|