added form submission

Reviewed-on: #4

.gitea/workflows/deploy.yml

@@ -9,11 +9,11 @@ jobs:
   deploy:
     runs-on: linux
     steps:
-      - name: Checkout repository
-        run: git pull origin main
-
-      - name: Set up Docker Compose
+      - name: Setup SSH Key
         run: |
-          docker compose down
-          docker compose build
-          docker compose up -d
+          mkdir -p ~/.ssh
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -H "${{ secrets.SSH_HOST }}" >> ~/.ssh/known_hosts
+      - name: Deploy via SSH
+        run: ssh ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} "bash ~/deploy.sh ${{ secrets.PROJECT_DEPLOYMENT_PATH }}"

Dockerfile

@@ -1,21 +1,15 @@
-# Use official Node.js image
 FROM node:18-alpine
 
-# Install pnpm globally
 RUN npm install -g pnpm
 
 WORKDIR /app
 
-# Copy package manager files first for caching
 COPY package.json pnpm-lock.yaml ./
 
-# Install dependencies using pnpm
 RUN pnpm install --frozen-lockfile
 
 COPY . .
 
 RUN pnpm build
 
-EXPOSE 3004
-
-CMD ["pnpm", "start", "--port", "3004"]
+CMD ["pnpm", "start"]

docker-compose.yml

@@ -1,10 +0,0 @@
-version: "3.8"
-services:
-  nextjs:
-    build: .
-    container_name: pablo.shortman.me
-    environment:
-      - PORT=3004
-    ports:
-      - "3004:3004"
-    restart: always

src/app/(PAGES)/contact/page.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import Contact from "@/components/setions/contact";
 
 function ContactPage() {
-  return <Contact />;
+  return (
+    <div className="pt-12">
+      <Contact />
+    </div>
+  );
 }
 
 export default ContactPage;

src/components/contact-form.tsx

@@ -24,6 +24,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
+import { sendDiscordNotification } from "@/lib/actions";
 
 const formSchema = z.object({
   name: z.string().min(2).max(50),
@@ -39,10 +40,16 @@ function ContactForm() {
   });
 
   // 2. Define a submit handler.
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    // Do something with the form values.
-    // ✅ This will be type-safe and validated.
-    console.log(values);
+  async function onSubmit({
+    email,
+    message,
+    name,
+    budget,
+  }: z.infer<typeof formSchema>) {
+    await sendDiscordNotification(
+      `📬 **New Lead Submission**\n*Source*: pablo.shortman.me \n**Name**: ${name}\n**Email**: ${email}\n**Message**: ${message} \n**Budget**: ${budget} $`
+    );
+    form.reset();
   }
 
   return (
@@ -98,8 +105,8 @@ function ContactForm() {
                     <SelectValue placeholder="Select your Budget" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="< €2k">{"less then $2k"}</SelectItem>
-                    <SelectItem value="> €4k">{"more then $4k"}</SelectItem>
+                    <SelectItem value="< €2k">{"less then $1k"}</SelectItem>
+                    <SelectItem value="> €4k">{"more then $3k"}</SelectItem>
                     <SelectItem value="> €6k">{"more then $6k"}</SelectItem>
                   </SelectContent>
                 </Select>

src/components/setions/tech.tsx

@@ -1,10 +1,16 @@
+import Link from "next/link";
 import React from "react";
 
 export type TechIcon = "ts" | "next" | "react" | "tailwind" | "PostgreSQL";
 
-const tech: { label: string; Logo: (props: any) => JSX.Element }[] = [
+const tech: {
+  label: string;
+  link: string;
+  Logo: (props: any) => JSX.Element;
+}[] = [
   {
     label: "Tailwind CSS",
+    link: "https://tailwindcss.com/",
     Logo: (props: any) => (
       <svg
         {...props}
@@ -45,6 +51,7 @@ const tech: { label: string; Logo: (props: any) => JSX.Element }[] = [
   },
   {
     label: "Typescript",
+    link: "https://www.typescriptlang.org/",
     Logo: (props: any) => (
       <svg
         {...props}
@@ -72,6 +79,7 @@ const tech: { label: string; Logo: (props: any) => JSX.Element }[] = [
   },
   {
     label: "Next JS",
+    link: "https://nextjs.org/",
     Logo: (props: any) => (
       <svg
         {...props}
@@ -99,6 +107,8 @@ const tech: { label: string; Logo: (props: any) => JSX.Element }[] = [
   },
   {
     label: "Drizzle ORM",
+    link: "https://orm.drizzle.team/",
+
     Logo: (props: any) => (
       <svg
         {...props}
@@ -128,6 +138,7 @@ const tech: { label: string; Logo: (props: any) => JSX.Element }[] = [
 
   {
     label: "PostgreSQL",
+    link: "https://www.postgresql.org/",
     Logo: (props: any) => (
       <svg
         {...props}
@@ -157,6 +168,7 @@ const tech: { label: string; Logo: (props: any) => JSX.Element }[] = [
 
   {
     label: "Figma",
+    link: "https://www.figma.com",
     Logo: (props: any) => (
       <svg
         {...props}
@@ -184,6 +196,7 @@ const tech: { label: string; Logo: (props: any) => JSX.Element }[] = [
   },
   {
     label: "Github",
+    link: "https://github.com/",
     Logo: (props: any) => (
       <svg
         {...props}
@@ -215,18 +228,20 @@ function Tech() {
   return (
     <div className="py-12 lg:py-20 container relative space-y-8">
       <h3 className="text-sm font-mono text-muted-foreground text-center">
-        most liked{" "}
-        <span className="underline text-foreground">technologies</span> and{" "}
-        <span className="underline text-foreground">tools</span>
+        most liked <span className="text-foreground">technologies</span> and{" "}
+        <span className="text-foreground">tools</span>
       </h3>
       <ul className="flex w-full items-center justify-center gap-2 md:gap-4 lg:gap-8 flex-wrap">
-        {tech.map(({ Logo, label }, idx) => (
-          <li
+        {tech.map(({ Logo, label, link }, idx) => (
+          <li key={idx}>
+            <Link
+              href={link}
+              target="_blank"
               className="flex items-center gap-2 py-2 px-6 rounded-md bg-muted"
-            key={idx}
             >
               <Logo className="size-6" />
               <span>{label}</span>
+            </Link>
           </li>
         ))}
       </ul>

src/lib/actions.ts

@@ -0,0 +1,13 @@
+"use server";
+
+export async function sendDiscordNotification(message: string) {
+  const webhookUrl = process.env.DISCORD_WEBHOOK_URL;
+
+  await fetch(webhookUrl!, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      content: message,
+    }),
+  });
+}

test.yml

@@ -0,0 +1,15 @@
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.logipedia.rule=Host(`logipedia.shortman.me`)"
+      - "traefik.http.routers.logipedia.entrypoints=websecure"
+      - "traefik.http.routers.logipedia.tls.certresolver=myresolver"
+    networks:
+      - logipedia_network
+      - webproxy
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.pablo-shortman-me.rule=Host(`pablo.shortman.me`)"
+      - "traefik.http.routers.pablo-shortman-me.entrypoints=websecure"
+      - "traefik.http.routers.pablo-shortman-me.tls.certresolver=myresolver"
+    networks:
+      - webproxy