2 - Making Reusable Sections

Hero Section

Originally, for the hero section, I chose to make the picture smaller and place the words around it, but the client preferred a full-sized background instead.

I switched to a full-sized dark background to help the title stand out. I also converted the original .heic photos to .webp format to improve website performance, and applied the same optimization to all other photos. I ended up liking this approach as well. I make it a priority to get frequent feedback from clients, so I don’t spend time designing something they might not agree with.

The hero section was set to 80% of the screen height to avoid giving users the “illusion of completeness” — encouraging them to scroll down while leaving a glimpse of the next section at the bottom.

The two sections were built with a grid and justified to the ends. I used a <span> to size the copyright symbol differently from the surrounding text.

Next, I created a simple theme and imported a custom font using Neue Montreal and its mono version. The style follows the elegant Helvetica family.

@theme {
  --color-brand: #A52A2A;
  --color-accent: #FFCA50;
  --color-accent: #FFCA50;
  --color-dark: #141413;
  --color-light: #F1F0E4;

  --font-neue: "NeueMontreal", sans-serif;
  --font-ppneue-mono: "PPNeueMontrealMono", sans-serif;
  ...
}

I started making components for all repeated sections, such as headers. While the page doesn’t switch between light and dark themes, I created black and white versions of every component to suit different background colors.

I built the call-to-action and footer sections. Later, I realized manually adding padding to each section wasn’t efficient, so I created a reusable section component that automatically applied font and background colors.

Call To Action Section

For the call-to-action, I wanted a small “bento box” on the bottom left corner to balance out the email input on the opposite side. It took several iterations.

Even AI-generated attempts failed, so I broke the problem into simple steps. I stopped trying to design with the original content of the boxes and instead used placeholder text.

Once the grid was done, I made the first box span the full column height.

After that, I made sure to center the leftmost box.

I reduced the padding to create a battery-shaped figure.

Then, I made sure the other two boxes were left-justified and added borders.

Finally, I added the icon and realized that I had added a left margin to the component earlier, which caused issues in the beginning. By breaking it into simple steps, I was able to achieve the final design.

Frequently Asked Questions Section

For the FAQ section, I again broke everything into its constituent parts and worked on the look before the logic. I used the standard map() function and put the data into an array of objects.

I had issues with the section closing. The text would erase slowly because of the ease-in-out effect and then snap closed.

I realized I needed to make the answer its own section, spanning the full width at the bottom, and attach the border to that instead of the FAQ question. The fix required animating the height difference, not just the answer itself. I completed it by toggling the grid rows:
isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"

I had the answers sticking out, so I hid them. At first, I tried covering the answers by using a background on the questions, but the last answer leaked out.

I eventually had to remove the background and instead hide the overflow of the answers.

Retro Overlapping Text

I wanted text with an overlapping effect. Since this text was about motion, I wanted to visually convey movement.

I set the first text to relative and then translated the overlapping text to the right. aria-hidden is used for text you don’t want to be read or highlighted.

<h1 className="relative font-bold text-[12rem]">
  <span className="relative text-accent">FUTURE</span>
  <span className="aria-hidden absolute inset-0 text-brand translate-x-2">FUTURE</span>
  <span className="aria-hidden absolute inset-0 text-dark translate-x-4">FUTURE</span>
</h1>