update home page

2026-06-18 16:32:31 +05:30
parent d9cc83aa82
commit 8e0d704438
57 changed files with 2813 additions and 301 deletions
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -0,0 +1,29 @@
+import { Navbar } from "@/components/aiero/Navbar";
+import { PageTitleBanner } from "@/components/shared/PageTitleBanner";
+import { MarqueeStrip } from "@/components/aiero/MarqueeStrip";
+import { ContactFormSection } from "@/components/shared/ContactFormSection";
+import { AboutIntroSection } from "@/components/aiero/about/AboutIntroSection";
+import { MissionSection } from "@/components/aiero/about/MissionSection";
+import { PartnerLogosSection } from "@/components/shared/PartnerLogosSection";
+import { TeamSection } from "@/components/aiero/about/TeamSection";
+
+export const metadata = {
+  title: "About us - Aiero",
+};
+
+export default function AboutPage() {
+  return (
+    <>
+      <Navbar />
+      <main className="min-h-screen bg-aiero-dark">
+        <PageTitleBanner title="About us" breadcrumbs={[{ label: "About us" }]} />
+        <AboutIntroSection />
+        <MarqueeStrip text="/ Neural Networks in shaping the future of technology." />
+        <MissionSection />
+        <PartnerLogosSection />
+        <TeamSection />
+        <ContactFormSection />
+      </main>
+    </>
+  );
+}
--- a/app/contacts/page.tsx
+++ b/app/contacts/page.tsx
@@ -0,0 +1,21 @@
+import { Navbar } from "@/components/aiero/Navbar";
+import { PageTitleBanner } from "@/components/shared/PageTitleBanner";
+import { ContactFormSection } from "@/components/shared/ContactFormSection";
+import { MapSection } from "@/components/aiero/contacts/MapSection";
+
+export const metadata = {
+  title: "Contacts - Aiero",
+};
+
+export default function ContactsPage() {
+  return (
+    <>
+      <Navbar />
+      <main className="min-h-screen bg-aiero-dark">
+        <PageTitleBanner title="Contacts" breadcrumbs={[{ label: "Contacts" }]} />
+        <ContactFormSection />
+        <MapSection />
+      </main>
+    </>
+  );
+}
--- a/app/globals.css
+++ b/app/globals.css
@@ -200,25 +200,6 @@ button {
  background-clip: text;
 }

-/* ── Icon decoration (curved corners) ── */
-.icon-decoration {
-  position: relative;
-}
-
-.icon-decoration .icon-inner {
-  position: relative;
-  z-index: 1;
-}
-
-.icon-decoration::before,
-.icon-decoration::after {
-  content: "";
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background: transparent;
-}
-
 /* ── Marquee animation ── */
