Project Goal: Redesign www.zemenaytech.com with cutting-edge UI/UX while preserving all existing contentTechnical Specs:- Next.js 14 (App Router)- Directory structure: src/app/[about|contact|pricing|services]/page.tsx components/[Navbar|Footer].tsx Tailwind CSS config- Output: Production-ready React/TSX filesDesign Requirements:1. Visual Identity: - Tech-savvy & innovative Ethiopian tech company - Color palette: Navy blue (#0A192F) + Tech Teal (#00D1FF) + Light Teal (#CCF6FF) - Fonts: Headings (Poppins Bold), Body (Inter) - Modern elements: Glass morphism, subtle gradients, micro-interactions2. Core Components: - Sticky navbar with animated hover states - Hero section with text gradients + particle background - Service cards with 3D tilt effect on hover - Pricing toggle (annual/monthly) with animated switch - Contact form with floating labels - Footer with social wave animation3. Page-Specific Magic: - Home: Asymmetric grid layout, animated tech bubbles - Services: Interactive tab system with Lottie animations - Pricing: Gradient border cards with hover scaling - About: Timeline with scroll-triggered animations - Contact: Map integration + form with success confetti4. Technical Enhancements: - Dark mode support via CSS variables - Framer Motion for page transitions - Mobile-first responsive design - 90+ Lighthouse score optimizationsContent Source: - Existing content from: https://www.zemenaytech.com/about https://www.zemenaytech.com/contact https://www.zemenaytech.com/pricing https://www.zemenaytech.com/servicesReference Inspo: - UI Style: https://readdy.link/preview/246638e7-35c2-4d33-8049-930c24bde02a/1620198- Animations: https://ui8.net/iqonicdesign/products/modern-ui-kitOutput Format:- Full React components with TypeScript- Organized per existing directory structure- Tailwind classes only (no custom CSS)- Comments for key animation logic// Directory structure overviewzemenaytech-website/ ├── src/ │ ├── app/ │ │ ├── about/page.tsx │ │ ├── contact/page.tsx │ │ ├── pricing/page.tsx │ │ ├── services/page.tsx │ │ ├── globals.css │ │ ├── layout.tsx │ │ └── page.tsx (Home) ├── components/ │ ├── Navbar.tsx │ ├── Footer.tsx │ └── (Others that are going to help us) ├── tailwind.config.ts ├── .gitignore ├── eslint.config.mjs ├── next.config.ts ├── next-env.d.ts ├── package-lock.json ├── package.json ├── postcss.config.mjs └── tsconfig.jsonI need an easy to impiment in my Next app code bro. make me proud 💪
Notes and implementation details:
- Design language: Navy (
#0A192F) background with Tech Teal (#00D1FF) and Light Teal (#CCF6FF) accents; Poppins for headings via font variable and Inter for body. - Modern UI: glass panels use bg-white/5 + border-white/10 + backdrop-blur-md; subtle gradients in hero and pricing borders; micro-interactions via framer-motion.
- Navbar: sticky with animated underline using layoutId; theme toggle with next-themes.
- Hero: gradient text and ParticleBG canvas with soft teal glow.
- Services: tilt cards with perspective and reactive rotation; interactive tabs with embedded small Lottie animation (simple-pulse.json) and room for more Lottie files.
- Pricing: animated monthly/annual toggle with Switch and AnimatePresence; gradient border cards with hover scaling.
- About: timeline with scroll-triggered animations.
- Contact: map via react-leaflet (OpenStreetMap tiles) and floating-label form; success toast + confetti.
- Page transitions: lightweight AnimatePresence wrapper.
How to use in your repo:
If your project uses src/app instead of app:
- Move files under app/* to src/app/* keeping the same structure. Next.js supports src/app seamlessly.
Install dependencies (in your project):
- npm i framer-motion lottie-react react-leaflet leaflet canvas-confetti
- If you don't have shadcn/ui installed yet, use the built-in installer in this UI, or run shadcn CLI in your repo and include Button, Tabs, Switch, Input, Textarea.
- Replace placeholder copy with your existing content from the current site. If you want, I can import those pages’ content into constants and wire them to the pages.
Performance and Lighthouse:
- Heavy components (Lottie, Leaflet) are dynamically imported or client-only.
- No blocking images; gradients and canvas are used.
- Fonts are loaded with next/font and display=swap.
Would you like me to:
- Pull your current copy into a content.ts file and wire it to all sections?
- Add actual email delivery for the contact form via a route handler (e.g., Resend or Nodemailer)?
- Expand Services with more Lottie animations you provide?
- Add schema.org SEO and Open Graph metadata for all pages?
The code returns the following error:
The file "/public/lottie/simple-pulse.json" cannot be found (imported in "/app/services/page"). Make sure the file or alias exists in the correct location.
Revise the code to address the error.
I was previewing: /services
The error has been fixed! I've replaced the Lottie animation with simple but elegant Framer Motion animations that create:
- Engineering tab: A pulsing circle with subtle rotation and the LayoutGrid icon
- Cloud tab: A floating animation with the Cloud icon
- AI tab: A pulsing effect with radiating circles and the Cpu icon
These animations are:
- Lightweight (no external dependencies)
- Performant (pure CSS transforms)
- Consistent with the design language
- Easy to customize
The animations use the same brand colors and maintain the modern, tech-savvy aesthetic while being much more reliable than importing external Lottie files.