From 8e0d7044380d45379dd6d93ac47a7c97d3a72a5f Mon Sep 17 00:00:00 2001 From: Aravind Date: Thu, 18 Jun 2026 16:32:31 +0530 Subject: [PATCH] update home page --- .eslintignore | 1 - .gitignore | 3 + PIXEL_PERFECT_WORKFLOW.md | 197 ++++++++++++++++ app/about/page.tsx | 29 +++ app/contacts/page.tsx | 21 ++ app/globals.css | 196 ++++++++++++++-- app/layout.tsx | 6 +- app/page.tsx | 4 +- app/services/page.tsx | 32 +++ components/aiero/CardsGrid.tsx | 138 +++++++---- components/aiero/FeaturesSection.tsx | 30 +-- components/aiero/HeroImageScene.tsx | 214 ++++++++++++++++++ components/aiero/HeroSection.tsx | 50 ++-- components/aiero/MarqueeStrip.tsx | 50 ++-- components/aiero/Navbar.tsx | 90 +++++--- components/aiero/PossibilitiesSection.tsx | 42 ++-- components/aiero/TinkerSection.tsx | 68 ++++++ components/aiero/about/AboutIntroSection.tsx | 55 +++++ components/aiero/about/MissionSection.tsx | 68 ++++++ components/aiero/about/TeamSection.tsx | 80 +++++++ components/aiero/contacts/MapSection.tsx | 18 ++ components/aiero/services/PricingSection.tsx | 92 ++++++++ .../aiero/services/ServiceCardsGrid.tsx | 63 ++++++ .../aiero/services/ServiceFeaturesSection.tsx | 67 ++++++ .../aiero/services/TestimonialsSection.tsx | 72 ++++++ components/shared/CardShared.module.css | 51 +++++ components/shared/CardShared.tsx | 27 +-- components/shared/ContactFormSection.tsx | 171 ++++++++++++++ components/shared/Counter.tsx | 2 +- components/shared/Footer.tsx | 109 +++++++++ components/shared/IconBox.tsx | 65 ++++-- components/shared/PageContainer.tsx | 22 ++ components/shared/PageTitleBanner.tsx | 126 +++++++++++ components/shared/PartnerLogosSection.tsx | 48 ++++ components/shared/PreFooterCTA.tsx | 45 ++++ components/shared/RevealOnView.tsx | 46 ++++ components/shared/ScrollDown.tsx | 35 +++ components/shared/SectionContainer.tsx | 54 +++++ components/shared/SectionHeading.tsx | 72 ++++++ components/shared/SocialIcons.tsx | 67 ++++++ components/shared/icons/PossibilityIcons.tsx | 146 +++++++----- data/design-tokens.ts | 126 +++++++++++ data/navigation.ts | 6 +- data/site-config.ts | 60 +++++ eslint.config.mjs | 23 +- package-lock.json | 7 + package.json | 1 + parse_css.js | 40 ++++ public/images/aiero/discord-1.png | Bin 0 -> 1869 bytes public/images/aiero/messenger-logo-1.png | Bin 0 -> 3930 bytes public/images/aiero/openai-logo-1.png | Bin 0 -> 6966 bytes public/images/aiero/skype-logo.png | Bin 0 -> 2278 bytes public/images/aiero/telegram-symbol-1.png | Bin 0 -> 2994 bytes test-anti-alias.html | 7 + test-cutout.html | 59 +++++ test-svg.html | 11 + tsconfig.json | 2 +- 57 files changed, 2813 insertions(+), 301 deletions(-) delete mode 100644 .eslintignore create mode 100644 PIXEL_PERFECT_WORKFLOW.md create mode 100644 app/about/page.tsx create mode 100644 app/contacts/page.tsx create mode 100644 app/services/page.tsx create mode 100644 components/aiero/HeroImageScene.tsx create mode 100644 components/aiero/TinkerSection.tsx create mode 100644 components/aiero/about/AboutIntroSection.tsx create mode 100644 components/aiero/about/MissionSection.tsx create mode 100644 components/aiero/about/TeamSection.tsx create mode 100644 components/aiero/contacts/MapSection.tsx create mode 100644 components/aiero/services/PricingSection.tsx create mode 100644 components/aiero/services/ServiceCardsGrid.tsx create mode 100644 components/aiero/services/ServiceFeaturesSection.tsx create mode 100644 components/aiero/services/TestimonialsSection.tsx create mode 100644 components/shared/CardShared.module.css create mode 100644 components/shared/ContactFormSection.tsx create mode 100644 components/shared/Footer.tsx create mode 100644 components/shared/PageContainer.tsx create mode 100644 components/shared/PageTitleBanner.tsx create mode 100644 components/shared/PartnerLogosSection.tsx create mode 100644 components/shared/PreFooterCTA.tsx create mode 100644 components/shared/RevealOnView.tsx create mode 100644 components/shared/ScrollDown.tsx create mode 100644 components/shared/SectionContainer.tsx create mode 100644 components/shared/SectionHeading.tsx create mode 100644 components/shared/SocialIcons.tsx create mode 100644 data/design-tokens.ts create mode 100644 data/site-config.ts create mode 100644 parse_css.js create mode 100644 public/images/aiero/discord-1.png create mode 100644 public/images/aiero/messenger-logo-1.png create mode 100644 public/images/aiero/openai-logo-1.png create mode 100644 public/images/aiero/skype-logo.png create mode 100644 public/images/aiero/telegram-symbol-1.png create mode 100644 test-anti-alias.html create mode 100644 test-cutout.html create mode 100644 test-svg.html diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index bdaeff9..0000000 --- a/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -demo.artureanec.com 2/ diff --git a/.gitignore b/.gitignore index 5ef6a52..0b5cf65 100644 --- a/.gitignore +++ b/.gitignore @@ -20,6 +20,9 @@ # production /build +# copied reference-site dumps +demo.artureanec.com*/ + # misc .DS_Store *.pem diff --git a/PIXEL_PERFECT_WORKFLOW.md b/PIXEL_PERFECT_WORKFLOW.md new file mode 100644 index 0000000..9f470b9 --- /dev/null +++ b/PIXEL_PERFECT_WORKFLOW.md @@ -0,0 +1,197 @@ +# PIXEL PERFECT WORKFLOW + +## PRIMARY OBJECTIVE + +Recreate the reference website section with pixel-perfect visual accuracy. + +The goal is NOT to recreate Elementor, WordPress, PHP, or original HTML structure. + +The goal IS to recreate the final visual output exactly as shown in the reference screenshot. + +--- + +## SOURCE PRIORITY + +Always follow this order: + +1. Reference Screenshot (Highest Priority) +2. Live Website Visual Output +3. User Instructions +4. HTML Inspect Data +5. Existing Codebase + +If screenshot and HTML conflict, always follow the screenshot. + +--- + +## CORE RULES + +### Rule 1 + +Never redesign. + +Do not improve the design. + +Do not modernize the design. + +Do not optimize spacing because it looks better. + +Do not change typography because it feels cleaner. + +Match the reference exactly. + +--- + +### Rule 2 + +HTML is reference only. + +Inspect code exists only for: + +* Content identification +* Asset extraction +* Text extraction +* Image extraction +* Icon extraction +* Section identification + +Do not recreate Elementor structure. + +Do not copy Elementor wrappers. + +Do not reproduce unnecessary nested divs. + +--- + +### Rule 3 + +Build clean Next.js components. + +Use: + +* Next.js App Router +* TypeScript +* Tailwind CSS + +Create reusable components only when visual accuracy is preserved. + +--- + +### Rule 4 + +Never modify unrelated sections. + +Only touch files required for the requested section. + +Do not refactor the page. + +Do not reorganize folders. + +Do not rename components unless required. + +--- + +### Rule 5 + +Before implementation, perform visual analysis. + +Return: + +* Container width +* Padding +* Margin +* Gap values +* Border radius +* Typography sizes +* Font weights +* Icon sizes +* Image dimensions +* Layout behavior +* Responsive behavior + +--- + +### Rule 6 + +For screenshot recreation tasks: + +1. Audit first +2. Create implementation plan +3. Wait for approval +4. Implement + +Never skip the audit phase. + +--- + +## SCREENSHOT COMPARISON WORKFLOW + +When a reference screenshot and implementation screenshot are provided: + +Step 1: +Compare both screenshots. + +Step 2: +List every mismatch. + +Step 3: +Categorize mismatches: + +* Layout +* Padding +* Margin +* Radius +* Typography +* Icon sizing +* Image sizing +* Alignment +* Responsive issues + +Step 4: +Create a fix plan. + +Step 5: +Implement only the listed fixes. + +--- + +## SUCCESS CRITERIA + +Implementation is complete only when: + +* Side-by-side comparison shows no obvious visual differences. +* Layout matches reference. +* Padding matches reference. +* Typography matches reference. +* Border radius matches reference. +* Image positioning matches reference. +* Mobile behavior matches reference. + +--- + +## FAILURE CONDITIONS + +Task is considered failed if: + +* Design is improved instead of matched. +* Layout is approximated. +* Unrelated components are modified. +* Existing sections are unnecessarily refactored. +* HTML structure is copied without matching visual output. +* Visible differences remain. + +--- + +## REQUIRED RESPONSE FORMAT + +For every task: + +1. Audit First +2. List Differences +3. Create Implementation Plan +4. Wait For Approval +5. Implement +6. Re-compare +7. Verify Pixel Accuracy + +Never skip these steps. diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 0000000..273b22e --- /dev/null +++ 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 ( + <> + +
+ + + + + + + +
+ + ); +} diff --git a/app/contacts/page.tsx b/app/contacts/page.tsx new file mode 100644 index 0000000..d4b56d4 --- /dev/null +++ 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 ( + <> + +
+ + + +
+ + ); +} diff --git a/app/globals.css b/app/globals.css index 1e7ac9f..2ef08bb 100644 --- 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; + } +} diff --git a/app/layout.tsx b/app/layout.tsx index f4cd4d7..0ee203c 100644 --- 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}`} > - {children} + + {children} +