Contact Us Page Included

Author: PrashantUnity

.gitignore

@@ -14,3 +14,4 @@ static/css/site.min.css
 
 # Generated JS bundles (built by npm run build:js before hugo)
 static/js/*.min.js
+!static/js/smartform.min.js

assets/css/modern-dark-theme.css

@@ -709,6 +709,108 @@
   color: rgb(100 116 139);
 }
 
+/* —— Contact us —— */
+[data-theme="dark"] body.home-page .contact-form-card,
+[data-theme="dark"] body.home-page .contact-link {
+  border-color: rgb(71 85 105 / 0.8);
+  background-color: rgb(30 41 59);
+}
+
+[data-theme="dark"] body.home-page .contact-form-card__head {
+  border-color: rgb(51 65 85);
+}
+
+[data-theme="dark"] body.home-page .contact-form-card__title,
+[data-theme="dark"] body.home-page .contact-link__title,
+[data-theme="dark"] body.home-page .contact-info-card__title,
+[data-theme="dark"] body.home-page .contact-field__label {
+  color: rgb(241 245 249);
+}
+
+[data-theme="dark"] body.home-page .contact-form-card__lead,
+[data-theme="dark"] body.home-page .contact-link__desc,
+[data-theme="dark"] body.home-page .contact-info-card__text,
+[data-theme="dark"] body.home-page .contact-form__note {
+  color: rgb(148 163 184);
+}
+
+[data-theme="dark"] body.home-page .contact-field__input {
+  border-color: rgb(71 85 105 / 0.9);
+  background-color: rgb(15 23 42 / 0.75);
+  color: rgb(241 245 249);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
+}
+
+[data-theme="dark"] body.home-page .contact-field__input::placeholder {
+  color: rgb(100 116 139);
+}
+
+[data-theme="dark"] body.home-page .contact-field__input:focus {
+  border-color: rgb(56 189 248 / 0.45);
+  background-color: rgb(15 23 42);
+  box-shadow: 0 0 0 4px rgb(56 189 248 / 0.12);
+}
+
+[data-theme="dark"] body.home-page .contact-form__actions {
+  border-color: rgb(51 65 85);
+}
+
+[data-theme="dark"] body.home-page .contact-info-card {
+  border-color: rgb(12 74 110 / 0.45);
+  background-image: linear-gradient(to bottom right, rgb(12 74 110 / 0.25), rgb(30 41 59), rgb(15 23 42));
+}
+
+[data-theme="dark"] body.home-page .contact-info-card__eyebrow {
+  color: rgb(56 189 248);
+}
+
+[data-theme="dark"] body.home-page .contact-link__icon {
+  background-color: rgb(15 23 42 / 0.8);
+}
+
+[data-theme="dark"] body.home-page .contact-link:hover {
+  border-color: rgb(100 116 139);
+}
+
+[data-theme="dark"] body.home-page .contact-submit.about-btn--primary {
+  background-color: rgb(56 189 248);
+  color: rgb(15 23 42);
+}
+
+[data-theme="dark"] body.home-page .contact-submit.about-btn--primary:hover {
+  background-color: rgb(125 211 252);
+}
+
+[data-theme="dark"] body.home-page .contact-form__summary {
+  border-color: rgb(190 18 60 / 0.35);
+  background-color: rgb(190 18 60 / 0.12);
+  color: rgb(253 164 175);
+}
+
+[data-theme="dark"] body.home-page .contact-field__error,
+[data-theme="dark"] body.home-page .contact-field__count--over {
+  color: rgb(251 113 133);
+}
+
+[data-theme="dark"] body.home-page .contact-field__count--warn {
+  color: rgb(251 191 36);
+}
+
+[data-theme="dark"] body.home-page .contact-field--invalid .contact-field__input {
+  border-color: rgb(244 63 94 / 0.55);
+  background-color: rgb(190 18 60 / 0.08);
+  box-shadow: 0 0 0 4px rgb(244 63 94 / 0.1);
+}
+
+[data-theme="dark"] body.home-page .contact-field--invalid .contact-field__input:focus {
+  border-color: rgb(244 63 94 / 0.75);
+  box-shadow: 0 0 0 4px rgb(244 63 94 / 0.14);
+}
+
+[data-theme="dark"] body.home-page .contact-field__required {
+  color: rgb(100 116 139);
+}
+
 /* —— Category banner —— */
 [data-theme="dark"] body.home-page .category-banner {
   border-color: rgb(71 85 105);

assets/css/modern-glass-theme.css

@@ -227,6 +227,8 @@
 [data-theme="glass"] body .about-stat,
 [data-theme="glass"] body .about-team-card,
 [data-theme="glass"] body .about-connect-card,
+[data-theme="glass"] body .contact-form-card,
+[data-theme="glass"] body .contact-link,
 [data-theme="glass"] body .about-pillar,
 [data-theme="glass"] body .home-why__card,
 [data-theme="glass"] body .home-why__perk,
@@ -250,6 +252,8 @@
 [data-theme="glass"] body .browse-category-card::before,
 [data-theme="glass"] body .browse-hub-card::before,
 [data-theme="glass"] body .about-card::before,
+[data-theme="glass"] body .contact-form-card::before,
+[data-theme="glass"] body .contact-link::before,
 [data-theme="glass"] body article.bg-white.rounded-2xl::before,
 [data-theme="glass"] body article.bg-white.rounded-2xl.flex::before,
 [data-theme="glass"] body .home-testimonial-card::before,
@@ -267,6 +271,8 @@
 [data-theme="glass"] body .browse-category-card > *,
 [data-theme="glass"] body .browse-hub-card > *,
 [data-theme="glass"] body .about-card > *,
+[data-theme="glass"] body .contact-form-card > *,
+[data-theme="glass"] body .contact-link > *,
 [data-theme="glass"] body article.bg-white.rounded-2xl > *,
 [data-theme="glass"] body article.bg-white.rounded-2xl.flex > *,
 [data-theme="glass"] body .home-testimonial-card > *,
@@ -280,6 +286,8 @@
 [data-theme="glass"] body .about-stat:hover,
 [data-theme="glass"] body .about-team-card:hover,
 [data-theme="glass"] body .about-connect-card:hover,
+[data-theme="glass"] body .contact-form-card:hover,
+[data-theme="glass"] body .contact-link:hover,
 [data-theme="glass"] body article.bg-white.rounded-2xl:hover {
   background-color: rgba(255, 255, 255, 0.72) !important;
   box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 40px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(15, 23, 42, 0.05) !important;

assets/css/modern-light-theme.css

@@ -256,6 +256,8 @@
 [data-theme="light"] body .about-stat,
 [data-theme="light"] body .about-team-card,
 [data-theme="light"] body .about-connect-card,
+[data-theme="light"] body .contact-form-card,
+[data-theme="light"] body .contact-link,
 [data-theme="light"] body .about-pillar,
 [data-theme="light"] body .home-why__card,
 [data-theme="light"] body .home-why__perk,

assets/css/tailwind-input.css

@@ -952,6 +952,184 @@
     @apply mt-7 flex flex-wrap items-center justify-center gap-3;
   }
 
+  /* Contact us (/contact-us/) */
+  .contact-hero__intro p {
+    @apply m-0;
+  }
+
+  .contact-layout {
+    @apply grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(17rem,22rem)] lg:items-start;
+  }
+
+  .contact-form-card {
+    @apply rounded-2xl border border-gray-200/90 bg-white p-6 shadow-sm sm:p-8 md:p-10;
+  }
+
+  .contact-form-card__head {
+    @apply mb-7 border-b border-slate-100 pb-6;
+  }
+
+  .contact-form-card__title {
+    @apply text-xl font-bold tracking-tight text-slate-900 sm:text-2xl;
+  }
+
+  .contact-form-card__lead {
+    @apply mt-2 text-sm leading-relaxed text-slate-500 sm:text-[15px];
+  }
+
+  .contact-form__grid {
+    @apply grid gap-5 sm:grid-cols-2;
+  }
+
+  .contact-field--full {
+    @apply sm:col-span-2;
+  }
+
+  .contact-field__label {
+    @apply mb-2 block text-sm font-semibold text-slate-800;
+  }
+
+  .contact-field__label-row {
+    @apply mb-2 flex items-center justify-between gap-3;
+  }
+
+  .contact-field__label-row .contact-field__label {
+    @apply mb-0;
+  }
+
+  .contact-field__required {
+    @apply text-[10px] font-bold uppercase tracking-wider text-slate-400;
+  }
+
+  .contact-field__input {
+    @apply w-full rounded-xl border border-slate-200/90 bg-slate-50/70 px-4 py-3.5 text-[15px] leading-normal text-slate-900 shadow-sm;
+    @apply placeholder:text-slate-400 transition-all duration-200;
+    @apply focus:border-brand/35 focus:bg-white focus:outline-none focus:ring-4 focus:ring-brand/10;
+  }
+
+  .contact-field--invalid .contact-field__input {
+    @apply border-rose-400/90 bg-rose-50/40 ring-4 ring-rose-500/10;
+  }
+
+  .contact-field--invalid .contact-field__input:focus {
+    @apply border-rose-500 ring-rose-500/15;
+  }
+
+  .contact-field__error {
+    @apply mt-2 text-sm font-medium leading-snug text-rose-600;
+  }
+
+  .contact-field__error:empty,
+  .contact-field__error[hidden] {
+    @apply hidden;
+  }
+
+  .contact-field__meta {
+    @apply mt-2 flex items-start justify-between gap-4;
+  }
+
+  .contact-field__meta .contact-field__error {
+    @apply mt-0 flex-1;
+  }
+
+  .contact-field__count {
+    @apply shrink-0 text-xs tabular-nums text-slate-400;
+  }
+
+  .contact-field__count--warn {
+    @apply text-amber-600;
+  }
+
+  .contact-field__count--over {
+    @apply font-semibold text-rose-600;
+  }
+
+  .contact-form__summary {
+    @apply mb-5 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-medium leading-relaxed text-rose-700;
+  }
+
+  .contact-form__summary:empty,
+  .contact-form__summary[hidden] {
+    @apply hidden;
+  }
+
+  .contact-submit:disabled {
+    @apply cursor-not-allowed opacity-70 shadow-none;
+  }
+
+  .contact-submit--loading {
+    @apply pointer-events-none;
+  }
+
+  .contact-submit__spinner {
+    @apply inline-block h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin;
+  }
+
+  .contact-field__input--textarea {
+    @apply min-h-[10.5rem] resize-y;
+  }
+
+  .contact-form__actions {
+    @apply mt-7 flex flex-col gap-3 border-t border-slate-100 pt-6 sm:flex-row sm:items-center sm:justify-between;
+  }
+
+  .contact-submit {
+    @apply w-full justify-center px-7 py-3.5 text-[15px] shadow-md hover:shadow-lg sm:w-auto;
+  }
+
+  .contact-form__note {
+    @apply max-w-md text-xs leading-relaxed text-slate-400;
+  }
+
+  .contact-aside {
+    @apply flex flex-col gap-4;
+  }
+
+  .contact-info-card {
+    @apply rounded-2xl border border-sky-100 bg-gradient-to-br from-sky-50/90 via-white to-white p-5 shadow-sm;
+  }
+
+  .contact-info-card__eyebrow {
+    @apply text-[11px] font-bold uppercase tracking-widest text-sky-600;
+  }
+
+  .contact-info-card__title {
+    @apply mt-2 text-base font-semibold leading-snug text-slate-900;
+  }
+
+  .contact-info-card__text {
+    @apply mt-2 text-sm leading-relaxed text-slate-500;
+  }
+
+  .contact-links {
+    @apply flex flex-col gap-3;
+  }
+
+  .contact-link {
+    @apply flex items-center gap-3 rounded-2xl border border-gray-200/90 bg-white p-4 shadow-sm transition-all duration-200;
+    @apply hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md;
+  }
+
+  .contact-link__icon {
+    @apply flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-slate-50 text-xl;
+  }
+
+  .contact-link__body {
+    @apply flex min-w-0 flex-1 flex-col gap-0.5;
+  }
+
+  .contact-link__title {
+    @apply text-sm font-semibold text-slate-900 transition-colors group-hover:text-brand;
+  }
+
+  .contact-link__desc {
+    @apply text-xs leading-snug text-slate-500;
+  }
+
+  .contact-link__arrow {
+    @apply shrink-0 text-sm font-semibold text-slate-300 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-brand;
+  }
+
   .home-hero-search {
     @apply relative z-10 w-full max-w-md mx-auto;
   }

