Develop

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
@@ -27,17 +28,20 @@
     "motion": "^12.23.12",
     "next": "15.5.2",
     "next-themes": "^0.4.6",
+    "nodemailer": "^7.0.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-elfsight-widget": "^1.1.2",
     "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
+    "@types/nodemailer": "^7.0.1",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",

src/app/about/page.tsx

@@ -1,3 +1,11 @@
+/**
+ * @name AboutPage
+ * @description Provides information about the dive center, including its history, values, and team members.
+ * Features sections with images and text to engage visitors and convey the center's mission and culture.
+ * 
+ * @author Orlifera
+ */
+
 import Banner from '@/components/Banner'
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
@@ -29,7 +37,7 @@ export default function page() {
                 social={true}
                 classname='brightness-75'
             />
-            <section>
+            <section id='icon-link'>
                 <h1 className="text-6xl font-[900] mx-8 mt-16 mb-1 text-wrap lg:text-justify text-outline-primary">
                     La nostra storia
                 </h1>
@@ -47,11 +55,11 @@ export default function page() {
                 </div>
                 <div className='p-8'>
                     <Image
-                        src="/2.webp"
+                        src="/6.webp"
                         alt="Immersioni"
-                        width={200}
-                        height={200}
-                        className="w-full h-[20%] items-center justify-center rounded-lg shadow-lg"
+                        width={900}
+                        height={300}
+                        className="flex mx-auto items-center justify-center rounded-lg shadow-lg"
                     />
                 </div>
             </section>
@@ -65,15 +73,15 @@ export default function page() {
                     </h2>
 
                     <div className="w-[15em] h-1 bg-primary rounded-lg mx-8 mb-4" />
-                    <p className='text-lg font-medium m-8 text-wrap text-white dark:text-white lg:text-justify'>
+                    <p className='text-lg font-medium m-8 text-wrap text-white dark:text-primary lg:text-justify'>
                         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio eius quae iste magni dolore, est qui id molestias dolor tenetur a, unde cumque atque, eaque iure hic porro laudantium non?
                     </p>
                     <Button asChild className='mx-8 mt-4 bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors w-[12em]'>
                         <Link href='/contatti'>Contattaci</Link>
                     </Button>
                 </div>
                 <div className='flex flex-col w-full p-8'>
-                    <div className='grid grid-cols-2 gap-8 justify-between items-center text-white text-lg mt-16'>
+                    <div className='grid grid-cols-2 gap-8 justify-between items-center text-white dark:text-primary text-lg mt-16'>
                         <div>
                             <UsersRound />
                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore commodi modi at iure minima odit, quidem excepturi ullam aliquam maxime in laboriosam et quam architecto illo reprehenderit laborum doloremque nobis.

src/app/api/contact/route.ts

@@ -0,0 +1,56 @@
+/**
+ * @name ContactAPI
+ * @description API endpoint to handle contact form submissions and send email notifications.
+ * Utilizes nodemailer for email sending and handles errors gracefully.
+ * 
+ * @author Orlifera
+ * 
+ */
+
+import { NextResponse } from "next/server";
+import nodemailer from "nodemailer";
+
+export async function POST(req: Request) {
+    try {
+        const body = await req.json();
+        const { nome, cognome, email, phone, brevetto, attrezzatura, altezza, peso, numero, message } = body;
+
+        const transporter = nodemailer.createTransport({
+            service: "gmail",
+            auth: {
+                user: process.env.SMTP_USER,
+                pass: process.env.SMTP_PASS,
+            },
+        });
+
+        await transporter.sendMail({
+            from: `"FeelDive WebForm" <${process.env.SMTP_USER}>`,
+            to: process.env.RECEIVER_EMAIL,
+            subject: "Nuovo messaggio dal form",
+            html: `
+        <h2>Nuovo messaggio da:</h2>
+        <p><b>Nome:</b> ${nome} ${cognome}</p>
+        <p><b>Email:</b> ${email}</p>
+        <p><b>Telefono:</b> ${phone}</p>
+        <p><b>Brevetto:</b> ${brevetto}</p>
+        <p><b>Attrezzatura:</b> ${attrezzatura}</p>
+        ${attrezzatura === "no" ? `
+        <p><b>Altezza:</b> ${altezza}</p>
+        <p><b>Peso:</b> ${peso}</p>
+        <p><b>Numero di scarpe:</b> ${numero}</p>
+        ` : ''}
+        <br/>
+        <p><b>Messaggio:</b><br/>${message}</p>
+      `,
+        });
+
+        return NextResponse.json({ success: true });
+    } catch (err) {
+        console.error("Email send error:", err);
+        // ✅ make sure we only return 500 for real failures
+        return NextResponse.json(
+            { success: false, error: String(err) },
+            { status: 500 }
+        );
+    }
+}