Skip to content

Conversation

HarshMN2345
Copy link
Member

@HarshMN2345 HarshMN2345 commented Oct 2, 2025

What does this PR do?

Refactored startups page

Test Plan

image image image image image image

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

    • Added Benefits section, Developers Toolkit (Build/Deploy pills), interactive Case Studies gallery, and a Startup Partner CTA to the Startups page.
    • Introduced new startup perks: up to 80% discounts, cloud credits, priority support, and Founder swag visuals.
  • Refactor

    • Reworked Startups page layout into a responsive grid and replaced the previous timeline/content blocks.
  • Style

    • Updated hero copy, spacing, and visual hierarchy to highlight discounts and credits.
  • UX

    • Updated application form flow: button text changed to "Get Started", added reCAPTCHA notice and improved submission/error handling.

Copy link
Contributor

coderabbitai bot commented Oct 2, 2025

Walkthrough

Startups 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 CaseStudy type and toggle-driven case study cards, and a StartupPartnerCTA call-to-action. Form submit text and UX elements (reCAPTCHA notice, submit/back interactions, error display) were adjusted.

Possibly related PRs

Suggested reviewers

  • adityaoberai
  • LauraDuRy
  • atharvadeosthale

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title Check ✅ Passed The title "feat(startups): revamp startups page" accurately reflects the core update of the pull request by identifying it as a new feature focused on overhauling the startups page, and it is concise, clear, and follows conventional commit style.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat-SER-420-New-Startups-Page

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between 7efd4a0 and d53db99.

⛔ 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

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 without flex-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 using min-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

📥 Commits

Reviewing files that changed from the base of the PR and between d53db99 and af5d5ff.

⛔ 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 adding role="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

📥 Commits

Reviewing files that changed from the base of the PR and between af5d5ff and 48bfde0.

⛔ 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.

Comment on lines 413 to 415
<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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
<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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 without flex-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" and rel="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 <Icon
src/routes/startups/case-studies-light.svelte (1)

44-53: Simplify state management.

The getValue and setValue functions are thin wrappers that add minimal value. The getValue wrapper is unnecessary, and you can bind value 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

📥 Commits

Reviewing files that changed from the base of the PR and between 426c71c and 9f1d5d8.

⛔ 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between 9f1d5d8 and 7ae055b.

⛔ 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 under src/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 suggesting min-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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 or companyName field to the CaseStudy 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:

  1. 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.

  2. Tall minimum height: min-h-[600px] may be excessive on mobile devices where viewport height is limited.

  3. 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

📥 Commits

Reviewing files that changed from the base of the PR and between 7ae055b and 57ff0c1.

📒 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:

  1. Clicking the link properly navigates without toggling the card state
  2. The toggle behavior is intuitive when a link is present
  3. 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}
Copy link
Member

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?

Comment on lines +27 to +30
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';
Copy link
Member

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)'.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants