Skip to content

feat: 2 pages#3

Merged
Ilan-LP merged 1 commit into
mainfrom
frontend
Jul 17, 2026
Merged

feat: 2 pages#3
Ilan-LP merged 1 commit into
mainfrom
frontend

Conversation

@Ilan-LP

@Ilan-LP Ilan-LP commented Jul 17, 2026

Copy link
Copy Markdown
Collaborator

Description

Please provide a detailed description of what was done in this PR.
Precise the issue that you are resolving.

Changes include

  • Bugfix (non-breaking change that solves an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (change that is not backwards-compatible and/or changes current functionality)

Breaking changes

Please complete this section if any breaking changes have been made, otherwise delete it.

Checklist

  • I have assigned this PR to myself
  • I have added at least 1 reviewer
  • I have added the needed labels
  • I have linked this PR to an issue
  • I have linked this PR to a milestone
  • I have linked this PR to a project
  • I have tested this code
  • I have added / updated tests (unit / functional / end-to-end / ...)
  • I have updated the README and other relevant documents (guides...)
  • I have added sufficient documentation both in code, as well as in the READMEs

Additional comments

Please post additional comments in this section if you have them, otherwise delete it.

Copilot AI review requested due to automatic review settings July 17, 2026 17:33
@Ilan-LP
Ilan-LP merged commit 5099166 into main Jul 17, 2026
1 check passed
@Ilan-LP
Ilan-LP deleted the frontend branch July 17, 2026 17:36

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Adds two new landing pages (“Comment ça marche” and “À propos”) and updates the landing layout/navigation to support switching between them via the existing Zustand screen state (no URL routing).

Changes:

  • Extend useAppStore/App.tsx screen handling to include how-it-works and about.
  • Introduce SiteLayout and update the landing pages to use it (shared nav + footer).
  • Add new landing content and mobile CSS tweaks (including PoC button styling + favicon).

Reviewed changes

Copilot reviewed 13 out of 18 changed files in this pull request and generated 10 comments.

Show a summary per file
File Description
frontend/src/store/useAppStore.ts Adds new screen values and navigation actions for the new pages.
frontend/src/pages/HowItWorksPage.tsx New “How it works” landing page content.
frontend/src/pages/HomePage.tsx Wraps home content in the new shared SiteLayout.
frontend/src/pages/AboutPage.tsx New “About” page content (team + PoC section).
frontend/src/index.css Adds PoC button styling and responsive landing CSS classes.
frontend/src/components/landing/SiteLayout.tsx New shared layout component (nav + footer wrapper).
frontend/src/components/landing/HomeNav.tsx Adds nav links for the new pages and “Découvrir” scroll behavior.
frontend/src/components/landing/HomeFooter.tsx Updates footer content.
frontend/src/components/landing/HeroSection.tsx Updates CTA to scroll to features and adjusts hero layout for responsiveness.
frontend/src/components/landing/HeroBlockStack.tsx Removes JS layout logic and hardcodes visual sizing/radii.
frontend/src/components/landing/FeaturesSection.tsx Adds anchor id for scrolling and refactors layout markup.
frontend/src/App.tsx Renders the new pages based on screen.
frontend/index.html Adds an inline SVG favicon.
Comments suppressed due to low confidence (1)

frontend/src/components/landing/HeroBlockStack.tsx:10

  • import React from 'react' is now only used for the React.ReactNode type. Elsewhere in the codebase JSX is used without importing React (e.g., frontend/src/pages/HomePage.tsx), so this can be converted to a type-only import to avoid an unnecessary runtime import and potential lint warnings.
import React from 'react'

type HeroBlock = {
  key: number
  bg: string
  color: string
  label: React.ReactNode
  isHat?: boolean
  isLast?: boolean
}

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

Comment on lines +37 to 45
<div
onClick={goHome}
style={{ display: 'flex', alignItems: 'center', gap: 11, cursor: 'pointer' }}
>
<div style={{ width: 34, height: 34, borderRadius: 10, background: '#D97757', boxShadow: '0 3px 0 rgba(0,0,0,.25)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<div style={{ width: 13, height: 13, background: '#fff', borderRadius: 4 }} />
</div>
<span style={{ fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 23, letterSpacing: '-.01em' }}>MLBlock</span>
</div>
Comment on lines +18 to +21
goHome()
// After navigation the DOM re-renders; scroll on next tick
setTimeout(scrollToFeatures, 80)
}
Comment on lines +1 to +8
import React from 'react';

type Feature = { color: string; icon: React.ReactNode; title: string; desc: string }
type Feature = {
color: string;
icon: React.ReactNode;
title: string;
desc: string;
};
Comment on lines 1 to 19
export default function HomeFooter() {
return (
<footer style={{ maxWidth: 1240, margin: '0 auto', padding: '34px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#6f665e', fontSize: 14, fontWeight: 700 }}>
<span>MLBlock — le machine learning en blocs</span>
<span>Fait pour apprendre en s'amusant 🧱</span>
</footer>
)
return (
<footer
style={{
maxWidth: 1240,
margin: '0 auto',
padding: '34px 48px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
color: '#6f665e',
fontSize: 14,
fontWeight: 700,
}}
>
<span>© 2026 PoC Innovation</span>
</footer>
);
}
Comment on lines +1 to +10
import { useState, useRef, useEffect, CSSProperties } from 'react';
import SiteLayout from '../components/landing/SiteLayout';

type TeamMember = {
name: string;
role: string;
tagline: string;
color: string;
linkedin?: string;
};
{
name: 'Chedli',
role: 'Dev',
tagline: '[A REMPLIR PAR Chedli]',
{
name: 'Ali',
role: 'Dev',
tagline: '[A REMPLIR PAR Ali]',
{
name: 'Sacha',
role: 'Responsable',
tagline: '[A REMPLIR PAR Sacha]',
margin: '0 0 18px',
}}
>
Qui sommes nous
Comment on lines +48 to +50
<span onClick={handleDecouvrir} style={linkStyle(false)}>Découvrir</span>
<span onClick={goHowItWorks} style={linkStyle(screen === 'how-it-works')}>Comment ça marche</span>
<span onClick={goAbout} style={linkStyle(screen === 'about')}>Qui sommes nous</span>
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