-
Notifications
You must be signed in to change notification settings - Fork 273
feat(startups): revamp startups page #2474
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
WalkthroughStartups page now imports and renders DevelopersToolkit, Benefits, CaseStudiesLight, and StartupPartnerCTA, replacing the prior timeline/testimonial section. The feature list was converted to a responsive grid with updated items (including “Up to 80% discounts”, Cloud credits, Priority support, Founder swag). New presentational components were added: a Benefits grid (seven items), a DevelopersToolkit UI (Build/Deploy pills), CaseStudiesLight with an exported Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
static/images/icons/gradients/swag.svg
is excluded by!**/*.svg
📒 Files selected for processing (1)
src/routes/startups/+page.svelte
(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build
- GitHub Check: tests
- GitHub Check: format
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
♻️ Duplicate comments (2)
src/routes/startups/+page.svelte (2)
289-293
: The "Founder swag" copy mismatch is still unresolved.Lines 291-292 still contain the priority-support message instead of describing the swag benefit. This contradicts the "Founder swag" heading. This issue was previously flagged and remains unaddressed.
315-381
: Mobile overflow in toolkit badge row is still unresolved.Line 318 defines the Build badge group as
inline-flex
withoutflex-wrap
, causing the row (~600px wide with 6 badges) to overflow horizontally on mobile screens. This UX issue was previously flagged and remains unaddressed.Apply this diff to allow wrapping on small screens:
- class="inline-flex items-center gap-2 rounded-[24px] border border-dashed border-black/8 bg-white px-4 py-2" + class="inline-flex flex-wrap items-center gap-2 rounded-[24px] border border-dashed border-black/8 bg-white px-4 py-2"Consider applying the same fix to the DEPLOY group on line 389 for consistency.
🧹 Nitpick comments (2)
src/routes/startups/+page.svelte (2)
303-303
: Fixed height may cause overflow if content grows.The fixed height
h-[256px]
on the toolkit container could cause content to overflow if the badges wrap onto multiple lines (e.g., on tablets or after the suggested flex-wrap fix). Consider usingmin-h-[256px]
instead to allow the container to grow.- <div class="web-big-padding-section-level-2 h-[256px]"> + <div class="web-big-padding-section-level-2 min-h-[256px]">
307-311
: Manual line breaks reduce responsiveness.The hardcoded
<br />
tags in the heading (line 307) and paragraph (line 310) will force line breaks on all screen sizes. This may not be ideal for mobile or very wide screens.Consider removing manual breaks and using CSS (e.g.,
max-w-*
classes or responsive text utilities) to let text wrap naturally based on viewport width.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
static/images/icons/illustrated/light/databases.png
is excluded by!**/*.png
📒 Files selected for processing (1)
src/routes/startups/+page.svelte
(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: tests
🔇 Additional comments (3)
src/routes/startups/+page.svelte (3)
233-236
: LGTM! Grid layout improves responsiveness.The responsive grid (1 column → 2 columns → 4 columns) ensures features display cleanly on all screen sizes, and individual item centering with
mx-auto
works well within the grid cells.
244-248
: LGTM! Discount messaging is clear and compelling.The updated heading and description effectively highlight the 80% discount benefit on Pro and Scale plans, making the value proposition more prominent.
301-301
: LGTM! Increased padding accommodates new content.The additional bottom padding (
pb-[120px]
) provides appropriate spacing for the new developer toolkit section.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 3
♻️ Duplicate comments (2)
src/routes/startups/+page.svelte (2)
289-293
: Duplicate: "Founder swag" copy still mismatched.This issue was already flagged in a previous review. The paragraph under "Founder swag" incorrectly repeats the priority-support message instead of describing swag benefits.
318-381
: Duplicate: Mobile overflow issue still present.This issue was already flagged in a previous review. The Build badge container uses "inline-flex" without flex-wrap, causing horizontal overflow on mobile devices.
🧹 Nitpick comments (1)
src/routes/startups/+page.svelte (1)
320-320
: Improve semantic markup for the category labels.The "BUILD" and "DEPLOY" text spans should use a heading element or have better semantic markup for accessibility. Consider using
<h4>
or addingrole="heading"
to make the structure clearer for screen readers.- <span class="text-sm font-medium text-gray-700 uppercase">Build</span> + <h4 class="text-sm font-medium text-gray-700 uppercase">Build</h4>Apply the same change to the "DEPLOY" label on line 391.
Also applies to: 391-391
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
static/images/icons/gradients/backend.svg
is excluded by!**/*.svg
static/images/icons/gradients/globe.svg
is excluded by!**/*.svg
static/images/icons/gradients/rocket.svg
is excluded by!**/*.svg
static/images/icons/gradients/stars.svg
is excluded by!**/*.svg
📒 Files selected for processing (1)
src/routes/startups/+page.svelte
(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: tests
- GitHub Check: build
🔇 Additional comments (3)
src/routes/startups/+page.svelte (3)
233-235
: LGTM: Grid layout is responsive and well-structured.The responsive grid (grid-cols-1, md:grid-cols-2, lg:grid-cols-4) provides a clean, modern layout that adapts appropriately across breakpoints.
244-248
: LGTM: Discount copy is clear and accurate.The updated text "Up to 80% discounts" with the description specifying Pro and Scale plans clearly communicates the benefit to startups.
407-491
: LGTM: Benefits section structure is clear and well-organized.The benefits section provides a comprehensive overview of Appwrite's value proposition for startups. The responsive grid layout and content hierarchy are effective.
src/routes/startups/+page.svelte
Outdated
<h3 class="text-title font-aeonik-pro text-primary whitespace-nowrap"> | ||
Benefits of Appwrite<br />for <span class="relative">startups<span class="absolute bottom-0 left-0 h-1 w-full bg-pink-200"></span></span> | ||
</h3> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix potential text overflow and underline positioning.
Line 414 uses whitespace-nowrap
on the heading, which may cause horizontal overflow on very small screens. The underline effect with absolute
positioning will also break if the word "startups" wraps or if the text size changes.
Consider removing whitespace-nowrap
and adjusting the underline approach:
- <h3 class="text-title font-aeonik-pro text-primary whitespace-nowrap">
- Benefits of Appwrite<br />for <span class="relative">startups<span class="absolute bottom-0 left-0 h-1 w-full bg-pink-200"></span></span>
+ <h3 class="text-title font-aeonik-pro text-primary">
+ Benefits of Appwrite<br />for <span class="relative inline-block">startups<span class="absolute bottom-0 left-0 h-1 w-full bg-pink-200"></span></span>
</h3>
Adding inline-block
to the wrapper span ensures the underline doesn't extend beyond the word width if text reflows.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
<h3 class="text-title font-aeonik-pro text-primary whitespace-nowrap"> | |
Benefits of Appwrite<br />for <span class="relative">startups<span class="absolute bottom-0 left-0 h-1 w-full bg-pink-200"></span></span> | |
</h3> | |
<h3 class="text-title font-aeonik-pro text-primary"> | |
Benefits of Appwrite<br />for <span class="relative inline-block">startups<span class="absolute bottom-0 left-0 h-1 w-full bg-pink-200"></span></span> | |
</h3> |
🤖 Prompt for AI Agents
In src/routes/startups/+page.svelte around lines 413 to 415, the heading uses
whitespace-nowrap which can cause horizontal overflow on small screens and the
absolute-positioned underline can misalign if the word wraps; remove the
whitespace-nowrap class from the h3 and add inline-block to the wrapper span
(keep it relative and the inner underline absolute) so the underline width
follows the word and the heading can wrap naturally without overflow.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
♻️ Duplicate comments (3)
src/routes/startups/+page.svelte (3)
292-296
: Align the "Founder swag" copy with the heading.The paragraph under "Founder swag" still repeats the priority support messaging instead of describing swag benefits, creating a contradiction between the heading and body text.
This issue was previously flagged but remains unaddressed. Please update the body text to describe the swag benefit (e.g., mention exclusive founder merchandise, stickers, t-shirts, or other perks).
306-306
: Reconsider the fixed height constraint.The fixed height
h-[256px]
may cause content overflow or clipping if the toolkit badges wrap on smaller screens or if the heading text wraps unexpectedly.This issue was previously flagged but remains unaddressed. Consider using
min-h-[256px]
instead to allow the container to grow as needed.
320-384
: Fix mobile overflow in the toolkit badge row.The Build badge group uses
inline-flex
withoutflex-wrap
, causing the badge row to overflow horizontally on small screens (approximately 600px wide for six fixed-width badges).This issue was previously flagged but remains unaddressed. Add
flex-wrap
to allow badges to wrap on small screens:<div - class="inline-flex items-center gap-2 rounded-[24px] border border-dashed border-black/8 bg-white px-4 py-2" + class="inline-flex flex-wrap items-center gap-2 rounded-[24px] border border-dashed border-black/8 bg-white px-4 py-2" >
🧹 Nitpick comments (5)
src/routes/(marketing)/(components)/benefits.svelte (2)
53-53
: Consider shortening the default description.The default description spans 166 characters and may be verbose for some use cases. Consider a more concise alternative while maintaining clarity.
- description = "You don't need to have a team of engineers to develop, host, and scale applications. Appwrite gives you everything you need, including built-in security, AI, and open source.", + description = "Build, host, and scale applications without a large team. Appwrite provides everything you need with built-in security, AI, and open source.",
82-84
: Prefer Tailwind utilities over inline styles.The inline style for max-width and margin could be replaced with Tailwind utilities for consistency with the rest of the codebase.
<div class="mx-auto grid grid-cols-2 overflow-hidden lg:grid-cols-4" - style="max-width: 1200px; margin-inline: auto;" + class="mx-auto grid max-w-[1200px] grid-cols-2 overflow-hidden lg:grid-cols-4" >src/routes/startups/case-study-card-light.svelte (2)
26-36
: Improve alt text for better accessibility.The alt text currently uses
study.headline
, which may not be appropriate for a logo image. Logo alt text should typically describe what the logo represents (e.g., company name) rather than a headline.If the
CaseStudy
type includes a company name field, use that instead:- alt={study.headline} + alt={`${study.companyName} logo`}Or extract a company name from the existing data structure.
85-92
: Consider adding external link indicators.The "Read customer story" link navigates to
study.url
without indicating whether it opens in a new tab or navigates away. For better UX, consider adding visual indicators for external links if applicable.If the links open in a new tab, add
target="_blank"
andrel="noopener noreferrer"
:<a href={study.url} + target="_blank" + rel="noopener noreferrer" class="group flex items-center gap-1 text-left text-sm text-black hover:underline" >Read customer story <Iconsrc/routes/startups/case-studies-light.svelte (1)
44-53
: Simplify state management.The
getValue
andsetValue
functions are thin wrappers that add minimal value. ThegetValue
wrapper is unnecessary, and you can bindvalue
directly while keeping the validation logic inline.- let value = $state<string>('0'); - - const getValue = () => { - return value; - }; - - const setValue = (newValue: string) => { - if (!newValue.length) return; - value = newValue; - }; + let value = $state<string>('0');Then update the binding:
<ToggleGroup.Root - bind:value={getValue, setValue} + bind:value type="single"The validation in
setValue
prevents empty values, but if that's a ToggleGroup requirement, consider whether it's needed or should be handled differently.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/routes/(marketing)/(assets)/logos/devkind-light.svg
is excluded by!**/*.svg
📒 Files selected for processing (4)
src/routes/(marketing)/(components)/benefits.svelte
(1 hunks)src/routes/startups/+page.svelte
(4 hunks)src/routes/startups/case-studies-light.svelte
(1 hunks)src/routes/startups/case-study-card-light.svelte
(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: tests
🔇 Additional comments (7)
src/routes/startups/case-study-card-light.svelte (2)
7-13
: LGTM!The props interface is clean and well-typed. The optional
isActive
prop provides flexibility for animation control.
16-25
: Verify layout behavior with different numbers of case studies.The basis percentages (
basis-[15%]
for off,basis-[70%]
for on) are calculated for exactly three items (15% + 70% + 15% = 100%). If the number of case studies changes, this layout will break.Confirm that the case studies array will always contain exactly three items, or adjust the basis percentages to be dynamic based on the number of items.
src/routes/startups/case-studies-light.svelte (2)
8-16
: Verify the customer story URL for DevKind.The first study entry has a headline about "DevKind" but the URL points to
/blog/post/customer-story-storealert
. This appears to be a mismatch—either the URL is incorrect or the headline/attribution is incorrect.Please verify the correct customer story URL for DevKind or confirm if this entry should reference StoreAlert instead.
63-75
: LGTM!The ToggleGroup implementation correctly passes the required props to each CaseStudyCardLight component, and the
isActive
logic properly tracks the selected study.src/routes/startups/+page.svelte (3)
26-28
: LGTM!The new component imports are correctly structured and used appropriately in the page layout.
386-389
: LGTM!The dashed gap between Build and Deploy groups is a nice visual separator that clearly delineates the two badge groups.
411-415
: LGTM!The Benefits and CaseStudiesLight components are correctly integrated into the page flow, replacing the previous timeline and testimonial sections.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/routes/startups/case-studies-light.svelte (1)
44-53
: Simplify the state binding pattern.The getValue/setValue helper functions add unnecessary verbosity. In Svelte 5, you can use a simpler getter/setter pattern or bind directly to the state variable.
Apply this diff to simplify:
- let value = $state<string>('0'); - - const getValue = () => { - return value; - }; - - const setValue = (newValue: string) => { - if (!newValue.length) return; - value = newValue; - }; + let value = $state<string>('0'); + + const valueState = { + get value() { + return value; + }, + set value(newValue: string) { + if (!newValue.length) return; + value = newValue; + } + };Then update the binding:
- bind:value={getValue, setValue} + bind:value={valueState}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
src/routes/(marketing)/(assets)/logos/k-collect-light.svg
is excluded by!**/*.svg
src/routes/(marketing)/(assets)/logos/langx-light.svg
is excluded by!**/*.svg
📒 Files selected for processing (4)
src/routes/(marketing)/(components)/developers-toolkit.svelte
(1 hunks)src/routes/startups/+page.svelte
(5 hunks)src/routes/startups/case-studies-light.svelte
(1 hunks)src/routes/startups/case-study-card-light.svelte
(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/routes/(marketing)/(components)/developers-toolkit.svelte
🚧 Files skipped from review as they are similar to previous changes (1)
- src/routes/startups/case-study-card-light.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: tests
🔇 Additional comments (6)
src/routes/startups/case-studies-light.svelte (2)
56-73
: LGTM!The template structure is well-organized with proper responsive layout (flex-col on mobile, flex-row on large screens) and the ToggleGroup integration looks correct.
7-35
: All customer story URLs exist. The referenced pages/blog/post/customer-story-storealert
,/blog/post/customer-stories-langx
, and/blog/post/customer-stories-kcollect
map to existing+page.markdoc
files undersrc/routes/blog/post/
.src/routes/startups/+page.svelte (4)
293-297
: Note: Founder swag description still incorrect.The body text under "Founder swag" still repeats the priority support message instead of describing swag benefits. This was flagged in a previous review and marked as addressed, but the current code still shows the incorrect text.
If this was fixed in commit 9f1d5d8 as noted, please ensure the changes are included in this review.
307-307
: Note: Fixed height constraint still present.Line 307 still uses
h-[256px]
despite a previous comment suggestingmin-h-[256px]
to prevent content clipping, which was marked as addressed in commit 9f1d5d8.If this was fixed in the referenced commit, please ensure the changes are reflected in this review.
305-316
: LGTM!The new sections (DevelopersToolkit, Benefits, CaseStudiesLight) are properly integrated with clear comments and appropriate wrapper elements.
237-240
: LGTM!The conversion to a responsive grid layout with
grid-cols-1 md:grid-cols-2 lg:grid-cols-4
is well-implemented and provides a better user experience across different screen sizes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
♻️ Duplicate comments (3)
src/routes/startups/+page.svelte (3)
28-28
: Remove unused Features import (regression).The
Features
component is imported but not used in the template. This was previously addressed in commit 6d75d05 but has regressed.Apply this diff to remove the unused import:
- import Features from '$routes/(marketing)/(components)/features.svelte';
Run the following script to confirm the component is not used:
#!/bin/bash # Verify Features component usage in the file rg -n "Features" src/routes/startups/+page.svelte
294-298
: Fix the misaligned "Founder swag" copy (regression).The paragraph under the "Founder swag" heading still describes support services instead of the swag benefit. This contradicts the heading and was previously addressed in commit 9f1d5d8 but has regressed.
Apply this diff to align the copy with the heading:
<div class="flex flex-col gap-2 text-center"> <h2 class="text-label text-primary">Founder swag</h2> <p class="text-body font-medium"> - Get community support and dedicated email support from the - Appwrite team. + Receive exclusive founder merchandise including stickers, + apparel, and limited-edition items. </p> </div>
306-311
: Use flexible minimum height instead of fixed height (regression).Line 308 uses
h-[256px]
which can cause content clipping when badges wrap on smaller screens. This was previously addressed in commit 9f1d5d8 but has regressed.Apply this diff to use a flexible minimum height:
- <div class="web-big-padding-section-level-2 h-[256px]"> + <div class="web-big-padding-section-level-2 min-h-[256px]">
🧹 Nitpick comments (4)
src/routes/startups/case-study-card-light.svelte (3)
28-29
: Improve alt text for logo images.Using
study.headline
as alt text for logo images isn't ideal. Logos should have descriptive alt text that identifies the company/brand, while the headline describes a different aspect of the case study.Consider adding a
logoAlt
orcompanyName
field to theCaseStudy
type for more semantic alt text:- alt={study.headline} + alt={`${study.companyName} logo`}This provides better context for screen reader users.
Also applies to: 49-50, 77-78
68-71
: Consider semantic HTML for testimonial.The testimonial quote is wrapped in a
<div>
. Using a<blockquote>
element would provide better semantic meaning and accessibility.Apply this diff:
- <!-- Testimonial quote --> - <div class="text-left text-sm leading-relaxed font-bold text-black sm:text-base"> + <blockquote class="text-left text-sm leading-relaxed font-bold text-black sm:text-base"> "{study.blurb}" - </div> + </blockquote>
57-66
: Consider using heading element for semantic structure.The main headline is wrapped in a
<span>
. Using a heading tag (e.g.,<h3>
) would improve document structure and accessibility, making it easier for screen readers to navigate the content hierarchy.Apply this diff:
- <!-- Main headline --> - <span + <h3 class={cn( 'font-aeonik-pro block text-left text-lg leading-tight text-black sm:text-xl md:text-2xl', { 'animate-fade-in': isActive } )} > {study.headline} - </span> + </h3>src/routes/startups/(components)/StartupPartnerCTA.svelte (1)
6-27
: Reconsider the negative margin and responsive constraints.Three layout concerns:
Negative margin: The
-mb-24
creates intentional overlap but requires the next section to account for it, which can cause layout issues if that section changes.Tall minimum height:
min-h-[600px]
may be excessive on mobile devices where viewport height is limited.Hardcoded line breaks: The
<br />
tags in lines 19-20 won't adapt to different screen sizes and may create awkward breaks on mobile.Consider these adjustments:
class={cn( - 'border-greyscale-200/4 relative -mb-24 flex min-h-[600px] items-center justify-center border-y', + 'border-greyscale-200/4 relative flex min-h-[400px] md:min-h-[500px] items-center justify-center border-y', 'before:absolute before:inset-0 before:top-0 before:left-0 before:-z-10 before:block before:h-full before:bg-[radial-gradient(circle_at_-15%_-10%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)]', 'after:absolute after:inset-0 after:top-0 after:right-0 after:-z-10 after:mt-auto after:mb-0 after:block after:h-full after:bg-[radial-gradient(circle_at_120%_125%,_hsla(177,_53%,_69%,_0.2)_0px,_transparent_40%)]' )}<p class="text-description text-secondary"> - Appwrite partners with venture capital firms and startup <br /> accelerators to - provide exclusive discounts and other benefits <br /> to their portfolio companies. + Appwrite partners with venture capital firms and startup accelerators to + provide exclusive discounts and other benefits to their portfolio companies. </p>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/routes/(marketing)/(components)/benefits.svelte
(1 hunks)src/routes/startups/(components)/StartupPartnerCTA.svelte
(1 hunks)src/routes/startups/+page.svelte
(7 hunks)src/routes/startups/case-studies-light.svelte
(1 hunks)src/routes/startups/case-study-card-light.svelte
(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/routes/startups/case-studies-light.svelte
- src/routes/(marketing)/(components)/benefits.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: tests
🔇 Additional comments (8)
src/routes/startups/case-study-card-light.svelte (1)
87-94
: Link inside toggle may cause interaction conflicts.The "Read customer story" link is nested within a
ToggleGroup.Item
, which may lead to UX confusion: clicking the link navigates away, while clicking elsewhere on the card toggles its state. This dual behavior can be unexpected for users.Please verify that:
- Clicking the link properly navigates without toggling the card state
- The toggle behavior is intuitive when a link is present
- The link receives proper focus indication independently of the card's focus state
Consider extracting the link outside the toggle or using
event.stopPropagation()
if interaction conflicts arise during testing.src/routes/startups/(components)/StartupPartnerCTA.svelte (1)
1-4
: LGTM!The imports are appropriate for the component's needs.
src/routes/startups/+page.svelte (6)
238-240
: LGTM!The responsive grid implementation with appropriate breakpoints works well for displaying the features.
313-314
: LGTM!The Benefits section integration is clean and well-placed in the page flow.
316-317
: LGTM!The Case Studies section integration is appropriate for showcasing startup success stories.
334-370
: LGTM!The updated eligibility criteria with clear bullet points improve clarity for potential applicants.
464-493
: LGTM!The reCAPTCHA notice and error display are properly implemented, and the "Get Started" button text is more action-oriented than "Apply".
501-507
: LGTM!The StartupPartnerCTA placement is logical, and moving the footer inside the container maintains consistent page structure.
style="background: radial-gradient(circle at 0% 100%, rgba(239, 68, 68, 0.12) 0%, transparent 40%), radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.12) 0%, transparent 40%), var(--background, #EDEDF0);" | ||
> | ||
<ToggleGroup.Root | ||
bind:value={getValue, setValue} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why can't we just bind the value directly?
import CaseStudiesLight from './case-studies-light.svelte'; | ||
import Features from '$routes/(marketing)/(components)/features.svelte'; | ||
import Benefits from '$routes/(marketing)/(components)/benefits.svelte'; | ||
import StartupPartnerCTA from './(components)/StartupPartnerCTA.svelte'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
use an index.ts
for these and import like import { ... } from '$routes/(marketing)/(components)'
.
What does this PR do?
Refactored startups page
Test Plan
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
yes
Summary by CodeRabbit
New Features
Refactor
Style
UX