@keyframes marquee {
  0% {
@@ -229,8 +210,17 @@ button {
  }
 }

-.animate-marquee {
+.marquee-track {
  animation: marquee 15s linear infinite;
+  will-change: transform;
+}
+
+.marquee-text {
+  display: inline-block;
+  font-size: clamp(50px, 8.4vw, 120px);
+  font-weight: 400;
+  letter-spacing: -0.03em;
+  line-height: 1;
 }

 /* ── Counter animation ── */
@@ -261,6 +251,153 @@ button {
  animation: headingReveal 0.8s ease-out forwards;
 }

+/* ── Shared reveal and hover motion ── */
+@keyframes premiumRevealDown {
+  from {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes premiumRevealUp {
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes heroBgFloat {
+  0%,
+  100% {
+    transform: translate3d(var(--hero-parallax-x, 0), var(--hero-parallax-y, 0), 0) scale(1.02);
+  }
+  50% {
+    transform: translate3d(
+      calc(var(--hero-parallax-x, 0px) + 2px),
+      calc(var(--hero-parallax-y, 0px) - 3px),
+      0
+    ) scale(1.025);
+  }
+}
+
+@keyframes scrollFloat {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+@keyframes scrollWidgetEntrance {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.navbar-reveal {
+  opacity: 0;
+  animation: premiumRevealDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: 80ms;
+}
+
+.nav-link-swap {
+  position: relative;
+  overflow: hidden;
+}
+
+.nav-link-swap > .text-active {
+  display: inline-block;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.nav-link-swap > span:not(.text-active) {
+  position: absolute;
+  left: 21px;
+  top: 14px;
+  opacity: 0;
+  transform: translateY(150%);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.nav-link-swap:hover > .text-active {
+  opacity: 0;
+  transform: translateY(-150%);
+}
+
+.nav-link-swap:hover > span:not(.text-active) {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.dropdown-reveal {
+  opacity: 0;
+  transform: translateY(5px);
+  animation: premiumRevealUp 0.28s cubic-bezier(0.4, 0.28, 0.31, 1.28) forwards;
+}
+
+.hero-bg-motion {
+  animation: heroBgFloat 8s ease-in-out infinite;
+  transition: transform 0.35s ease-out;
+  will-change: transform;
+}
+
+.hero-reveal {
+  opacity: 0;
+  animation: premiumRevealUp 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: 580ms;
+}
+
+.scroll-widget {
+  opacity: 0;
+  animation: scrollWidgetEntrance 0.7s ease 1.05s forwards;
+  transform: rotate(-90deg) translateX(-50%) translateY(100%);
+  transform-origin: left bottom;
+}
+
+.scroll-widget .scroll-btn-decoration {
+  display: inline-block;
+  animation: scrollFloat 3.4s ease-in-out 1.7s infinite;
+}
+
+.reveal-on-view {
+  opacity: 0;
+  transform: translateY(22px);
+  transition:
+    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
+  transition-delay: var(--reveal-delay, 0ms);
+}
+
+.reveal-on-view.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.aiero-card {
+  transition:
+    transform 0.32s ease,
+    box-shadow 0.32s ease,
+    border-color 0.32s ease;
+}
+
+.aiero-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 22px 55px rgba(31, 31, 31, 0.16), 0 0 0 1px rgba(69, 208, 189, 0.22);
+}
+
 /* ── Scroll down button decoration ── */
 .scroll-btn-decoration {
  position: relative;
@@ -309,3 +446,22 @@ button {
  height: 1px;
  background: currentColor;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .navbar-reveal,
+  .hero-reveal,
+  .scroll-widget,
+  .reveal-on-view {
+    opacity: 1;
+    transform: none;
+  }
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Manrope, Sora, DM_Sans } from "next/font/google";
+import { Footer } from "@/components/shared/Footer";
 import "./globals.css";

 const manrope = Manrope({
@@ -36,7 +37,10 @@ export default function RootLayout({
      lang="en"
      className={`${manrope.variable} ${sora.variable} ${dmSans.variable}`}
    >
-      <body suppressHydrationWarning>{children}</body>
+      <body suppressHydrationWarning>
+        {children}
+        <Footer />
+      </body>
    </html>
  );
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,18 +2,20 @@ import { Navbar } from "@/components/aiero/Navbar";
 import { HeroSection } from "@/components/aiero/HeroSection";
 import { CardsGrid } from "@/components/aiero/CardsGrid";
 import { PossibilitiesSection } from "@/components/aiero/PossibilitiesSection";
+import { TinkerSection } from "@/components/aiero/TinkerSection";
 import { MarqueeStrip } from "@/components/aiero/MarqueeStrip";
 import { FeaturesSection } from "@/components/aiero/FeaturesSection";

 export default function Home() {
  return (
    <main className="bg-white">
-      <div className="absolute inset-x-0 top-0 z-50">
+      <div className="absolute left-5 right-5 top-0 z-50">
        <Navbar />
      </div>
      <HeroSection />
      <CardsGrid />
      <PossibilitiesSection />
+      <TinkerSection />
      <MarqueeStrip />
      <FeaturesSection />
    </main>
--- a/app/services/page.tsx
+++ b/app/services/page.tsx
@@ -0,0 +1,32 @@
+import { Navbar } from "@/components/aiero/Navbar";
+import { PageTitleBanner } from "@/components/shared/PageTitleBanner";
+import { MarqueeStrip } from "@/components/aiero/MarqueeStrip";
+import { ContactFormSection } from "@/components/shared/ContactFormSection";
+import { PartnerLogosSection } from "@/components/shared/PartnerLogosSection";
+
+import { ServiceCardsGrid } from "@/components/aiero/services/ServiceCardsGrid";
+import { ServiceFeaturesSection } from "@/components/aiero/services/ServiceFeaturesSection";
+import { TestimonialsSection } from "@/components/aiero/services/TestimonialsSection";
+import { PricingSection } from "@/components/aiero/services/PricingSection";
+
+export const metadata = {
+  title: "Services - Aiero",
+};
+
+export default function ServicesPage() {
+  return (
+    <>
+      <Navbar />
+      <main className="min-h-screen bg-aiero-dark">
+        <PageTitleBanner title="Services Page" breadcrumbs={[{ label: "Services Page" }]} />
+        <ServiceCardsGrid />
+        <MarqueeStrip text="/ Neural Networks in shaping the future of technology." />
+        <ServiceFeaturesSection />
+        <TestimonialsSection />
+        <PricingSection />
+        <PartnerLogosSection />
+        <ContactFormSection />
+      </main>
+    </>
+  );
+}