content/contact-us/_index.md

@@ -0,0 +1,9 @@
+---
+title: "Contact us"
+date: 2025-05-25T00:00:00Z
+draft: false
+description: "Get in touch with CodeFryDev—support, feedback, partnerships, and press inquiries."
+keywords: ["contact", "support", "CodeFryDev", "feedback"]
+---
+
+Questions, feedback, or partnership ideas—we'd love to hear from you. Fill out the form below and we'll get back to you as soon as we can.

content/press/_index.md

@@ -21,4 +21,4 @@ We offer free online tools, games, and AI apps—no signup required. CodeFryDev
 
 For press inquiries, interviews, or partnership requests, please use our main contact channel:
 
-- [Contact & support](/tncprivacy) — terms, privacy, and contact information.
+- [Contact us](/contact-us/) — support, feedback, and general inquiries.

data/about.yaml

@@ -5,6 +5,12 @@ cards:
     phosphorIcon: users
     url: "/about/users/"
 
+  - accent_color: "#fa709a"
+    title: "Contact us"
+    content: "Support, feedback, partnerships, and press inquiries."
+    phosphorIcon: envelope
+    url: "/contact-us/"
+
   - accent_color: "#f093fb"
     title: "Hugo"
     content: "This site is built with Hugo—fast, static, and version-controlled."

data/contact.yaml

@@ -0,0 +1,14 @@
+smartform:
+  recipient: "b74bc04ad06f8c8fead06c04d820a483"
+  subject: "CodeFryDev contact form"
+  successMessage: "Thanks! We'll get back to you soon."
+
+validation:
+  name:
+    minLength: 2
+    maxLength: 80
+  email:
+    maxLength: 254
+  message:
+    minLength: 10
+    maxLength: 5000