Skip to content

Jsx components #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tomjodoinux wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Jsx components #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1f05960
Added comments and a card for Enterprise
tomjodoinux Mar 11, 2026
bca8bb7
Merge pull request #1 from Glormy/jsx-understanding
tomjodoinux Mar 11, 2026
9cf376d
Update jsx-version.html
tomjodoinux Mar 16, 2026
72f6021
Added enterprise card and tertiary button
tomjodoinux Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic document setup and responsive viewport -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Plans — HTML version</title>

<!-- Load Inter font from Google Fonts for consistent typography -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Main stylesheet that controls layout, spacing, and colors -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Small label pinned at the top to indicate this is the static HTML version -->
<p class="page-label"><strong>HTML version</strong> — static markup</p>

<!-- Main wrapper that aligns the pricing cards in a row -->
<div class="cards-container">

<!-- Hobby plan card: free tier with a shorter feature list -->
<div class="card">
<div class="card-top">
<h3 class="card-title">Hobby</h3>
<p class="card-price">
<span class="card-price-amount">Free</span>
</p>

<!-- Content area for the Hobby feature bullets -->
<div class="card-content">
<p class="includes-text">Includes:</p>
<ul class="features-list">
Expand All @@ -36,15 +48,21 @@ <h3 class="card-title">Hobby</h3>
</ul>
</div>
</div>

<!-- Secondary style button for a low‑emphasis action -->
<button class="download-button secondary">Download</button>
</div>

<!-- Pro plan card: highlighted paid tier with more benefits -->
<div class="card">
<div class="card-top">
<h3 class="card-title">Pro</h3>
<p class="card-price">
<span class="card-price-amount">$20</span>
<span class="card-price-period">/mo.</span>
</p>

<!-- Content area for Pro‑specific features on top of Hobby -->
<div class="card-content">
<p class="includes-text">Everything in Hobby, plus:</p>
<ul class="features-list">
Expand All @@ -67,8 +85,46 @@ <h3 class="card-title">Pro</h3>
</ul>
</div>
</div>

<!-- Primary call‑to‑action button that visually promotes Pro -->
<button class="download-button primary">Get Pro</button>
</div>

<!-- Enterprise plan card: highest tier aimed at teams and companies -->
<div class="card">
<div class="card-top">
<h3 class="card-title">Enterprise</h3>
<p class="card-price">
<span class="card-price-amount">Let&apos;s talk</span>
</p>

<!-- Content area for Enterprise‑level features and support -->
<div class="card-content">
<p class="includes-text">Everything in Pro, plus:</p>
<ul class="features-list">
<li>
<span class="checkmark">✓</span>
Custom usage limits and controls
</li>
<li>
<span class="checkmark">✓</span>
Priority support and onboarding
</li>
<li>
<span class="checkmark">✓</span>
Centralized team billing
</li>
<li>
<span class="checkmark">✓</span>
Dedicated success partner
</li>
</ul>
</div>
</div>

<!-- Button styled like a neutral action, inviting contact -->
<button class="download-button secondary">Contact sales</button>
</div>
</div>
</body>
</html>
25 changes: 21 additions & 4 deletions jsx-version.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,14 @@ <h1 className="card-title">{title}</h1>
title: 'Hobby',
price: 'Free',
includesText: 'Includes:',
features: ['No credit card required', 'Limited Agent requests', 'Limited Tab completions'],
buttonText: 'Download',
buttonVariant: 'secondary',
features: [
'No credit card required',
'Limited Agent requests',
'Limited Tab completions',
'Agent Awesomeness',
],
buttonText: 'Start for free',
buttonVariant: 'tertiary',
};
const proPlan = {
title: 'Pro',
Expand All @@ -69,10 +74,21 @@ <h1 className="card-title">{title}</h1>
'Extended limits on Agent',
'Unlimited Tab completions',
'Background Agents',
'Maximum context windows',
],
buttonText: 'Get Pro',
buttonVariant: 'secondary',
};
const enterprisePlan = {
title: 'Enterprise',
price: 'Let\'s talk',
includesText: 'Everything in Pro, plus:',
features: [
'Custom usage limits and controls',
'Priority support and onboarding',
],
buttonText: 'Contact sales',
buttonVariant: 'primary',

};

