Reimann Inverstors

Startup and Family section

The website was designed to clearly reflect Reimann Investors' dual investment focus:

• capital market investments
• corporate direct investments in digital commerce.

To enhance usability, distinct color palettes were applied—light green for the Family section, dark green for the Startups section, and a neutral palette for general pages such as Legal Notice and Imprint. This deliberate design choice ensures intuitive navigation and visually reinforces the distinction between the categories.

Theme and components

We used a TailwindCss plugin to implement the theming, so we could style the components once and the color change would be easily handled based on the page category.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-themer"),
    // ...
  ],
};

after adding the plugin to the config, the only remaining step is specifying the colors and the classes:

 themes: [
        {
          name: "STARTUPS_PAGE",
          extend: {
            colors: {
              "hyam-primary": "#014F2D",
              "hyam-footer-text": "#FFFAE0",
              "hyam-footer": "#014F2D",
            },
          },
        },
        {
          name: "FAMILY_OFFICE_PAGE",
          extend: {
            colors: {
              "hyam-primary": "#4D830F",
              "hyam-footer-text": "#FFFAE0",
              "hyam-footer": "#4D830F",
            },
          },
        },
      ],

This way toggling the theme became as simple as adding a class to the Page layout.

Animations

The animations that I enjoyed the most doing in this website is in the portfolio page. When the filtering criteria of the SaaS companies change the cards are animated with a staggered effect (using Framer motion).

There is also an animation on hover that change the background color and display the button, this animation was simple enough to be done using only TailwindCss (using the group-hover: pseudo class). Simple and satisfying!

Contact

I’ll leave it at that. If you’d like to know more about the project or have a chat, feel free to reach out to me at: bernasca9@gmail.com