Skip to content

Update landing page #148

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

Merged
arjunkomath merged 4 commits into from
Mar 26, 2026
Merged

Update landing page #148

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
c74d109
Update CLI format
arjunkomath Mar 26, 2026
09c660c
Update landing page
arjunkomath Mar 26, 2026
b12fc29
Address CR
arjunkomath Mar 26, 2026
eabac04
Merge pull request #147 from techulus/feat/update-landing-page
arjunkomath Mar 26, 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
26 changes: 13 additions & 13 deletions apps/web/components/layout/footer.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function FooterComponent() {
/>

<footer
className="bg-gray-900 border-t border-white/10 dark:border-black"
className="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-white/10"
aria-labelledby="footer-heading"
>
<div className="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
Expand Down Expand Up @@ -115,7 +115,7 @@ export default function FooterComponent() {
<a
key={item.name}
href={item.href}
className="text-gray-500 hover:text-gray-400"
className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
Expand All @@ -126,15 +126,15 @@ export default function FooterComponent() {
<div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold leading-6 text-white">
<h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
Integrations
</h3>
<ul role="list" className="mt-6 space-y-2">
{navigation.solutions.map((item) => (
<li key={item.name}>
<Link
href={item.href}
className="text-sm leading-6 text-gray-300 hover:text-white"
className="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
target="_blank"
rel="noreferrer noopener"
>
Expand All @@ -145,15 +145,15 @@ export default function FooterComponent() {
</ul>
</div>
<div className="mt-10 md:mt-0">
<h3 className="text-sm font-semibold leading-6 text-white">
<h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
Support
</h3>
<ul role="list" className="mt-6 space-y-2">
{navigation.support.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-sm leading-6 text-gray-300 hover:text-white"
className="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
target="_blank"
rel="noreferrer"
>
Expand All @@ -167,7 +167,7 @@ export default function FooterComponent() {
// @ts-ignore
window?.ChangesPage?.openWidget();
}}
className="text-sm leading-6 text-gray-300 hover:text-white changes-page-btn"
className="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white changes-page-btn"
>
What&apos;s New
</button>
Expand All @@ -177,15 +177,15 @@ export default function FooterComponent() {
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold leading-6 text-white">
<h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
Resources
</h3>
<ul role="list" className="mt-6 space-y-2">
{navigation.company.map((item) => (
<li key={item.name}>
<Link
href={item.href}
className="text-sm leading-6 text-gray-300 hover:text-white"
className="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
>
{item.name}
</Link>
Expand All @@ -194,15 +194,15 @@ export default function FooterComponent() {
</ul>
</div>
<div className="mt-10 md:mt-0">
<h3 className="text-sm font-semibold leading-6 text-white">
<h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
Legal
</h3>
<ul role="list" className="mt-6 space-y-2">
{navigation.legal.map((item) => (
<li key={item.name}>
<Link
href={item.href}
className="text-sm leading-6 text-gray-300 hover:text-white"
className="text-sm leading-6 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
>
{item.name}
</Link>
Expand All @@ -213,8 +213,8 @@ export default function FooterComponent() {
</div>
</div>
</div>
<div className="mt-16 border-t border-white/10 pt-8 sm:mt-20 lg:mt-24">
<p className="text-xs leading-5 text-gray-400">
<div className="mt-16 border-t border-gray-200 dark:border-white/10 pt-8 sm:mt-20 lg:mt-24">
<p className="text-xs leading-5 text-gray-500 dark:text-gray-400">
{version && `v${version} | `} &copy; {new Date().getFullYear()}{" "}
changes.page, All rights reserved.
</p>
Expand Down
16 changes: 8 additions & 8 deletions apps/web/components/layout/header.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,14 +115,14 @@ export default function HeaderComponent() {
}}
/>

<Disclosure as="nav" className="bg-gray-900">
<Disclosure as="nav" className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-transparent">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div className="relative flex items-center justify-between h-16">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
{/* Mobile menu button*/}
<Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-white">
<span className="sr-only">Open main menu</span>
{open ? (
<XIcon className="block h-6 w-6" aria-hidden="true" />
Expand All @@ -141,7 +141,7 @@ export default function HeaderComponent() {
src={logoImage}
alt="changes.page"
/>
<p className="text-gray-50 text-md mx-2 hero">
<p className="text-gray-900 dark:text-gray-50 text-md mx-2 font-sans">
changes<strong>.page</strong>
</p>
</div>
Expand All @@ -162,8 +162,8 @@ export default function HeaderComponent() {
href={item.href}
className={classNames(
item.href == router.pathname
? "bg-gray-900 text-white"
: "text-gray-300 hover:bg-gray-700 hover:text-white",
? "bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white"
: "text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white",
"px-3 py-2 rounded-md text-sm font-medium"
)}
aria-current={
Expand Down Expand Up @@ -273,7 +273,7 @@ export default function HeaderComponent() {
<div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
<Link
href={ROUTES.LOGIN}
className="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
className="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-500 transition-colors"
>
Sign in
</Link>
Expand All @@ -292,7 +292,7 @@ export default function HeaderComponent() {
as={Link}
href={item.href}
className={classNames(
"text-gray-300 hover:bg-gray-700 hover:text-white",
"text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white",
"block px-3 py-2 rounded-md text-base font-medium"
)}
>
Expand All @@ -307,7 +307,7 @@ export default function HeaderComponent() {
<Link
href={ROUTES.LOGIN}
className={classNames(
"text-gray-300 hover:bg-gray-700 hover:text-white",
"text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white",
"block px-3 py-2 rounded-md text-base font-medium"
)}
>
Expand Down
160 changes: 160 additions & 0 deletions apps/web/components/marketing/cli-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import {
LightningBoltIcon,
ChipIcon,
CodeIcon,
} from "@heroicons/react/solid";

const useCases = [
{
icon: LightningBoltIcon,
title: "CI/CD Pipelines",
description: "Auto-publish release notes on every deploy.",
},
{
icon: ChipIcon,
title: "AI Agents",
description: "Let AI generate changelogs from your commits.",
},
{
icon: CodeIcon,
title: "GitHub Actions",
description: "Sync PRs to changelog posts automatically.",
},
];

export default function CliDemo() {
return (
<div className="bg-gray-900 py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl hero">
Built for your pipeline
</h2>
<p className="mt-4 text-lg leading-8 text-gray-300">
The{" "}
<code className="text-green-400 bg-gray-800 px-1.5 py-0.5 rounded text-sm">
chp
</code>{" "}
CLI gives you full control over your changelog from the command line.
</p>
</div>

<div className="mt-16 mx-auto max-w-4xl">
<div className="rounded-xl border border-white/10 bg-gray-950 overflow-hidden shadow-2xl">
<div className="flex items-center gap-2 px-4 py-3 bg-gray-900/80 border-b border-white/5">
<div className="flex gap-1.5">
<div className="w-3 h-3 rounded-full bg-red-500/70" />
<div className="w-3 h-3 rounded-full bg-yellow-500/70" />
<div className="w-3 h-3 rounded-full bg-green-500/70" />
</div>
<div className="flex-1 flex justify-center">
<span className="text-xs text-gray-400 font-mono">
Terminal
</span>
</div>
</div>

<div className="p-6 font-mono text-sm leading-loose space-y-1 overflow-x-auto">
<div>
<span className="text-green-400">$ </span>
<span className="text-white">npm install -g </span>
<span className="text-cyan-400">@changespage/cli</span>
</div>

<div className="h-4" />

<div>
<span className="text-green-400">$ </span>
<span className="text-white">export </span>
<span className="text-cyan-400">CHANGESPAGE_SECRET_KEY</span>
<span className="text-white">=</span>
<span className="text-yellow-300">sk_live_...</span>
</div>

<div className="h-4" />

<div>
<span className="text-green-400">$ </span>
<span className="text-white">echo </span>
<span className="text-yellow-300">
&quot;## Bug Fixes
</span>
</div>
<div>
<span className="text-yellow-300">
- Fixed login timeout on mobile
</span>
</div>
<div>
<span className="text-yellow-300">
- Resolved dark mode rendering&quot;
</span>
<span className="text-white"> | chp posts create \</span>
</div>
<div className="pl-6">
<span className="text-cyan-400">--title </span>
<span className="text-yellow-300">
&quot;v2.4.1 Patch Release&quot;
</span>
<span className="text-white"> \</span>
</div>
<div className="pl-6">
<span className="text-cyan-400">--tags </span>
<span className="text-white">fix \</span>
</div>
<div className="pl-6">
<span className="text-cyan-400">--status </span>
<span className="text-white">published</span>
</div>

<div className="h-4" />

<div className="text-gray-500">
<span className="text-gray-600">{`{`}</span>
</div>
<div className="pl-4">
<span className="text-gray-400">&quot;id&quot;</span>
<span className="text-gray-600">: </span>
<span className="text-yellow-300/70">
&quot;post_abc123&quot;
</span>
<span className="text-gray-600">,</span>
</div>
<div className="pl-4">
<span className="text-gray-400">&quot;title&quot;</span>
<span className="text-gray-600">: </span>
<span className="text-yellow-300/70">
&quot;v2.4.1 Patch Release&quot;
</span>
<span className="text-gray-600">,</span>
</div>
<div className="pl-4">
<span className="text-gray-400">&quot;status&quot;</span>
<span className="text-gray-600">: </span>
<span className="text-green-400/70">
&quot;published&quot;
</span>
</div>
<div className="text-gray-600">{`}`}</div>
</div>
</div>
</div>

<div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
{useCases.map((useCase) => (
<div
key={useCase.title}
className="text-center rounded-xl bg-gray-800/30 border border-gray-700/50 p-6"
>
<useCase.icon className="h-8 w-8 text-green-400 mx-auto mb-4" />
<h3 className="text-base font-semibold text-white mb-2">
{useCase.title}
</h3>
<p className="text-sm text-gray-400">{useCase.description}</p>
</div>
))}
</div>
</div>
</div>
);
}
Loading
Loading