Revamp landing page with tech stack, API overview, and roadmap #37
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for colab-flow ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Reviewer's GuideRevamps the landing page into a tech‑focused, OSS‑oriented marketing surface by redesigning hero, header, pricing, features, CTA, and footer, and by introducing new seed data for tech stack, API endpoints, and roadmap plus a quick-start install/config section and GitHub CTAs. Class diagram for updated landing page components and seed modulesclassDiagram
class LandingPage {
- boolean isMenuOpen
- number scrollY
+ useEffect_handleScroll()
+ render()
}
class Header {
+ boolean isMenuOpen
+ function setIsMenuOpen(isOpen)
+ number scrollY
+ render()
}
class Hero {
+ render()
}
class Pricing {
+ render()
}
class Feature {
+ render()
}
class Cta {
+ render()
}
class Footer {
+ render()
}
class features_seed {
+ array features
}
class techStack_seed {
+ array techStack
}
class endpoints_seed {
+ array endpoints
}
class roadmapItems_seed {
+ array roadmapItems
}
%% Relationships between layout and sections
LandingPage --> Header : passes_isMenuOpen_setIsMenuOpen_scrollY
LandingPage --> Hero
LandingPage --> Feature
LandingPage --> Pricing
LandingPage --> Cta
LandingPage --> Footer
%% Seed usage
Feature --> features_seed : uses_features
Pricing --> techStack_seed : uses_techStack
Pricing --> endpoints_seed : uses_endpoints
Hero --> roadmapItems_seed : uses_roadmapItems
Flow diagram for seed-based marketing content feeding landing sectionsflowchart LR
subgraph Seeds
A[features_seed]
B[techStack_seed]
C[endpoints_seed]
D[roadmapItems_seed]
end
subgraph Sections
E[Feature_section]
F[Tech_stack_and_API_endpoints_section]
G[Roadmap_section]
H[Pricing_section]
I[CTA_GitHub_star_fork_section]
J[Header_Hero_with_GitHub_links]
K[Footer_attribution]
end
subgraph User
U[Visitor_on_landing_page]
end
A --> E
B --> F
C --> F
D --> G
E --> U
F --> U
G --> U
H --> U
I --> U
J --> U
K --> U
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Owner
Author
|
@sourcery-ai title |
sourcery-ai
bot
changed the title
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes and found some issues that need to be addressed.
- In
Hero.tsxyou referencescrollYfor the background transform, but the component neither defines local scroll state nor acceptsscrollYas a prop (unlikeHeader), so this will currently beundefinedat runtime; consider wiring the samescrollYfromLandingintoHeroor handling it internally. - The navigation links in
Headernow point to#features,#tech, and#roadmap, but the main features section still uses the idfonctionnalites, so clicking "Fonctionnalités" will not scroll to the intended section; align the section id and header anchor. - In
roadmapItems.tsxtheiconfield stores JSX elements rather than plain data, which makes the seed less reusable and harder to test; you might prefer storing the icon component or a key (e.g.icon: Bell) and instantiating it where the list is rendered.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `Hero.tsx` you reference `scrollY` for the background transform, but the component neither defines local scroll state nor accepts `scrollY` as a prop (unlike `Header`), so this will currently be `undefined` at runtime; consider wiring the same `scrollY` from `Landing` into `Hero` or handling it internally.
- The navigation links in `Header` now point to `#features`, `#tech`, and `#roadmap`, but the main features section still uses the id `fonctionnalites`, so clicking "Fonctionnalités" will not scroll to the intended section; align the section id and header anchor.
- In `roadmapItems.tsx` the `icon` field stores JSX elements rather than plain data, which makes the seed less reusable and harder to test; you might prefer storing the icon component or a key (e.g. `icon: Bell`) and instantiating it where the list is rendered.
## Individual Comments
### Comment 1
<location> `frontend/src/ui/home/Hero.tsx:16-17` </location>
<code_context>
- </div>
+ {/* Hero Section */}
+ <section className="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
+ <div
+ className="absolute inset-0 opacity-20"
+ style={{ transform: `translateY(${scrollY * 0.5}px)` }}
+ >
</code_context>
<issue_to_address>
**issue (bug_risk):** The `scrollY` value used for the parallax effect is never defined in `Hero`, which will cause a runtime error.
Here `scrollY` is used in the inline style but isn’t defined in this component (no prop, state, or hook), so it will throw at runtime. Define it locally (e.g., via a scroll hook), pass it in as a prop, or remove the dependency on `scrollY` here.
</issue_to_address>
### Comment 2
<location> `frontend/src/ui/home/Hero.tsx:6-7` </location>
<code_context>
+ CheckCircle,
+ GitBranch,
+ Rocket,
+ ZapIcon,
+} from "lucide-react";
+import { FaGithub } from "react-icons/fa";
+import { roadmapItems } from "../../seeds/roadmapItems";
</code_context>
<issue_to_address>
**issue (bug_risk):** The `ZapIcon` import does not match any Lucide icon and will fail at compile/runtime.
Lucide exports `Zap`, not `ZapIcon`, so this import will break the build. Update the import to `Zap` and use `<Zap />` in the JSX (or rename consistently to match the actual Lucide export).
</issue_to_address>
### Comment 3
<location> `frontend/src/ui/home/Header.tsx:22-25` </location>
<code_context>
- {/* CTA et Menu Mobile */}
+
+ {/* Desktop Menu */}
+ <div className="hidden md:flex space-x-8">
+ <a href="#features" className="hover:text-blue-400 transition-colors">Fonctionnalités</a>
+ <a href="#tech" className="hover:text-blue-400 transition-colors">Technologies</a>
+ <a href="#roadmap" className="hover:text-blue-400 transition-colors">Roadmap</a>
+ </div>
+
</code_context>
<issue_to_address>
**issue (bug_risk):** Header navigation links point to `#features`, but the corresponding section id is still `#fonctionnalites`.
This mismatch currently breaks in-page navigation. Please either rename the section id to `features` or update the header links to keep using `#fonctionnalites`, so they stay consistent.
</issue_to_address>
### Comment 4
<location> `frontend/src/seeds/techtack.ts:1` </location>
<code_context>
new file mode 100644
index 0000000..161a3af
--- /dev/null
+++ b/frontend/src/seeds/techtack.ts
</code_context>
<issue_to_address>
**suggestion (typo):** The filename `techtack.ts` appears to be a typo and could hurt discoverability.
The file name doesn’t match the exported symbol (`techStack`), which could be confusing. Please rename the file to `techStack.ts` and update any imports accordingly.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+16
to
+17
| <div | ||
| className="absolute inset-0 opacity-20" |
There was a problem hiding this comment.
issue (bug_risk): The scrollY value used for the parallax effect is never defined in Hero, which will cause a runtime error.
Here scrollY is used in the inline style but isn’t defined in this component (no prop, state, or hook), so it will throw at runtime. Define it locally (e.g., via a scroll hook), pass it in as a prop, or remove the dependency on scrollY here.
Comment on lines
+6
to
+7
| ZapIcon, | ||
| } from "lucide-react"; |
There was a problem hiding this comment.
issue (bug_risk): The ZapIcon import does not match any Lucide icon and will fail at compile/runtime.
Lucide exports Zap, not ZapIcon, so this import will break the build. Update the import to Zap and use <Zap /> in the JSX (or rename consistently to match the actual Lucide export).
Owner
Author
|
@sourcery-ai review |
Owner
Author
|
@sourcery-ai title |
There was a problem hiding this comment.
Hey there - I've reviewed your changes and found some issues that need to be addressed.
- The
Herocomponent referencesscrollYfor the background animation but never receives it as a prop or defines it locally, which will cause a runtime error; either passscrollYdown fromLandingPage(as done forHeader) or remove the dependency. - In the navigation, the header links point to
#featureswhile the feature section is still identified byid="fonctionnalites", so those links won’t scroll to the right section; align thehrefanchors and sectionidvalues. - The GitHub repository URL
https://github.com/elhalj/Tasks_apiis hard-coded in several components (Hero, Header, Cta, Footer); consider centralizing it in a single config/constant to avoid duplication and ease future updates.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `Hero` component references `scrollY` for the background animation but never receives it as a prop or defines it locally, which will cause a runtime error; either pass `scrollY` down from `LandingPage` (as done for `Header`) or remove the dependency.
- In the navigation, the header links point to `#features` while the feature section is still identified by `id="fonctionnalites"`, so those links won’t scroll to the right section; align the `href` anchors and section `id` values.
- The GitHub repository URL `https://github.com/elhalj/Tasks_api` is hard-coded in several components (Hero, Header, Cta, Footer); consider centralizing it in a single config/constant to avoid duplication and ease future updates.
## Individual Comments
### Comment 1
<location> `frontend/src/ui/home/Hero.tsx:17-19` </location>
<code_context>
- </div>
+ {/* Hero Section */}
+ <section className="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
+ <div
+ className="absolute inset-0 opacity-20"
+ style={{ transform: `translateY(${scrollY * 0.5}px)` }}
+ >
+ <div className="absolute top-20 left-10 w-72 h-72 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl animate-pulse"></div>
</code_context>
<issue_to_address>
**issue (bug_risk):** scrollY is used in Hero but never defined or passed, which will cause a runtime error.
`Hero` uses `scrollY` in the background transform, but it isn’t defined in the component or received via props, so this will cause a `ReferenceError` at runtime. Please either pass `scrollY` into `Hero` (e.g., from `LandingPage` as with `Header`), manage scroll position within `Hero` via a hook, or remove this dependency if the parallax effect isn’t needed.
</issue_to_address>
### Comment 2
<location> `frontend/src/ui/home/Header.tsx:24` </location>
<code_context>
+
+ {/* Desktop Menu */}
+ <div className="hidden md:flex space-x-8">
+ <a href="#features" className="hover:text-blue-400 transition-colors text-white">Fonctionnalités</a>
+ <a href="#tech" className="hover:text-blue-400 transition-colors text-white">Technologies</a>
+ <a href="#roadmap" className="hover:text-blue-400 transition-colors text-white">Roadmap</a>
</code_context>
<issue_to_address>
**issue (bug_risk):** Navigation link points to #features but the section id is still #fonctionnalites, breaking in-page navigation.
Desktop and mobile menus now link to `#features`, but the section in `Feature.tsx` still has `id="fonctionnalites"`, so the "Fonctionnalités" links don’t work. Please align these by either updating the hrefs to `#fonctionnalites` or renaming the section id to `features`.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+17
to
+19
| <div | ||
| className="absolute inset-0 opacity-20" | ||
| style={{ transform: `translateY(${scrollY * 0.5}px)` }} |
There was a problem hiding this comment.
issue (bug_risk): scrollY is used in Hero but never defined or passed, which will cause a runtime error.
Hero uses scrollY in the background transform, but it isn’t defined in the component or received via props, so this will cause a ReferenceError at runtime. Please either pass scrollY into Hero (e.g., from LandingPage as with Header), manage scroll position within Hero via a hook, or remove this dependency if the parallax effect isn’t needed.
sourcery-ai
bot
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Revamp the marketing landing page to present Tasks API as an open‑source, tech‑focused product with updated sections and metadata.
New Features:
Enhancements:
Summary by Sourcery
Revamp the marketing landing page to present Tasks API as an open‑source, backend‑focused product with new technical sections and GitHub calls to action.
New Features:
Enhancements: