Skip to content

Commit e1376ed

Browse files
authored
Docs: update landing page (#840)
1 parent 25448ce commit e1376ed

File tree

9 files changed

+89
-77
lines changed

9 files changed

+89
-77
lines changed

landing/src/components/WhatsNewSection.astro

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,7 @@ const newsBlocks = [
5555
</iframe>
5656
</div>
5757

58-
<div
59-
class="flex w-full items-start justify-between gap-x-8 gap-y-6 max-md:flex-col"
60-
>
58+
<div class="flex w-full justify-between gap-x-8 gap-y-6 max-md:flex-col">
6159
{
6260
newsBlocks.map((block) => {
6361
const Icon = block.icon;

landing/src/components/getting-started-tabs-content/CodeBlock.tsx

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
99
codeString: string;
1010
}
1111

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

1515
const handleCopy = () => {
@@ -42,25 +42,26 @@ export function CodeBlock({ codeString, ...props }: CodeBlockProps) {
4242
)}
4343
onClick={handleCopy}
4444
>
45-
<p className="text-medium px-3 text-sm">
46-
{isCopied ? "Copied!" : "Copy"}
47-
</p>
48-
{!isCopied && (
49-
<Copy strokeWidth={2} className="h-4 w-4 md:h-5 md:w-5" />
50-
)}
45+
<div className="flex items-center gap-2.5 px-2 align-middle">
46+
<p className="text-medium text-sm">{isCopied ? "Copied!" : "Copy"}</p>
47+
{!isCopied && (
48+
<Copy strokeWidth={2} className="h-4 w-4 md:h-5 md:w-5" />
49+
)}
50+
</div>
5151
</Button>
52-
<pre
53-
className={cn(
54-
"bg-swm-brand-80 min-h-35 overflow-x-auto p-6 max-md:pb-18 max-sm:pb-20",
55-
"text-primary-foreground text-sm",
56-
props.className,
57-
)}
58-
{...props}
52+
<div
53+
className={
54+
"bg-swm-brand-80 min-h-35 overflow-x-auto p-6 max-md:pb-18 max-sm:pb-20"
55+
}
5956
>
60-
<p className="font-lg font-secondary-strong font-normal">
57+
<code
58+
className={
59+
"text-secondary-strong font-aeonik text-md font-normal whitespace-pre"
60+
}
61+
>
6162
{codeString}
62-
</p>
63-
</pre>
63+
</code>
64+
</div>
6465
</div>
6566
);
6667
}

landing/src/components/ui/AccordionWrapper.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ interface RoadmapAccordionProps {
1515
const itemContent = (bulletpoints: string[]) => (
1616
<ul className="w-full list-disc space-y-2 py-1.5 pl-7">
1717
{bulletpoints.map((point, index) => (
18-
<li key={index} className="text-secondary-strong text-sm font-normal">
18+
<li key={index} className="text-secondary-strong text-lg font-normal">
1919
{point}
2020
</li>
2121
))}
@@ -31,10 +31,10 @@ export function Accordion({ data }: RoadmapAccordionProps) {
3131
<AccordionTrigger>
3232
<div className="flex w-full flex-col gap-4 md:flex-row md:items-start md:gap-6">
3333
<div className="flex w-full flex-row items-start gap-6">
34-
<div className="w-8 shrink-0 text-left font-medium sm:w-16 md:w-24 lg:w-42">
34+
<div className="text-md w-8 shrink-0 text-left font-medium sm:w-16 md:w-24 lg:w-42">
3535
{String(i + 1).padStart(2, "0")}
3636
</div>
37-
<p className="text-left font-medium md:w-64 lg:w-100">
37+
<p className="text-left text-lg font-medium">
3838
Release&nbsp;{item.versionNumber}
3939
</p>
4040
</div>

landing/src/components/ui/Footer.tsx

Lines changed: 49 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -72,84 +72,85 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
7272
>
7373
<ContentWrapper>
7474
<div className="mx-auto my-15 flex w-full max-w-[1360px] flex-col items-center justify-between">
75-
<div className="text-primary-foreground flex flex-col items-center justify-between">
76-
<div className="z-10 flex flex-col items-center">
77-
<div className="flex flex-col items-center gap-3">
78-
<img
79-
src="/live-debugger/assets/logo-swm.svg"
80-
alt="Software Mansion"
81-
className="h-7 w-auto md:h-8 lg:h-9"
82-
/>
83-
<h2 className="mb-3 text-center text-[24px] font-bold sm:text-[28px] lg:text-[36px]">
84-
We are Software Mansion
85-
</h2>
86-
</div>
87-
88-
<h2 className="w-full text-center text-xs font-thin md:w-1/2">
89-
You might know us from Elixir Stream Week, Global Elixir
90-
Meetups, or from projects like Popcorn and Membrane. But
91-
that’s not all we do.
92-
<br />
93-
<br />
94-
We help teams build exceptional software - from developer
95-
tools to production-ready applications. Let’s talk about how
96-
we can support your next project.
97-
</h2>
75+
<div className="text-primary-foreground flex flex-col items-center justify-between gap-3 md:gap-8">
76+
<div className="z-10 flex flex-col items-center gap-2 md:gap-6">
77+
<div className="flex flex-col items-center gap-6">
78+
<div className="flex flex-col items-center">
79+
<div className="flex flex-col items-center gap-3">
80+
<img
81+
src="/live-debugger/assets/logo-swm.svg"
82+
alt="Software Mansion"
83+
className="h-7 w-auto md:h-8 lg:h-9"
84+
/>
85+
<h2 className="mb-3 text-center text-[24px] font-bold sm:text-[28px] lg:text-[36px]">
86+
We are Software Mansion
87+
</h2>
88+
</div>
9889

99-
<div className="mt-5 flex flex-row gap-5">
90+
<h2 className="w-full text-center text-xs font-thin md:w-3/5">
91+
You might know us from Elixir Stream Week, Global Elixir
92+
Meetups, or from projects like Popcorn and Membrane. But
93+
that’s not all we do.
94+
<br />
95+
<br />
96+
We help teams build exceptional software - from developer
97+
tools to production-ready applications. Let’s talk about
98+
how we can support your next project.
99+
</h2>
100+
</div>
100101
<a
101102
href="https://swmansion.com/"
102103
target="_blank"
103104
rel="noopener"
104105
>
105-
<Button variant="secondary" size="sm">
106-
<p className="text-medium text-sm">Learn more</p>
106+
<Button variant="secondary" size="footer">
107+
<p className="text-medium px-3 text-sm">Learn more</p>
107108
</Button>
108109
</a>
109110
</div>
110-
</div>
111111

112-
<div className="my-8 flex gap-x-10 gap-y-0 max-md:flex-col">
113-
{logos.map((logo) => (
114-
<a
115-
key={logo.name}
116-
href={logo.href}
117-
target="_blank"
118-
rel="noopener"
119-
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"
120-
>
121-
<img
122-
src={logo.imageUrl}
123-
alt={logo.name}
124-
className="h-6 w-auto"
125-
/>
126-
</a>
127-
))}
112+
<div className="my-8 flex gap-x-10 gap-y-0 max-md:flex-col">
113+
{logos.map((logo) => (
114+
<a
115+
key={logo.name}
116+
href={logo.href}
117+
target="_blank"
118+
rel="noopener"
119+
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"
120+
>
121+
<img
122+
src={logo.imageUrl}
123+
alt={logo.name}
124+
className="h-6 w-auto md:h-9"
125+
/>
126+
</a>
127+
))}
128+
</div>
128129
</div>
129130

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

133-
<div className="flex items-center">
134+
<div className="flex items-center gap-1">
134135
{socials.map(({ icon, href }) => (
135136
<a
136137
key={href}
137138
href={href}
138139
target="_blank"
139140
rel="noopener noreferrer"
140-
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"
141+
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"
141142
>
142143
<img
143144
src={`/live-debugger/assets/${icon}.svg`}
144-
className="h-3 w-3"
145+
className="h-3 w-3 md:h-6 md:w-6"
145146
alt={`${icon} icon`}
146147
width="16"
147148
height="16"
148149
/>
149150
</a>
150151
))}
151152
</div>
152-
<p className="text-2xs font-thin">
153+
<p className="text-2xs mt-3 font-thin">
153154
&copy; Software Mansion 2025.
154155
</p>
155156
</div>

landing/src/components/ui/accordion.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function AccordionTrigger({
4949
)}
5050
{...props}
5151
>
52-
<div className="flex text-base font-medium">{children}</div>
52+
<div className="flex w-full text-base font-medium">{children}</div>
5353
<ChevronDownIcon className="pointer-events-none size-5 shrink-0 transition-transform duration-200" />
5454
</AccordionPrimitive.Trigger>
5555
</AccordionPrimitive.Header>

landing/src/components/ui/blockWrapper.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function BlockWrapper({
6464
const content = (
6565
<div
6666
className={cn(
67-
"flex flex-col items-start justify-start gap-4 lg:gap-6 md:lg:gap-5",
67+
"flex h-full flex-col items-start justify-start gap-4 lg:gap-6 md:lg:gap-5",
6868
size === "large" ? "self-stretch" : "self-stretch",
6969
)}
7070
>
@@ -73,8 +73,8 @@ function BlockWrapper({
7373
{children}
7474
</IconBox>
7575
</div>
76-
<h3 className="text-primary text-md font-aeonik font-medium">{header}</h3>
77-
<div className="text-secondary font-aeonik text-sm font-normal">
76+
<h3 className="text-primary font-aeonik text-lg font-medium">{header}</h3>
77+
<div className="text-secondary font-aeonik text-md font-normal">
7878
{description}
7979
</div>
8080
</div>

landing/src/components/ui/button.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ const buttonVariants = cva(
2020
size: {
2121
default: "max-sm:w-full px-6 py-3 md:py-3",
2222
sm: "max-sm:w-full px-5 py-3 md:py-3.5",
23-
xs: "max-sm:w-[calc(100%-50px)] px-3 py-3 md:py-3",
23+
footer: "max-sm:w-full px-3 py-2 max-md:py-3 md:py-2.5",
24+
xs: "max-sm:w-[calc(100%-50px)] px-3 py-2 md:py-2.5",
2425
},
2526
},
2627
defaultVariants: {

landing/src/styles/aeonik.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@
3030
font-display: swap;
3131
}
3232

33+
@font-face {
34+
font-family: "Aeonik";
35+
src: url("/fonts/Aeonik-Thin.otf") format("opentype");
36+
font-weight: 250;
37+
font-style: normal;
38+
font-display: swap;
39+
}
40+
3341
@font-face {
3442
font-family: "Aeonik";
3543
src: url("/fonts/Aeonik-Light.otf") format("opentype");

landing/src/styles/theme.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
--breakpoint-sm: 600px;
33
--breakpoint-md: 1025px;
44
--breakpoint-lg: 1550px;
5-
/* --breakpoint-lg: 1441px; */
65
--breakpoint-xl: initial;
76
--breakpoint-2xl: initial;
87

@@ -150,4 +149,8 @@
150149
}
151150
}
152151
}
152+
code {
153+
font-family: inherit;
154+
font-weight: inherit;
155+
}
153156
}

0 commit comments

Comments
 (0)