What would be the best structure for the following case: a landing page style that will be used for several companies, but each company has its own logo, color, and text, but always the same design style.
#landing page
jagged stream
forest torrentBOT
Hi @jagged stream. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro's component-based design and layout system would be ideal for this use case. You can create a base layout that defines the common design style for all the landing pages. This layout can include placeholders for the logo, color scheme, and text content that will be unique for each company.
For each company, you can create a separate Astro component that imports the base layout and provides the company-specific logo, color, and text. This way, you can maintain a consistent design style across all landing pages while allowing for company-specific customization.
Here's a simplified example based on the information from the Astro documentation:
---
// Import the base layout
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout>
<h1>{companyName}</h1>
<img src={logoUrl} alt={companyName + ' logo'} />
<p>{companyDescription}</p>
</BaseLayout>
In this example, companyName, logoUrl, and companyDescription would be variables that you define for each company.
Astro also supports nesting layouts, which could be useful if you have multiple levels of common design elements across different groups of companies.