51 lines
10 KiB
JavaScript
51 lines
10 KiB
JavaScript
|
import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{L as h}from"./next-link-BmD4fPSy.js";import{c as a}from"./cn-CDN07tui.js";import"./index-BKyvj4H5.js";import{A as g}from"./arrow-right-BNMAry-H.js";const l="transition-all duration-[var(--cp-duration-normal)]",u={blue:{bg:"bg-blue-500/10",text:"text-blue-600 dark:text-blue-400",border:"border-blue-500/20",gradient:"from-blue-500/30 to-transparent",hoverBorder:"hover:border-blue-500/40",cardBg:"from-blue-500/10 via-card to-card"},green:{bg:"bg-green-500/10",text:"text-green-600 dark:text-green-400",border:"border-green-500/20",gradient:"from-green-500/30 to-transparent",hoverBorder:"hover:border-green-500/40",cardBg:"from-green-500/10 via-card to-card"},purple:{bg:"bg-purple-500/10",text:"text-purple-600 dark:text-purple-400",border:"border-purple-500/20",gradient:"from-purple-500/30 to-transparent",hoverBorder:"hover:border-purple-500/40",cardBg:"from-purple-500/10 via-card to-card"},orange:{bg:"bg-orange-500/10",text:"text-orange-600 dark:text-orange-400",border:"border-orange-500/20",gradient:"from-orange-500/30 to-transparent",hoverBorder:"hover:border-orange-500/40",cardBg:"from-orange-500/10 via-card to-card"},cyan:{bg:"bg-cyan-500/10",text:"text-cyan-600 dark:text-cyan-400",border:"border-cyan-500/20",gradient:"from-cyan-500/30 to-transparent",hoverBorder:"hover:border-cyan-500/40",cardBg:"from-cyan-500/10 via-card to-card"},pink:{bg:"bg-pink-500/10",text:"text-pink-600 dark:text-pink-400",border:"border-pink-500/20",gradient:"from-pink-500/30 to-transparent",hoverBorder:"hover:border-pink-500/40",cardBg:"from-pink-500/10 via-card to-card"},amber:{bg:"bg-amber-500/10",text:"text-amber-600 dark:text-amber-400",border:"border-amber-500/20",gradient:"from-amber-500/30 to-transparent",hoverBorder:"hover:border-amber-500/40",cardBg:"from-amber-500/10 via-card to-card"},rose:{bg:"bg-rose-500/10",text:"text-rose-600 dark:text-rose-400",border:"border-rose-500/20",gradient:"from-rose-500/30 to-transparent",hoverBorder:"hover:border-rose-500/40",cardBg:"from-rose-500/10 via-card to-card"}};function c(r,t){if(typeof r=="function"){const n=r;return e.jsx(n,{className:t})}return r}function m({href:r,className:t,children:n}){return r?e.jsx(h,{href:r,className:t,children:n}):e.jsx("div",{className:t,children:n})}function p({href:r,icon:t,title:n,description:o,price:i,badge:d,accentColor:s="blue",className:b}){const x=u[s];return e.jsx(m,{href:r,className:a("group block",b),children:e.jsxs("div",{className:a("relative h-full flex flex-col rounded-2xl border bg-card p-6",l,"hover:-translate-y-1 hover:shadow-lg hover:border-primary/30"),children:[d&&e.jsx("span",{className:"absolute -top-2.5 right-4 rounded-full bg-success px-2.5 py-0.5 text-xs font-medium text-success-foreground",children:d}),e.jsxs("div",{className:"flex items-start gap-4 mb-4",children:[e.jsx("div",{className:a("flex h-12 w-12 items-center justify-center rounded-xl border",x.bg,x.text,x.border),children:c(t,"h-6 w-6")}),e.jsxs("div",{className:"flex-1",children:[e.jsx("h3",{className:"text-lg font-semibold text-foreground font-heading",children:n}),i&&e.jsxs("span",{className:"text-sm text-muted-foreground",children:["From ",e.jsx("span",{className:"font-medium text-foreground",children:i})]})]})]}),o&&e.jsx("p",{className:"text-sm text-muted-foreground leading-relaxed flex-grow",children:o}),r&&e.jsxs("div",{className:"mt-4 flex items-center gap-1 text-sm font-medium text-primary",children:["Learn more",e.jsx(g,{className:"h-4 w-4 transition-transform group-hover:translate-x-0.5"})]})]})})}function f({href:r,icon:t,title:n,description:o,highlight:i,className:d}){return e.jsx(m,{href:r,className:a("group block h-full",d),children:e.jsxs("div",{className:a("h-full flex flex-col","rounded-xl border bg-card","p-6",l,"border-primary/20","shadow-md shadow-primary/5","hover:border-primary/40 hover:shadow-xl hover:shadow-primary/10","hover:-translate-y-1"),children:[e.jsx("div",{className:a("flex h-12 w-12 items-center justify-center rounded-xl mb-4","transition-all group-hover:scale-105","bg-primary shadow-md shado
|
||
|
|
|
||
|
|
A flexible card component for displaying services with multiple variants:
|
||
|
|
- default: Standard card with icon, title, description, price, badge
|
||
|
|
- featured: Premium styling with enhanced shadows and highlights
|
||
|
|
- minimal: Compact icon + title only
|
||
|
|
- bento-sm/md/lg: Bento grid cards in different sizes
|
||
|
|
|
||
|
|
@example
|
||
|
|
\`\`\`tsx
|
||
|
|
// Default variant
|
||
|
|
<ServiceCard
|
||
|
|
href="/services/internet"
|
||
|
|
icon={<Wifi className="h-6 w-6" />}
|
||
|
|
title="Internet"
|
||
|
|
description="High-speed fiber internet"
|
||
|
|
price="¥3,200/mo"
|
||
|
|
accentColor="blue"
|
||
|
|
/>
|
||
|
|
|
||
|
|
// Featured variant
|
||
|
|
<ServiceCard
|
||
|
|
variant="featured"
|
||
|
|
href="/services/sim"
|
||
|
|
icon={Smartphone}
|
||
|
|
title="SIM & eSIM"
|
||
|
|
description="Mobile data plans"
|
||
|
|
highlight="1st month free"
|
||
|
|
/>
|
||
|
|
|
||
|
|
// Minimal variant
|
||
|
|
<ServiceCard
|
||
|
|
variant="minimal"
|
||
|
|
href="/services/vpn"
|
||
|
|
icon={ShieldCheck}
|
||
|
|
title="VPN"
|
||
|
|
/>
|
||
|
|
\`\`\``,methods:[],displayName:"ServiceCard",props:{href:{required:!1,tsType:{name:"string"},description:"Link destination (renders as div when omitted)"},icon:{required:!0,tsType:{name:"ReactNode"},description:'Icon element to display.\nPass a pre-styled JSX element: `icon={<Wifi className="h-6 w-6" />}`\nOr a component reference (className will be applied): `icon={Wifi}`'},title:{required:!0,tsType:{name:"string"},description:"Card title"},description:{required:!1,tsType:{name:"string"},description:"Card description (optional for minimal variant)"},price:{required:!1,tsType:{name:"string"},description:'Starting price text e.g. "¥3,200/mo"'},badge:{required:!1,tsType:{name:"string"},description:'Badge text shown at top-right e.g. "1st month free"'},highlight:{required:!1,tsType:{name:"string"},description:"Highlight text shown as a pill (alternative to badge)"},accentColor:{required:!1,tsType:{name:"union",raw:`| "blue"
|
||
|
|
| "green"
|
||
|
|
| "purple"
|
||
|
|
| "orange"
|
||
|
|
| "cyan"
|
||
|
|
| "pink"
|
||
|
|
| "amber"
|
||
|
|
| "rose"`,elements:[{name:"literal",value:'"blue"'},{name:"literal",value:'"green"'},{name:"literal",value:'"purple"'},{name:"literal",value:'"orange"'},{name:"literal",value:'"cyan"'},{name:"literal",value:'"pink"'},{name:"literal",value:'"amber"'},{name:"literal",value:'"rose"'}]},description:"Accent color for icon background"},variant:{required:!1,tsType:{name:"union",raw:`| "default"
|
||
|
|
| "featured"
|
||
|
|
| "minimal"
|
||
|
|
| "bento-sm"
|
||
|
|
| "bento-md"
|
||
|
|
| "bento-lg"`,elements:[{name:"literal",value:'"default"'},{name:"literal",value:'"featured"'},{name:"literal",value:'"minimal"'},{name:"literal",value:'"bento-sm"'},{name:"literal",value:'"bento-md"'},{name:"literal",value:'"bento-lg"'}]},description:"Card variant"},className:{required:!1,tsType:{name:"string"},description:"Additional CSS classes"}}};export{w as S};
|