Merge pull request #3 from begmuhommet/new-landing

New landing

.github/workflows/nextjs.yml

@@ -7,7 +7,7 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ['new-landing']
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -28,6 +28,10 @@ jobs:
   # Build job
   build:
     runs-on: ubuntu-latest
+    env:
+      NEXT_PUBLIC_EMAIL_PUBLIC_KEY: ${{ secrets.NEXT_PUBLIC_EMAIL_PUBLIC_KEY }}
+      NEXT_PUBLIC_EMAIL_SERVICE_ID: ${{ secrets.NEXT_PUBLIC_EMAIL_SERVICE_ID }}
+      NEXT_PUBLIC_EMAIL_TEMPLATE_ID: ${{ secrets.NEXT_PUBLIC_EMAIL_TEMPLATE_ID }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.gitignore

@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.env

src/components/footer/index.tsx

@@ -12,7 +12,7 @@ const Footer = () => {
   };
 
   return (
-    <footer className="w-full h-[108px] sm:h-[88px] flex items-center justify-center">
+    <footer className="w-full h-[68px] flex items-center justify-center">
       <div className="container flex flex-col-reverse sm:flex-row items-center justify-between gap-5">
         <span className="text-sm text-gray-500 font-light">
           © Copyright Low-Ops. All rights Reserved

src/sections/form/FormSection.tsx

@@ -11,7 +11,13 @@ import email from '@emailjs/browser';
 import { Loader } from 'lucide-react';
 import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react';
 
-const initialData = { name: '', email: '', message: '' };
+const initialData = {
+  name: '',
+  email: '',
+  message: '',
+  username: '',
+  gender: '',
+};
 
 const FormSection: React.FC = () => {
   // States
@@ -57,7 +63,15 @@ const FormSection: React.FC = () => {
     const serviceId = process.env.NEXT_PUBLIC_EMAIL_SERVICE_ID;
     const templateId = process.env.NEXT_PUBLIC_EMAIL_TEMPLATE_ID;
 
-    if (!serviceId || !templateId) return;
+    if (!serviceId || !templateId) {
+      console.log(`serviceId or templateId is undefined`);
+      return;
+    }
+
+    if (!!data.username || !!data.gender) {
+      console.log('Unvisible fields are not empty');
+      return;
+    }
 
     setLoading(true);
 
@@ -124,6 +138,23 @@ const FormSection: React.FC = () => {
             />
           </div>
 
+          <div style={{ display: 'none' }}>
+            <label>
+              <input
+                type="text"
+                value={data.username}
+                onChange={(e) => handleDataChange(e, 'username')}
+              />
+            </label>
+            <label>
+              <input
+                type="text"
+                value={data.gender}
+                onChange={(e) => handleDataChange(e, 'gender')}
+              />
+            </label>
+          </div>
+
           <Button type="submit" aria-label="Send message" disabled={loading}>
             <Loader
               className={cn('mr-2 h-4 w-4 animate-spin hidden', {

src/sections/hero/HeroSection.tsx

@@ -8,8 +8,7 @@ const HeroSection: FC = () => {
   return (
     <section
       className={cn(
-        'hero-section w-full pt-[140px] md:pt-[170px] bg-no-repeat bg-top',
-        `bg-[url('../assets/hero-bg.svg')]`
+        "hero-section w-full pt-[140px] md:pt-[170px] bg-no-repeat bg-top bg-[url('../assets/hero-bg.svg')]"
       )}
       id="hero"
     >