### WhatsApp Pre-filled Message Example
Source: https://github.com/youssefeslam29/cashback-motors/blob/main/idea.md
This example shows how to construct a pre-filled WhatsApp message for product inquiries, including both Arabic and English versions.
```text
مرحبا، أنا مهتم بـ [اسم الدراجة]. هل هي متاحة؟
Hello, I'm interested in the [Bike Name]. Is it available?
```
--------------------------------
### Internationalization (i18n) - Root Layout Setup
Source: https://context7.com/youssefeslam29/cashback-motors/llms.txt
Sets up the root layout for internationalization using next-intl. It detects the locale, loads messages, and applies directionality (RTL/LTR) and font classes based on the locale.
```typescript
// app/[locale]/layout.tsx
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';
import { notFound } from 'next/navigation';
export default async function LocaleLayout({
children,
params: { locale },
}: {
children: React.ReactNode;
params: { locale: string };
}) {
if (!['en', 'ar'].includes(locale)) notFound();
const messages = await getMessages();
const isRTL = locale === 'ar';
return (
{children}
);
}
```
--------------------------------
### Home Page Component (Next.js)
Source: https://context7.com/youssefeslam29/cashback-motors/llms.txt
Renders the landing page with hero, category strip, featured products, trust section, and a sticky WhatsApp button. Uses next-intl for translations.
```tsx
// app/[locale]/page.tsx
import { useTranslations } from 'next-intl';
import HeroSection from '@/components/HeroSection';
import CategoryStrip from '@/components/CategoryStrip';
import FeaturedProducts from '@/components/FeaturedProducts';
import WhatsAppFloat from '@/components/WhatsAppFloat';
export default function HomePage() {
const t = useTranslations('home');
return (
{/* Full-screen hero with logo, tagline, and CTA */}
{/* Quick category strip */}
{/* Featured / new arrivals — 3 to 6 cards */}
{/* "Why Cash Back Moto?" trust section */}
{t('whyUs.title')}
{t('whyUs.body')}
{/* Sticky WhatsApp CTA — always visible */}
);
}
```
--------------------------------
### Product Catalog Page (Next.js)
Source: https://context7.com/youssefeslam29/cashback-motors/llms.txt
Displays a filterable grid of products. Fetches products based on search parameters like type, fuel, and max price. Requires `getProducts` function from '@/lib/products'.
```tsx
// app/[locale]/catalog/page.tsx
import { getProducts } from '@/lib/products';
import ProductCard from '@/components/ProductCard';
import FilterBar from '@/components/FilterBar';
export default async function CatalogPage({
searchParams,
}: {
searchParams: { type?: string; fuel?: string; maxPrice?: string };
}) {
const products = await getProducts({
type: searchParams.type, // 'motorcycle' | 'scooter'
fuel: searchParams.fuel, // 'gas' | 'electric'
maxPrice: Number(searchParams.maxPrice) || undefined,
});
return (
{products.map((product) => (
))}
);
}
```
--------------------------------
### Individual Product Page (Next.js)
Source: https://context7.com/youssefeslam29/cashback-motors/llms.txt
Displays details for a single product, including an image gallery, specs table, and WhatsApp/call CTAs. Fetches product data using `getProductBySlug` and requires `notFound` for invalid slugs.
```tsx
// app/[locale]/catalog/[slug]/page.tsx
import { getProductBySlug } from '@/lib/products';
import ImageGallery from '@/components/ImageGallery';
import SpecsTable from '@/components/SpecsTable';
import WhatsAppCTA from '@/components/WhatsAppCTA';
export default async function ProductPage({ params }: { params: { slug: string } }) {
const product = await getProductBySlug(params.slug);
if (!product) return notFound();
const waMessage = encodeURIComponent(
`Hello, I'm interested in the ${product.name}. Is it available?`
);
return (
);
}
```
--------------------------------
### Contact Page Implementation in Next.js
Source: https://context7.com/youssefeslam29/cashback-motors/llms.txt
This component renders a contact page with click-to-call, WhatsApp deep links, social media links, and an inquiry form. It uses next-intl for translations and dynamically constructs WhatsApp messages.
```tsx
// app/[locale]/contact/page.tsx
import { useTranslations } from 'next-intl';
export default function ContactPage() {
const t = useTranslations('contact');
const waMessage = encodeURIComponent('Hello, I have an inquiry about Cash Back Moto.');
return (