feat: enhance page layout with consistent minimum height and add feat…

…ure cards
AlexTraveylan · Jan 18, 2025 · dec9642 · dec9642
1 parent b90aca2
commit dec9642
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 31 deletions.
diff --git a/.github/workflows/main-workflow.yml b/.github/workflows/main-workflow.yml
@@ -58,7 +58,6 @@ jobs:
         run: npm run build
 
       - name: Bump version and commit
-        if: github.ref == 'refs/heads/main'
         run: |
           # Configure git to use GitHub Actions
           git config --global user.name "github-actions[bot]"
@@ -78,7 +77,7 @@ jobs:
 
           # Make a commit
           git add package.json package-lock.json
-          git commit -m "${{ github.event.head_commit.message}} [+ update version to: $(cat package.json | jq -r .version)]"
+          git commit -m "Update version to: $(cat package.json | jq -r .version)]"
 
           # Push commit without triggering a new build
           git push origin HEAD:$GITHUB_REF
diff --git a/app/ajout/page.tsx b/app/ajout/page.tsx
@@ -8,7 +8,7 @@ export default async function Page() {
   return (
     <>
       <Header navigation={navigation} />
-      <main className="container mx-auto px-4 py-8">
+      <main className="min-h-[calc(100vh-8rem)] container mx-auto px-4 py-8">
         <JsonUploadForm />
       </main>
     </>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,43 +1,95 @@
 import Header from "@/components/header"
 import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { NavItemsBuilder } from "@/lib/routing-links"
+import { Activity, Database, Scan, Send } from "lucide-react"
 import Link from "next/link"
 
 export default async function Home() {
   const navigation = new NavItemsBuilder().withHome().getItems()
 
+  const features = [
+    {
+      icon: <Activity className="w-6 h-6" />,
+      title: "Suivi des métriques",
+      description: "Analysez l'évolution des performances de vos sites",
+      href: "/suivi",
+    },
+    {
+      icon: <Database className="w-6 h-6" />,
+      title: "Import de données",
+      description: "Importez vos rapports Lighthouse",
+      href: "/ajout",
+    },
+    {
+      icon: <Scan className="w-6 h-6" />,
+      title: "Analyse rapide",
+      description: "Testez instantanément n'importe quel site",
+      href: "/scan",
+    },
+  ]
+
   return (
     <>
       <Header navigation={navigation} />
-      <main className="min-h-[calc(100vh-8rem)] flex flex-col items-center justify-center bg-gradient-to-b from-white to-gray-50">
-        <div className="text-center p-8">
-          <h1 className="text-6xl font-bold text-gray-900 mb-4">
+      <main className="min-h-[calc(100vh-8rem)] flex flex-col gap-8 items-center justify-center bg-gradient-to-b from-white to-gray-50">
+        {/* Hero section */}
+        <div className="text-center">
+          <h1 className="text-6xl font-bold text-gray-900">
             <span className="text-green-600">Eco</span>Track
           </h1>
-
-          <p className="text-xl text-gray-600 mx-auto mb-8">
+          <p className="text-xl text-gray-600 mx-auto max-w-2xl">
             {"Suivez et optimisez la performance environnementale de vos applications web"}
           </p>
+        </div>
+
+        {/* Section features */}
+        <div className="w-full max-w-6xl">
+          <div className="flex flex-wrap gap-6">
+            {features.map((feature, index) => (
+              <Link href={feature.href} key={index}>
+                <Card className="h-full hover:shadow-lg transition-shadow duration-200 w-[350px]">
+                  <CardHeader>
+                    <CardTitle className="flex justify-center">
+                      <div className="bg-green-100 rounded-lg p-3">{feature.icon}</div>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="flex flex-col items-center text-center">
+                    <h3 className="font-semibold text-lg">{feature.title}</h3>
+                    <p className="text-muted-foreground">{feature.description}</p>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </div>
 
-          <Link href="/suivi">
-            <Button size="lg" className="text-lg px-8 py-6">
-              {"Démarrer le suivi"}
-              <svg
-                className="ml-2 h-5 w-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
+        {/* Section contact */}
+        <div className="w-full max-w-2xl">
+          <Card className="bg-gradient-to-r from-green-50 to-blue-50">
+            <CardHeader>
+              <CardTitle className="flex justify-center">
+                <Send className="w-6 h-6 text-green-600" />
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4 text-center">
+              <h3 className="font-semibold text-lg">{"Besoin d'aide ?"}</h3>
+              <p className="text-muted-foreground">
+                {"Des questions ou des suggestions pour améliorer EcoTrack ?"}
+              </p>
+              <a
+                href="https://www.alextraveylan.fr/fr/contact"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-block"
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 7l5 5m0 0l-5 5m5-5H6"
-                />
-              </svg>
-            </Button>
-          </Link>
+                <Button variant="outline" className="gap-2">
+                  {"Contactez-moi"}
+                  <Send className="w-4 h-4" />
+                </Button>
+              </a>
+            </CardContent>
+          </Card>
         </div>
       </main>
     </>

diff --git a/app/scan/[url]/page.tsx b/app/scan/[url]/page.tsx
@@ -49,7 +49,7 @@ export default async function Page({
   return (
     <>
       <Header navigation={navigation} />
-      <main className="py-4">
+      <main className="min-h-[calc(100vh-8rem)] py-4">
         <div className="flex flex-col gap-4">
           <ReportInfos metrics={metrics} />
           <DynamicEcoIndexDisplay ecoIndex={ecoIndex} />

diff --git a/app/scan/page.tsx b/app/scan/page.tsx
@@ -7,7 +7,7 @@ export default async function Page() {
   return (
     <>
       <Header navigation={navigation} />
-      <main className="container mx-auto px-4 py-8">
+      <main className="min-h-[calc(100vh-8rem)] container mx-auto px-4 py-8">
         <div className="max-w-3xl mx-auto">
           <h1 className="text-4xl font-bold text-center mb-6">
             {"Analysez l'impact environnemental de votre site"}

diff --git a/app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx b/app/suivi/[projectName]/[pageName]/[reportNumber]/page.tsx
@@ -56,7 +56,7 @@ export default async function Page({
   return (
     <>
       <Header navigation={navigation} />
-      <main className="py-4">
+      <main className="min-h-[calc(100vh-8rem)] py-4">
         <div className="flex flex-col gap-4">
           <ReportInfos metrics={metrics} />
           <DynamicEcoIndexDisplay ecoIndex={ecoIndex} />

diff --git a/app/suivi/[projectName]/page.tsx b/app/suivi/[projectName]/page.tsx
@@ -36,7 +36,7 @@ export default async function Page({
   return (
     <>
       <Header navigation={navigation} />
-      <main className="container mx-auto px-4 py-8">
+      <main className="min-h-[calc(100vh-8rem)] container mx-auto px-4 py-8">
         <div className="mb-8">
           <h1 className="text-4xl font-bold mb-2">{project.name}</h1>
           <p className="text-gray-600">{"Vue d'ensemble du projet"}</p>

diff --git a/app/suivi/page.tsx b/app/suivi/page.tsx
@@ -17,7 +17,7 @@ export default async function Page() {
   return (
     <>
       <Header navigation={navigation} />
-      <main className="container mx-auto px-4 py-8">
+      <main className="min-h-[calc(100vh-8rem)] container mx-auto px-4 py-8">
         <h1 className="text-4xl font-bold mb-8">{"Suivi des Projets"}</h1>
         <div className="grid gap-6">
           {projects.map((project) => (