init
This commit is contained in:
el
commit
9931a631c3
20 changed files with 6556 additions and 0 deletions
46
.gitignore
vendored
Normal file
46
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files (can opt-in for committing if needed)
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
||||||
|
# doc
|
||||||
|
doc/apiphase2.md
|
||||||
|
doc/multilingualité.md
|
||||||
|
doc/*.md
|
||||||
53
README.md
Normal file
53
README.md
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
#citizenfor.eu
|
||||||
|
##Projet : citizenfor.eu - Votre Compagnon pour une Installation Réussie en France
|
||||||
|
|
||||||
|
Objectif du Projet : Créer une application web conçue pour simplifier radicalement le parcours administratif des personnes s'installant en France. citizenfor.eu vise à transformer les démarches complexes (obtention de numéros officiels, ouverture de compte, etc.) en processus clairs, guidés et efficaces.
|
||||||
|
|
||||||
|
Vision : Devenir la plateforme de référence pour les nouveaux arrivants en France, en leur fournissant les outils et l'assistance nécessaires pour naviguer en toute confiance dans le système administratif, avec une ambition future d'étendre les services à l'échelle européenne.
|
||||||
|
|
||||||
|
Public Cible : Individus étrangers (citoyens de l'UE et hors UE, résidents et non-résidents) souhaitant s'installer, étudier, travailler ou vivre durablement en France.
|
||||||
|
|
||||||
|
Valeur Proposée :
|
||||||
|
|
||||||
|
citizenfor.eu apporte une valeur essentielle en :
|
||||||
|
|
||||||
|
Faisant gagner un temps précieux : En centralisant l'information et en simplifiant les procédures de recherche et de compréhension.
|
||||||
|
Réduisant le stress et l'anxiété : En offrant des parcours clairs et un accompagnement étape par étape.
|
||||||
|
Minimisant les erreurs : Grâce à une assistance précise pour la collecte d'informations et la préparation des documents.
|
||||||
|
Rendant l'administration compréhensible : En traduisant le jargon officiel en un langage accessible.
|
||||||
|
Offrant une expérience pratique : En regroupant les informations, les outils et le suivi sur une plateforme unique.
|
||||||
|
|
||||||
|
Services Clés (Phase Initiale) :
|
||||||
|
|
||||||
|
Obtention du Numéro Fiscal Français (NIF) : Guide complet et assistance à la préparation du dossier pour obtenir l'identifiant fiscal personnel, essentiel pour de nombreuses démarches en France.
|
||||||
|
Ouverture de Compte Bancaire en France : Aide à la compréhension des options bancaires pour les étrangers, guide des procédures et assistance à la constitution du dossier de demande d'ouverture de compte auprès des banques françaises.
|
||||||
|
Affiliation à la Sécurité Sociale Française : Guide détaillé et aide à la préparation de la demande d'affiliation à l'Assurance Maladie pour l'accès aux droits de santé.
|
||||||
|
Guides Visas & Titres de Séjour : Informations claires sur les différents types de visas et titres de séjour, les conditions d'éligibilité et les processus de demande (Note : l'application guide l'utilisateur et aide à la préparation, elle ne soumet pas les demandes aux administrations).
|
||||||
|
Assistance Documentaire Complète : Listes de contrôle personnalisées et conseils pour l'obtention et la préparation (formats, traductions) de tous les documents requis pour les différentes démarches.
|
||||||
|
|
||||||
|
Modèle Opérationnel & Monétisation :
|
||||||
|
|
||||||
|
Plateforme Technologique : citizenfor.eu fournit l'interface conviviale, les guides interactifs, l'assistance au remplissage de formulaires (génération de PDF pré-remplis par l'utilisateur) et la gestion sécurisée des documents téléchargés.
|
||||||
|
Partenariats avec des Professionnels Accrédités : Pour les aspects des démarches nécessitant une intervention directe auprès des administrations ou des conseils réglementés (comme la soumission finale de certains dossiers, la représentation légale), citizenfor.eu travaille en partenariat avec des avocats, experts-comptables ou autres professionnels français dûment accrédités.
|
||||||
|
Modèle de Revenus : La monétisation se fait par la vente de forfaits de services ou via une tarification par service individuel. Le prix payé par l'utilisateur couvre la valeur apportée par la plateforme (simplification, guidage, préparation) et, dans le cas des forfaits incluant l'intervention d'un partenaire, les honoraires de ce professionnel. Il est important de noter que l'application citizenfor.eu ne soumet pas directement les formulaires aux administrations pour le compte de l'utilisateur.
|
||||||
|
|
||||||
|
Technologies Clés :
|
||||||
|
|
||||||
|
Développement Frontend/Backend avec Next.js.
|
||||||
|
API Backend robuste pour gérer les utilisateurs, les demandes, les données, les documents, les paiements et les interactions sécurisées (futures) avec les partenaires.
|
||||||
|
Base de Données sécurisée pour le stockage des informations (conformément au RGPD).
|
||||||
|
Intégration d'une passerelle de paiement.
|
||||||
|
Système de gestion documentaire sécurisé avec chiffrement.
|
||||||
|
Logique de génération de PDF de formulaires administratifs.
|
||||||
|
|
||||||
|
Considérations Cruciales :
|
||||||
|
|
||||||
|
Sécurité et Confidentialité : Protection maximale des données personnelles et documents sensibles des utilisateurs.
|
||||||
|
Conformité RGPD : Respect strict du Règlement Général sur la Protection des Données à toutes les étapes.
|
||||||
|
Qualité de l'Information : S'appuyer exclusivement sur des sources officielles et fiables (impots.gouv.fr, ameli.fr, france-visas.gouv.fr, etc.) et maintenir les informations à jour.
|
||||||
|
Support Multilingue : L'application et les guides doivent être accessibles dans plusieurs langues clés.
|
||||||
|
Transparence : Être parfaitement clair sur le rôle de l'application et celui des partenaires professionnels.
|
||||||
|
|
||||||
|
Prochaines Étapes :
|
||||||
|
|
||||||
|
Identifier et établir des partenariats avec des professionnels accrédités en France.
|
||||||
16
eslint.config.mjs
Normal file
16
eslint.config.mjs
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { dirname } from "path";
|
||||||
|
import { fileURLToPath } from "url";
|
||||||
|
import { FlatCompat } from "@eslint/eslintrc";
|
||||||
|
|
||||||
|
const __filename = fileURLToPath(import.meta.url);
|
||||||
|
const __dirname = dirname(__filename);
|
||||||
|
|
||||||
|
const compat = new FlatCompat({
|
||||||
|
baseDirectory: __dirname,
|
||||||
|
});
|
||||||
|
|
||||||
|
const eslintConfig = [
|
||||||
|
...compat.extends("next/core-web-vitals", "next/typescript"),
|
||||||
|
];
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
7
next.config.ts
Normal file
7
next.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
/* config options here */
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
5840
package-lock.json
generated
Normal file
5840
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "citizenfor",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"next": "15.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"typescript": "^5",
|
||||||
|
"@types/node": "^20",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "15.3.1",
|
||||||
|
"@eslint/eslintrc": "^3"
|
||||||
|
}
|
||||||
|
}
|
||||||
5
postcss.config.mjs
Normal file
5
postcss.config.mjs
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
const config = {
|
||||||
|
plugins: ["@tailwindcss/postcss"],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
1
public/file.svg
Normal file
1
public/file.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 391 B |
1
public/globe.svg
Normal file
1
public/globe.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1 KiB |
BIN
public/hero-bg.jpg
Normal file
BIN
public/hero-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 453 KiB |
1
public/next.svg
Normal file
1
public/next.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
1
public/vercel.svg
Normal file
1
public/vercel.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 128 B |
1
public/window.svg
Normal file
1
public/window.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||||
|
After Width: | Height: | Size: 385 B |
31
src/app/components/FaqAccordion.tsx
Normal file
31
src/app/components/FaqAccordion.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
interface FaqAccordionProps {
|
||||||
|
question: string;
|
||||||
|
answer: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FaqAccordion({ question, answer }: FaqAccordionProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border-b border-gray-200">
|
||||||
|
<button
|
||||||
|
className="w-full py-4 flex justify-between items-center text-left"
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
>
|
||||||
|
<span className="text-lg font-semibold text-gray-900">{question}</span>
|
||||||
|
<span className="text-2xl text-gray-500">
|
||||||
|
{isOpen ? '−' : '+'}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
{isOpen && (
|
||||||
|
<div className="pb-4 text-gray-700">
|
||||||
|
{answer}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
134
src/app/components/Header.tsx
Normal file
134
src/app/components/Header.tsx
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="fixed top-0 w-full bg-white shadow-sm z-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex justify-between items-center h-16">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<Link href="/" className="text-2xl font-semibold text-gray-900">
|
||||||
|
citizenfor.eu
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<nav className="hidden md:flex space-x-8">
|
||||||
|
<Link href="/services" className="text-gray-600 hover:text-gray-900">
|
||||||
|
Services
|
||||||
|
</Link>
|
||||||
|
<Link href="/how-it-works" className="text-gray-600 hover:text-gray-900">
|
||||||
|
Comment ça marche
|
||||||
|
</Link>
|
||||||
|
<Link href="/pricing" className="text-gray-600 hover:text-gray-900">
|
||||||
|
Tarifs
|
||||||
|
</Link>
|
||||||
|
<Link href="/resources" className="text-gray-600 hover:text-gray-900">
|
||||||
|
Ressources
|
||||||
|
</Link>
|
||||||
|
<Link href="/contact" className="text-gray-600 hover:text-gray-900">
|
||||||
|
Contact
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Language Selector and Auth Buttons */}
|
||||||
|
<div className="hidden md:flex items-center space-x-4">
|
||||||
|
<select className="text-gray-600 bg-transparent border-none focus:outline-none">
|
||||||
|
<option value="fr">FR</option>
|
||||||
|
<option value="en">EN</option>
|
||||||
|
<option value="es">ES</option>
|
||||||
|
</select>
|
||||||
|
<Link href="/login" className="text-gray-600 hover:text-gray-900">
|
||||||
|
Se connecter
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/register"
|
||||||
|
className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
S'inscrire
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile menu button */}
|
||||||
|
<div className="md:hidden">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||||
|
className="text-gray-600 hover:text-gray-900"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
{isMenuOpen ? (
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M4 6h16M4 12h16M4 18h16"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Navigation */}
|
||||||
|
{isMenuOpen && (
|
||||||
|
<div className="md:hidden">
|
||||||
|
<div className="px-2 pt-2 pb-3 space-y-1">
|
||||||
|
<Link href="/services" className="block px-3 py-2 text-gray-600 hover:text-gray-900">
|
||||||
|
Services
|
||||||
|
</Link>
|
||||||
|
<Link href="/how-it-works" className="block px-3 py-2 text-gray-600 hover:text-gray-900">
|
||||||
|
Comment ça marche
|
||||||
|
</Link>
|
||||||
|
<Link href="/pricing" className="block px-3 py-2 text-gray-600 hover:text-gray-900">
|
||||||
|
Tarifs
|
||||||
|
</Link>
|
||||||
|
<Link href="/resources" className="block px-3 py-2 text-gray-600 hover:text-gray-900">
|
||||||
|
Ressources
|
||||||
|
</Link>
|
||||||
|
<Link href="/contact" className="block px-3 py-2 text-gray-600 hover:text-gray-900">
|
||||||
|
Contact
|
||||||
|
</Link>
|
||||||
|
<div className="pt-4 pb-3 border-t border-gray-200">
|
||||||
|
<div className="flex items-center px-4">
|
||||||
|
<select className="text-gray-600 bg-transparent border-none focus:outline-none">
|
||||||
|
<option value="fr">FR</option>
|
||||||
|
<option value="en">EN</option>
|
||||||
|
<option value="es">ES</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 space-y-1">
|
||||||
|
<Link href="/login" className="block px-4 py-2 text-gray-600 hover:text-gray-900">
|
||||||
|
Se connecter
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/register"
|
||||||
|
className="block px-4 py-2 text-blue-600 hover:text-blue-700"
|
||||||
|
>
|
||||||
|
S'inscrire
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
26
src/app/globals.css
Normal file
26
src/app/globals.css
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #ffffff;
|
||||||
|
--foreground: #171717;
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--font-sans: var(--font-geist-sans);
|
||||||
|
--font-mono: var(--font-geist-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background: #0a0a0a;
|
||||||
|
--foreground: #ededed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--foreground);
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
28
src/app/layout.tsx
Normal file
28
src/app/layout.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
import "./globals.css";
|
||||||
|
import Header from "./components/Header";
|
||||||
|
|
||||||
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "CitizenFor - Votre guide pour s'installer en France",
|
||||||
|
description: "Plateforme d'accompagnement pour les démarches administratives en France",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="fr">
|
||||||
|
<body className={inter.className}>
|
||||||
|
<Header />
|
||||||
|
<main className="pt-16 min-h-screen bg-gray-50">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
311
src/app/page.tsx
Normal file
311
src/app/page.tsx
Normal file
|
|
@ -0,0 +1,311 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import FaqAccordion from "./components/FaqAccordion";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
title: "Numéro Fiscal Français (NIF)",
|
||||||
|
description: "Simplifiez l'obtention de votre identifiant fiscal indispensable pour vivre et travailler en France.",
|
||||||
|
icon: (
|
||||||
|
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
href: "/services/nif",
|
||||||
|
isAvailable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Sécurité Sociale Française",
|
||||||
|
description: "Accédez au système de santé français grâce à notre guide pas à pas pour votre affiliation.",
|
||||||
|
icon: (
|
||||||
|
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
href: "/services/securite-sociale",
|
||||||
|
isAvailable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Compte Bancaire Français",
|
||||||
|
description: "Guides et conseils pour ouvrir un compte bancaire en France, adapté à votre situation.",
|
||||||
|
icon: (
|
||||||
|
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 6l2-2h14l2 2M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2zM12 9v6m-3-3h6" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
href: "/services/compte-bancaire",
|
||||||
|
isAvailable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Visas, Documents & Formalités",
|
||||||
|
description: "Informations clés sur les visas, checklists de documents essentiels, et aide pour d'autres démarches.",
|
||||||
|
icon: (
|
||||||
|
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
href: "/services/documents",
|
||||||
|
isAvailable: true
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative h-[600px] bg-gradient-to-r from-blue-600 to-blue-800">
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<Image
|
||||||
|
src="/hero-bg.jpg"
|
||||||
|
alt="Hero background"
|
||||||
|
fill
|
||||||
|
className="object-cover opacity-20"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="relative container mx-auto px-4 h-full flex flex-col justify-center">
|
||||||
|
<h1 className="text-5xl font-bold text-white mb-6">
|
||||||
|
Simplifiez vos démarches administratives en France
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-white mb-8 max-w-2xl">
|
||||||
|
CitizenFor vous accompagne dans toutes vos démarches d'installation en France.
|
||||||
|
Un service personnalisé et efficace pour vous faciliter la vie.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<Link
|
||||||
|
href="/services"
|
||||||
|
className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors"
|
||||||
|
>
|
||||||
|
Découvrir nos services
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/contact"
|
||||||
|
className="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white/10 transition-colors"
|
||||||
|
>
|
||||||
|
Nous contacter
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services Section */}
|
||||||
|
<section className="py-20 bg-[#f5f5f7]">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<h2 className="text-4xl font-semibold text-center mb-4 text-gray-900">
|
||||||
|
Nos Services pour une Installation Réussie
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-center mb-16 max-w-2xl mx-auto text-gray-500">
|
||||||
|
Des solutions simples et efficaces pour vos démarches essentielles en France.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
||||||
|
{services.map((service, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="group bg-white rounded-2xl p-8 transition-all duration-300 hover:scale-[1.02] hover:shadow-[0_8px_16px_rgb(0,0,0,0.1)] relative overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Service Icon */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600">
|
||||||
|
{service.icon}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Service Content */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-2xl font-semibold text-gray-900 flex items-center gap-3">
|
||||||
|
{service.title}
|
||||||
|
{!service.isAvailable && (
|
||||||
|
<span className="text-sm font-medium text-blue-600 bg-blue-50 px-3 py-1 rounded-full">
|
||||||
|
Prochainement
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-500 text-lg leading-relaxed">
|
||||||
|
{service.description}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href={service.href}
|
||||||
|
className={`inline-flex items-center text-base font-medium mt-4 ${
|
||||||
|
service.isAvailable
|
||||||
|
? "text-blue-600 hover:text-blue-700"
|
||||||
|
: "text-gray-400 cursor-not-allowed"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
En savoir plus
|
||||||
|
<svg
|
||||||
|
className={`w-5 h-5 ml-2 transition-transform duration-300 ${
|
||||||
|
service.isAvailable ? "group-hover:translate-x-1" : ""
|
||||||
|
}`}
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Background Gradient Effect */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-transparent to-gray-50/50 pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Avantages Section */}
|
||||||
|
<section className="py-20 bg-gradient-to-br from-blue-50 to-white">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-4 text-gray-900">Pourquoi choisir CitizenFor ?</h2>
|
||||||
|
<p className="text-gray-700 text-center mb-12 max-w-2xl mx-auto">
|
||||||
|
Notre plateforme vous offre une expérience unique et des avantages exclusifs pour faciliter votre installation en France.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
title: 'Gain de temps',
|
||||||
|
description: 'Économisez des heures précieuses grâce à notre expertise et nos processus optimisés.',
|
||||||
|
icon: '⏱️',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Experts qualifiés',
|
||||||
|
description: 'Une équipe de professionnels expérimentés à votre service.',
|
||||||
|
icon: '👨💼',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Suivi personnalisé',
|
||||||
|
description: 'Un accompagnement sur mesure adapté à votre situation unique.',
|
||||||
|
icon: '🎯',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Support multilingue',
|
||||||
|
description: 'Communication disponible en français, anglais et espagnol.',
|
||||||
|
icon: '🌍',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Processus simplifié',
|
||||||
|
description: 'Des démarches claires et structurées pour votre tranquillité.',
|
||||||
|
icon: '✨',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Satisfaction garantie',
|
||||||
|
description: 'Un engagement fort pour votre réussite et votre satisfaction.',
|
||||||
|
icon: '🤝',
|
||||||
|
},
|
||||||
|
].map((advantage, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"
|
||||||
|
>
|
||||||
|
<div className="text-4xl mb-4">{advantage.icon}</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2 text-gray-900">{advantage.title}</h3>
|
||||||
|
<p className="text-gray-700">{advantage.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* How it works Section */}
|
||||||
|
<section className="py-20 bg-gray-50">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-12 text-gray-900">Comment ça marche ?</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
step: '1',
|
||||||
|
title: 'Contactez-nous',
|
||||||
|
description: 'Prenez rendez-vous pour une première consultation.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: '2',
|
||||||
|
title: 'Analyse de votre situation',
|
||||||
|
description: 'Nous étudions vos besoins et votre situation.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: '3',
|
||||||
|
title: 'Proposition de service',
|
||||||
|
description: 'Nous vous proposons un accompagnement sur mesure.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: '4',
|
||||||
|
title: 'Accompagnement',
|
||||||
|
description: 'Nous vous guidons tout au long du processus.',
|
||||||
|
},
|
||||||
|
].map((step, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="text-center"
|
||||||
|
>
|
||||||
|
<div className="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
|
||||||
|
{step.step}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2 text-gray-900">{step.title}</h3>
|
||||||
|
<p className="text-gray-700">{step.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* FAQ Section */}
|
||||||
|
<section className="py-20 bg-white">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-4 text-gray-900">Questions fréquentes</h2>
|
||||||
|
<p className="text-gray-700 text-center mb-12 max-w-2xl mx-auto">
|
||||||
|
Trouvez rapidement des réponses à vos questions les plus courantes sur nos services.
|
||||||
|
</p>
|
||||||
|
<div className="max-w-3xl mx-auto">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
question: "Combien de temps prennent les démarches administratives ?",
|
||||||
|
answer: "Les délais varient selon la démarche. Notre rôle est de réduire ces délais au minimum en vous aidant à constituer un dossier complet et conforme dès le premier envoi. Nous vous donnons une estimation précise des délais pour chaque procédure."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Quelles sont les langues disponibles pour vos services ?",
|
||||||
|
answer: "Nous proposons nos services en français, anglais et espagnol. Nos experts sont multilingues et peuvent vous accompagner dans la langue de votre choix."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Comment se déroule le premier rendez-vous ?",
|
||||||
|
answer: "Le premier rendez-vous est une consultation en visioconférence de 30 minutes. Nous évaluons ensemble vos besoins, répondons à vos questions et établissons un plan d'action personnalisé."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Quels sont vos tarifs ?",
|
||||||
|
answer: "Nos tarifs varient selon les services et le niveau d'accompagnement souhaité. Nous proposons des forfaits adaptés à chaque situation. Consultez notre page Tarifs pour plus de détails."
|
||||||
|
}
|
||||||
|
].map((faq, index) => (
|
||||||
|
<FaqAccordion key={index} question={faq.question} answer={faq.answer} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="text-center mt-8">
|
||||||
|
<Link
|
||||||
|
href="/faq"
|
||||||
|
className="text-blue-600 hover:text-blue-700 font-semibold inline-flex items-center"
|
||||||
|
>
|
||||||
|
Voir toutes les questions
|
||||||
|
<svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-20 bg-blue-600 text-white">
|
||||||
|
<div className="container mx-auto px-4 text-center">
|
||||||
|
<h2 className="text-3xl font-bold mb-6">Prêt à commencer ?</h2>
|
||||||
|
<p className="text-xl mb-8 max-w-2xl mx-auto">
|
||||||
|
Contactez-nous dès maintenant pour un accompagnement personnalisé.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/contact"
|
||||||
|
className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors inline-block"
|
||||||
|
>
|
||||||
|
Prendre rendez-vous
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
tsconfig.json
Normal file
27
tsconfig.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue