首页 发现 帮助
注册 登录
TooEasy
/
LP
2
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

add the forms and 3d icon

gdias 3 月之前
父节点
fcce1363bc
当前提交
b67eea8c4a
共有 9 个文件被更改，包括 1312 次插入 和 269 次删除
合并视图 显示文件统计
  1. 4 0
      src/app.html
  2. 385 0
      src/lib/components/Card3D.svelte
  3. 40 108
      src/lib/components/Contact.svelte
  4. 216 152
      src/lib/components/Home.svelte
  5. 13 0
      src/lib/config.js
  6. 59 7
      src/lib/layout/Header.svelte
  7. 10 0
      src/lib/utils/i18n.js
  8. 2 2
      src/routes/+page.svelte
  9. 583 0
      src/routes/formcpr/+page.svelte

+ 4 - 0
src/app.html
查看文件 

@@ -4,6 +4,10 @@
 
 		<meta charset="utf-8" />
 
 		<meta charset="utf-8" />
 
 		<link rel="icon" href="%sveltekit.assets%/logo.png" />
 
 		<link rel="icon" href="%sveltekit.assets%/logo.png" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
+		<meta name="theme-color" content="#0B1D2A" />
 
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
 
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
+		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
 
 		%sveltekit.head%
 
 		%sveltekit.head%
 
 	</head>
 
 	</head>
 
 	<body data-sveltekit-preload-data="hover">
 
 	<body data-sveltekit-preload-data="hover">

+ 385 - 0
src/lib/components/Card3D.svelte
查看文件 

@@ -0,0 +1,385 @@
 
+<script>
 
+  export let holder = 'Gabriel Dias';
 
+  export let number = '1234 5678 9012 3456';
 
+  export let expiry = '12/28';
 
+  export let brand = 'Too Easy';
 
+  export let variant = 'card'; // 'card' | 'coin'
 
+</script>
 
