[READY] Update Individuals Hero Section by Sharqiewicz · Pull Request #1100 · pendulum-chain/vortex

Sharqiewicz · 2026-03-31T10:44:26Z

No description provided.

netlify · 2026-03-31T10:44:31Z

✅ Deploy Preview for vortex-sandbox ready!

Name	Link
🔨 Latest commit	`128d6b6`
🔍 Latest deploy log	https://app.netlify.com/projects/vortex-sandbox/deploys/69cd4ab9ee538800080530ec
😎 Deploy Preview	https://deploy-preview-1100--vortex-sandbox.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-03-31T10:44:32Z

✅ Deploy Preview for vortexfi ready!

Name	Link
🔨 Latest commit	`128d6b6`
🔍 Latest deploy log	https://app.netlify.com/projects/vortexfi/deploys/69cd4ab906e9230008a4ebf7
😎 Deploy Preview	https://deploy-preview-1100--vortexfi.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

Updates the Individuals landing page hero visuals and CTA copy by replacing the static widget preview with a new interactive globe component (powered by cobe), plus some small navigation CTA styling/text adjustments.

Changes:

Add cobe dependency to support a new globe visualization.
Replace Individuals Hero widget preview images with a new <Globe /> component.
Update Desktop navbar CTA label and adjust its border-radius styling.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
package.json	Adds `cobe` dependency (currently only at workspace root).
bun.lock	Locks `cobe@2.0.1`.
apps/frontend/src/sections/individuals/Hero/index.tsx	Swaps widget preview imagery for the new globe and adjusts hero padding classes.
apps/frontend/src/components/Navbar/DesktopNavbar.tsx	Updates CTA text and adjusts Tailwind classes on the button.
apps/frontend/src/components/Globe/index.tsx	Introduces the new interactive globe + overlay markers implementation.
contracts/relayer/typechain-types/contracts/MockERC20Permit.ts	TypeChain generated type tweak for an event output type.
contracts/relayer/typechain-types/@openzeppelin/contracts/utils/cryptography/EIP712.ts	TypeChain generated type tweak for an event output type.
contracts/relayer/typechain-types/@openzeppelin/contracts/token/ERC20/extensions/ERC20Permit.ts	TypeChain generated type tweak for an event output type.
contracts/relayer/typechain-types/@openzeppelin/contracts/interfaces/IERC5267.ts	TypeChain generated type tweak for an event output type.

Comments suppressed due to low confidence (1)

package.json:52

cobe is imported by the frontend (apps/frontend/src/components/Globe/index.tsx) but is only added to the root package.json. To keep workspace dependencies accurate and avoid install/build issues when operating within the apps/frontend workspace (or with stricter tooling), add cobe to apps/frontend/package.json as well (likely using the repo’s catalog: pattern).

  "dependencies": {
    "big.js": "^7.0.1",
    "cobe": "^2.0.1",
    "husky": "^9.1.7",
    "lint-staged": "^16.1.0",
    "numora-react": "^3.0.3"
  },

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-01T08:56:40Z

    <section
      aria-label={t("pages.main.hero.title")}
-      className="relative overflow-hidden bg-[radial-gradient(at_74%_98%,theme(colors.blue.900),theme(colors.blue.950),theme(colors.blue.950))] py-16 lg:py-32"
+      className="relative overflow-hidden bg-[radial-gradient(at_74%_98%,theme(colors.blue.900),theme(colors.blue.950),theme(colors.blue.950))] py-16 lg:py-42"


lg:py-42 is not a standard Tailwind spacing utility (and this repo is using Tailwind v4 CSS-first config without a custom spacing scale). This class will be ignored, so the large-screen padding likely won’t change as intended. Use a valid spacing token (e.g., lg:py-32/lg:py-40) or an arbitrary value (e.g., lg:py-[10.5rem]) if you need an exact size.

Suggested change

className="relative overflow-hidden bg-[radial-gradient(at_74%_98%,theme(colors.blue.900),theme(colors.blue.950),theme(colors.blue.950))] py-16 lg:py-42"

className="relative overflow-hidden bg-[radial-gradient(at_74%_98%,theme(colors.blue.900),theme(colors.blue.950),theme(colors.blue.950))] py-16 lg:py-40"

Copilot · 2026-04-01T08:56:41Z

            <div className="flex items-center">
-              <Link className="btn btn-vortex-secondary rounded-3xl" to="/{-$locale}/widget">
-                Buy & Sell
+              <Link className="btn btn-vortex-secondary rounded-3xl!" to="/{-$locale}/widget">


rounded-3xl! is not valid Tailwind syntax for the important modifier. Tailwind uses a leading ! (e.g., !rounded-3xl) rather than a trailing one, so this won’t apply and may leave the button with unintended styling.

Suggested change

<Link className="btn btn-vortex-secondary rounded-3xl!" to="/{-$locale}/widget">

<Link className="btn btn-vortex-secondary !rounded-3xl" to="/{-$locale}/widget">

