Skip to content

Commit 4e83749

Browse files
gloriababicgloriababic
authored
Feat/vibe code page improvements (#654)
* feat: add go logo * feat: add snap scroll * fix: add cut go logo and remove italic * fix: remove snap from desktop and add to mobile * fix: change padding
1 parent 1c0ad3c commit 4e83749

File tree

8 files changed

+35
-25
lines changed

8 files changed

+35
-25
lines changed

‎apps/website/src/assets/go_logo.png‎

13 KB
Loading

‎apps/website/src/components/BaseContactForm.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
1717
<base-contact-form data-id={formId} class={classnames(classNames)}>
1818
<form
1919
class={classnames(
20-
"group/contact-us flex flex-col gap-2 bg-white rounded-xl px-7 relative",
20+
"group/contact-us flex flex-col gap-2 bg-white rounded-xl px-4 sm:px-7 relative",
2121
formClassNames,
2222
)}
2323
id={formId}

‎apps/website/src/components/vibe-code-mvp/GetInTouch.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Section from "../Section.astro";
1010

1111
<Section
1212
contentClassName={`${grid_classes} bg-[#5362DBE5]/[0.9] text-white rounded-[48px] max-sm:gap-0`}
13-
className="bg-contrast !pt-34 md:!pt-68"
13+
className="bg-contrast !pt-34 md:!pt-68 !px-4.5"
1414
idx="get-in-touch"
1515
>
1616
<div

‎apps/website/src/components/vibe-code-mvp/Hero.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import RightArrow from "../icons/RightArrow.astro";
2727
</div>
2828
<div class="mx-auto xl:px-0">
2929
<div
30-
class={`${grid_classes} md:max-w-[var(--max-width)] px-4 md:px-7 py-24 md:!py-[144px] md:mx-auto relative z-[2] min-[1281px]:px-0`}
30+
class={`${grid_classes} md:max-w-[var(--max-width)] px-4.5 md:px-7 py-24 md:!py-[144px] md:mx-auto relative z-[2] min-[1281px]:px-0`}
3131
>
3232
<div
3333
class="row-start-1

‎apps/website/src/components/vibe-code-mvp/HowItWorks.astro‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import classnames from "classnames";
55
import nextLogo from "../../assets/nextjs_logo.png";
66
import nodeLogo from "../../assets/node_logo.png";
77
import reactLogo from "../../assets/react_logo.png";
8+
import goLogo from "../../assets/go_logo.png";
89
import Pill from "../Pill.astro";
910
import Section from "../Section.astro";
1011
import { grid_classes } from "../_grid";
@@ -22,15 +23,15 @@ const steps = (await getCollection("vibe_code_mvp_how_it_works")) as {
2223
}[];
2324
2425
const images = import.meta.glob<{ default: ImageMetadata }>(
25-
"/src/assets/*.svg"
26+
"/src/assets/*.svg",
2627
);
2728
---
2829

2930
<Section
3031
className="!py-18 md:!py-31 overflow-unset !px-0"
3132
contentClassName={classnames(
3233
grid_classes,
33-
"!gap-y-7 items-start pl-4 md:pl-7 lg:px-7 xl:px-0"
34+
"!gap-y-7 items-start pl-4.5 md:pl-7 lg:px-7",
3435
)}
3536
>
3637
<div class="col-span-6 md:col-span-12 lg:col-span-6 lg:sticky lg:top-24">
@@ -65,7 +66,7 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
6566
</div>
6667
<div class="mt-12">
6768
<p class="text-[22px] leading-8">We're experts in:</p>
68-
<div class="flex gap-x-7 gap-y-4 flex-wrap items-center">
69+
<div class="flex gap-x-6 flex-wrap items-center">
6970
<Image
7071
src={nodeLogo}
7172
alt="Node JS logo"
@@ -87,6 +88,14 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
8788
height={41}
8889
loading={"lazy"}
8990
/>
91+
<Image
92+
src={goLogo}
93+
alt="Golang logo"
94+
width={100}
95+
height={41}
96+
loading={"lazy"}
97+
/>
98+
<span class="text-gray-600 text-[18px]">and more…</span>
9099
</div>
91100
</div>
92101
</div>
@@ -95,23 +104,25 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
95104
flex
96105
gap-4
97106
pr-4
98-
overflow-x-auto
107+
max-lg:overflow-x-auto
99108
no-scrollbar
109+
max-lg:snap-x
110+
max-lg:snap-mandatory
111+
scroll-smooth
100112
md:col-span-12
101113
md:pr-7
102114
lg:col-span-6
103115
lg:col-start-7
104116
lg:flex-col
105117
lg:gap-8
106-
lg:pr-0
107-
lg:overflow-x-auto"
118+
lg:pr-0"
108119
>
109120
{
110121
steps.map((s, idx) => (
111122
<div
112123
class={classnames(
113-
"p-8 md:p-12 rounded-2xl text-white flex flex-col gap-5 min-w-[calc(100%-32px)]",
114-
s.data.bgColor
124+
"snap-center p-8 md:p-12 rounded-2xl text-white flex flex-col gap-5 min-w-[calc(100%-32px)]",
125+
s.data.bgColor,
115126
)}
116127
>
117128
<Image

‎apps/website/src/components/vibe-code-mvp/WhyWorkWithUs.astro‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
---
2-
import { Picture } from "astro:assets";
2+
import { Image, Picture } from "astro:assets";
3+
import { getCollection } from "astro:content";
34
import team from "../../assets/team.jpg";
45
import Pill from "../../components/Pill.astro";
56
import Section from "../../components/Section.astro";
67
import { grid_classes } from "../../components/_grid";
78
import "../../styles/main.css";
8-
import { getCollection } from "astro:content";
9-
import { Image } from "astro:assets";
109
1110
const reasons = (await getCollection("vibe_code_mvp_why_work_with_us")) as {
1211
data: {
@@ -17,7 +16,7 @@ const reasons = (await getCollection("vibe_code_mvp_why_work_with_us")) as {
1716
}[];
1817
1918
const images = import.meta.glob<{ default: ImageMetadata }>(
20-
"/src/assets/*.svg"
19+
"/src/assets/*.svg",
2120
);
2221
---
2322

@@ -42,7 +41,7 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
4241
</div>
4342
<div class="mx-auto xl:px-0">
4443
<div
45-
class={`${grid_classes} md:max-w-[var(--max-width)] px-4 md:px-7 py-0 md:mx-auto relative z-[2] min-[1281px]:px-0`}
44+
class={`${grid_classes} md:max-w-[var(--max-width)] px-4.5 md:px-7 py-0 md:mx-auto relative z-[2] min-[1281px]:px-0`}
4645
>
4746
<div
4847
class="row-start-1
@@ -78,18 +77,18 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
7877
<div
7978
class={`${grid_classes}
8079
md:max-w-[var(--max-width)]
81-
pl-4 md:pl-7 pr-0 lg:pr-7 py-0
80+
pl-4.5 md:pl-7 pr-0 lg:pr-7 py-0
8281
md:mx-auto
8382
relative
8483
min-[1281px]:px-0
8584
`}
8685
>
8786
<div
88-
class="col-span-6 md:col-span-12 flex gap-2 overflow-x-auto no-scrollbar pr-4 md:pr-7 lg:px-0 lg:overflow-hidden"
87+
class="col-span-6 md:col-span-12 flex gap-2 overflow-x-auto no-scrollbar pr-4 md:pr-7 lg:px-0 lg:overflow-hidden snap-mandatory snap-x"
8988
>
9089
{
9190
reasons.map((r) => (
92-
<div class="bg-white/10 p-5 rounded-2xl flex flex-col gap-5 min-w-[240px] lg:flex-1 lg:min-w-auto">
91+
<div class="bg-white/10 p-5 rounded-2xl flex flex-col gap-5 min-w-[240px] lg:flex-1 lg:min-w-auto snap-center">
9392
<Image
9493
src={images[r.data.image]()}
9594
alt={r.data.imageAlt}

‎apps/website/src/components/vibe-code-mvp/WorkWithUs.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const listItemClasses =
3030
---
3131

3232
<Section
33-
className="pt-18 pb-0 md:!py-24 !px-4 md:!px-7"
33+
className="pt-18 pb-0 md:!py-24 md:!px-7 !px-4.5"
3434
contentClassName={classnames(grid_classes, "!gap-y-7")}
3535
>
3636
{

‎apps/website/src/components/vibe-code-mvp/WorkWithUsDesktop.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2+
import { Picture } from "astro:assets";
23
import { getCollection } from "astro:content";
3-
import Section from "../Section.astro";
44
import classnames from "classnames";
55
import Pill from "../Pill.astro";
6+
import Section from "../Section.astro";
7+
import { grid_classes } from "../_grid";
68
import CircleCheck from "../icons/CircleCheck.astro";
79
import CircleX from "../icons/CircleX.astro";
8-
import { grid_classes } from "../_grid";
9-
import { Picture } from "astro:assets";
1010
1111
const phases = (await getCollection("vibe_code_mvp_phases")) as {
1212
data: {
@@ -22,7 +22,7 @@ const phases = (await getCollection("vibe_code_mvp_phases")) as {
2222
}[];
2323
2424
const images = import.meta.glob<{ default: ImageMetadata }>(
25-
"/src/assets/*.png"
25+
"/src/assets/*.png",
2626
);
2727
2828
const listItemClasses = "flex items-center gap-2.5 text-[22px] leading-8";
@@ -56,7 +56,7 @@ const listItemClasses = "flex items-center gap-2.5 text-[22px] leading-8";
5656
p.data.imageBgColor,
5757
{
5858
"opacity-100": !idx,
59-
}
59+
},
6060
)}
6161
>
6262
<Picture

0 commit comments

Comments
 (0)