53 Commits
Author SHA1 Message Date
Jinho Jang 3e36fc9790 Increase small text to 12px (#114)
* fix: increase small text to 12px

* fix: use initiative CTA label

* refactor: use Tailwind text-xs utility

* fix: make homepage banner dismissible

* fix: update Discord links and banner text

* fix: refresh Discord invite links
2026-07-23 20:58:59 +09:00
jinhojang6 221877a0f9 fix: adjust margin for image container in TechOverviewModular component 2026-06-22 17:15:45 +09:00
jinhojang6 2c536ae495 fix: adjust layout and spacing in PodcastHero and TechOverviewModular components 2026-06-22 17:06:32 +09:00
jinhojang6 8f95bba72b fix: refine technology stack use case cards 2026-06-20 11:26:41 +09:00
jinhojang6 e17f6626bb feat(web): implement technology stack use cases logic and tests 2026-06-20 11:00:57 +09:00
jinhojang6 328a010e04 feat(web): implement DragScroll component for enhanced horizontal scrolling experience 2026-06-20 01:04:05 +09:00
jinhojang6 435d264a1a fix(web): update mobile text and structure in use cases section; refine descriptions in technology stack pages 2026-06-19 16:23:12 +09:00
jinhojang6 c229b369a3 fix: adjust padding and margins for better layout consistency in technology stack components 2026-06-18 03:28:39 +09:00
jinhojang6 fac973de4d fix: adjust hero component heights and margins for better responsiveness 2026-06-18 03:17:03 +09:00
JulesFILIOT e2857132f8 perf(web): optimize oversized images and prefer webp
Recompress/resize images over 150KB (cap 1920px, webp q80; mozjpeg where webp lost), convert png/jpg to webp where smaller, and update all references. Raster payload drops from ~36MB to ~16MB; ukdebt og image becomes an opaque jpeg for crawler compatibility.
2026-06-11 19:00:00 +09:00
JulesFILIOT ca83ce6f91 fix(web): match basecamp panel width to how-logos-compares at all widths 2026-06-11 18:59:59 +09:00
JulesFILIOT e9f88d3a9e fix(web): anchor basecamp giant switch image top-left
Shows the screenshot's top-left and keeps a roughly constant top gap
across the tablet banner; no-op on the desktop disc.
2026-06-11 17:09:44 +09:00
JulesFILIOT ea6ac520e9 fix(web): show tech stack section mobile design up to 1366px site-wide
Move the diagram breakpoint to min-[1367px] (flag renamed desktopAt1367)
and pass it from the shared explorer so detail pages match. Center the
details card content and scope hover reveals to desktop so the overlay
cannot overlap the inline details; the blue tint stays on all widths.
2026-06-10 16:52:34 +09:00
jinhojang6 21f59258c8 fix(technology-stack): enhance clarity in storage and stack descriptions 2026-06-05 01:33:04 +09:00
jinhojang6 e9b9481e4a chore(web): update footer tagline and enhance research and infrastructure links 2026-06-04 23:03:08 +09:00
jinhojang6 38c2bd06d5 chore(web): refactor layout components for consistency and update navigation links 2026-06-04 22:42:54 +09:00
jinhojang6 30061bbff6 Refactor spacing and layout across various components for improved consistency and responsiveness
- Updated padding and margin values in multiple sections including About, Builder Portal, Circles CTA, and more to use consistent spacing units.
- Adjusted button and footer styles for better alignment and visual hierarchy.
- Enhanced FAQ accordion component with smoother transitions and improved accessibility attributes.
- Refined Tech Stack and Technology Overview sections for better layout and spacing.
- Standardized gap and padding values in navigation and overlay components for a cohesive design.
2026-06-02 22:21:40 +09:00
JulesFILIOT e674e6d3d7 fix(use-cases): enforce underlined documentation link 2026-06-02 20:37:09 +09:00
JulesFILIOT fc7d0e1958 fix(logos-app): adjust mobile width and panel spacing 2026-06-02 20:36:57 +09:00
JulesFILIOT b41d004802 fix(open-source): align mobile rows and links 2026-06-02 20:36:50 +09:00
JulesFILIOT 1abceb0153 fix(tech-stack): tune mobile hero and stack spacing 2026-06-02 20:36:38 +09:00
jinhojang6 b2c74100dd feat: update responsive styles and layout adjustments in tech stack components 2026-06-02 03:03:48 +09:00
jinhojang6 822c9ed614 feat: implement basecamp install CTA resolver and update links across components 2026-06-02 01:35:03 +09:00
jinhojang6 9e8ffc1c84 refactor: update responsive styles and improve layout across multiple components 2026-06-02 00:58:34 +09:00
jinhojang6 5e9d2ca24f refactor: refactor responsive styles across multiple components to improve layout and readability
- Updated hero-section, mountain-section, and parallel-society-section to use min-[1025px] for responsive design.
- Adjusted press-section and social-proof-section for better mobile and desktop handling.
- Enhanced start-building-section and tech-stack-section with new responsive classes.
- Modified use-cases-section to improve scrolling behavior based on breakpoints.
- Refined tech-overview-use-cases and footer components for consistent styling.
2026-06-02 00:19:15 +09:00
jinhojang6 fb561b1e0c refactor: refactor layout and styling across multiple components for improved responsiveness and consistency
- Updated positioning and sizing in PressHero and ArticlesHeading components for better alignment.
- Removed WorkWithUsPage component as it is no longer needed.
- Adjusted styles in GallerySection, AboutWhoWeAre, BuildersHubHero, and other sections to utilize responsive units and improve layout on different screen sizes.
- Enhanced the Footer and Pagination components for better visual consistency and usability.
- Modified TableRow component to ensure proper text truncation and responsiveness.
2026-06-01 22:56:26 +09:00
jinhojang6 d4ef41fca6 refactor: refactor technology stack components and enhance media panel
- Updated `StorageAccess` component to utilize `OverviewMediaPanel` for better structure and readability.
- Refined `TechOverviewHero` layout and adjusted responsive styles for improved visual consistency.
- Modified `TechOverviewLogosApp` to adjust image size handling for better responsiveness.
- Enhanced `TechOverviewModular` layout with improved grid structure and responsive adjustments.
- Updated `TechOverviewOpenSource` to streamline layout and improve accessibility.
- Refactored `TechOverviewStack` to use `OverviewMediaPanel` for consistent design across sections.
- Improved `TechOverviewUseCases` layout for better responsiveness and visual hierarchy.
- Adjusted `GiantSwitch` component styles for better alignment and responsiveness.
- Created `OverviewMediaPanel` component to standardize media presentation across sections.
- Updated technology stack JSON to reflect title changes for clarity.
2026-06-01 22:14:56 +09:00
JulesFILIOT 9cdb3fba0d fix(web): align tech stack section UI
Match technology stack section details to design updates: adjust marker typography,
remove the compare eyebrow marker, align the open-source heading style, and use
the download icon for the Basecamp install CTA.
2026-06-01 20:26:55 +09:00
Jinho Jang ede23c2cc2 Refactor: centralize content width with ContentWidth component + align layouts to Figma (#24)
* fix(builders-hub): align ideas page details to Figma

Match exact Figma specs for the Builder Ideas page (desktop 121:11657,
mobile 121:11581):

- idea-row: desktop index weight Regular (was medium); mobile title
  width 179px; mobile Apply CTA square corners (drop rounded-[4px]) and
  left-aligned at x=298 (right-[22px])
- bottom CTA: heading H3 (36px desktop / 30px mobile) instead of H2
  (56px); restore text-h3-serif line-height 1 / -0.03em; gap 24px

* fix(builders-hub): align RFP page details to Figma

Match exact Figma specs for the Builder RFPs page (desktop 121:11577,
mobile 121:11489):

- rfp-card: title letter-spacing -0.01em (H4 Sans) instead of
  tracking-tight (-0.025em)
- rfp-list-row: apply the same Row-entry corrections as the ideas row —
  desktop index weight Regular (was medium), mobile title width 179px,
  Learn More CTA square corners (drop rounded-[4px]) and left-aligned at
  x=298 (right-[22px])
- listing grid (RFP branch only): desktop top margin 138px so the first
  card lands at Figma y=374 (was 160px -> 396px, 22px too low); ideas
  and list-view branches untouched

Text copy verified against Figma (titles/taglines match, British
spelling kept where Figma used American). Grid layout, card geometry
(345x317 desktop / 369x317 mobile), colours, borders, 96px images and
CTA positions confirmed matching.

* fix(get-started): align spacing, colours, and copy with Figma

- Correct 04 heading copy to "What you can build today"
- Swap community row alternating backgrounds (row 0 = grey-01)
- Restyle community row labels to 14px (sans-medium number + serif name)
- Underline community row "Learn more" CTA (border-b)
- Build card body: Public Sans 14px instead of mono 10px
- Fix install/docs section top padding (install pt-24, docs pt-40 on desktop)
- Add 6px gap between install card image and text panel

* fix(basecamp): align spacing, padding, and text gaps with Figma design

- Fixed HowItWorksSection: md:py-3 → md:py-10 (was reducing padding on desktop)
- Fixed LocalFirstSection: py-3 → py-10 for proper vertical spacing
- Increased gap spacing from 3 to 4 across card components and sections
- Added uppercase styling to LocalFirstSection eyebrow
- Added opacity-0 to footerLabel for layout consistency
- Adjusted ModularSection vertical padding: py-10 → py-12 mobile, py-10 desktop
- Added flex flex-col gap-4 to ModularSection body text
- CapabilitiesSection: py-6 → py-10 mobile for consistent spacing
- ResourcesSection: py-10 → py-12 mobile for alignment with other sections
- Improved internal spacing in ResourceCard (gap-3 → gap-4, mt-3 → mt-4)

All changes verified against Figma desktop design at node-id=146-15527

* refine(basecamp): fine-tune section spacing and padding alignment

- HeroSection: pb-12 mobile, pb-10 desktop (better spacing at section break)
- HowItWorks title gap: mb-6 → mb-8 (increased spacing to content)
- ModularSection: removed inconsistent py-12, standardized to py-10
- CapabilitiesSection heading: mb-10 → mb-12 (better visual hierarchy)
- ResourcesSection: removed inconsistent py-12, standardized to py-10

All sections now maintain consistent padding pattern: py-10 with device-specific overrides where needed

* fix(lambda-prize): align spacing, padding, and gap with design

- HowItWorks: gap-3 → gap-4 mobile, gap-6 desktop, added md:px-3 md:py-10
- HowItWorks titles: mb-6 → mb-8 for both sections
- FeaturedPrizes: mt-6 → mt-10 mobile, mt-12 desktop, gap-3 → gap-4, moved px-3 to section level
- AboutProgramme: gap-3 → gap-4 mobile, gap-6 desktop, added md:px-3 md:py-10
- Support: pt-10 → py-10 mobile, py-12 desktop, added px-3, removed redundant px-3 from grid

All sections now have consistent spacing patterns aligned with Figma design specifications

* fix(lambda-prize): precision spacing refinements - standardize padding and margins

- DataRows: increase py-1.5 → py-3 for better vertical spacing
- FeaturedPrizes: reduce excessive padding pt-[100px] → pt-10, md:pt-[200px] → md:pt-12
- Hero: standardize margins mb-[60px] → mb-12, mt-[60px] → mt-12
- Support: standardize margin-top mt-[35px] → mt-6, md:mt-[91px] → md:mt-8

* fix(research): align section heights with Figma design

- Change hero section from min-h-[447px] to h-[447px] (fixed height)
- Change overview section from min-h-[670px] to h-[670px] (desktop)
- Change resource rows from min-h-[50px] to h-[50px] (fixed height)
- Change contribute section from min-h-[262px] to h-[262px] (desktop)

These fixed heights match the Figma design specifications for precise
layout control across all breakpoints.

* fix(research): revert to min-h for responsive design

Responsive design requires minimum heights (min-h) instead of fixed
heights (h) to accommodate content overflow on various screen sizes.
Maintains Figma design intent while ensuring proper mobile/tablet
layout behavior.

* fix(press): align PressHero padding with Figma design

Change PressHero section padding from pt-6 (24px) to pt-10 (40px)
to match Figma design specifications where section starts at y=40.

All other spacing, margins, colors, and image ratios already aligned
with Figma design. Press page now 100% design-compliant.

* fix(podcast): add wrapper padding for consistent page layout spacing

* fix(podcast): align top padding with Figma design (pt-20/80px)

* fix(broadcast-network): align padding with Figma design specs

* fix(technology-stack): align hero padding with design specifications

* fix(technology-stack): center hero section on desktop to fix left alignment

* fix(technology-stack): make architecture image responsive and prevent clipping

* fix(technology-stack): constrain all sections to 1440px max-width on desktop

* refactor: centralize max-width layout at page level to eliminate duplication

- Add SectionLayout wrapper to all technology-stack pages (main, blockchain, networking, storage, messaging)
- Move 1440px max-width constraint from individual section components to page-level layout
- Remove mx-auto max-w-360/max-w-[1440px] from tech-stack sections and shared components
- Reduces code duplication and centralizes layout management

* refactor: simplify layout by inlining max-width constraint

- Remove SectionLayout function definitions from each page
- Use simple div wrapper at page return level
- Reduces code duplication and improves maintainability

* refactor: revert page-level layout constraint, keep section-level management

- Remove max-width wrapper from page returns
- Each section maintains full-width background
- Section components manage internal 1440px constraint
- Preserves visual hierarchy from Figma design

* refactor: centralize content width constraints with ContentWidth component

- Create ContentWidth component for 1440px max-width constraint
- Remove layout-level max-width from main element to allow full-width sections
- Apply ContentWidth to all home page sections for consistent layout
- Convert absolute positioning to flex/grid layouts in:
  * Parallel Society (gallery display)
  * Tech Stack (title and metadata centering)
  * Feature Cards (3-column grid)
  * Circles CTA (vertical layout)
  * Press Section (flex grid)
  * Social Proof (4-column grid)
  * Start Building (2-column layout)
  * About Section (centered closing text)
- Implement responsive sizing with Tailwind classes
- Update technology-stack page section for proper centering

This enables full-width background colors while constraining content to 1440px max-width, improving design system consistency across all pages.

* refactor: make social proof section full-width without 1440px constraint

Remove ContentWidth wrapper from the stat cards section to allow it to span full screen width while maintaining proper padding.

* fix: add line break in 'The Logos Technology Stack' title

Match Figma design by breaking 'The Logos' and 'Technology Stack' onto separate lines.

* fix: add line break in Basecamp title

Match Figma design by breaking 'Basecamp is our' and 'Exit Guide.' onto separate lines.

* fix: add line break to tech stack title on mobile view

Use <br /> instead of literal newline for proper HTML rendering of 'The ... Technology Stack' title.

* fix: add width constraints to AppInstall paragraph text

Match container width (260px mobile, 464px desktop) to ensure text wrapping aligns with Figma design.

* Revert "fix: add width constraints to AppInstall paragraph text"

This reverts commit 184efed9421b0b8c006d5121f26da72b7d015491.

* fix(tech-stack): constrain desktop title to 464px to match Figma

Desktop h2 used w-full, so 'The Logos Technology Stack' stayed on one
line at wide/4K viewports. Figma node 121:6875 sets it to 464px, which
wraps it to two lines. Parent is items-center so the fixed width centers.

* refacor: refactor layout components to use ContentWidth for consistent styling

- Updated various sections across the application to wrap content in the ContentWidth component for improved layout consistency.
- Adjusted padding and margin values in several sections to enhance visual alignment.
- Modified text content in the About section to reflect updated messaging.
- Improved accessibility and responsiveness by ensuring all sections utilize the ContentWidth component.

* feat: integrate ContentWidth component for layout consistency across various sections

* feat: update StorageAccess component with new card data and CTA buttons for improved user interaction

* feat: update MessagingIntro and related tests for improved layout and responsiveness based on Figma specifications

* Refactor code structure for improved readability and maintainability

* Refactor code structure for improved readability and maintainability

* Refactor technology stack detail layout and hero components

- Introduced `TechStackDetailPage` and `TechStackDetailSection` components for consistent layout across technology stack pages.
- Updated individual technology stack pages (blockchain, messaging, networking, storage) to utilize the new layout components.
- Refactored hero components (BlockchainHero, MessagingHero, NetworkingHero, StorageHero) to use `TechStackDetailHero` for improved structure and reusability.
- Adjusted spacing and margin classes to align with design specifications, removing redundant margin classes.
- Added `imageFit` property to builders hub settings schema to control image display behavior.
- Updated tests to ensure layout consistency and adherence to design specifications.

* feat: enhance layout and responsiveness of articles and podcasts sections based on Figma specifications

* fix: prevent messaging delivery image clipping

* feat: update article and podcast layouts for improved responsiveness and alignment with Figma designs

* test: remove ui implementation contracts
2026-05-31 04:06:32 +09:00
Jules 67c7d7e9c2 fix(ui): add button hover effects and fix arrow icon
* feat(ui): add LogosWordmark icon

SVG wordmark for the "Logos" brand name, using fill-current so color
is driven by surrounding text color -- matching the pattern of LogosMark.

* fix(web): align navbar brand lockup with Figma

- Shrink lambda mark from 14px to 11px (Figma: 8x11px vector)
- Tighten brand lockup gap from 6px to 4px
- Replace text label with LogosWordmark SVG; keep sr-only span for a11y
- Fix mobile brand link typography (was font-serif 18px, now text-eyebrow)
- Nudge wordmark down 1px to optically align with the lambda mark

* fix(ui): align overlay navbar brand lockup and typography with Figma

- Replace text logoLabel fallback with LogosMark + LogosWordmark SVGs
- Move logo top from md:top-1.5 to top-3.5 to align with panel tabs
- Remove tracking-[0.08em] and add font-semibold on panel tab buttons
- Increase CTA vertical padding from py-2 to py-2.5

* fix(web): align closed navbar brand lockup, typography, and layout with Figma

- Remove BrandLockup wrapper; inline LogosMark + LogosWordmark directly
- Remove tracking-[0.08em] and add font-semibold on nav link buttons
- Increase desktop CTA vertical padding from min-h-7 to py-2.5
- Restructure desktop bar to absolute positioning (relative container)
  so logo, nav, and CTA positions mirror the overlay header exactly
- Mobile bar: add relative positioning; logo now uses absolute top-3.5 left-3

* fix(ui): vertically center overlay header elements

- Logo and close button: top-3.5/top-[14px] → top-1/2 -translate-y-1/2
  (elements live inside the 42px OverlayHeader, so 50% resolves correctly)
- Nav tabs and CTA: top-3.5/top-1.5 → top-[22.5px]/top-[22px] -translate-y-1/2
  (elements live in the outer 700px container, so a fixed value matching
  the header mid-point is used instead of 50%)
- Nav tabs: items-start → items-center to match the centered position

* fix(web): vertically center navbar and fix mobile menu gap

- Mobile bar: replace 3-col grid with flat relative container; remove
  dead-code nav/CTA shell that was never visible at mobile widths
- Mobile logo: top-3.5 → top-1/2 -translate-y-1/2 (true vertical center)
- Mobile hamburger: repositioned from grid col-2 (50% center) to
  left-[62.5%] -translate-x-1/2 (matches overlay close button and
  Figma spec), adding gap between logo and menu; add font-semibold
- Desktop logo, nav tabs, CTA: top-3.5/top-1.5 → top-1/2 -translate-y-1/2

* fix(ui): update arrow icon and add hover effects to button variants

- Replace ButtonArrowIcon SVG with filled 10x10 arrow, increase gap to 1.5
- Primary: hover:bg-accent-steel-teal (#5F797C)
- Secondary: hover:bg-gray-02 (#B8BDB8) with border cleared on hover

* fix(web): update download icon style

* fix(web): fit status CTA button to content width

* fix(ui): make button arrow inherit variant colour

Use currentColor for the arrow icon so the primary button renders a white arrow while other variants keep their text-aligned icon colour.
2026-05-28 19:25:16 +09:00
Jules 4218e62b6e fix(web): remove sitewide max-w centering causing edge gaps at >1440px
* fix(web): remove max-w centering from technology-stack sections

Sections using px-3 combined with an inner max-w-354 mx-auto container
produced extra centering margins at viewports wider than 1440px. At
1512px the content sat 48px from the edge instead of the intended 12px.

Removed the max-w-354 / mx-auto constraint from all four tech-overview
section inner containers. The -mx-3 negative-margin trick in
tech-overview-stack self-corrects since it expands relative to the now
full-width inner div.

* fix(web): remove max-w centering from home and active-circles sections

Same fix as the tech-stack commit. Also fixes the hardcoded
w-[1416px] left-1/2 -translate-x-1/2 card grid in feature-cards-section
-- replaced with left-3 right-3 so the grid always spans the full content
width. Sections with md:px-0 on the inner container had that removed so
px-3 applies at all breakpoints.

* fix(web): remove max-w centering from circles and app pages

Same fix applied to circles map containers, and to the get-started,
lambda-prize, broadcast-network, podcast, and press hero page sections.
The podcast section also had md:px-0 removed from the section element
since the inner max-w constraint was removed.
2026-05-27 19:22:09 +09:00
Jinho JangandCopilot Autofix powered by AI bb6a7279ac fix: update mobile UI (#11)
* fix: delay homepage heading reveals

* fix: centre home about cards on mobile

* fix: align tech stack mobile divider spacing

* fix: align home stack mobile interactions

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* fix: tighten home mobile sections

* fix: move tech stack mobile divider below ctas

* fix: disable static export RSC navigation fetches

* fix: align mobile tech stack cards

* fix: let home problem cards grow on mobile

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
2026-05-27 05:46:58 +09:00
Jinho Jang 0d4f57fb0c Feature/subtle home tech motion (#10)
* fix: use canonical press reading times

* fix: reduce homepage motion intensity
2026-05-27 04:08:34 +09:00
jinhojang6 37eef1b53d feat: add technology stack motion polish 2026-05-21 00:12:32 +09:00
jinhojang6 73c1665fc9 fix: enhance reading time handling in press articles and improve card display 2026-05-19 20:07:59 +09:00
jinhojang6 832a9f61ec fix: reuse tech stack diagram 2026-05-19 19:57:18 +09:00
jinhojang6 2979c9e882 fix: show technology stack status cta 2026-05-19 19:39:25 +09:00
jinhojang6 36eaa9d827 fix: enhance tech stack section with details and improve card interactions 2026-05-19 19:36:22 +09:00
jinhojang6 85d4068cbe fix: refine technology stack layout 2026-05-19 17:57:30 +09:00
jinhojang6 fabfeda5a9 fix: align technology stack overview layout 2026-05-19 16:42:54 +09:00
jinhojang6 e302b207c2 fix: align technology stack with figma 2026-05-19 16:31:38 +09:00
jinhojang6 83a8917309 feat: update technology stack page design 2026-05-19 16:01:30 +09:00
jinhojang6 6af1a9c9bc test: add static accessibility navigation smoke 2026-05-18 14:52:33 +09:00
jinhojang6 e319fdc696 feat: publish Logos packages to npm 2026-05-15 20:01:59 +09:00
jinhojang6 8c7b4e39cf Refactor code for improved readability and consistency
- Updated error messages for clarity in GitHub client and configuration files.
- Reformatted code for better alignment and readability in various files including mutations, loaders, and schemas.
- Enhanced error handling by including causes in error messages where applicable.
- Adjusted function signatures for consistency across loaders and schemas.
- Added missing dependencies in turbo.json for test command.
2026-05-07 12:54:29 +09:00
jinhojang6 2c2fc598a6 fix: fix bugs with i18n 2026-04-28 20:18:12 +09:00
jinhojang6 5667df4610 feat: replace SVG icons with masked span elements for improved performance and styling 2026-04-28 19:42:16 +09:00
jinhojang6 2469d53b7c refactor: refactor home and technology stack sections to use structured data 2026-04-28 10:36:11 +09:00
jinhojang6 ba3ae15e9d feat: refactor TechOverviewStack to use data-driven approach and remove hardcoded routes 2026-04-28 10:00:47 +09:00
jinhojang6 f5e4b6ad68 refactor: refactor button and card components to use localized navigation 2026-04-25 02:57:31 +09:00