Got it. You want the text to be taller, more like the vertically prominent numbers in the reference picture.
I'll achieve this by increasing the font size and tightening the line height of the h1 element. This will make the characters larger and more vertically compact, giving them that tall, substantial appearance you're looking for.
Here is the Quick Edit for home-content.tsx:
I've updated the h1 element's classes:
text-6xl sm:text-7xl md:text-8xl to text-7xl sm:text-8xl md:text-9xl.leading-none to make the text fill its vertical space more densely, enhancing the tall appearance.This should give the title the taller, more impactful presence you're looking for, similar to the reference image.
Okay, I understand you want the text to be significantly taller—effectively twice its normal height—while trying to maintain its current width. This is a very specific aspect ratio change.
The most direct way to achieve this in CSS is by using a transform: scaleY(2). However, please be aware that this will stretch the font vertically and can cause some distortion (vertical strokes will appear thicker compared to horizontal ones). Standard fonts are not typically designed to be scaled this way.
I will:
tailwind.config.ts to support a scale-y-200 utility (for scaleY(2)).h1 element in HomeContent.tsx.h1 to create more space below it, as the visual height will increase significantly.Here are the changes:
Key Changes:
tailwind.config.ts:
'200': '2' to theme.extend.scale. This allows you to use the class scale-y-200.HomeContent.tsx (h1 element):
scale-y-200 to stretch the text to twice its normal height.origin-center to ensure scaling happens from the center. While this is often default, explicitly stating it can be good for clarity with transforms.mb-4 to mb-10 to provide more space below the visually taller text.mt-8 to the <p> tag below the h1 to ensure it doesn't get overlapped by the transformed h1. The scale-y transform doesn't change the original layout box of the element, so surrounding elements need adjustment.This will make the text appear twice as tall. As mentioned, this will distort the font. If the distortion is undesirable, the best approach would be to find or create a custom font that is inherently very tall and condensed.