feat(landing): replicate Apple/SwiftUI style from guides app on landing page#2052
Conversation
Deploying packrat-landing with
|
| Latest commit: |
2f7af4b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://562d7116.packrat-landing.pages.dev |
| Branch Preview URL: | https://copilot-replicate-ui-style-i.packrat-landing.pages.dev |
|
@copilot ci failing |
The CI failure is pre-existing and unrelated to the landing page changes. The failing You can verify this is pre-existing: every recent |
|
@copilot fix failing type check and failing Cloudflare builds pls - all actions must pass |
Fixed in commit TypeScript check-types (51 errors fixed):
Cloudflare Pages: The landing page TypeScript is clean — Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot merge development into here |
There was a problem hiding this comment.
Pull request overview
This PR aligns the landing page UI with the Apple/SwiftUI aesthetic already used in the Guides app (colors, typography, rounded surfaces), and includes a set of mobile (Expo) + API type-safety fixes that unblock build/type errors during the nativewindui v1→v2 migration.
Changes:
- Re-skin landing page sections/components to Apple-style cards/badges/buttons and update Tailwind/CSS tokens + Mona Sans font usage.
- Add nativewindui ref-type compatibility aliases and adjust Expo screens to match updated icon/color/prop APIs.
- Minor API/test typing fixes (DB drizzle typing, Sentry capture context cast, and initializing
imageUrls).
Reviewed changes
Copilot reviewed 28 out of 29 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/nativewindui/index.ts | Re-export nativewindui plus add ref-type compatibility aliases. |
| packages/api/test/setup.ts | Tighten testDb typing to ReturnType<typeof drizzle>. |
| packages/api/src/routes/packTemplates/generateFromOnlineContent.ts | Initialize imageUrls and adjust Sentry captureException context casting. |
| bun.lock | Lockfile metadata update (configVersion). |
| apps/landing/tailwind.config.js | Add Apple color tokens, shadows, border radii, container padding, and font family wiring. |
| apps/landing/app/globals.css | Switch to Apple-like palette, add apple-* helper classes, remove prior gradient/noise styles. |
| apps/landing/app/layout.tsx | Switch landing font setup to Mona Sans and align layout structure with guides. |
| apps/landing/app/page.tsx | Remove decorative backgrounds/noise wrapper; simplify to sections-only layout. |
| apps/landing/components/main-nav.tsx | Apple-style nav (rounded links, simplified logo text, updated sticky header styling). |
| apps/landing/components/site-footer.tsx | Match guides footer styling (apple gray background, simpler branding/links). |
| apps/landing/components/sections/landing-hero.tsx | Replace mesh/blob visuals with subtle gradients; apple badge/buttons/cards. |
| apps/landing/components/sections/feature-section.tsx | Replace gradient-border cards/text with apple-card + pill badge styling. |
| apps/landing/components/sections/how-it-works.tsx | Replace orange gradient styling with apple-blue and apple-card step cards. |
| apps/landing/components/sections/integration-section.tsx | Replace gradient components with apple-card layout. |
| apps/landing/components/sections/testimonials.tsx | Replace gradient UI with apple-card and apple-gray section background. |
| apps/landing/components/sections/download.tsx | Replace animated gradient border with apple-card + updated CTA buttons. |
| apps/landing/components/sections/faq.tsx | Replace gradient UI with apple-card styling and simpler support CTA. |
| apps/expo/app/_layout.tsx | Define AlertRef locally using ElementRef<typeof Alert>. |
| apps/expo/app/(app)/(tabs)/profile/index.tsx | Fix imports/options and replace theme color fields with hex values. |
| apps/expo/app/(app)/(tabs)/profile/notifications.tsx | Replace invalid icon names. |
| apps/expo/app/(app)/messages/chat.tsx | Update context menu icon names to valid SF Symbol keys. |
| apps/expo/app/(app)/messages/chat.android.tsx | Update dropdown icon names to valid SF Symbol keys. |
| apps/expo/app/(app)/messages/conversations.tsx | Update icon names and remove namingScheme usage. |
| apps/expo/app/(app)/messages/conversations.android.tsx | Update icon names and remove namingScheme usage. |
| apps/expo/app/(app)/settings/index.android.tsx | Remove deprecated List props; use supported style/contentContainerStyle. |
| apps/expo/app/(app)/weather-alert-preferences.tsx | Fix invalid icon name. |
| apps/expo/features/ai/components/WebSearchGenerativeUI.tsx | Replace missing theme token color with hex. |
| apps/expo/features/packs/components/GapSuggestion.tsx | Replace missing theme token color with hex. |
| apps/expo/features/packs/components/HorizontalCatalogItemCard.tsx | Replace missing theme token color with hex. |
| import type { Alert, ContextMenu } from '@packrat-ai/nativewindui'; | ||
| // Type compatibility aliases for v1 → v2 migration | ||
| import type { ElementRef } from 'react'; | ||
| export type AlertRef = ElementRef<typeof Alert>; | ||
| export type ContextMenuRef = ElementRef<typeof ContextMenu>; |
There was a problem hiding this comment.
Alert/ContextMenu are imported with import type, but the aliases use ElementRef<typeof Alert> / ElementRef<typeof ContextMenu>, which requires the value namespace. This will fail TypeScript with “cannot be used as a value because it was imported using 'import type'”. Import these as values, or avoid a value import by using a type query like typeof import('@packrat-ai/nativewindui').Alert/ContextMenu when building the ElementRef aliases.
| import type { Alert, ContextMenu } from '@packrat-ai/nativewindui'; | |
| // Type compatibility aliases for v1 → v2 migration | |
| import type { ElementRef } from 'react'; | |
| export type AlertRef = ElementRef<typeof Alert>; | |
| export type ContextMenuRef = ElementRef<typeof ContextMenu>; | |
| // Type compatibility aliases for v1 → v2 migration | |
| import type { ElementRef } from 'react'; | |
| export type AlertRef = ElementRef< | |
| typeof import('@packrat-ai/nativewindui').Alert | |
| >; | |
| export type ContextMenuRef = ElementRef< | |
| typeof import('@packrat-ai/nativewindui').ContextMenu | |
| >; |
| <div className="flex flex-col sm:flex-row gap-3 pt-4"> | ||
| <Link | ||
| href={siteConfig.download.appStoreLink} | ||
| onClick={(e) => scrollToSection(e, siteConfig.download.appStoreLink)} | ||
| className="inline-flex items-center justify-center gap-2 rounded-full bg-apple-blue text-white px-8 h-12 text-sm font-medium hover:bg-apple-blue/90 transition-colors" | ||
| > | ||
| <Apple className="h-5 w-5" /> | ||
| App Store | ||
| </Link> | ||
|
|
||
| <Button asChild size="lg" variant="outline" className="group"> | ||
| <Link | ||
| href={siteConfig.download.googlePlayLink} | ||
| onClick={(e) => scrollToSection(e, siteConfig.download.googlePlayLink)} | ||
| > | ||
| <Store className="mr-2 h-5 w-5" /> | ||
| Google Play | ||
| </Link> | ||
| </Button> | ||
| </div> | ||
| <Link | ||
| href={siteConfig.download.googlePlayLink} | ||
| onClick={(e) => scrollToSection(e, siteConfig.download.googlePlayLink)} | ||
| className="inline-flex items-center justify-center gap-2 rounded-full border border-border bg-background px-8 h-12 text-sm font-medium hover:bg-black/5 dark:hover:bg-white/10 transition-colors" | ||
| > | ||
| <Store className="h-5 w-5" /> | ||
| Google Play | ||
| </Link> |
There was a problem hiding this comment.
The App Store / Google Play <Link>s call scrollToSection(...), which prevents default navigation even though these hrefs are external URLs. This makes the buttons non-functional; restrict the smooth-scroll handler to #... anchors (or remove the handler here).
| c.get('sentry').captureException(apiError, { | ||
| extra: { tiktokUrl: contentUrl, errorType: 'tiktok_service_error' }, | ||
| } as unknown); | ||
| } as any); |
There was a problem hiding this comment.
Casting the Sentry context argument to any (} as any) removes type-safety and can hide real mistakes in the data passed to Sentry. Prefer using the proper Sentry context type (or a narrower unknown as <expected-type> cast) so this stays checked by TypeScript.
| } as any); | |
| }); |
Done in merge commit |
Deploying packrat-guides with
|
| Latest commit: |
fb84bd6
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://82b44ead.packrat-guides-6gq.pages.dev |
| Branch Preview URL: | https://copilot-replicate-ui-style-i.packrat-guides-6gq.pages.dev |
andrew-bierman
force-pushed
the
copilot/replicate-ui-style-in-landing-page
branch
from
421bf10 to
db2b6ea
Compare
|
@copilot looking good, but responsive is broken. please audit and fix |
- download: remove scrollToSection from external App Store / Google Play links (was calling preventDefault, breaking navigation); use target="_blank" instead. Also center text/buttons on mobile (mx-auto lg:mx-0 / text-center lg:text-left) - landing-hero: center hero content on mobile — add mx-auto lg:mx-0, text-center lg:text-left, justify-center lg:justify-start to text column, CTA buttons, social proof, and stats row - how-it-works: fix connector line — was showing as vertical on md (single-col) when it should only appear on lg (3-col). Simplified to horizontal-only, hidden lg:block, aligned to top of step circles (top-8, 16.67% inset) - testimonials: fix quote icon overflow — moved from absolute -top-4 -left-4 (overflowed outside card, caused horizontal scroll on mobile) to top-3 left-3 inside the card; add overflow-hidden to card - feature-section: remove double-card wrapping on FeatureCard — FeatureCard already has rounded-2xl + bg-card + shadow-lg; outer apple-card created double shadow/border layering - site-footer: remove lg:ml-auto from Product column (unintended right-shift in 4-col grid layout) Agent-Logs-Url: https://github.com/PackRat-AI/PackRat/sessions/f67a56d2-5772-4615-8674-a676e0e3f9f9 Co-authored-by: andrew-bierman <94939237+andrew-bierman@users.noreply.github.com>
Fixed in commit Critical bug — Download buttons non-functional:
Hero not centered on mobile:
How It Works connector line wrong breakpoint:
Testimonials quote icon caused horizontal scroll on mobile:
Feature cards had double shadow/border:
Footer product column shifted right:
|
|
@copilot some images appear to be stretched ? |
- device-mockup.tsx: change aspect ratio from 9:16 to 9:19.5 — all app screenshots are 1170×2532 / 1290×2796 (modern iPhone proportions = 9:19.5). The 9:16 frame was making the phone look too "fat/wide", causing images to appear stretched/distorted relative to the actual phone shape. - download.tsx: replace explicit width=522/height=1024 (wrong dimensions vs actual 1290×2796 image) with Next.js fill prop + object-cover object-top, consistent with DeviceMockup and the correct pattern for images inside a positioned container. Agent-Logs-Url: https://github.com/PackRat-AI/PackRat/sessions/b72b0e51-2179-4367-a74f-ab11bb0ca490 Co-authored-by: andrew-bierman <94939237+andrew-bierman@users.noreply.github.com>
Fixed in commit
|
|
@copilot fix failing ci |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
📝 WalkthroughWalkthroughThis PR refactors the landing page design system to adopt an Apple-inspired aesthetic. It removes gradient, glass-card, and custom button components in favor of new Tailwind utility classes, updates the font stack to Mona Sans, extends the Tailwind configuration with new colors and shadows, and simplifies component markup by eliminating decorative background elements. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The development branch updated decodeHtmlEntities.ts to use the `he` library (commit 9d05974) but didn't add `he`/`@types/he` to package.json. The PR merge CI test (which merges this branch into development) therefore picks up the `import he from 'he'` in the merged decodeHtmlEntities.ts but can't resolve the types, causing: apps/expo/lib/utils/decodeHtmlEntities.ts(1,16): error TS2307: Cannot find module 'he' or its corresponding type declarations. Add he@^1.2.0 to dependencies and @types/he@^1.2.3 to devDependencies, both inserted in alphabetical order to satisfy the sort-package-json CI check. Agent-Logs-Url: https://github.com/PackRat-AI/PackRat/sessions/218706e8-749c-45fb-83aa-066e280509c1 Co-authored-by: andrew-bierman <94939237+andrew-bierman@users.noreply.github.com>
Fixed in commit Added |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
apps/landing/tailwind.config.js (1)
102-111: Keep thegradientanimation in one source of truth.Lines 102-111 duplicate the existing
@keyframes gradient/.animate-gradientdefinitions already living inapps/landing/app/globals.css. Keeping both makes future tweaks drift; prefer either the Tailwind utility or the global CSS version, not both.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/landing/tailwind.config.js` around lines 102 - 111, The tailwind config duplicates the gradient keyframes/utility already defined in globals.css; remove the redundant Tailwind animation entry named "gradient" (the animation key "gradient" and any related config) so the project uses the single source of truth implemented with `@keyframes` gradient / .animate-gradient in globals.css, or alternatively delete the globals.css definitions and keep the Tailwind "gradient" animation—pick one approach and remove the other to avoid drift (look for the "gradient" entry in the animation block and the `@keyframes` gradient / .animate-gradient definitions to update).apps/landing/app/globals.css (1)
105-109: Avoid a base-layertransition-allon every link and button.Lines 105-109 make every anchor and button animate all properties, which can add accidental motion and extra repaint work across the landing page. Narrow this to
transition-colorsor apply it only to the Apple helper classes that actually need it.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/landing/app/globals.css` around lines 105 - 109, The global rule targeting the selectors "a, button" applies transition-all and causes unnecessary repaints; replace or narrow it by using "transition-colors duration-200" (or limit the rule to the specific Apple helper classes used for smooth transitions) so only color changes animate, or move the transition to the helper class rather than the base "a, button" selector.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/landing/components/main-nav.tsx`:
- Around line 83-95: The nav links currently only change visual styling for the
active section; update the Link components (the ones calling scrollToSection and
using activeSection and item.href) to include aria-current="location" when
activeSection === item.href so assistive tech receives the active-state cue;
apply this change to both the desktop Link block and the corresponding mobile
Link block (the other Link usage rendering item.title) in main-nav.tsx.
- Around line 104-110: Replace the anchor-styled CTA Link with the shared Button
component using "asChild" so the Button provides styling while Link remains the
child; locate the CTA block that uses Link (the one using
siteConfig.cta.primary.href/text and onClick={e => scrollToSection(...)}),
remove the duplicated button classes from Link and instead render <Button
asChild> with a Link child passing href and onClick (keep scrollToSection), and
apply the current button classes to the Button component usage so both desktop
and mobile CTAs (including the other similar block around
siteConfig.cta.secondary or the block at lines 157-163) use Button asChild
consistently.
In `@apps/landing/components/sections/download.tsx`:
- Around line 43-62: Replace the top-level Link elements for the App Store and
Google Play CTAs with the shared Button component using the asChild pattern:
render <Button asChild> and nest a <Link> inside it (keep href, target, rel on
Link) so the Button's variants and focus treatment apply; move the button
styling/variant props (classes, rounded/full, bg, hover, px/h-12,
text-sm/font-medium) onto the Button and keep the icon components (Apple, Store)
and siteConfig.download.appStoreLink / siteConfig.download.googlePlayLink
unchanged. Ensure you use Button asChild with a Link child (not Button wrapped
by Link) for both CTAs.
- Around line 69-71: Remove the inline style on the device-frame div (the
element with className "relative overflow-hidden rounded-[30px]
md:rounded-[40px] border-[10px] md:border-[14px] bg-white aspect-[9/19.5]
shadow-apple-lg") and replace it with a Tailwind-based border color utility;
either use an arbitrary color class like border-[`#1E293B`] or, preferably, add a
theme token in tailwind config (e.g. theme.extend.colors.frame = '#1E293B') and
apply it as a class (e.g. border-frame) so the border color is not set via style
prop and remains themeable/consistent across apps.
In `@apps/landing/components/sections/landing-hero.tsx`:
- Around line 83-99: Replace the raw button-styled <Link> usages with the shared
Button abstraction by using <Button asChild> and placing the <Link> as its child
for both primary and secondary CTAs; keep the href and onClick (scrollToSection)
on the <Link>, move the button styling/variants onto <Button>, and preserve
children (Download, ArrowRight, and siteConfig.cta.*.text) and transition props
so visual and interaction behavior (hover states, icon animations) remain
unchanged; update both occurrences referenced by siteConfig.cta.primary and
siteConfig.cta.secondary and ensure you use the Button component (asChild)
instead of styling Link directly.
---
Nitpick comments:
In `@apps/landing/app/globals.css`:
- Around line 105-109: The global rule targeting the selectors "a, button"
applies transition-all and causes unnecessary repaints; replace or narrow it by
using "transition-colors duration-200" (or limit the rule to the specific Apple
helper classes used for smooth transitions) so only color changes animate, or
move the transition to the helper class rather than the base "a, button"
selector.
In `@apps/landing/tailwind.config.js`:
- Around line 102-111: The tailwind config duplicates the gradient
keyframes/utility already defined in globals.css; remove the redundant Tailwind
animation entry named "gradient" (the animation key "gradient" and any related
config) so the project uses the single source of truth implemented with
`@keyframes` gradient / .animate-gradient in globals.css, or alternatively delete
the globals.css definitions and keep the Tailwind "gradient" animation—pick one
approach and remove the other to avoid drift (look for the "gradient" entry in
the animation block and the `@keyframes` gradient / .animate-gradient definitions
to update).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 924c580d-f936-48b5-9d6d-fb27692cad76
📒 Files selected for processing (14)
apps/landing/app/globals.cssapps/landing/app/layout.tsxapps/landing/app/page.tsxapps/landing/components/main-nav.tsxapps/landing/components/sections/download.tsxapps/landing/components/sections/faq.tsxapps/landing/components/sections/feature-section.tsxapps/landing/components/sections/how-it-works.tsxapps/landing/components/sections/integration-section.tsxapps/landing/components/sections/landing-hero.tsxapps/landing/components/sections/testimonials.tsxapps/landing/components/site-footer.tsxapps/landing/components/ui/device-mockup.tsxapps/landing/tailwind.config.js
| <Link | ||
| key={item.href} | ||
| href={item.href} | ||
| onClick={(e) => scrollToSection(e, item.href)} | ||
| className={cn( | ||
| 'px-3 py-2 text-sm font-medium rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors', | ||
| activeSection === item.href | ||
| ? 'text-apple-blue font-semibold' | ||
| : 'text-foreground/80', | ||
| )} | ||
| > | ||
| {item.title} | ||
| </Link> |
There was a problem hiding this comment.
Expose the active section to assistive tech.
The current item is only distinguished by color and weight right now. Add aria-current="location" when activeSection === item.href on both desktop and mobile links so screen readers get the same active-state cue.
Also applies to: 142-152
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/landing/components/main-nav.tsx` around lines 83 - 95, The nav links
currently only change visual styling for the active section; update the Link
components (the ones calling scrollToSection and using activeSection and
item.href) to include aria-current="location" when activeSection === item.href
so assistive tech receives the active-state cue; apply this change to both the
desktop Link block and the corresponding mobile Link block (the other Link usage
rendering item.title) in main-nav.tsx.
| <Link | ||
| href={siteConfig.cta.primary.href} | ||
| onClick={(e) => scrollToSection(e, siteConfig.cta.primary.href)} | ||
| className="hidden md:inline-flex items-center gap-1.5 ml-2 px-4 py-1.5 rounded-full bg-apple-blue text-white text-sm font-medium hover:bg-apple-blue/90 transition-colors" | ||
| > | ||
| {siteConfig.cta.primary.text} | ||
| </Link> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use <Button asChild> for the nav CTAs too.
These are button-styled links in both desktop and mobile nav, so they should stay on the shared button component instead of duplicating button styling on Link. As per coding guidelines: apps/{landing,guides}/**/*.ts{,x}: Use <Button asChild> with a <Link> child for button-styled links, not wrapping <Button> inside <Link>.
Also applies to: 157-163
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/landing/components/main-nav.tsx` around lines 104 - 110, Replace the
anchor-styled CTA Link with the shared Button component using "asChild" so the
Button provides styling while Link remains the child; locate the CTA block that
uses Link (the one using siteConfig.cta.primary.href/text and onClick={e =>
scrollToSection(...)}), remove the duplicated button classes from Link and
instead render <Button asChild> with a Link child passing href and onClick (keep
scrollToSection), and apply the current button classes to the Button component
usage so both desktop and mobile CTAs (including the other similar block around
siteConfig.cta.secondary or the block at lines 157-163) use Button asChild
consistently.
| <div className="flex flex-col sm:flex-row justify-center lg:justify-start gap-3 pt-4"> | ||
| <Link | ||
| href={siteConfig.download.appStoreLink} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="inline-flex items-center justify-center gap-2 rounded-full bg-apple-blue text-white px-8 h-12 text-sm font-medium hover:bg-apple-blue/90 transition-colors" | ||
| > | ||
| <Apple className="h-5 w-5" /> | ||
| App Store | ||
| </Link> | ||
|
|
||
| <Button asChild size="lg" variant="outline" className="group"> | ||
| <Link | ||
| href={siteConfig.download.googlePlayLink} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Store className="mr-2 h-5 w-5" /> | ||
| Google Play | ||
| </Link> | ||
| </Button> | ||
| </div> | ||
| <Link | ||
| href={siteConfig.download.googlePlayLink} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="inline-flex items-center justify-center gap-2 rounded-full border border-border bg-background px-8 h-12 text-sm font-medium hover:bg-black/5 dark:hover:bg-white/10 transition-colors" | ||
| > | ||
| <Store className="h-5 w-5" /> | ||
| Google Play | ||
| </Link> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use the shared Button pattern for these store CTAs.
These are button-styled links, so styling Link directly here bypasses the shared button variants and focus treatment the landing app expects. Please render both with <Button asChild> instead. As per coding guidelines: apps/{landing,guides}/**/*.ts{,x}: Use <Button asChild> with a <Link> child for button-styled links, not wrapping <Button> inside <Link>.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/landing/components/sections/download.tsx` around lines 43 - 62, Replace
the top-level Link elements for the App Store and Google Play CTAs with the
shared Button component using the asChild pattern: render <Button asChild> and
nest a <Link> inside it (keep href, target, rel on Link) so the Button's
variants and focus treatment apply; move the button styling/variant props
(classes, rounded/full, bg, hover, px/h-12, text-sm/font-medium) onto the Button
and keep the icon components (Apple, Store) and siteConfig.download.appStoreLink
/ siteConfig.download.googlePlayLink unchanged. Ensure you use Button asChild
with a Link child (not Button wrapped by Link) for both CTAs.
| <div | ||
| className="relative overflow-hidden rounded-[30px] md:rounded-[40px] border-[10px] md:border-[14px] bg-white aspect-[9/19.5] shadow-apple-lg" | ||
| style={{ borderColor: '#1E293B' }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove the inline border color from the device frame.
Line 71 reintroduces inline styling in a landing component. Please move this into Tailwind classes or a shared token-backed utility so the mockup stays themeable and consistent. Based on learnings: Applies to apps/{landing,guides}/**/*.ts{,x} : Use Tailwind CSS for all styling with no inline styles in web apps.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/landing/components/sections/download.tsx` around lines 69 - 71, Remove
the inline style on the device-frame div (the element with className "relative
overflow-hidden rounded-[30px] md:rounded-[40px] border-[10px] md:border-[14px]
bg-white aspect-[9/19.5] shadow-apple-lg") and replace it with a Tailwind-based
border color utility; either use an arbitrary color class like border-[`#1E293B`]
or, preferably, add a theme token in tailwind config (e.g.
theme.extend.colors.frame = '#1E293B') and apply it as a class (e.g.
border-frame) so the border color is not set via style prop and remains
themeable/consistent across apps.
| <Link | ||
| href={siteConfig.cta.primary.href} | ||
| onClick={(e) => scrollToSection(e, siteConfig.cta.primary.href)} | ||
| className="group inline-flex items-center justify-center gap-2 rounded-full bg-apple-blue text-white px-8 h-12 text-sm font-medium hover:bg-apple-blue/90 transition-colors" | ||
| > | ||
| <Download className="h-4 w-4" /> | ||
| {siteConfig.cta.primary.text} | ||
| <ArrowRight className="h-4 w-4 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" /> | ||
| </Link> | ||
|
|
||
| <Link | ||
| href={siteConfig.cta.secondary.href} | ||
| onClick={(e) => scrollToSection(e, siteConfig.cta.secondary.href)} | ||
| className="inline-flex items-center justify-center gap-2 rounded-full border border-border bg-background px-8 h-12 text-sm font-medium hover:bg-black/5 dark:hover:bg-white/10 transition-colors" | ||
| > | ||
| {siteConfig.cta.secondary.text} | ||
| </Link> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Keep the hero CTAs on the shared button abstraction.
Both links are styled as buttons, so this should stay on <Button asChild> rather than raw Link styling. That keeps the hero aligned with the repo’s shared button semantics and interaction states. As per coding guidelines: apps/{landing,guides}/**/*.ts{,x}: Use <Button asChild> with a <Link> child for button-styled links, not wrapping <Button> inside <Link>.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/landing/components/sections/landing-hero.tsx` around lines 83 - 99,
Replace the raw button-styled <Link> usages with the shared Button abstraction
by using <Button asChild> and placing the <Link> as its child for both primary
and secondary CTAs; keep the href and onClick (scrollToSection) on the <Link>,
move the button styling/variants onto <Button>, and preserve children (Download,
ArrowRight, and siteConfig.cta.*.text) and transition props so visual and
interaction behavior (hover states, icon animations) remain unchanged; update
both occurrences referenced by siteConfig.cta.primary and
siteConfig.cta.secondary and ensure you use the Button component (asChild)
instead of styling Link directly.
github-actions
Bot
added
dependencies
Coverage Report for Expo Unit Tests Coverage (./apps/expo)
File CoverageNo changed files found. |
Coverage Report for API Unit Tests Coverage (./packages/api)
File CoverageNo changed files found. |
Uh oh!
There was an error while loading. Please reload this page.