return (
Expand All @@ -84,6 +100,7 @@ <h1 className="card-title">{title}</h1>
{/* This is the same as writing: title="Hobby" price="Free" includesText="Includes:" etc. */}
<PricingCard {...hobbyPlan} />
<PricingCard {...proPlan} />
<PricingCard {...enterprisePlan} />
</div>
</>
);
Expand Down
37 changes: 37 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
/* Global reset so spacing is consistent across browsers */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Page background, typography, and centering of the pricing cards */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f7f7f4;
Expand All @@ -14,6 +16,7 @@ body {
padding: 20px;
}

/* Horizontal layout for the two pricing cards */
.cards-container {
display: flex;
flex-direction: row;
Expand All @@ -23,6 +26,7 @@ body {
align-items: flex-start;
}

/* Shared card shell: background, padding, and minimum height */
.card {
display: flex;
flex-direction: column;
Expand All @@ -34,11 +38,13 @@ body {
flex-shrink: 0;
}

/* Stack title, price, and feature content vertically */
.card-top {
display: flex;
flex-direction: column;
}

/* Plan name styling */
.card-title {
font-size: 22px;
line-height: 28px;
Expand All @@ -47,39 +53,46 @@ body {
margin-bottom: 8px;
}

/* Wrapper for price and period so they align nicely */
.card-price {
font-size: 20px;
color: rgba(38, 37, 30, 0.5);
display: inline-flex;
align-items: baseline;
}

/* Main price number (e.g. “$20” or “Free”) */
.card-price-amount {
font-size: 22px;
font-weight: 400;
color: rgba(38, 37, 30, 0.5);
}

/* Secondary price detail (e.g. “/mo.”) */
.card-price-period {
font-size: 14px;
color: rgba(38, 37, 30, 0.5);
}

/* Space between feature list and the button below */
.card-content {
margin-bottom: 32px;
}

/* Small lead‑in label above each feature list */
.includes-text {
font-size: 16px;
color: rgba(38, 37, 30, 0.5);
margin: 16px 0px;
}

/* Remove default bullets; layout is handled manually */
.features-list {
list-style: none;
padding: 0;
}

/* Each feature row is aligned with the checkmark icon */
.features-list li {
display: flex;
align-items: center;
Expand All @@ -88,13 +101,15 @@ body {
color: #26251e;
}

/* Checkmark icon styling to keep spacing and weight consistent */
.checkmark {
color: #26251e;
font-size: 14px;
margin-right: 10px;
font-weight: 400;
}

/* Base button styling shared by both Hobby and Pro actions */
.download-button {
margin-top: auto;
width: fit-content;
Expand All @@ -109,6 +124,7 @@ body {
transition: background-color 0.2s ease;
}

/* Hover and active states for the neutral button style */
.download-button:hover {
background-color: #D8D6CE;
}
Expand All @@ -117,6 +133,7 @@ body {
background-color: #D8D6CE;
}

/* Primary button variation used on the Pro plan */
.download-button.primary {
background-color: #111;
color: #fff;
Expand All @@ -130,6 +147,25 @@ body {
background-color: #333;
}

.download-button.tertiary {
background-color: transparent;
color: #333;
border: 1px solid #a1a19d;
}

.download-button.tertiary:hover {
background-color: #e6e5e0;
color: #333;
border: 1px solid #a1a19d;
}

.download-button.tertiary:active {
background-color: #a1a19d;
color: #333;
border: 1px solid #a1a19d;
}

/* Fixed pill label that sits at the top center of the viewport */
.page-label {
position: fixed;
top: 16px;
Expand All @@ -143,6 +179,7 @@ body {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Slight emphasis on the “HTML version” text inside the label */
.page-label strong {
color: #333;
}