+{#if variant === 'card'}
 
+  <div class="card-container ">
 
+    <div class="card-3d">
 
+      <div class="card-face front">
 
+        <div class="card-logo">{brand}</div>
 
+        <div class="card-chip"></div>
 
+        <div class="card-number">{number}</div>
 
+        <div class="card-info">
 
+          <div class="card-holder">
 
+            <span>Titular</span>
 
+            <strong>{holder}</strong>
 
+          </div>
 
+          <div class="card-expiry">
 
+            <span>Validade</span>
 
+            <strong>{expiry}</strong>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="card-face back">
 
+        <div class="card-back-strip"></div>
 
+        <div class="card-cvv">CVV: ***</div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+{:else if variant === 'coin'}
 
+  <div class="coin-container" aria-label="EasyCoin coin">
 
+    <div class="coin-shadow"></div>
 
+    <div class="coin">
 
+      <div class="coin-face front">
 
+        <div class="coin-gloss"></div>
 
+        <div class="coin-icon" aria-hidden="true">
 
+          <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
 
+            <defs>
 
+              <linearGradient id="leafGrad" x1="0" x2="1" y1="0" y2="1">
 
+                <stop offset="0%" stop-color="#FFF2B2"/>
 
+                <stop offset="100%" stop-color="#FFD873"/>
 
+              </linearGradient>
 
+            </defs>
 
+            <path d="M52 12C36 16 22 24 14 38c-4 7-5 14-5 14s7-1 14-5C37 39 45 25 49 10l3 2z" fill="url(#leafGrad)" opacity="0.95"/>
 
+            <path d="M18 46c10-7 18-17 24-32" stroke="#FFD873" stroke-width="3" stroke-linecap="round"/>
 
+          </svg>
 
+        </div>
 
+        <div class="coin-brand">{brand || 'EasyCoin'}</div>
 
+      </div>
 
+      <div class="coin-face back">
 
+        <div class="coin-icon" aria-hidden="true">
 
+          <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
 
+            <path d="M20 54c8-8 12-18 12-30M32 24c6-8 14-14 22-18" stroke="#FFD873" stroke-width="4" stroke-linecap="round"/>
 
+            <circle cx="20" cy="54" r="3" fill="#FFEAA2"/>
 
+            <circle cx="32" cy="24" r="3" fill="#FFEAA2"/>
 
+          </svg>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+{/if}
 
+
 
+<style>
 
+  .card-container {
 
+    perspective: 2000px;
 
+    width: 380px;
 
+    height: 240px;
 
+  }
 
+
 
+  @media (max-width: 640px) {
 
+    .card-container {
 
+      width: 320px;
 
+      height: 200px;
 
+    }
 
+  }
 
+
 
+  .card-3d {
 
+    width: 100%;
 
+    height: 100%;
 
+    position: relative;
 
+    transform-style: preserve-3d;
 
+    animation: card-float 6s infinite ease-in-out;
 
+    cursor: pointer;
 
+    transition: transform 0.6s;
 
+  }
 
+
 
+  .card-container:hover .card-3d {
 
+    animation-play-state: paused;
 
+    transform: rotateY(180deg);
 
+  }
 
+
 
+  @keyframes card-float {
 
+    0%, 100% {
 
+      transform: rotateY(15deg) rotateX(5deg) translateY(0);
 
+    }
 
+    50% {
 
+      transform: rotateY(-15deg) rotateX(5deg) translateY(-20px);
 
+    }
 
+  }
 
+
 
+  .card-face {
 
+    position: absolute;
 
+    width: 100%;
 
+    height: 100%;
 
+    border-radius: 24px;
 
+    background: linear-gradient(135deg, #1E73BE, #60A5FA);
 
+    padding: 30px;
 
+    backface-visibility: hidden;
 
+    box-shadow:
 
+      0 20px 60px rgba(30, 115, 190, 0.35),
 
+      0 0 100px rgba(30, 115, 190, 0.15);
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: space-between;
 
+  }
 
+
 
+  .card-face.back {
 
+    transform: rotateY(180deg);
 
+    background: linear-gradient(135deg, #0F2742, #08121A);
 
+  }
 
+
 
+  .card-logo {
 
+    font-size: 24px;
 
+    font-weight: 800;
 
+    color: white;
 
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 
+  }
 
+
 
+  .card-chip {
 
+    width: 60px;
 
+    height: 45px;
 
+    background: linear-gradient(135deg, #FFD700, #FFA500);
 
+    border-radius: 10px;
 
+    position: relative;
 
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 
+  }
 
+
 
+  .card-chip::before {
 
+    content: '';
 
+    position: absolute;
 
+    inset: 5px;
 
+    border: 2px solid rgba(0, 0, 0, 0.1);
 
+    border-radius: 5px;
 
+  }
 
+
 
+  .card-number {
 
+    font-size: 22px;
 
+    letter-spacing: 3px;
 
+    color: white;
 
+    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 
+    font-family: 'Courier New', monospace;
 
+  }
 
+
 
+  .card-info {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: flex-end;
 
+  }
 
+
 
+  .card-holder {
 
+    color: white;
 
+    opacity: 0.95;
 
+  }
 
+
 
+  .card-holder span {
 
+    display: block;
 
+    font-size: 11px;
 
+    opacity: 0.7;
 
+    margin-bottom: 3px;
 
+  }
 
+
 
+  .card-holder strong {
 
+    font-size: 14px;
 
+    text-transform: uppercase;
 
+    letter-spacing: 1px;
 
+  }
 
+
 
+  .card-back-strip {
 
+    height: 50px;
 
+    background: #000;
 
+    margin: -30px -30px 20px;
 
+    border-top-left-radius: 24px;
 
+    border-top-right-radius: 24px;
 
+  }
 
+
 
+  .card-cvv {
 
+    text-align: right;
 
+    color: white;
 
+    padding: 10px;
 
+    background: rgba(255, 255, 255, 0.1);
 
+    border-radius: 5px;
 
+    margin-top: 20px;
 
+  }
 
+
 
+  /* =============== COIN VARIANT (AGRO) =============== */
 
+  .coin-container {
 
+    perspective: 2000px;
 
+    width: 280px;
 
+    height: 280px;
 
+    position: relative;
 
+  }
 
+
 
+  @media (max-width: 640px) {
 
+    .coin-container {
 
+      width: 220px;
 
+      height: 220px;
 
+    }
 
+  }
 
+
 
+  .coin {
 
+    width: 100%;
 
+    height: 100%;
 
+    position: relative;
 
+    transform-style: preserve-3d;
 
+    animation: coin-sway 6.5s ease-in-out infinite;
 
+    filter: drop-shadow(0 20px 40px rgba(0, 211, 160, 0.25));
 
+  }
 
+
 
+  .coin-shadow {
 
+    position: absolute;
 
+    bottom: -14px;
 
+    left: 50%;
 
+    transform: translateX(-50%);
 
+    width: 60%;
 
+    height: 24px;
 
+    background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.35), rgba(0,0,0,0) 70%);
 
+    filter: blur(8px);
 
+    opacity: 0.35;
 
+    pointer-events: none;
 
+    animation: shadow-drift 6.5s ease-in-out infinite;
 
+  }
 
+
 
+  .coin-face {
 
+    position: absolute;
 
+    inset: 0;
 
+    border-radius: 50%;
 
+    backface-visibility: hidden;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    box-shadow:
 
+      inset 0 10px 30px rgba(255, 255, 255, 0.15),
 
+      inset 0 -20px 40px rgba(0, 0, 0, 0.25),
 
+      0 10px 30px rgba(0, 211, 160, 0.25);
 
+    background: radial-gradient(100% 100% at 30% 30%, #00D3A0 0%, #009D77 50%, #006B54 100%);
 
+    border: 6px solid rgba(255, 255, 255, 0.15);
 
+  }
 
+
 
+  .coin-face.back {
 
+    transform: rotateY(180deg);
 
+    background: radial-gradient(100% 100% at 30% 30%, #00D3A0 0%, #009D77 50%, #006B54 100%);
 
+  }
 
+
 
+  .coin::before {
 
+    content: '';
 
+    position: absolute;
 
+    inset: 8px;
 
+    border-radius: 50%;
 
+    background: repeating-conic-gradient(
 
+      from 0deg,
 
+      rgba(255, 255, 255, 0.25) 0deg 10deg,
 
+      rgba(255, 255, 255, 0.05) 10deg 20deg
 
+    );
 
+    filter: blur(0.3px) saturate(0.9);
 
+    opacity: 0.25;
 
+    pointer-events: none;
 
+  }
 
+
 
+  .coin-gloss {
 
+    position: absolute;
 
+    inset: 0;
 
+    border-radius: 50%;
 
+    background: radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,0.35), transparent 60%);
 
+    mix-blend-mode: screen;
 
+    animation: gloss-move 3.5s ease-in-out infinite;
 
+  }
 
+
 
+  .coin-brand {
 
+    position: absolute;
 
+    bottom: 18px;
 
+    width: 100%;
 
+    text-align: center;
 
+    font-weight: 800;
 
+    letter-spacing: 1px;
 
+    color: rgba(10, 15, 20, 0.9);
 
+    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
 
+  }
 
+
 
+  .coin-icon {
 
+    width: 56%;
 
+    height: 56%;
 
+    display: grid;
 
+    place-items: center;
 
+    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
 
+  }
 
+
 
+  @keyframes coin-rotate {
 
+    0% {
 
+      transform: rotateY(0deg) rotateX(12deg) translateY(0);
 
+    }
 
+    50% {
 
+      transform: rotateY(180deg) rotateX(12deg) translateY(-10px);
 
+    }
 
+    100% {
 
+      transform: rotateY(360deg) rotateX(12deg) translateY(0);
 
+    }
 
+  }
 
+
 
+  @keyframes coin-drift {
 
+    0% {
 
+      transform: rotateY(0deg) rotateX(18deg) rotateZ(0deg) translate3d(0,0,0) scale(1);
 
+    }
 
+    25% {
 
+      transform: rotateY(90deg) rotateX(14deg) rotateZ(2deg) translate3d(14px,-10px,0) scale(1.02);
 
+    }
 
+    50% {
 
+      transform: rotateY(180deg) rotateX(18deg) rotateZ(0deg) translate3d(0,-18px,0) scale(1);
 
+    }
 
+    75% {
 
+      transform: rotateY(270deg) rotateX(14deg) rotateZ(-2deg) translate3d(-14px,-10px,0) scale(1.02);
 
+    }
 
+    100% {
 
+      transform: rotateY(360deg) rotateX(18deg) rotateZ(0deg) translate3d(0,0,0) scale(1);
 
+    }
 
+  }
 
+
 
+  @keyframes gloss-move {
 
+    0% {
 
+      opacity: 0.25;
 
+      transform: rotateZ(0deg) translate3d(0,0,0);
 
+    }
 
+    50% {
 
+      opacity: 0.45;
 
+      transform: rotateZ(12deg) translate3d(4px,-2px,0);
 
+    }
 
+    100% {
 
+      opacity: 0.25;
 
+      transform: rotateZ(0deg) translate3d(0,0,0);
 
+    }
 
+  }
 
+
 
+  @keyframes shadow-drift {
 
+    0% {
 
+      transform: translateX(-50%) translateX(-6px) scaleX(1);
 
+      opacity: 0.35;
 
+    }
 
+    25% {
 
+      transform: translateX(calc(-50% - 2px)) scaleX(0.97);
 
+      opacity: 0.3;
 
+    }
 
+    50% {
 
+      transform: translateX(calc(-50% + 6px)) scaleX(1.03);
 
+      opacity: 0.38;
 
+    }
 
+    75% {
 
+      transform: translateX(calc(-50% - 2px)) scaleX(0.97);
 
+      opacity: 0.3;
 
+    }
 
+    100% {
 
+      transform: translateX(-50%) translateX(-6px) scaleX(1);
 
+      opacity: 0.35;
 
+    }
 
+  }
 
+
 
+  /* New oscillating motion without full rotation */
 
+  @keyframes coin-sway {
 
+    0% {
 
+      transform: rotateY(-18deg) rotateX(18deg) rotateZ(0deg) translate3d(-6px, 0, 0) scale(1);
 
+    }
 
+    25% {
 
+      transform: rotateY(0deg) rotateX(16deg) rotateZ(1deg) translate3d(0, -8px, 0) scale(1.015);
 
+    }
 
+    50% {
 
+      transform: rotateY(18deg) rotateX(18deg) rotateZ(0deg) translate3d(6px, 0, 0) scale(1);
 
+    }
 
+    75% {
 
+      transform: rotateY(0deg) rotateX(16deg) rotateZ(-1deg) translate3d(0, -8px, 0) scale(1.015);
 
+    }
 
+    100% {
 
+      transform: rotateY(-18deg) rotateX(18deg) rotateZ(0deg) translate3d(-6px, 0, 0) scale(1);
 
+    }
 
+  }
 
+</style>

+ 40 - 108
src/lib/components/Contact.svelte
查看文件 

@@ -1,68 +1,44 @@
 
 <script>
 
 <script>
 
 	import { reveal } from 'svelte-reveal';
 
 	import { reveal } from 'svelte-reveal';
 
-	import { t, isLoading } from 'svelte-i18n';
 
+	import { t } from 'svelte-i18n';
 
 	import { imagesconfig } from '$lib/config';
 
 	import { imagesconfig } from '$lib/config';
 
 
 
 	const whaticon = imagesconfig.contact_icon_what;
 
 	const whaticon = imagesconfig.contact_icon_what;
 
-	let status = '';
 
-
 
-	let nome = '';
 
-	let empresa = '';
 
-	let mensagem = '';
 
-	let email = '';
 
-
 
-	async function handlesubmit(e) {
 
-		e.preventDefault();
 
-
 
-		const formData = new FormData();
 
-		formData.append('nome', nome);
 
-		formData.append('mensagem', email);
 
-		formData.append('empresa', empresa);
 
-		formData.append('mensagem', mensagem);
 
-
 
-		try {
 
-			const response = await fetch('https://formspree.io/f/xqabvayg', {
 
-				method: 'POST',
 
-				body: formData,
 
-				headers: {
 
-					Accept: 'application/json'
 
-				}
 
-			});
 
-
 
-			if (response.ok) {
 
-				status = 'Mensagem enviada com sucesso!';
 
-				nome = '';
 
-				email = '';
 
-				empresa = '';
 
-				mensagem = '';
 
-			} else {
 
-				status = 'Ocorreu um erro ao enviar. Tente novamente.';
 
-			}
 
-		} catch (err) {
 
-			status = 'Erro ao conectar com o servidor.';
 
-		}
 
-	}
 
 </script>
 
 </script>
 
 
 
 <section
 
 <section
 
 	id="contact"
 
 	id="contact"
 
-	class="bg-transparent py-24 text-tx_contact"
 
+	class="relative overflow-hidden bg-transparent py-24 text-tx_contact"
 
 >
 
 >
 
-	<div class="mx-auto grid max-w-7xl items-center gap-12 px-4 md:grid-cols-2">
 
+	<!-- Decorative gradient blobs -->
 
+	<div
 
+		aria-hidden="true"
 
+		class="pointer-events-none absolute -top-24 -left-24 h-72 w-72 rounded-full bg-gradient-to-br from-bg1_button_contact/20 to-bg2_button_contact/20 blur-3xl"
 
+	></div>
 
+	<div
 
+		aria-hidden="true"
 
+		class="pointer-events-none absolute -bottom-24 -right-24 h-72 w-72 rounded-full bg-gradient-to-tr from-bg1_button_contact/15 to-bg2_button_contact/15 blur-3xl"
 
+	></div>
 
+	<!-- Vertical divider on desktop -->
 
+	<div
 
+		aria-hidden="true"
 
+		class="pointer-events-none absolute inset-y-32 left-1/2 hidden w-px -translate-x-1/2 bg-border1_contact/20 md:block mt-20"
 
+	></div>
 
+	<div class="mx-auto max-w-7xl px-4">
 
+		<h2 class="mb-10 text-center text-4xl font-extrabold tracking-wide uppercase text-white mb-20 bg-gradient-to-r from-bg1_button_contact to-bg2_button_contact bg-clip-text text-transparent">
 
+			{$t('contactCprHeading')}
 
+		</h2>
 
+	</div>
 
+	<div class="mx-auto grid max-w-7xl items-start gap-8 px-4 md:grid-cols-2 md:gap-12">
 
 		<div use:reveal={{ transition: 'slide', x: -50, duration: 800 }}>
 
 		<div use:reveal={{ transition: 'slide', x: -50, duration: 800 }}>
 
-			<h2 class="mb-6 text-4xl font-bold">{$t('contactTitle')}</h2>
 
-			<p class="mb-4">
 
-				{$t('contact1Subtitle')}
 
-			</p>
 
-			<p>
 
-				{$t('contact2Subtitle')}
 
-			</p>
 
-			<div class="mt-18">
 
-				<p class="mb-4 text-2xl font-bold">{$t('contactWatTitle')}</p>
 
+			<div class="rounded-xl border border-border1_contact/20 bg-border2_contact/5 backdrop-blur-sm p-8 shadow-md transition hover:shadow-lg">
 
+				<p class="mb-6 text-2xl font-bold">{$t('contactWatTitle')}</p>
 
 				<a
 
 				<a
 
 					href="https://wa.me/50762036138"
 
 					href="https://wa.me/50762036138"
 
 					target="_blank"
 
 					target="_blank"
 
-					class="hover:scale-104 relative inline-block inline-flex overflow-hidden rounded-md bg-bg_contact_what px-6 py-3 font-bold text-tx_contact_form transition hover:bg-bg_hover_contact_what hover:shadow-[0_5px_10px_var(--tw-shadow-color)] hover:shadow-shadow_button_what"
 
+					rel="noopener noreferrer"
 
+					aria-label={$t('contacButtontWat')}
 
+					class="hover:scale-104 inline-flex w-full justify-center items-center gap-2 overflow-hidden rounded-md bg-bg_contact_what px-6 py-3 font-bold text-tx_contact_form transition duration-300 ease-out hover:bg-bg_hover_contact_what hover:shadow-[0_5px_10px_var(--tw-shadow-color)] hover:shadow-shadow_button_what focus:outline-none focus-visible:ring-2 focus-visible:ring-bg_contact_what/50"
 
 				>
 
 				>
 
 					<img class="mt-0.5 h-5 w-8" src={whaticon} alt="Logo Whastapp" />
 
 					<img class="mt-0.5 h-5 w-8" src={whaticon} alt="Logo Whastapp" />
 
 					{$t('contacButtontWat')}
 
 					{$t('contacButtontWat')}
 
@@ -70,67 +46,23 @@
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 
 
-		<form
 
-			on:submit={handlesubmit}
 
+		<div
 
 			class="space-y-4"
 
 			class="space-y-4"
 
 			use:reveal={{ transition: 'slide', y: -50, duration: 1000 }}
 
 			use:reveal={{ transition: 'slide', y: -50, duration: 1000 }}
 
 		>
 
 		>
 
-			<div>
 
-				<label class="mb-1 block text-tx_contact_form" for="nome">{$t('contacFormName')}</label>
 
-				<input
 
-					type="text"
 
-					id="nome"
 
-					bind:value={nome}
 
-					required
 
-					class="w-full rounded-md border border-border1_contact/20 bg-border2_contact/5 p-3 text-tx_contact_form focus:outline-none focus:ring-2 focus:ring-blue-400"
 
-				/>
 
-			</div>
 
-
 
-			<div>
 
-				<label class="mb-1 block text-tx_contact_form" for="email">{$t('contacFormEmail')}</label>
 
-				<input
 
-					type="email"
 
-					id="email"
 
-					bind:value={email}
 
-					required
 
-					class="w-full rounded-md border border-border1_contact/20 bg-border2_contact/5 p-3 text-tx_contact_form focus:outline-none focus:ring-2 focus:ring-blue-400"
 
-				/>
 
-			</div>
 
-
 
-			<div>
 
-				<label class="mb-1 block text-tx_contact_form" for="empresa"
 
-					>{$t('contacFormCompany')}</label
 
-				>
 
-				<input
 
-					type="text"
 
-					id="empresa"
 
-					bind:value={empresa}
 
-					class="w-full rounded-md border border-border1_contact/20 bg-border2_contact/5 p-3 text-tx_contact_form focus:outline-none focus:ring-2 focus:ring-blue-400"
 
-				/>
 
-			</div>
 
-
 
-			<div>
 
-				<label class="mb-1 block text-tx_contact_form" for="mensagem"
 
-					>{$t('contacFormMessage')}</label
 
+			<div class="space-y-6 rounded-xl border border-border1_contact/20 bg-border2_contact/5 p-8 backdrop-blur-sm shadow-md transition hover:shadow-lg">
 
+				<p class="text-lg leading-relaxed">{$t('contactCprText')}</p>
 
+				<a
 
+					href="/formcpr"
 
+					aria-label={$t('contactCprLinkLabel')}
 
+					class="group hover:scale-104 inline-flex w-full items-center justify-center gap-2 rounded-md border-2 border-border1_contact bg-gradient-to-r from-bg1_button_contact to-bg2_button_contact px-6 py-3 font-bold text-tx_contact_form transition duration-300 ease-out hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60"
 
 				>
 
 				>
 
-				<textarea
 
-					required
 
-					id="mensagem"
 
-					bind:value={mensagem}
 
-					class="resize-vertical min-h-[120px] w-full rounded-md border border-border1_contact/20 bg-border2_contact/5 p-3 text-tx_contact_form focus:outline-none focus:ring-2 focus:ring-blue-400"
 
-					placeholder={$t('contacFormLabel')}
 
-				></textarea>
 
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5 transition-transform duration-300 group-hover:translate-x-0.5">
 
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18M3 12h18M3 18h9" />
 
+					</svg>
 
+					{$t('contactCprLinkLabel')}
 
+				</a>
 
 			</div>
 
 			</div>
 
-
 
-			<button
 
-				type="submit"
 
-				class="hover:scale-104 w-full cursor-pointer rounded-md border-2 border-border1_contact bg-gradient-to-r from-bg1_button_contact to-bg2_button_contact py-3 font-bold transition hover:shadow-lg"
 
-			>
 
-				{$t('contacFormSendMessage')}
 
-			</button>
 
-			{#if status}
 
-				<p class="text-shadow-[0_2px_2px_var(--tw-shadow-color)] shadow-tx_shadow_info">{status}</p>
 
-			{/if}
 
-		</form>
 
+		</div>
 
 	</div>
 
 	</div>
 
 </section>
 
 </section>

+ 216 - 152
src/lib/components/Home.svelte
查看文件 

@@ -1,152 +1,216 @@
 
-<script>

-	export let scrollToSection;

-	import { t, isLoading } from 'svelte-i18n';

-	import { imagesconfig } from '$lib/config';

-

-	const code = imagesconfig.home_item_1image;

-	const config = imagesconfig.home_item_2image;

-	const tool = imagesconfig.home_item_3image;

-	const trade = imagesconfig.home_item_4image;

-</script>

-

-<section

-	id="home"

-	class="relative flex h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-bg1_home to-bg2_home text-white"

->

-	{#if imagesconfig.bg_grid_home}

-		<div class="grid-bg absolute inset-0"></div>

-	{/if}

-

-	{#if imagesconfig.items_activated}

-		<div class="floating-element float-1">

-			<img class="w-16" src={code} alt="Imagem de Código" />

-		</div>

-		<div class="floating-element float-2">

-			<img class="w-16" src={config} alt="Imagem de Configurações" />

-		</div>

-		<div class="floating-element float-3">

-			<img class="w-16" src={tool} alt="Imagem de Ferramenta" />

-		</div>

-		<div class="floating-element float-4">

-			<img class="w-16" src={trade} alt="Imagem de Trade" />

-		</div>

-	{/if}

-

-	<div class="relative z-10 max-w-2xl px-4 text-center">

-		<h1

-			class="animate-pulse bg-gradient-to-r from-tx_company1_name to-tx_company2_name bg-clip-text text-4xl font-bold text-transparent drop-shadow-lg md:text-6xl"

-		>

-			{$t('nameBussines')}

-		</h1>

-		<p class="mt-6 text-lg text-tx_company_sub opacity-90">

-			{$t('sloganBussines')}

-		</p>

-		<button

-			on:click={() => scrollToSection('contact')}

-			class="relative mt-8 overflow-hidden rounded-full border-2 border-border_button bg-gradient-to-r from-bg1_button to-bg2_button px-8 py-3 font-bold transition hover:scale-105 hover:shadow-[0_5px_10px_var(--tw-shadow-color)] hover:shadow-shadow_button"

-		>

-			{$t('homeButton')}

-		</button>

-	</div>

-</section>

-

-<style>

-	@keyframes moveGrid {

-		0% {

-			transform: translate(0, 0);

-		}

-		100% {

-			transform: translate(50px, 50px);

-		}

-	}

-

-	@keyframes floatRandom1 {

-		0% {

-			transform: translate(0, 0) rotate(0deg);

-		}

-		25% {

-			transform: translate(40vw, -30vh) rotate(90deg);

-		}

-		50% {

-			transform: translate(-30vw, 40vh) rotate(180deg);

-		}

-		75% {

-			transform: translate(30vw, 30vh) rotate(270deg);

-		}

-		100% {

-			transform: translate(0, 0) rotate(360deg);

-		}

-	}

-

-	@keyframes floatRandom2 {

-		0% {

-			transform: translate(0, 0) rotate(0deg);

-		}

-		25% {

-			transform: translate(-40vw, 30vh) rotate(-90deg);

-		}

-		50% {

-			transform: translate(30vw, -40vh) rotate(-180deg);

-		}

-		75% {

-			transform: translate(-30vw, -30vh) rotate(-270deg);

-		}

-		100% {

-			transform: translate(0, 0) rotate(-360deg);

-		}

-	}

-

-	@keyframes floatRandom3 {

-		0% {

-			transform: translate(0, 0) rotate(0deg);

-		}

-		25% {

-			transform: translate(30vw, 40vh) rotate(120deg);

-		}

-		50% {

-			transform: translate(-40vw, -30vh) rotate(240deg);

-		}

-		75% {

-			transform: translate(40vw, -40vh) rotate(300deg);

-		}

-		100% {

-			transform: translate(0, 0) rotate(360deg);

-		}

-	}

-

-	.grid-bg {

-		background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><defs><pattern id='grid' width='50' height='50' patternUnits='userSpaceOnUse'><path d='M 50 0 L 0 0 0 50' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/></pattern></defs><rect width='100%' height='100%' fill='url(%23grid)'/></svg>");

-		animation: moveGrid 20s linear infinite;

-	}

-

-	.floating-element {

-		position: absolute;

-		opacity: 0.1;

-		font-size: 3rem;

-		pointer-events: none;

-	}

-

-	.float-1 {

-		top: 20%;

-		left: 10%;

-		animation: floatRandom1 20s ease-in-out infinite;

-	}

-

-	.float-2 {

-		top: 50%;

-		left: 50%;

-		animation: floatRandom2 25s ease-in-out infinite;

-	}

-

-	.float-3 {

-		top: 80%;

-		left: 30%;

-		animation: floatRandom3 30s ease-in-out infinite;

-	}

-

-	.float-4 {

-		top: 60%;

-		left: 70%;

-		animation: floatRandom1 28s ease-in-out infinite;

-	}

-</style>

+<script>
 
+	export let scrollToSection;
 
+	import { t, isLoading } from 'svelte-i18n';
 
+	import { imagesconfig } from '$lib/config';
 
+
 
+	const code = imagesconfig.home_item_1image;
 
+	const config = imagesconfig.home_item_2image;
 
+	const tool = imagesconfig.home_item_3image;
 
+	const trade = imagesconfig.home_item_4image;
 
+	import Card3D from '$lib/components/Card3D.svelte';
 
+</script>
 
+
 
+<section
 
+	id="home"
 
+	class="relative flex min-h-screen items-center overflow-hidden bg-gradient-to-br from-bg1_home to-bg2_home text-white"
 
+>
 
+	{#if imagesconfig.bg_grid_home}
 
+		<div class="grid-bg absolute inset-0"></div>
 
+	{/if}
 
+
 
+	<!-- Gradient Orbs Background -->
 
+	<div class="orbs absolute inset-0">
 
+		<div class="gradient-orb orb-1"></div>
 
+		<div class="gradient-orb orb-2"></div>
 
+		<div class="gradient-orb orb-3"></div>
 
+	</div>
 
+
 
+	{#if imagesconfig.items_activated}
 
+		<div class="floating-element float-1">
 
+			<img class="w-16" src={code} alt="Imagem de Código" />
 
+		</div>
 
+		<div class="floating-element float-2">
 
+			<img class="w-16" src={config} alt="Imagem de Configurações" />
 
+		</div>
 
+		<div class="floating-element float-3">
 
+			<img class="w-16" src={tool} alt="Imagem de Ferramenta" />
 
+		</div>
 
+		<div class="floating-element float-4">
 
+			<img class="w-16" src={trade} alt="Imagem de Trade" />
 
+		</div>
 
+	{/if}
 
+
 
+	<div class="relative z-10 mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-12 px-4 md:grid-cols-2">
 
+		<div class="text-center md:text-left">
 
+			<h1
 
+				class="animate-pulse bg-gradient-to-r from-tx_company1_name to-tx_company2_name bg-clip-text text-4xl font-extrabold tracking-tight text-transparent drop-shadow-lg md:text-6xl"
 
+			>
 
+				{$t('nameBussines')}
 
+			</h1>
 
+			<p class="mt-6 text-lg text-tx_company_sub/90">
 
+				{$t('sloganBussines')}
 
+			</p>
 
+			<button
 
+				on:click={() => scrollToSection('contact')}
 
+				class="relative mt-8 inline-flex items-center gap-2 overflow-hidden rounded-full border-2 border-border_button bg-gradient-to-r from-bg1_button to-bg2_button px-8 py-3 font-bold transition duration-300 hover:scale-105 hover:shadow-[0_10px_25px_var(--tw-shadow-color)] hover:shadow-shadow_button"
 
+			>
 
+				{$t('homeButton')}
 
+			</button>
 
+		</div>
 
+			<div class="hero-visual flex justify-center md:justify-end md:pr-16 lg:pr-24">
 
+				<Card3D variant="coin" brand="EasyCoin" holder="Gabriel Dias" />
 
+			</div>
 
+	</div>
 
+</section>
 
+
 
+<style>
 
+	@keyframes moveGrid {
 
+		0% {
 
+			transform: translate(0, 0);
 
+		}
 
+		100% {
 
+			transform: translate(50px, 50px);
 
+		}
 
+	}
 
+
 
+	@keyframes floatRandom1 {
 
+		0% {
 
+			transform: translate(0, 0) rotate(0deg);
 
+		}
 
+		25% {
 
+			transform: translate(40vw, -30vh) rotate(90deg);
 
+		}
 
+		50% {
 
+			transform: translate(-30vw, 40vh) rotate(180deg);
 
+		}
 
+		75% {
 
+			transform: translate(30vw, 30vh) rotate(270deg);
 
+		}
 
+		100% {
 
+			transform: translate(0, 0) rotate(360deg);
 
+		}
 
+	}
 
+
 
+	@keyframes floatRandom2 {
 
+		0% {
 
+			transform: translate(0, 0) rotate(0deg);
 
+		}
 
+		25% {
 
+			transform: translate(-40vw, 30vh) rotate(-90deg);
 
+		}
 
+		50% {
 
+			transform: translate(30vw, -40vh) rotate(-180deg);
 
+		}
 
+		75% {
 
+			transform: translate(-30vw, -30vh) rotate(-270deg);
 
+		}
 
+		100% {
 
+			transform: translate(0, 0) rotate(-360deg);
 
+		}
 
+	}
 
+
 
+	@keyframes floatRandom3 {
 
+		0% {
 
+			transform: translate(0, 0) rotate(0deg);
 
+		}
 
+		25% {
 
+			transform: translate(30vw, 40vh) rotate(120deg);
 
+		}
 
+		50% {
 
+			transform: translate(-40vw, -30vh) rotate(240deg);
 
+		}
 
+		75% {
 
+			transform: translate(40vw, -40vh) rotate(300deg);
 
+		}
 
+		100% {
 
+			transform: translate(0, 0) rotate(360deg);
 
+		}
 
+	}
 
+
 
+	.grid-bg {
 
+		background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><defs><pattern id='grid' width='50' height='50' patternUnits='userSpaceOnUse'><path d='M 50 0 L 0 0 0 50' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/></pattern></defs><rect width='100%' height='100%' fill='url(%23grid)'/></svg>");
 
+		animation: moveGrid 20s linear infinite;
 
+	}
 
+
 
+	/* Gradient Orbs */
 
+	.gradient-orb {
 
+		position: absolute;
 
+		border-radius: 50%;
 
+		filter: blur(100px);
 
+		opacity: 0.25;
 
+		animation: float-orb 20s infinite ease-in-out;
 
+	}
 
+
 
+	.orb-1 {
 
+		width: 600px;
 
+		height: 600px;
 
+		background: #1E73BE;
 
+		top: -200px;
 
+		right: -150px;
 
+		animation-duration: 25s;
 
+	}
 
+
 
+	.orb-2 {
 
+		width: 500px;
 
+		height: 500px;
 
+		background: #60A5FA;
 
+		bottom: -200px;
 
+		left: -200px;
 
+		animation-duration: 30s;
 
+		animation-delay: 5s;
 
+	}
 
+
 
+	.orb-3 {
 
+		width: 420px;
 
+		height: 420px;
 
+		background: linear-gradient(135deg, #1E73BE, #60A5FA);
 
+		top: 50%;
 
+		left: 50%;
 
+		transform: translate(-50%, -50%);
 
+		animation-duration: 35s;
 
+		animation-delay: 10s;
 
+	}
 
+
 
+	@keyframes float-orb {
 
+		0%, 100% {
 
+			transform: translate(0, 0) scale(1);
 
+		}
 
+		33% {
 
+			transform: translate(40px, -40px) scale(1.08);
 
+		}
 
+		66% {
 
+			transform: translate(-40px, 40px) scale(0.92);
 
+		}
 
+	}
 
+
 
+	.floating-element {
 
+		position: absolute;
 
+		opacity: 0.1;
 
+		font-size: 3rem;
 
+		pointer-events: none;
 
+	}
 
+
 
+	.float-1 {
 
+		top: 20%;
 
+		left: 10%;
 
+		animation: floatRandom1 20s ease-in-out infinite;
 
+	}
 
+
 
+	.float-2 {
 
+		top: 50%;
 
+		left: 50%;
 
+		animation: floatRandom2 25s ease-in-out infinite;
 
+	}
 
+
 
+	.float-3 {
 
+		top: 80%;
 
+		left: 30%;
 
+		animation: floatRandom3 30s ease-in-out infinite;
 
+	}
 
+
 
+	.float-4 {
 
+		top: 60%;
 
+		left: 70%;
 
+		animation: floatRandom1 28s ease-in-out infinite;
 
+	}
 
+</style>

+ 13 - 0
src/lib/config.js
查看文件 

@@ -284,6 +284,10 @@ const config = {
 
 		pt: 'Contato — Equipe Too Easy',
 
 		pt: 'Contato — Equipe Too Easy',
 
 		en: 'Contact — Too Easy Team'
 
 		en: 'Contact — Too Easy Team'
 
 	},
 
 	},
 
+	contactCprHeading: {
 
+		pt: 'FAÇA SUA CPR CONOSCO',
 
+		en: 'CREATE YOUR CPR WITH US'
 
+	},
 
 	contact1Subtitle: {
 
 	contact1Subtitle: {
 
 		pt: 'Innova 109 Ciudad del Saber - Clayton, Panamá',
 
 		pt: 'Innova 109 Ciudad del Saber - Clayton, Panamá',
 
 		en: 'Innova 109 Ciudad del Saber - Clayton, Panama'
 
 		en: 'Innova 109 Ciudad del Saber - Clayton, Panama'
 
@@ -324,6 +328,15 @@ const config = {
 
 		pt: 'Enviar Mensagem',
 
 		pt: 'Enviar Mensagem',
 
 		en: 'Send Message'
 
 		en: 'Send Message'
 
 	},
 
 	},
 
+	// New CPR info text and link label
 
+	contactCprText: {
 
+		pt: 'Faça a sua CPR conosco. Utilize seu número do WhatsApp ou preencha o formulário clicando no link abaixo.',
 
+		en: 'Create your CPR with us. Use your WhatsApp number or fill out the form by clicking the link below.'
 
+	},
 
+	contactCprLinkLabel: {
 
+		pt: 'Ir para o formulário',
 
+		en: 'Go to the form'
 
+	},
 
 	//FOOTER PAGE
 
 	//FOOTER PAGE
 
 	footerCop: {
 
 	footerCop: {
 
 		pt: '© 2025 Too Easy Trading. Todos os direitos reservados.',
 
 		pt: '© 2025 Too Easy Trading. Todos os direitos reservados.',

+ 59 - 7
src/lib/layout/Header.svelte
查看文件 

@@ -6,16 +6,21 @@
 
 	import { locale, t, isLoading } from 'svelte-i18n';

 	import { locale, t, isLoading } from 'svelte-i18n';

 

 

 	const mixtech = imagesconfig.logo_header;

 	const mixtech = imagesconfig.logo_header;

+	let menuOpen = false;

+	const handleNavClick = (id) => {

+		scrollToSection(id);

+		menuOpen = false;

+	};

 </script>

 </script>

 

 

 <nav

 <nav

-	class={`fixed top-0 z-50 w-full transition-all duration-300 ${navbarScrolled ? 'border-b border-tx_header/10 bg-bg_header' : 'bg-bg_header'}`}

+	class={`fixed top-0 z-50 w-full transition-all duration-300 ${navbarScrolled ? 'border-b border-tx_header/10 bg-bg_header' : 'bg-bg_header'} relative`}

 >

 >

 	<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">

 	<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">

 		<div class="flex items-center">

 		<div class="flex items-center">

 			<button

 			<button

 				class="cursor-pointer text-2xl font-bold text-tx_header transition hover:scale-105"

 				class="cursor-pointer text-2xl font-bold text-tx_header transition hover:scale-105"

-				on:click={() => scrollToSection('home')}

+				on:click={() => handleNavClick('home')}

 			>

 			>

 				<img class="w-10" src={mixtech} alt="Logo Too Easy Trading" />

 				<img class="w-10" src={mixtech} alt="Logo Too Easy Trading" />

 			</button>

 			</button>

@@ -25,7 +30,7 @@
 
 			<li>

 			<li>

 				<button

 				<button

 					class={`relative cursor-pointer transition hover:text-tx_hover_header ${currentSection === 'home' ? 'text-tx_select_header' : 'text-tx_header'}`}

 					class={`relative cursor-pointer transition hover:text-tx_hover_header ${currentSection === 'home' ? 'text-tx_select_header' : 'text-tx_header'}`}

-					on:click={() => scrollToSection('home')}

+					on:click={() => handleNavClick('home')}

 				>

 				>

 					{$t('headerButtonHome')}

 					{$t('headerButtonHome')}

 				</button>

 				</button>

@@ -33,7 +38,7 @@
 
 			<li>

 			<li>

 				<button

 				<button

 					class={`relative cursor-pointer transition hover:text-tx_hover_header ${currentSection === 'services' ? 'text-tx_select_header' : 'text-tx_header'}`}

 					class={`relative cursor-pointer transition hover:text-tx_hover_header ${currentSection === 'services' ? 'text-tx_select_header' : 'text-tx_header'}`}

-					on:click={() => scrollToSection('services')}

+					on:click={() => handleNavClick('services')}

 				>

 				>

 					{$t('headerButtonServices')}

 					{$t('headerButtonServices')}

 				</button>

 				</button>

@@ -41,7 +46,7 @@
 
 			<li>

 			<li>

 				<button

 				<button

 					class={`relative cursor-pointer transition hover:text-tx_hover_header ${currentSection === 'about' ? 'text-tx_select_header' : 'text-tx_header'}`}

 					class={`relative cursor-pointer transition hover:text-tx_hover_header ${currentSection === 'about' ? 'text-tx_select_header' : 'text-tx_header'}`}

-					on:click={() => scrollToSection('about')}

+					on:click={() => handleNavClick('about')}

 				>

 				>

 					{$t('headerButtonAbout')}

 					{$t('headerButtonAbout')}

 				</button>

 				</button>

@@ -49,13 +54,19 @@
 
 			<li>

 			<li>

 				<button

 				<button

 					class={`relative cursor-pointer transition hover:text-tx_hover_header ${currentSection === 'contact' ? 'text-tx_select_header' : 'text-tx_header'}`}

 					class={`relative cursor-pointer transition hover:text-tx_hover_header ${currentSection === 'contact' ? 'text-tx_select_header' : 'text-tx_header'}`}

-					on:click={() => scrollToSection('contact')}

+					on:click={() => handleNavClick('contact')}

 				>

 				>

 					{$t('headerButtonContact')}

 					{$t('headerButtonContact')}

 				</button>

 				</button>

 			</li>

 			</li>

 		</ul>

 		</ul>

-		<div class="flex items-center">

+		<div class="flex items-center gap-3">

+			<button

+				on:click={() => handleNavClick('contact')}

+				class="hidden md:inline-flex items-center gap-2 rounded-full border-2 border-border_button bg-gradient-to-r from-bg1_button to-bg2_button px-4 py-2 font-semibold text-tx_header transition hover:scale-105 hover:shadow-[0_8px_20px_var(--tw-shadow-color)] hover:shadow-shadow_button"

+			>

+				{$t('headerButtonContact')}

+			</button>

 			<select

 			<select

 				bind:value={$locale}

 				bind:value={$locale}

 				on:change={(e) => locale.set(e.target.value)}

 				on:change={(e) => locale.set(e.target.value)}

@@ -64,6 +75,47 @@
 
 				<option value="pt">🇧🇷</option>

 				<option value="pt">🇧🇷</option>

 				<option value="en">🇺🇸</option>

 				<option value="en">🇺🇸</option>

 			</select>

 			</select>

+			<button

+				class="md:hidden ml-2 inline-flex h-10 w-10 items-center justify-center rounded-lg border border-white/10 text-tx_header hover:bg-white/10"

+				aria-expanded={menuOpen}

+				on:click={() => (menuOpen = !menuOpen)}

+			>

+				<span class="sr-only">Menu</span>

+				<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">

+					<path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>

+				</svg>

+			</button>

 		</div>

 		</div>

 	</div>

 	</div>

+

+	<!-- Mobile panel -->

+	<div class={`md:hidden absolute left-0 right-0 top-full origin-top border-t border-white/10 bg-bg_header/95 px-4 py-4 backdrop-blur-lg transition-all duration-300 ${menuOpen ? 'translate-y-0 opacity-100' : '-translate-y-2 pointer-events-none opacity-0'}`}>

+		<ul class="flex flex-col gap-3">

+			<li>

+				<button class="w-full text-left text-tx_header transition hover:text-tx_hover_header" on:click={() => handleNavClick('home')}>

+					{$t('headerButtonHome')}

+				</button>

+			</li>

+			<li>

+				<button class="w-full text-left text-tx_header transition hover:text-tx_hover_header" on:click={() => handleNavClick('services')}>

+					{$t('headerButtonServices')}

+				</button>

+			</li>

+			<li>

+				<button class="w-full text-left text-tx_header transition hover:text-tx_hover_header" on:click={() => handleNavClick('about')}>

+					{$t('headerButtonAbout')}

+				</button>

+			</li>

+			<li>

+				<button class="w-full text-left text-tx_header transition hover:text-tx_hover_header" on:click={() => handleNavClick('contact')}>

+					{$t('headerButtonContact')}

+				</button>

+			</li>

+			<li class="pt-2">

+				<button on:click={() => handleNavClick('contact')} class="w-full rounded-full border-2 border-border_button bg-gradient-to-r from-bg1_button to-bg2_button px-5 py-2 font-semibold text-tx_header">

+					{$t('headerButtonContact')}

+				</button>

+			</li>

+		</ul>

+	</div>

 </nav>

 </nav>

+ 10 - 0
src/lib/utils/i18n.js
查看文件 

@@ -43,11 +43,16 @@ const pt = {
 
   about4SquareSub: config.about4SquareSub.pt,

   about4SquareSub: config.about4SquareSub.pt,

 

 

   contactTitle: config.contactTitle.pt,

   contactTitle: config.contactTitle.pt,

+  contactCprHeading: config.contactCprHeading.pt,

   contact1Subtitle: config.contact1Subtitle.pt,

   contact1Subtitle: config.contact1Subtitle.pt,

   contact2Subtitle: config.contact2Subtitle.pt,

   contact2Subtitle: config.contact2Subtitle.pt,

   contactWatTitle: config.contactWatTitle.pt,

   contactWatTitle: config.contactWatTitle.pt,

   contacButtontWat: config.contacButtontWat.pt,

   contacButtontWat: config.contacButtontWat.pt,

 

 

+  // CPR info

+  contactCprText: config.contactCprText.pt,

+  contactCprLinkLabel: config.contactCprLinkLabel.pt,

+

   contacFormName: config.contacFormName.pt,

   contacFormName: config.contacFormName.pt,

   contacFormEmail: config.contacFormEmail.pt,

   contacFormEmail: config.contacFormEmail.pt,

   contacFormCompany: config.contacFormCompany.pt,

   contacFormCompany: config.contacFormCompany.pt,

@@ -100,11 +105,16 @@ const en = {
 
   about4SquareSub: config.about4SquareSub.en,

   about4SquareSub: config.about4SquareSub.en,

 

 

   contactTitle: config.contactTitle.en,

   contactTitle: config.contactTitle.en,

+  contactCprHeading: config.contactCprHeading.en,

   contact1Subtitle: config.contact1Subtitle.en,

   contact1Subtitle: config.contact1Subtitle.en,

   contact2Subtitle: config.contact2Subtitle.en,

   contact2Subtitle: config.contact2Subtitle.en,

   contactWatTitle: config.contactWatTitle.en,

   contactWatTitle: config.contactWatTitle.en,

   contacButtontWat: config.contacButtontWat.en,

   contacButtontWat: config.contacButtontWat.en,

 

 

+  // CPR info

+  contactCprText: config.contactCprText.en,

+  contactCprLinkLabel: config.contactCprLinkLabel.en,

+

   contacFormName: config.contacFormName.en,

   contacFormName: config.contacFormName.en,

   contacFormEmail: config.contacFormEmail.en,

   contacFormEmail: config.contacFormEmail.en,

   contacFormCompany: config.contacFormCompany.en,

   contacFormCompany: config.contacFormCompany.en,

+ 2 - 2
src/routes/+page.svelte
查看文件 

@@ -48,8 +48,8 @@
 
   :global(body) {
 
   :global(body) {
 
     margin: 0;
 
     margin: 0;
 
     padding: 0;
 
     padding: 0;
 
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 
-      'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', sans-serif;
 
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
   }
 
   }
 
 
 
   :global(*) {
 
   :global(*) {

+ 583 - 0
src/routes/formcpr/+page.svelte
查看文件 

@@ -0,0 +1,583 @@
 
+<script>
 
+    // Página de formulário CPR — sem envio para endpoint (apenas preview e copiar JSON)
 
+    // Datas: use dd/MM/yyyy | Números: strings (ex: "1000")
 
+    // Campos S/N: "S" ou "N"
 
+  
+    // Estado do formulário com a estrutura exatamente como o payload final precisa
 
+    let form = {
 
+      instrument: {
 
+        cprTypeCode: '',
 
+        otcRegisterAccountCode: '',
 
+        otcPaymentAgentAccountCode: '',
 
+        otcCustodianAccountCode: '',
 
+        internalControlNumber: '',
 
+        electronicEmissionIndicator: '', // "S" | "N"
 
+        isinCode: '',
 
+        issueDate: '',
 
+        maturityDate: '',
 
+        issueQuantity: '',
 
+        issueValue: '',
 
+        issueFinancialValue: '',
 
+        unitValue: '',
 
+        referenceDate: '',
 
+        profitabilityStartDate: '',
 
+        automaticExpirationIndicator: '', // "S" | "N"
 
+  
+        collaterals: [
 
+          {
 
+            collateralTypeCode: '',
 
+            collateralTypeName: '',
 
+            constitutionProcessIndicator: '', // "S" | "N"
 
+            otcBondsmanAccountCode: '',
 
+            documentNumber: ''
 
+          }
 
+        ],
 
+  
+        products: [
 
+          {
 
+            cprProductName: '',
 
+            cprProductClassName: '',
 
+            cprProductHarvest: '',
 
+            cprProductDescription: '',
 
+            cprProductQuantity: '',
 
+            measureUnitName: '',
 
+            packagingWayName: '',
 
+            cprProductStatusCode: '',
 
+            productionTypeCode: ''
 
+          }
 
+        ],
 
+  
+        issuers: [
 
+          {
 
+            cprIssuerName: '',
 
+            documentNumber: '',
 
+            personTypeAcronym: '',
 
+            stateAcronym: '',
 
+            cityName: '',
 
+            ibgeCode: '',
 
+            issuerLegalNatureCode: ''
 
+          }
 
+        ],
 
+  
+        deposit: {
 
+          otcFavoredAccountCode: '',
 
+          documentNumber: '',
 
+          personTypeAcronym: '',
 
+          selfNumber: '',
 
+          settlementModalityTypeCode: '',
 
+          otcSettlementBankAccountCode: '',
 
+          depositQuantity: '',
 
+          depositUnitPriceValue: ''
 
+        },
 
+  
+        paymentMethod: {
 
+          paymentMethodCode: '',
 
+          indexCode: '',
 
+          indexShortName: '',
 
+          vcpIndicatorTypeCode: '',
 
+          indexadorPercentageValue: '',
 
+          interestRateSpreadPercentage: '',
 
+          interestRateCriteriaTypeCode: '',
 
+          interestPaymentDate: '',
 
+          interestPaymentValue: ''
 
+        },
 
+  
+        interestPaymentFlow: {
 
+          interestPaymentFrequencyCode: '',
 
+          interestMonthsQuantity: '',
 
+          timeUnitTypeCode: '',
 
+          deadlineTypeCode: '',
 
+          paymentStartDate: ''
 
+        },
 
+  
+        amortizationPaymentFlow: {
 
+          amortizationTypeCode: '',
 
+          amortizationMonthsQuantity: '',
 
+          timeUnitTypeCode: '',
 
+          deadlineTypeCode: '',
 
+          amortizationStartDate: ''
 
+        },
 
+  
+        scr: {
 
+          scrTypeCode: '',
 
+          scrCustomerDetail: '',
 
+          personTypeAcronym: '',
 
+          documentNumber: '',
 
+          contractCode: '',
 
+          operationModalityTypeCode: '',
 
+          bacenReferenceCode: '',
 
+          finalityCode: '',
 
+          ipocCode: ''
 
+        },
 
+  
+        dolarEuroProfitability: {
 
+          calculationTypeCode: '',
 
+          initialExchangeValue: '',
 
+          fixingTypeCode: '',
 
+          dataSourceTypeCode: ''
 
+        },
 
+  
+        igpmIpcaProfitability: {
 
+          adjustmentFrequencyTypeCode: '',
 
+          adjustmentProRataTypeCode: '',
 
+          adjustmentTypeCode: ''
 
+        },
 
+  
+        creditor: {
 
+          creditorName: '',
 
+          documentNumber: ''
 
+        },
 
+  
+        ballast: {
 
+          ballastTypeCode: '',
 
+          lotNumber: '',
 
+          ballastQuantity: '',
 
+          currencyCode: '',
 
+          transactionIdentification: '',
 
+          additionalText: ''
 
+        },
 
+  
+        registerOffice: {
 
+          cprNumber: '',
 
+          cprContractNumber: ''
 
+        },
 
+  
+        events: [
 
+          {
 
+            eventTypeCode: '',
 
+            eventOriginalDate: '',
 
+            unitPriceValue: '',
 
+            interestUnitPriceValue: '',
 
+            residualValue: '',
 
+            amortizationPercentage: '',
 
+            eventQuantity: ''
 
+          }
 
+        ],
 
+  
+        productionPlaces: [
 
+          {
 
+            productionPlaceName: '',
 
+            propertyRegistrationNumber: '',
 
+            notaryName: '',
 
+            totalProductionAreaInHectaresNumber: '',
 
+            totalAreaInHectaresNumber: '',
 
+            carCode: '',
 
+            latitudeCode: '',
 
+            longitudeCode: '',
 
+            zipCode: ''
 
+          }
 
+        ],
 
+  
+        greenCpr: {
 
+          greenCprIndicator: '', // "S" | "N"
 
+          greenCprCertificateName: '',
 
+          greenCprCertificateCnpjNumber: '',
 
+          greenCprGeoreferencingDescription: '',
 
+          greenCprDeclarationIndicator: '' // "S" | "N"
 
+        },
 
+  
+        // DeliveryPlace ainda não definido — deixo como JSON livre (textarea)
 
+        deliveryPlace: {}
 
+      }
 
+    };
 
+  
+    // Derivados para preview e copiar
 
+    $: payload = { data: form };
 
+    $: payloadString = JSON.stringify(payload, null, 2);
 
+  
+    let previewOpen = false;
 
+    let copied = false;
 
+  
+    async function copyJson() {
 
+      try {
 
+        await navigator.clipboard.writeText(payloadString);
 
+        copied = true;
 
+        setTimeout(() => (copied = false), 2000);
 
+      } catch (e) {
 
+        console.error('Falha ao copiar JSON:', e);
 
+      }
 
+    }
 
+  
+    // Atualiza deliveryPlace via JSON livre
 
+    let deliveryPlaceDraft = '';
 
+    $: deliveryPlaceDraft = JSON.stringify(form.instrument.deliveryPlace || {}, null, 2);
 
+  
+    function updateDeliveryPlaceFromDraft() {
 
+      try {
 
+        const parsed = JSON.parse(deliveryPlaceDraft || '{}');
 
+        form.instrument.deliveryPlace = parsed;
 
+      } catch (e) {
 
+        alert('JSON inválido em DeliveryPlace');
 
+      }
 
+    }
 
+  
+    const inputCls =
 
+      'w-full rounded-md border border-border1_contact/20 bg-border2_contact/5 p-3 text-tx_contact_form focus:outline-none focus:ring-2 focus:ring-blue-400';
 
+    const cardCls =
 
+      'rounded-xl border border-border1_contact/20 bg-border2_contact/5 backdrop-blur-sm p-6 md:p-8 shadow-md transition hover:shadow-lg';
 
+    const btnPrimary =
 
+      'inline-flex items-center justify-center gap-2 rounded-md border-2 border-border1_contact bg-gradient-to-r from-bg1_button_contact to-bg2_button_contact px-6 py-3 font-bold text-tx_contact_form transition duration-300 ease-out hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60';
 
+    const btnGhost =
 
+      'inline-flex items-center justify-center gap-2 rounded-md border-2 border-border1_contact/40 px-4 py-2 font-medium text-tx_contact_form/80 transition hover:bg-border1_contact/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60';
 
+  
+    // Blanks para listas dinâmicas
 
+    const blankCollateral = {
 
+      collateralTypeCode: '',
 
+      collateralTypeName: '',
 
+      constitutionProcessIndicator: '',
 
+      otcBondsmanAccountCode: '',
 
+      documentNumber: ''
 
+    };
 
+  
+    const blankProduct = {
 
+      cprProductName: '',
 
+      cprProductClassName: '',
 
+      cprProductHarvest: '',
 
+      cprProductDescription: '',
 
+      cprProductQuantity: '',
 
+      measureUnitName: '',
 
+      packagingWayName: '',
 
+      cprProductStatusCode: '',
 
+      productionTypeCode: ''
 
+    };
 
+  
+    const blankIssuer = {
 
+      cprIssuerName: '',
 
+      documentNumber: '',
 
+      personTypeAcronym: '',
 
+      stateAcronym: '',
 
+      cityName: '',
 
+      ibgeCode: '',
 
+      issuerLegalNatureCode: ''
 
+    };
 
+  
+    const blankEvent = {
 
+      eventTypeCode: '',
 
+      eventOriginalDate: '',
 
+      unitPriceValue: '',
 
+      interestUnitPriceValue: '',
 
+      residualValue: '',
 
+      amortizationPercentage: '',
 
+      eventQuantity: ''
 
+    };
 
+  
+    const blankProductionPlace = {
 
+      productionPlaceName: '',
 
+      propertyRegistrationNumber: '',
 
+      notaryName: '',
 
+      totalProductionAreaInHectaresNumber: '',
 
+      totalAreaInHectaresNumber: '',
 
+      carCode: '',
 
+      latitudeCode: '',
 
+      longitudeCode: '',
 
+      zipCode: ''
 
+    };
 
+  </script>
 
+  <div class="bg-gradient-to-b from-bg1_contact to-bg2_contact min-h-screen">
 
+  <section id="formcpr" class="relative overflow-hidden py-24 text-tx_contact">
 
+    <!-- Blobs decorativos -->
 
+    <div aria-hidden="true" class="pointer-events-none absolute -top-24 -left-24 h-72 w-72 rounded-full bg-gradient-to-br from-bg1_button_contact/20 to-bg2_button_contact/20 blur-3xl"></div>
 
+    <div aria-hidden="true" class="pointer-events-none absolute -bottom-24 -right-24 h-72 w-72 rounded-full bg-gradient-to-tr from-bg1_button_contact/15 to-bg2_button_contact/15 blur-3xl"></div>
 
+  
+    <div class="mx-auto max-w-7xl px-4">
 
+      <h1 class="mb-8 text-center text-3xl md:text-4xl font-extrabold tracking-wide uppercase bg-gradient-to-r from-bg1_button_contact to-bg2_button_contact bg-clip-text text-transparent">
 
+        Faça sua CPR conosco
 
+      </h1>
 
+  
+      <!-- Ações topo -->
 
+  
+      {#if previewOpen}
 
+        <div class={cardCls + ' mb-8'}>
 
+          <p class="mb-3 font-semibold">Pré-visualização do JSON</p>
 
+          <pre class="max-h-[420px] overflow-auto rounded-md bg-black/30 p-4 text-sm"><code>{payloadString}</code></pre>
 
+        </div>
 
+      {/if}
 
+  
+      <!-- INSTRUMENT -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">Instrumento</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">cprTypeCode</label><input class={inputCls} bind:value={form.instrument.cprTypeCode} /></div>
 
+          <div><label class="text-sm">otcRegisterAccountCode</label><input class={inputCls} bind:value={form.instrument.otcRegisterAccountCode} /></div>
 
+          <div><label class="text-sm">otcPaymentAgentAccountCode</label><input class={inputCls} bind:value={form.instrument.otcPaymentAgentAccountCode} /></div>
 
+          <div><label class="text-sm">otcCustodianAccountCode</label><input class={inputCls} bind:value={form.instrument.otcCustodianAccountCode} /></div>
 
+          <div><label class="text-sm">internalControlNumber</label><input class={inputCls} bind:value={form.instrument.internalControlNumber} /></div>
 
+          <div><label class="text-sm">electronicEmissionIndicator (S/N)</label><input class={inputCls} bind:value={form.instrument.electronicEmissionIndicator} /></div>
 
+          <div><label class="text-sm">isinCode</label><input class={inputCls} bind:value={form.instrument.isinCode} /></div>
 
+          <div><label class="text-sm">issueDate (dd/MM/yyyy)</label><input class={inputCls} placeholder="dd/MM/aaaa" bind:value={form.instrument.issueDate} /></div>
 
+          <div><label class="text-sm">maturityDate (dd/MM/yyyy)</label><input class={inputCls} placeholder="dd/MM/aaaa" bind:value={form.instrument.maturityDate} /></div>
 
+          <div><label class="text-sm">issueQuantity</label><input class={inputCls} bind:value={form.instrument.issueQuantity} /></div>
 
+          <div><label class="text-sm">issueValue</label><input class={inputCls} bind:value={form.instrument.issueValue} /></div>
 
+          <div><label class="text-sm">issueFinancialValue</label><input class={inputCls} bind:value={form.instrument.issueFinancialValue} /></div>
 
+          <div><label class="text-sm">unitValue</label><input class={inputCls} bind:value={form.instrument.unitValue} /></div>
 
+          <div><label class="text-sm">referenceDate (dd/MM/yyyy)</label><input class={inputCls} placeholder="dd/MM/aaaa" bind:value={form.instrument.referenceDate} /></div>
 
+          <div><label class="text-sm">profitabilityStartDate (dd/MM/yyyy)</label><input class={inputCls} placeholder="dd/MM/aaaa" bind:value={form.instrument.profitabilityStartDate} /></div>
 
+          <div><label class="text-sm">automaticExpirationIndicator (S/N)</label><input class={inputCls} bind:value={form.instrument.automaticExpirationIndicator} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- COLLATERALS -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <div class="mb-3 flex items-center justify-between">
 
+          <h2 class="text-xl font-bold">Collaterals</h2>
 
+        </div>
 
+        {#each form.instrument.collaterals as c, i}
 
+          <div class="mb-4 rounded-md border border-border1_contact/10 p-4">
 
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+              <div><label class="text-sm">collateralTypeCode</label><input class={inputCls} bind:value={c.collateralTypeCode} /></div>
 
+              <div><label class="text-sm">collateralTypeName</label><input class={inputCls} bind:value={c.collateralTypeName} /></div>
 
+              <div><label class="text-sm">constitutionProcessIndicator (S/N)</label><input class={inputCls} bind:value={c.constitutionProcessIndicator} /></div>
 
+              <div><label class="text-sm">otcBondsmanAccountCode</label><input class={inputCls} bind:value={c.otcBondsmanAccountCode} /></div>
 
+              <div><label class="text-sm">documentNumber</label><input class={inputCls} bind:value={c.documentNumber} /></div>
 
+            </div>
 
+            <div class="mt-3">
 
+            </div>
 
+          </div>
 
+        {/each}
 
+      </div>
 
+  
+      <!-- PRODUCTS -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <div class="mb-3 flex items-center justify-between">
 
+          <h2 class="text-xl font-bold">Products</h2>
 
+        </div>
 
+        {#each form.instrument.products as p, i}
 
+          <div class="mb-4 rounded-md border border-border1_contact/10 p-4">
 
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+              <div><label class="text-sm">cprProductName</label><input class={inputCls} bind:value={p.cprProductName} /></div>
 
+              <div><label class="text-sm">cprProductClassName</label><input class={inputCls} bind:value={p.cprProductClassName} /></div>
 
+              <div><label class="text-sm">cprProductHarvest</label><input class={inputCls} bind:value={p.cprProductHarvest} /></div>
 
+              <div class="md:col-span-3"><label class="text-sm">cprProductDescription</label><input class={inputCls} bind:value={p.cprProductDescription} /></div>
 
+              <div><label class="text-sm">cprProductQuantity</label><input class={inputCls} bind:value={p.cprProductQuantity} /></div>
 
+              <div><label class="text-sm">measureUnitName</label><input class={inputCls} bind:value={p.measureUnitName} /></div>
 
+              <div><label class="text-sm">packagingWayName</label><input class={inputCls} bind:value={p.packagingWayName} /></div>
 
+              <div><label class="text-sm">cprProductStatusCode</label><input class={inputCls} bind:value={p.cprProductStatusCode} /></div>
 
+              <div><label class="text-sm">productionTypeCode</label><input class={inputCls} bind:value={p.productionTypeCode} /></div>
 
+            </div>
 
+            <div class="mt-3">
 
+            </div>
 
+          </div>
 
+        {/each}
 
+      </div>
 
+  
+      <!-- ISSUERS -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <div class="mb-3 flex items-center justify-between">
 
+          <h2 class="text-xl font-bold">Issuers</h2>
 
+        </div>
 
+        {#each form.instrument.issuers as u, i}
 
+          <div class="mb-4 rounded-md border border-border1_contact/10 p-4">
 
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+              <div><label class="text-sm">cprIssuerName</label><input class={inputCls} bind:value={u.cprIssuerName} /></div>
 
+              <div><label class="text-sm">documentNumber</label><input class={inputCls} bind:value={u.documentNumber} /></div>
 
+              <div><label class="text-sm">personTypeAcronym</label><input class={inputCls} bind:value={u.personTypeAcronym} /></div>
 
+              <div><label class="text-sm">stateAcronym</label><input class={inputCls} bind:value={u.stateAcronym} /></div>
 
+              <div><label class="text-sm">cityName</label><input class={inputCls} bind:value={u.cityName} /></div>
 
+              <div><label class="text-sm">ibgeCode</label><input class={inputCls} bind:value={u.ibgeCode} /></div>
 
+              <div><label class="text-sm">issuerLegalNatureCode</label><input class={inputCls} bind:value={u.issuerLegalNatureCode} /></div>
 
+            </div>
 
+            <div class="mt-3">
 
+            </div>
 
+          </div>
 
+        {/each}
 
+      </div>
 
+  
+      <!-- DEPOSIT -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">Deposit</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">otcFavoredAccountCode</label><input class={inputCls} bind:value={form.instrument.deposit.otcFavoredAccountCode} /></div>
 
+          <div><label class="text-sm">documentNumber</label><input class={inputCls} bind:value={form.instrument.deposit.documentNumber} /></div>
 
+          <div><label class="text-sm">personTypeAcronym</label><input class={inputCls} bind:value={form.instrument.deposit.personTypeAcronym} /></div>
 
+          <div><label class="text-sm">selfNumber</label><input class={inputCls} bind:value={form.instrument.deposit.selfNumber} /></div>
 
+          <div><label class="text-sm">settlementModalityTypeCode</label><input class={inputCls} bind:value={form.instrument.deposit.settlementModalityTypeCode} /></div>
 
+          <div><label class="text-sm">otcSettlementBankAccountCode</label><input class={inputCls} bind:value={form.instrument.deposit.otcSettlementBankAccountCode} /></div>
 
+          <div><label class="text-sm">depositQuantity</label><input class={inputCls} bind:value={form.instrument.deposit.depositQuantity} /></div>
 
+          <div><label class="text-sm">depositUnitPriceValue</label><input class={inputCls} bind:value={form.instrument.deposit.depositUnitPriceValue} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- PAYMENT METHOD -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">Payment Method</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">paymentMethodCode</label><input class={inputCls} bind:value={form.instrument.paymentMethod.paymentMethodCode} /></div>
 
+          <div><label class="text-sm">indexCode</label><input class={inputCls} bind:value={form.instrument.paymentMethod.indexCode} /></div>
 
+          <div class="md:col-span-3"><label class="text-sm">indexShortName</label><input class={inputCls} bind:value={form.instrument.paymentMethod.indexShortName} /></div>
 
+          <div><label class="text-sm">vcpIndicatorTypeCode</label><input class={inputCls} bind:value={form.instrument.paymentMethod.vcpIndicatorTypeCode} /></div>
 
+          <div><label class="text-sm">indexadorPercentageValue</label><input class={inputCls} bind:value={form.instrument.paymentMethod.indexadorPercentageValue} /></div>
 
+          <div><label class="text-sm">interestRateSpreadPercentage</label><input class={inputCls} bind:value={form.instrument.paymentMethod.interestRateSpreadPercentage} /></div>
 
+          <div><label class="text-sm">interestRateCriteriaTypeCode</label><input class={inputCls} bind:value={form.instrument.paymentMethod.interestRateCriteriaTypeCode} /></div>
 
+          <div><label class="text-sm">interestPaymentDate (dd/MM/yyyy)</label><input class={inputCls} placeholder="dd/MM/aaaa" bind:value={form.instrument.paymentMethod.interestPaymentDate} /></div>
 
+          <div><label class="text-sm">interestPaymentValue</label><input class={inputCls} bind:value={form.instrument.paymentMethod.interestPaymentValue} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- INTEREST PAYMENT FLOW -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">Interest Payment Flow</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">interestPaymentFrequencyCode</label><input class={inputCls} bind:value={form.instrument.interestPaymentFlow.interestPaymentFrequencyCode} /></div>
 
+          <div><label class="text-sm">interestMonthsQuantity</label><input class={inputCls} bind:value={form.instrument.interestPaymentFlow.interestMonthsQuantity} /></div>
 
+          <div><label class="text-sm">timeUnitTypeCode</label><input class={inputCls} bind:value={form.instrument.interestPaymentFlow.timeUnitTypeCode} /></div>
 
+          <div><label class="text-sm">deadlineTypeCode</label><input class={inputCls} bind:value={form.instrument.interestPaymentFlow.deadlineTypeCode} /></div>
 
+          <div><label class="text-sm">paymentStartDate (dd/MM/yyyy)</label><input class={inputCls} placeholder="dd/MM/aaaa" bind:value={form.instrument.interestPaymentFlow.paymentStartDate} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- AMORTIZATION PAYMENT FLOW -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">Amortization Payment Flow</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">amortizationTypeCode</label><input class={inputCls} bind:value={form.instrument.amortizationPaymentFlow.amortizationTypeCode} /></div>
 
+          <div><label class="text-sm">amortizationMonthsQuantity</label><input class={inputCls} bind:value={form.instrument.amortizationPaymentFlow.amortizationMonthsQuantity} /></div>
 
+          <div><label class="text-sm">timeUnitTypeCode</label><input class={inputCls} bind:value={form.instrument.amortizationPaymentFlow.timeUnitTypeCode} /></div>
 
+          <div><label class="text-sm">deadlineTypeCode</label><input class={inputCls} bind:value={form.instrument.amortizationPaymentFlow.deadlineTypeCode} /></div>
 
+          <div><label class="text-sm">amortizationStartDate (dd/MM/yyyy)</label><input class={inputCls} placeholder="dd/MM/aaaa" bind:value={form.instrument.amortizationPaymentFlow.amortizationStartDate} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- SCR -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">SCR</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">scrTypeCode</label><input class={inputCls} bind:value={form.instrument.scr.scrTypeCode} /></div>
 
+          <div><label class="text-sm">scrCustomerDetail</label><input class={inputCls} bind:value={form.instrument.scr.scrCustomerDetail} /></div>
 
+          <div><label class="text-sm">personTypeAcronym</label><input class={inputCls} bind:value={form.instrument.scr.personTypeAcronym} /></div>
 
+          <div><label class="text-sm">documentNumber</label><input class={inputCls} bind:value={form.instrument.scr.documentNumber} /></div>
 
+          <div><label class="text-sm">contractCode</label><input class={inputCls} bind:value={form.instrument.scr.contractCode} /></div>
 
+          <div><label class="text-sm">operationModalityTypeCode</label><input class={inputCls} bind:value={form.instrument.scr.operationModalityTypeCode} /></div>
 
+          <div><label class="text-sm">bacenReferenceCode</label><input class={inputCls} bind:value={form.instrument.scr.bacenReferenceCode} /></div>
 
+          <div><label class="text-sm">finalityCode</label><input class={inputCls} bind:value={form.instrument.scr.finalityCode} /></div>
 
+          <div><label class="text-sm">ipocCode</label><input class={inputCls} bind:value={form.instrument.scr.ipocCode} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- DOLAR/EURO PROFITABILITY -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">Dólar/Euro Profitability</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">calculationTypeCode</label><input class={inputCls} bind:value={form.instrument.dolarEuroProfitability.calculationTypeCode} /></div>
 
+          <div><label class="text-sm">initialExchangeValue</label><input class={inputCls} bind:value={form.instrument.dolarEuroProfitability.initialExchangeValue} /></div>
 
+          <div><label class="text-sm">fixingTypeCode</label><input class={inputCls} bind:value={form.instrument.dolarEuroProfitability.fixingTypeCode} /></div>
 
+          <div><label class="text-sm">dataSourceTypeCode</label><input class={inputCls} bind:value={form.instrument.dolarEuroProfitability.dataSourceTypeCode} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- IGPM/IPCA PROFITABILITY -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">IGPM/IPCA Profitability</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">adjustmentFrequencyTypeCode</label><input class={inputCls} bind:value={form.instrument.igpmIpcaProfitability.adjustmentFrequencyTypeCode} /></div>
 
+          <div><label class="text-sm">adjustmentProRataTypeCode</label><input class={inputCls} bind:value={form.instrument.igpmIpcaProfitability.adjustmentProRataTypeCode} /></div>
 
+          <div><label class="text-sm">adjustmentTypeCode</label><input class={inputCls} bind:value={form.instrument.igpmIpcaProfitability.adjustmentTypeCode} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- CREDITOR -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">Creditor</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">creditorName</label><input class={inputCls} bind:value={form.instrument.creditor.creditorName} /></div>
 
+          <div><label class="text-sm">documentNumber</label><input class={inputCls} bind:value={form.instrument.creditor.documentNumber} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- BALLAST -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">Ballast</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">ballastTypeCode</label><input class={inputCls} bind:value={form.instrument.ballast.ballastTypeCode} /></div>
 
+          <div><label class="text-sm">lotNumber</label><input class={inputCls} bind:value={form.instrument.ballast.lotNumber} /></div>
 
+          <div><label class="text-sm">ballastQuantity</label><input class={inputCls} bind:value={form.instrument.ballast.ballastQuantity} /></div>
 
+          <div><label class="text-sm">currencyCode</label><input class={inputCls} bind:value={form.instrument.ballast.currencyCode} /></div>
 
+          <div><label class="text-sm">transactionIdentification</label><input class={inputCls} bind:value={form.instrument.ballast.transactionIdentification} /></div>
 
+          <div class="md:col-span-3"><label class="text-sm">additionalText</label><input class={inputCls} bind:value={form.instrument.ballast.additionalText} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- REGISTER OFFICE -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">Register Office</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">cprNumber</label><input class={inputCls} bind:value={form.instrument.registerOffice.cprNumber} /></div>
 
+          <div><label class="text-sm">cprContractNumber</label><input class={inputCls} bind:value={form.instrument.registerOffice.cprContractNumber} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- EVENTS -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <div class="mb-3 flex items-center justify-between">
 
+          <h2 class="text-xl font-bold">Events</h2>
 
+        </div>
 
+        {#each form.instrument.events as ev, i}
 
+          <div class="mb-4 rounded-md border border-border1_contact/10 p-4">
 
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+              <div><label class="text-sm">eventTypeCode</label><input class={inputCls} bind:value={ev.eventTypeCode} /></div>
 
+              <div><label class="text-sm">eventOriginalDate (dd/MM/yyyy)</label><input class={inputCls} placeholder="dd/MM/aaaa" bind:value={ev.eventOriginalDate} /></div>
 
+              <div><label class="text-sm">unitPriceValue</label><input class={inputCls} bind:value={ev.unitPriceValue} /></div>
 
+              <div><label class="text-sm">interestUnitPriceValue</label><input class={inputCls} bind:value={ev.interestUnitPriceValue} /></div>
 
+              <div><label class="text-sm">residualValue</label><input class={inputCls} bind:value={ev.residualValue} /></div>
 
+              <div><label class="text-sm">amortizationPercentage</label><input class={inputCls} bind:value={ev.amortizationPercentage} /></div>
 
+              <div><label class="text-sm">eventQuantity</label><input class={inputCls} bind:value={ev.eventQuantity} /></div>
 
+            </div>
 
+            <div class="mt-3">
 
+            </div>
 
+          </div>
 
+        {/each}
 
+      </div>
 
+  
+      <!-- PRODUCTION PLACES -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <div class="mb-3 flex items-center justify-between">
 
+          <h2 class="text-xl font-bold">Production Places</h2>
 
+        </div>
 
+        {#each form.instrument.productionPlaces as pl, i}
 
+          <div class="mb-4 rounded-md border border-border1_contact/10 p-4">
 
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+              <div><label class="text-sm">productionPlaceName</label><input class={inputCls} bind:value={pl.productionPlaceName} /></div>
 
+              <div><label class="text-sm">propertyRegistrationNumber</label><input class={inputCls} bind:value={pl.propertyRegistrationNumber} /></div>
 
+              <div><label class="text-sm">notaryName</label><input class={inputCls} bind:value={pl.notaryName} /></div>
 
+              <div><label class="text-sm">totalProductionAreaInHectaresNumber</label><input class={inputCls} bind:value={pl.totalProductionAreaInHectaresNumber} /></div>
 
+              <div><label class="text-sm">totalAreaInHectaresNumber</label><input class={inputCls} bind:value={pl.totalAreaInHectaresNumber} /></div>
 
+              <div class="md:col-span-3"><label class="text-sm">carCode</label><input class={inputCls} bind:value={pl.carCode} /></div>
 
+              <div><label class="text-sm">latitudeCode</label><input class={inputCls} bind:value={pl.latitudeCode} /></div>
 
+              <div><label class="text-sm">longitudeCode</label><input class={inputCls} bind:value={pl.longitudeCode} /></div>
 
+              <div><label class="text-sm">zipCode</label><input class={inputCls} bind:value={pl.zipCode} /></div>
 
+            </div>
 
+            <div class="mt-3">
 
+            </div>
 
+          </div>
 
+        {/each}
 
+      </div>
 
+  
+      <!-- GREEN CPR -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <h2 class="mb-4 text-xl font-bold">Green CPR</h2>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
+          <div><label class="text-sm">greenCprIndicator (S/N)</label><input class={inputCls} bind:value={form.instrument.greenCpr.greenCprIndicator} /></div>
 
+          <div><label class="text-sm">greenCprCertificateName</label><input class={inputCls} bind:value={form.instrument.greenCpr.greenCprCertificateName} /></div>
 
+          <div><label class="text-sm">greenCprCertificateCnpjNumber</label><input class={inputCls} bind:value={form.instrument.greenCpr.greenCprCertificateCnpjNumber} /></div>
 
+          <div class="md:col-span-3"><label class="text-sm">greenCprGeoreferencingDescription</label><input class={inputCls} bind:value={form.instrument.greenCpr.greenCprGeoreferencingDescription} /></div>
 
+          <div><label class="text-sm">greenCprDeclarationIndicator (S/N)</label><input class={inputCls} bind:value={form.instrument.greenCpr.greenCprDeclarationIndicator} /></div>
 
+        </div>
 
+      </div>
 
+  
+      <!-- DELIVERY PLACE (JSON livre por enquanto) -->
 
+      <div class={cardCls + ' mb-8'}>
 
+        <div class="mb-3 flex items-center justify-between">
 
+          <h2 class="text-xl font-bold">Delivery Place (JSON)</h2>
 
+        </div>
 
+        <textarea class={inputCls + ' min-h-[180px] font-mono'} bind:value={deliveryPlaceDraft}></textarea>
 
+        <p class="mt-2 text-sm text-tx_contact_form/70">Cole aqui o JSON do deliveryPlace. Quando tiver a estrutura final, eu troco por inputs dedicados.</p>
 
+      </div>
 
+  
+      <!-- Rodapé de ações -->
 
+      <div class="flex flex-wrap items-center gap-3">
 
+        <button class={btnPrimary} type="button" on:click={() => (previewOpen = true)}>
 
+          Enviar
 
+        </button>
 
+      </div>
 
+    </div>
 
+  </section>
 
+  </div>