Skip to content

Commit d2cc3e7

Browse files
dipankardas011dipankardas011
authored
Feature/company (#15)
* added initial development of the page Signed-off-by: Dipankar Das <[email protected]> * improvements in the context Signed-off-by: Dipankar Das <[email protected]> * feat(content): update messaging for clarity and focus Refined homepage, mission, and product descriptions to emphasize fast, efficient, and sustainable computing. Updated product highlights for ksctl CLI and dashboard, clarifying features and benefits. Commented out CallToAction components on several pages for future revision. Signed-off-by: Dipankar Das <[email protected]> * feat: integrate Brevo newsletter form in footer Replaced the disabled email subscription form in AppFooter with a fully functional Brevo (Sendinblue) newsletter subscription form, including Cloudflare Turnstile captcha and styled error/success messages. Updated default site title and description to emphasize sustainable computing. Adjusted ProductHighlights tagline for clarity. Added Brevo form styles and scripts to the main layout for seamless integration. Signed-off-by: Dipankar Das <[email protected]> * feat(footer): show newsletter form only in production Display the newsletter subscription form in the footer only when running in production mode. In development, show a disabled input and message indicating the newsletter is unavailable. This prevents test signups and clarifies the feature's status during development. Co-Developed-By: Claude <[email protected]> Signed-off-by: Dipankar Das <[email protected]> * feat(ui): move GitHub button to Hero section Relocated the GitHub "Star" button from the header to the Hero section for better visibility and improved user experience. Updated styling and removed unused import from AppHeader.astro. Signed-off-by: Dipankar Das <[email protected]> * feat(ui): update hero and highlights for ksctl cli branding Refactored HeroProduct and ProductHighlights components to feature the ksctl logo, product name, and a new tagline. Updated descriptions to emphasize single-command Kubernetes cluster operations, sustainability, and cost optimization. Minor header logo visibility fix. Signed-off-by: Dipankar Das <[email protected]> * feat(about): update team and company info for accuracy Revised AboutCompany timeline and story to reflect updated mission and focus on fast, efficient, and sustainable computing. Updated TeamMembers with real team profiles and removed generic placeholders. Adjusted stats for GitHub stars and contributors. Improved About Us page tagline for clarity. Signed-off-by: Dipankar Das <[email protected]> * Updated the docs Signed-off-by: Dipankar Das <[email protected]> * fixed the header bg width Signed-off-by: Dipankar Das <[email protected]> --------- Signed-off-by: Dipankar Das <[email protected]>
1 parent ecc57dc commit d2cc3e7

19 files changed

+1483
-129
lines changed

‎.astro/types.d.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
/// <reference types="astro/client" />
2-
/// <reference path="content.d.ts" />

‎AGENTS.md‎

Lines changed: 70 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,28 +38,66 @@ This project uses **pnpm** as the package manager (configured in GitHub Actions)
3838

3939
```
4040
src/
41-
├── components/ # Astro components (all sections of the landing page)
41+
├── components/ # Astro components (23 components for various sections)
42+
│ ├── AboutCompany.astro
43+
│ ├── AppFooter.astro
44+
│ ├── AppHeader.astro (navigation with product dropdown)
45+
│ ├── Blog.astro
46+
│ ├── CallToAction.astro
47+
│ ├── ComingSoon.astro (reusable for unreleased products)
48+
│ ├── CompanyValues.astro
49+
│ ├── Container.astro
50+
│ ├── FAQ.astro
51+
│ ├── Features.astro
52+
│ ├── HeroHome.astro
53+
│ ├── HeroProduct.astro
54+
│ ├── HowItWorks.astro
55+
│ ├── MissionVision.astro
56+
│ ├── ProductHighlights.astro
57+
│ ├── StarButton.astro
58+
│ ├── Stats.astro
59+
│ ├── SustainabilityVisual.astro
60+
│ └── TeamMembers.astro
4261
├── layouts/ # Layout wrapper (Layout.astro with header/footer)
43-
├── pages/ # Routes (currently only index.astro)
62+
├── pages/ # File-based routing
63+
│ ├── index.astro # Home page
64+
│ ├── aboutus.astro # About Us page
65+
│ └── product/
66+
│ ├── ksctl.astro # ksctl product page
67+
│ └── kubmin.astro # kubmin coming soon page
4468
└── styles/ # Global CSS (custom animations, theme variables)
69+
└── global.css
4570
4671
public/
4772
├── images/ # Static assets
48-
└── *.svg, *.ico # Favicons and logos
73+
│ └── avatars/ # Team member photos
74+
├── ksctl-logo.svg
75+
├── kubmin-logo.svg
76+
└── *.ico, *.svg # Favicons
4977
```
5078

5179
### Key Architecture Patterns
5280

53-
**Single Page Application:** The site is currently a single-page marketing site (`index.astro`) that imports and composes multiple section components.
81+
**Multi-Page Application:** The site has evolved from a single-page to a multi-page structure with:
82+
- **Home page** (`index.astro`): Company mission, vision, values, and product overview
83+
- **Product pages** (`product/ksctl.astro`, `product/kubmin.astro`): Dedicated pages for each product with detailed features
84+
- **About page** (`aboutus.astro`): Company information and team members
5485

55-
**Component Structure:** Each major section (Features, FAQ, Stats, etc.) is a standalone `.astro` component in `src/components/`. The main page at `src/pages/index.astro` assembles these sections in sequence within the `Layout.astro` wrapper.
86+
**Routing Structure:**
87+
- `/` → Home page with company overview and product highlights
88+
- `/aboutus` → About Us page with team members (Dipankar Das, Praful, Saiyam Pathak)
89+
- `/product/ksctl` → ksctl CLI product page with features, how it works, sustainability info, stats, blog, and FAQ
90+
- `/product/kubmin` → kubmin coming soon page
91+
92+
**Component Structure:** Each major section is a standalone `.astro` component in `src/components/`. Pages assemble these sections in sequence within the `Layout.astro` wrapper. Components are reusable and props-based (e.g., `ComingSoon`, `HeroProduct`).
5693

5794
**Layout System:** `Layout.astro` provides the global structure:
5895
- Meta tags, fonts (Inter + Urbanist), and Alpine.js CDN
59-
- Persistent `AppHeader` and `AppFooter` components
96+
- Persistent `AppHeader` (with product dropdown navigation) and `AppFooter` (with social links and resources)
6097
- Dark mode initialization (`darkMode: true` by default)
6198
- Back-to-top button with scroll visibility logic
62-
- Google Analytics integration (gtag.js)
99+
- Google Analytics integration (gtag.js with tracking ID `G-7PBL3S9S8W`)
100+
- Brevo newsletter form integration (production-only)
63101

64102
**Styling Architecture:**
65103
- Primary color: Teal (`#14b8a6`) defined in both Tailwind config and CSS variables
@@ -69,13 +107,27 @@ public/
69107
- Typography: Urbanist for headings, Inter for body text
70108

71109
**State Management:** Minimal client-side state using Alpine.js for:
72-
- Dark mode toggling (though currently forced to dark)
73110
- Scroll-based interactions (back-to-top button)
111+
- Mobile hamburger menu toggle in header
112+
- Product dropdown navigation
74113
- Any interactive components use `x-data` attributes
75114

76115
### Component Composition Pattern
77116

78-
Components are self-contained sections that can be commented out in `index.astro` if not needed (see existing commented sections like `DashboardPreview`, `ComparisonTabs`, `Testimonials`, `Pricing`).
117+
Components are self-contained sections that can be composed in different page layouts:
118+
- **Home page**: Uses `HeroHome`, `MissionVision`, `CompanyValues`, `ProductHighlights`
119+
- **Product pages**: Use `HeroProduct`, `Features`, `HowItWorks`, `SustainabilityVisual`, `Stats`, `Blog`, `FAQ`
120+
- **About page**: Uses `AboutCompany`, `MissionVision`, `TeamMembers`
121+
- **Coming soon pages**: Use `ComingSoon` component with props
122+
123+
### Navigation Structure
124+
125+
**AppHeader** includes:
126+
- Logo linking to home
127+
- "Products" dropdown with ksctl (Available) and kubmin (Coming Soon) entries
128+
- "About Us" link
129+
- External links: Docs, Community (Google Groups), GitHub
130+
- Mobile-responsive hamburger menu
79131

80132
## Development Notes
81133

@@ -118,9 +170,16 @@ Components are self-contained sections that can be commented out in `index.astro
118170
- Responsive breakpoints following Tailwind's defaults
119171

120172
**External Links:**
121-
- Documentation: https://docs.ksctl.com/docs/getting-started/
122-
- GitHub repository: Links to ksctl org via StarButton component
173+
- Documentation: https://docs.ksctl.com/
174+
- GitHub: https://github.com/ksctl
175+
- Community: Google Groups forum
176+
- Social: Twitter/X (@ksctl_org), Discord (discord.ksctl.com), LinkedIn
123177
- Analytics: Google Analytics tracking ID `G-7PBL3S9S8W`
178+
- Newsletter: Brevo forms integration (production only)
179+
180+
**Products:**
181+
- **ksctl**: Available - Cloud-agnostic Kubernetes CLI for multi-cloud deployments
182+
- **kubmin**: Coming Soon - Kubernetes management tool (planned for Q2 2025)
124183

125184
## TypeScript Configuration
126185

‎public/kubmin-logo.svg‎

Lines changed: 48 additions & 0 deletions
Loading

‎src/components/AboutCompany.astro‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
---
2+
import Container from "./Container.astro";
3+
4+
const timeline = [
5+
{
6+
year: "2023",
7+
title: "Project Inception",
8+
description: "ksctl was born from the realization that Kubernetes cluster creation can be a single command and cloud agnostic and diverse choices."
9+
},
10+
{
11+
year: "2024",
12+
title: "First Stable Release",
13+
description: "Launched v1.0 with multi-cloud support and carbon-aware region selection, gaining traction in the open-source community."
14+
},
15+
{
16+
year: "2025",
17+
title: "Ecosystem Growth",
18+
description: "Expanded features with advanced sustainability metrics, cost optimization, and a growing contributor base."
19+
},
20+
{
21+
year: "Future",
22+
title: "kubmin Launch",
23+
description: "Preparing to launch kubmin, our Sustainable Workload Management"
24+
}
25+
];
26+
---
27+
28+
<section class="relative py-24 bg-gradient-to-b from-white to-gray-50/50 dark:from-gray-900 dark:to-gray-800/50">
29+
<Container>
30+
<!-- Section Header -->
31+
<div class="text-center mb-16">
32+
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
33+
Our <span class="bg-gradient-to-r from-primary to-green-500 bg-clip-text text-transparent">Story</span>
34+
</h2>
35+
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
36+
How we're building the Fast, Efficient and Sustainable Computing
37+
</p>
38+
</div>
39+
40+
<!-- Founding Story -->
41+
<div class="max-w-4xl mx-auto mb-20">
42+
<div class="bg-white dark:bg-gray-800/70 rounded-2xl border border-gray-100 dark:border-gray-700/30 p-8 md:p-12">
43+
<div class="flex items-start mb-6">
44+
<div class="flex-shrink-0 w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-teal-500 flex items-center justify-center shadow-lg shadow-primary/30 mr-6">
45+
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
46+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
47+
</svg>
48+
</div>
49+
<div>
50+
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">The Beginning</h3>
51+
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
52+
ksctl was born from a simple observation: Kubernetes has revolutionized how we deploy applications, but the environmental cost, operational expertise of cloud infrastructure continues to grow unchecked. We set out to change that.
53+
</p>
54+
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
55+
What started as an experiment to optimize cloud deployments for cost and carbon efficiency has evolved into a comprehensive suite of tools that make sustainable infrastructure accessible to every organization, regardless of size or technical expertise.
56+
</p>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
62+
<!-- Timeline -->
63+
<div class="max-w-5xl mx-auto">
64+
<h3 class="text-3xl font-bold text-gray-900 dark:text-white text-center mb-12">
65+
Our Journey
66+
</h3>
67+
68+
<div class="relative">
69+
<!-- Vertical Line -->
70+
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-primary to-green-500 opacity-30"></div>
71+
72+
<!-- Timeline Items -->
73+
<div class="space-y-12">
74+
{timeline.map((item, index) => (
75+
<div class:list={[
76+
"relative flex items-center",
77+
index % 2 === 0 ? "justify-start" : "justify-end"
78+
]}>
79+
<!-- Content -->
80+
<div class:list={[
81+
"w-5/12",
82+
index % 2 === 0 ? "pr-8 text-right" : "pl-8 text-left"
83+
]}>
84+
<div class="group bg-white dark:bg-gray-800/70 rounded-xl border border-gray-100 dark:border-gray-700/30 p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
85+
<span class="inline-block text-primary font-bold text-lg mb-2">{item.year}</span>
86+
<h4 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
87+
{item.title}
88+
</h4>
89+
<p class="text-gray-600 dark:text-gray-400">
90+
{item.description}
91+
</p>
92+
</div>
93+
</div>
94+
95+
<!-- Center Dot -->
96+
<div class="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full bg-gradient-to-br from-primary to-teal-500 border-4 border-white dark:border-gray-900 shadow-lg z-10"></div>
97+
</div>
98+
))}
99+
</div>
100+
</div>
101+
</div>
102+
103+
<!-- Community Impact -->
104+
<div class="mt-20 max-w-5xl mx-auto">
105+
<div class="bg-gradient-to-br from-primary/5 to-green-500/5 dark:from-primary/10 dark:to-green-500/10 rounded-2xl border border-primary/20 dark:border-primary/30 p-8 md:p-12">
106+
<h3 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white text-center mb-8">
107+
Community Impact
108+
</h3>
109+
110+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
111+
<div class="text-center">
112+
<div class="text-4xl md:text-5xl font-bold text-primary mb-2">250+</div>
113+
<p class="text-gray-600 dark:text-gray-400">GitHub Stars</p>
114+
</div>
115+
<div class="text-center">
116+
<div class="text-4xl md:text-5xl font-bold text-primary mb-2">10+</div>
117+
<p class="text-gray-600 dark:text-gray-400">Contributors</p>
118+
</div>
119+
<div class="text-center">
120+
<div class="text-4xl md:text-5xl font-bold text-primary mb-2">45%</div>
121+
<p class="text-gray-600 dark:text-gray-400">Avg. Carbon Reduction</p>
122+
</div>
123+
</div>
124+
</div>
125+
</div>
126+
</Container>
127+
</section>

0 commit comments

Comments
 (0)