Copilot · 2026-04-01T08:56:41Z

+    const mq = window.matchMedia("(min-width: 1024px), (min-width: 640px)");
+    const handler = () => setSize(getGlobeSize());
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);


window.matchMedia("(min-width: 1024px), (min-width: 640px)") is effectively just (min-width: 640px) (since 1024px implies 640px). As a result, the change event won’t fire when crossing the 1024px breakpoint, so the globe size won’t update from md to lg. Use separate media queries/listeners (or a resize observer) so both breakpoint crossings trigger a recalculation.

Suggested change

const mq = window.matchMedia("(min-width: 1024px), (min-width: 640px)");

const handler = () => setSize(getGlobeSize());

mq.addEventListener("change", handler);

return () => mq.removeEventListener("change", handler);

const mqSm = window.matchMedia("(min-width: 640px)");

const mqLg = window.matchMedia("(min-width: 1024px)");

const handler = () => setSize(getGlobeSize());

mqSm.addEventListener("change", handler);

mqLg.addEventListener("change", handler);

return () => {

mqSm.removeEventListener("change", handler);

mqLg.removeEventListener("change", handler);

};

Copilot · 2026-04-01T08:56:42Z

+    <div
+      className={cn("relative cursor-grab select-none active:cursor-grabbing lg:absolute", className)}
+      style={{ height: size, touchAction: "manipulation", width: size }}
+      {...dragHandlers}
+    >


dragHandlers includes isDraggingRef, and spreading {...dragHandlers} onto a DOM <div> will pass isDraggingRef as an unknown attribute. This can produce React warnings and may end up in the DOM. Only spread the pointer event handlers and keep isDraggingRef separate (e.g., destructure it out before spreading).

ebma

Looks great 🚀

Let's address the comments generated by the copilot review and merge afterward @Sharqiewicz.

Sharqiewicz · 2026-04-02T09:47:29Z

@ebma ready ✅

Sharqiewicz added 4 commits March 23, 2026 16:01

add Cobe

5b84fbd

fix cobe position

495e266

improve Cobe size

1b33539

improve Globe responsiveness

b823521

Sharqiewicz changed the title ~~Update Individuals Hero Section~~ [IN PROGRESS] Update Individuals Hero Section Mar 31, 2026

fix Globe position

5e8f6b8

Sharqiewicz changed the title ~~[IN PROGRESS] Update Individuals Hero Section~~ [READY] Update Individuals Hero Section Mar 31, 2026

Merge branch 'staging' into feat/introduce-cobe

5c00be4

ebma requested a review from Copilot April 1, 2026 08:52

Copilot started reviewing on behalf of ebma April 1, 2026 08:52 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

ebma self-requested a review April 1, 2026 08:59

ebma reviewed Apr 1, 2026

View reviewed changes

Sharqiewicz added 3 commits April 1, 2026 18:14

add vertical rotation, 2-axis drag, and fix DOM attribute leak

101c6e1

address PR comments

45a3fa6

address PR comments

128d6b6

Sharqiewicz merged commit 4971165 into staging Apr 2, 2026
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[READY] Update Individuals Hero Section#1100

[READY] Update Individuals Hero Section#1100
Sharqiewicz merged 9 commits intostagingfrom
feat/introduce-cobe

Sharqiewicz commented Mar 31, 2026

Uh oh!

netlify Bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

ebma left a comment

Uh oh!

Sharqiewicz commented Apr 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	className="relative overflow-hidden bg-[radial-gradient(at_74%_98%,theme(colors.blue.900),theme(colors.blue.950),theme(colors.blue.950))] py-16 lg:py-42"
	className="relative overflow-hidden bg-[radial-gradient(at_74%_98%,theme(colors.blue.900),theme(colors.blue.950),theme(colors.blue.950))] py-16 lg:py-40"

	<Link className="btn btn-vortex-secondary rounded-3xl!" to="/{-$locale}/widget">
	<Link className="btn btn-vortex-secondary !rounded-3xl" to="/{-$locale}/widget">

-    const mq = window.matchMedia("(min-width: 1024px), (min-width: 640px)");
-    const handler = () => setSize(getGlobeSize());
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
+    const mqSm = window.matchMedia("(min-width: 640px)");
+    const mqLg = window.matchMedia("(min-width: 1024px)");
+    const handler = () => setSize(getGlobeSize());
+    mqSm.addEventListener("change", handler);
+    mqLg.addEventListener("change", handler);
+    return () => {
+      mqSm.removeEventListener("change", handler);
+      mqLg.removeEventListener("change", handler);
+    };

Conversation

Sharqiewicz commented Mar 31, 2026

Uh oh!

netlify Bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vortex-sandbox ready!

Uh oh!

netlify Bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vortexfi ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

ebma left a comment

Choose a reason for hiding this comment

Uh oh!

Sharqiewicz commented Apr 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented Mar 31, 2026 •

edited

Loading

netlify Bot commented Mar 31, 2026 •

edited

Loading