Skip to content

Docs: update landing page #840

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
p-malecki merged 3 commits into from
Nov 7, 2025
Merged

Docs: update landing page #840

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
48d73f2
feat: update landing page
p-malecki Nov 7, 2025
49171ff
Merge branch 'main' into update-lading
p-malecki Nov 7, 2025
50b43f1
fix: remove comment
p-malecki Nov 7, 2025
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
100 changes: 85 additions & 15 deletions landing/public/assets/logo-membrane.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion landing/src/components/CTA.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,12 @@ const url = Astro.props.url;
</IconBox>
<h2 class="text-md font-medium">{title}</h2>
<Button variant="outline" size="sm">
<a href={url} class="flex flex-row items-center justify-center">
<a
href={url}
target="_blank"
rel="noopener noreferrer"
class="flex flex-row items-center justify-center"
>
<p class="text-medium px-2 text-sm">{buttonText}</p>
<ArrowRight strokeWidth={1} className="h-5 w-5 md:h-6 md:w-6" />
</a>
Expand Down
2 changes: 1 addition & 1 deletion landing/src/components/DebugCasesSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const debugCases = [
<ContentWrapper
className="font-aeonik text-primary flex flex-col items-center justify-center gap-10 sm:gap-14 md:gap-16 lg:gap-20"
>
<h1 class="text-center text-2xl font-bold">Debug case</h1>
<h2 class="text-center text-2xl font-bold">Debug case</h2>

<div
class="flex flex-row flex-wrap justify-around gap-6 sm:gap-12 md:gap-14 lg:gap-16"
Expand Down
4 changes: 2 additions & 2 deletions landing/src/components/FeaturesSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,12 @@ const mainFeatures = [

<section
id="features"
class="flex w-full scroll-m-10 flex-col items-center justify-center bg-white py-16 md:py-20 lg:py-28"
class="flex w-full scroll-m-5 flex-col items-center justify-center bg-white py-16 md:py-20 lg:py-28"
>
<ContentWrapper
className="font-aeonik text-primary flex flex-col items-center justify-center gap-10 sm:gap-14 md:gap-16 lg:gap-20"
>
<h1 class="text-center text-2xl font-bold">Main features</h1>
<h2 class="text-center text-2xl font-bold">Main features</h2>

<div
class="grid grid-cols-1 grid-rows-4 gap-y-6 md:grid-cols-2 md:grid-rows-2 md:gap-x-10 md:gap-y-10 lg:gap-x-14 lg:gap-y-14"
Expand Down
6 changes: 3 additions & 3 deletions landing/src/components/GettingStartedSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ const tabData = [

<section
id="gettingstarted"
class="bg-primary relative flex w-full scroll-m-10 flex-col items-center justify-center overflow-hidden py-16 max-md:mb-10 sm:py-20 md:py-36"
class="bg-primary relative flex w-full scroll-m-5 flex-col items-center justify-center overflow-hidden py-16 max-md:mb-10 sm:py-20 md:py-36"
>
<ContentWrapper
className="font-aeonik z-20 flex w-full flex-col items-center justify-center gap-10 sm:gap-14 md:gap-16 lg:gap-20"
>
<h1 class="text-primary-foreground text-center text-2xl font-bold">
<h2 class="text-primary-foreground text-center text-2xl font-bold">
Getting started
</h1>
</h2>

<Tabs class="relative h-full w-full" tabData={tabData} client:idle>
<MixInstallTab slot="mix" client:idle />
Expand Down
39 changes: 23 additions & 16 deletions landing/src/components/HeroSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,19 @@ import { Button } from "@/components/ui/button";
class="animate-fade-in-down z-10 flex w-full flex-col items-center justify-center gap-8 sm:h-1/2"
>
<div class="flex flex-col items-center justify-center gap-5 md:gap-6">
<div
class="flex flex-row items-center justify-center gap-3 text-sm font-normal sm:gap-4 md:gap-5 lg:gap-6"
>
<p>Created by</p>
<img
src="/live-debugger/assets/logo-swm.svg"
alt="Software Mansion"
class="h-10 w-auto md:h-12"
/>
</div>
<a href="https://swmansion.com/" target="_blank" rel="noopener">
<div
class="flex flex-row items-center justify-center gap-3 text-sm font-normal sm:gap-4 md:gap-5 lg:gap-6"
>
<p>Created by</p>
<img
src="/live-debugger/assets/logo-swm.svg"
alt="Software Mansion"
class="h-10 w-auto md:h-12"
/>
</div>
</a>

<div class="flex flex-col items-center justify-center gap-4 md:gap-5">
<h1
class="max-w-[500px] text-center text-4xl font-bold md:text-5xl lg:text-6xl"
Expand All @@ -36,12 +39,16 @@ import { Button } from "@/components/ui/button";
</div>
</div>
<div class="mt-5 flex gap-4 px-2 max-sm:w-full max-sm:flex-col">
<Button variant="secondary"
><p class="text-medium text-sm tracking-normal">Get started</p>
</Button>
<Button variant="defaultWithOutline"
><p class="text-medium px-2 text-sm">See it in action</p>
</Button>
<a href="#gettingstarted">
<Button variant="secondary"
><p class="text-medium text-sm">Get started</p>
</Button>
</a>
<a href="#videosection">
<Button variant="defaultWithOutline"
><p class="text-medium px-2 text-sm">See it in action</p>
</Button>
</a>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions landing/src/components/RoadmapSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,12 @@ const accordionData = [

<section
id="roadmap"
class="flex w-full scroll-m-10 flex-col items-center justify-center bg-white py-16 sm:py-20 md:py-32"
class="flex w-full flex-col items-center justify-center bg-white py-16 sm:py-20 md:py-32"
>
<ContentWrapper
className="font-aeonik text-primary flex flex-col items-center justify-center gap-12 sm:gap-14 md:gap-16 lg:gap-18"
>
<h1 class="text-primary text-center text-2xl font-bold">Roadmap</h1>
<h2 class="text-primary text-center text-2xl font-bold">Roadmap</h2>

<Accordion data={accordionData} client:idle />

Expand Down
6 changes: 3 additions & 3 deletions landing/src/components/VideoSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import ContentWrapper from "../components/ContentWrapper.tsx";

<section
id="videosection"
class="bg-primary relative flex w-full scroll-m-10 flex-col items-center justify-center overflow-hidden py-16 sm:py-16 md:py-20 lg:py-30"
class="bg-primary relative flex w-full flex-col items-center justify-center overflow-hidden py-16 sm:py-16 md:py-20 lg:py-30"
>
<ContentWrapper
className="font-aeonik text-primary flex w-full flex-col items-center justify-center gap-6 sm:gap-10 md:gap-12 lg:gap-20"
>
<h1 class="text-primary-foreground z-10 text-center text-2xl font-bold">
<h2 class="text-primary-foreground z-10 text-center text-2xl font-bold">
See it in action
</h1>
</h2>

<div class="z-10 h-auto w-full">
<iframe
Expand Down
14 changes: 6 additions & 8 deletions landing/src/components/WhatsNewSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { SquareCheckBig } from "lucide-react";

const newsBlocks = [
{
title: "Better successor LiveView discovery",
title: "Better LiveView successor discovery",
description:
"Improved tracking of LiveView processes when they’re replaced due to actions like page reloads or errors, ensuring smoother debugging transitions.",
icon: SquareCheckBig,
Expand All @@ -28,7 +28,7 @@ const newsBlocks = [

<section
id="whatsnew"
class="bg-bg-additional flex w-full scroll-m-10 items-center justify-center py-15 sm:py-20 md:py-28 lg:py-32"
class="bg-bg-additional flex w-full items-center justify-center py-15 sm:py-20 md:py-28 lg:py-32"
>
<ContentWrapper
className="font-aeonik text-primary flex w-full flex-col items-center justify-center gap-12 sm:gap-14 md:gap-16 lg:gap-18"
Expand All @@ -37,10 +37,10 @@ const newsBlocks = [
<Badge variant="ternary"
><p class="text-2xs font-medium">LiveDebugger v0.4.0</p></Badge
>
<h1 class="text-primary text-center text-2xl font-bold">What’s new</h1>
<p class="font-regular text-xs">
<h2 class="text-primary text-center text-2xl font-bold">What’s new</h2>
<h3 class="font-regular text-xs">
Highlights from the August 2025 update.
</p>
</h3>
</div>

<div class="aspect-video h-full w-full">
Expand All @@ -55,9 +55,7 @@ const newsBlocks = [
</iframe>
</div>

<div
class="flex w-full items-start justify-between gap-x-8 gap-y-6 max-md:flex-col"
>
<div class="flex w-full justify-between gap-x-8 gap-y-6 max-md:flex-col">
{
newsBlocks.map((block) => {
const Icon = block.icon;
Expand Down
35 changes: 18 additions & 17 deletions landing/src/components/getting-started-tabs-content/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
codeString: string;
}

export function CodeBlock({ codeString, ...props }: CodeBlockProps) {
export function CodeBlock({ codeString }: CodeBlockProps) {
const [isCopied, setIsCopied] = React.useState(false);

const handleCopy = () => {
Expand Down Expand Up @@ -42,25 +42,26 @@ export function CodeBlock({ codeString, ...props }: CodeBlockProps) {
)}
onClick={handleCopy}
>
<p className="text-medium px-3 text-sm">
{isCopied ? "Copied!" : "Copy"}
</p>
{!isCopied && (
<Copy strokeWidth={2} className="h-4 w-4 md:h-5 md:w-5" />
)}
<div className="flex items-center gap-2.5 px-2 align-middle">
<p className="text-medium text-sm">{isCopied ? "Copied!" : "Copy"}</p>
{!isCopied && (
<Copy strokeWidth={2} className="h-4 w-4 md:h-5 md:w-5" />
)}
</div>
</Button>
<pre
className={cn(
"bg-swm-brand-80 min-h-35 overflow-x-auto p-6 max-md:pb-18 max-sm:pb-20",
"text-primary-foreground text-sm",
props.className,
)}
{...props}
<div
className={
"bg-swm-brand-80 min-h-35 overflow-x-auto p-6 max-md:pb-18 max-sm:pb-20"
}
>
<p className="font-lg font-secondary-strong font-normal">
<code
className={
"text-secondary-strong font-aeonik text-md font-normal whitespace-pre"
}
>
{codeString}
</p>
</pre>
</code>
</div>
</div>
);
}
6 changes: 3 additions & 3 deletions landing/src/components/ui/AccordionWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ interface RoadmapAccordionProps {
const itemContent = (bulletpoints: string[]) => (
<ul className="w-full list-disc space-y-2 py-1.5 pl-7">
{bulletpoints.map((point, index) => (
<li key={index} className="text-secondary-strong text-sm font-normal">
<li key={index} className="text-secondary-strong text-lg font-normal">
{point}
</li>
))}
Expand All @@ -31,10 +31,10 @@ export function Accordion({ data }: RoadmapAccordionProps) {
<AccordionTrigger>
<div className="flex w-full flex-col gap-4 md:flex-row md:items-start md:gap-6">
<div className="flex w-full flex-row items-start gap-6">
<div className="w-8 shrink-0 text-left font-medium sm:w-16 md:w-24 lg:w-42">
<div className="text-md w-8 shrink-0 text-left font-medium sm:w-16 md:w-24 lg:w-42">
{String(i + 1).padStart(2, "0")}
</div>
<p className="text-left font-medium md:w-64 lg:w-100">
<p className="text-left text-lg font-medium">
Release&nbsp;{item.versionNumber}
</p>
</div>
Expand Down
99 changes: 50 additions & 49 deletions landing/src/components/ui/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,84 +72,85 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
>
<ContentWrapper>
<div className="mx-auto my-15 flex w-full max-w-[1360px] flex-col items-center justify-between">
<div className="text-primary-foreground flex flex-col items-center justify-between">
<div className="z-10 flex flex-col items-center">
<div className="flex flex-col items-center gap-3">
<img
src="/live-debugger/assets/logo-swm.svg"
alt="Software Mansion"
className="h-7 w-auto md:h-8 lg:h-9"
/>
<h1 className="mb-3 text-center text-[24px] font-bold sm:text-[28px] lg:text-[36px]">
We are Software Mansion
</h1>
</div>

<h2 className="w-full text-center text-xs font-thin md:w-1/2">
You might know us from Elixir Stream Week, Global Elixir
Meetups, or from projects like Popcorn and Membrane. But
that’s not all we do.
<br />
<br />
We help teams build exceptional software - from developer
tools to production-ready applications. Let’s talk about how
we can support your next project.
</h2>
<div className="text-primary-foreground flex flex-col items-center justify-between gap-3 md:gap-8">
<div className="z-10 flex flex-col items-center gap-2 md:gap-6">
<div className="flex flex-col items-center gap-6">
<div className="flex flex-col items-center">
<div className="flex flex-col items-center gap-3">
<img
src="/live-debugger/assets/logo-swm.svg"
alt="Software Mansion"
className="h-7 w-auto md:h-8 lg:h-9"
/>
<h2 className="mb-3 text-center text-[24px] font-bold sm:text-[28px] lg:text-[36px]">
We are Software Mansion
</h2>
</div>

<div className="mt-5 flex flex-row gap-5">
<h2 className="w-full text-center text-xs font-thin md:w-3/5">
You might know us from Elixir Stream Week, Global Elixir
Meetups, or from projects like Popcorn and Membrane. But
that’s not all we do.
<br />
<br />
We help teams build exceptional software - from developer
tools to production-ready applications. Let’s talk about
how we can support your next project.
</h2>
</div>
<a
href="https://swmansion.com/"
target="_blank"
rel="noopener noreferrer"
rel="noopener"
>
<Button variant="secondary" size="sm">
<p className="text-medium text-2xs">Learn more</p>
<Button variant="secondary" size="footer">
<p className="text-medium px-3 text-sm">Learn more</p>
</Button>
</a>
</div>
</div>

<div className="my-8 flex gap-x-10 gap-y-0 max-md:flex-col">
{logos.map((logo) => (
<a
key={logo.name}
href={logo.href}
target="_blank"
rel="noopener noreferrer"
className="flex h-12 w-auto transform items-center justify-center rounded-full transition-all duration-300 ease-in-out hover:scale-105 hover:opacity-60 md:h-15"
>
<img
src={logo.imageUrl}
alt={logo.name}
className="h-6 w-auto"
/>
</a>
))}
<div className="my-8 flex gap-x-10 gap-y-0 max-md:flex-col">
{logos.map((logo) => (
<a
key={logo.name}
href={logo.href}
target="_blank"
rel="noopener"
className="flex h-12 w-auto transform items-center justify-center rounded-full transition-all duration-300 ease-in-out hover:scale-105 hover:opacity-60 md:h-15"
>
<img
src={logo.imageUrl}
alt={logo.name}
className="h-6 w-auto md:h-9"
/>
</a>
))}
</div>
</div>

<div className="flex flex-col items-center gap-3">
<div className="flex flex-col items-center gap-4 md:gap-6">
<p className="text-2xs font-thin">Check our socials</p>

<div className="flex items-center">
<div className="flex items-center gap-1">
{socials.map(({ icon, href }) => (
<a
key={href}
href={href}
target="_blank"
rel="noopener noreferrer"
className="flex h-6 w-6 transform items-center justify-center rounded-full transition-all duration-300 ease-in-out hover:scale-120 hover:opacity-60"
className="flex h-6 w-6 transform items-center justify-center rounded-full transition-all duration-300 ease-in-out hover:scale-120 hover:opacity-60 md:h-9 md:w-9"
>
<img
src={`/live-debugger/assets/${icon}.svg`}
className="h-3 w-3"
className="h-3 w-3 md:h-6 md:w-6"
alt={`${icon} icon`}
width="16"
height="16"
/>
</a>
))}
</div>
<p className="text-2xs font-thin">
<p className="text-2xs mt-3 font-thin">
&copy; Software Mansion 2025.
</p>
</div>
Expand Down
Loading