Terminal Quote Block
QuoteA single pull-quote styled like a code editor window, with a mock title bar, a large italic quote, and a decorative oversized closing-tag glyph.
Create a Svelte 5 (runes) single-paragraph 'quote' block styled like a code editor window. Centered, max-w-4xl card with a border and muted background. A mock title bar: three small colored dots (red/yellow/green, mimicking macOS traffic lights) on the left, and a centered monospace filename label (e.g. 'quote.txt'). Below, a blockquote with a thick left border in the primary color, containing a large italic monospace quote wrapped in curly quote marks, and a small 'footer' line styled like a code comment (e.g. `// Company Name`). In the bottom-right corner, an oversized, very low-opacity monospace `</>` glyph as a decorative watermark, absolutely positioned and non-interactive. Data-driven via a single `content: { text: string }` prop.
<script lang="ts">
type Props = { content: { text: string } };
let { content }: Props = $props();
</script>
<section class="bg-background py-12 px-4 lg:py-16">
<div class="max-w-4xl mx-auto">
<div class="relative rounded-lg border border-border bg-muted/30 p-6 lg:p-8 overflow-hidden">
<div class="flex items-center gap-2 mb-5 pb-4 border-b border-border">
<div class="flex gap-1.5">
<span class="w-3 h-3 rounded-full bg-red-400/60"></span>
<span class="w-3 h-3 rounded-full bg-yellow-400/60"></span>
<span class="w-3 h-3 rounded-full bg-green-400/60"></span>
</div>
<span class="flex-1 text-center font-mono text-xs text-muted-foreground">quote.txt</span>
</div>
<blockquote class="border-l-4 border-primary pl-6">
<p class="text-xl lg:text-2xl font-mono text-foreground leading-relaxed italic">
“{content.text}”
</p>
<footer class="mt-4 font-mono text-xs text-muted-foreground">
<span class="text-primary">// </span>Company Name
</footer>
</blockquote>
<div class="absolute bottom-0 right-0 font-mono text-[7rem] leading-none text-primary/5 select-none pointer-events-none pr-2">
{'</>'}
</div>
</div>
</div>
</section>