Merge pull request #400 from kathy-ai-art/feat/redesign-landing-features

refactor(design): redesign landing page features from card grid to bento layout

Author: 0xSlink

app/__tests__/page.test.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import LandingPage from '@/app/page';
+
+// Mock translations
+jest.mock('@/lib/i18n/useAppTranslation', () => ({
+  useAppTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'landing.badge': 'Now live on Soroban Testnet',
+        'landing.headline': 'Settle Globally.',
+        'landing.headlineAccent': 'Instantly & Non-Custodial.',
+        'landing.description': 'The next-generation merchant payment platform for African businesses.',
+        'landing.primaryCta': 'Start Accepting Crypto',
+        'landing.secondaryCta': 'Explore Features',
+        'landing.featuresTitle': 'Powered by Stellar & Soroban',
+        'landing.featuresDescription': 'Enterprise-grade payment infrastructure designed for speed, low fees, and perfect transparency.',
+        'landing.features.settlement.title': 'Instant Settlement',
+        'landing.features.settlement.description': 'Transactions settle in 3-5 seconds.',
+        'landing.features.offRamps.title': 'SEP-24 Fiat Off-Ramps',
+        'landing.features.offRamps.description': 'Automated routing to Stellar Anchors.',
+        'landing.features.fees.title': 'Smart Fee Splits',
+        'landing.features.fees.description': 'Soroban contracts automatically calculate and route platform fees.',
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+// Mock next/link
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => {
+    return <a href={href}>{children}</a>;
+  };
+});
+
+// Mock Header and Footer to isolate the page test
+jest.mock('@/components/layout', () => {
+  return function MockLayout() {
+    return <div data-testid="layout-component" />;
+  };
+});
+
+describe('Landing Page Integration Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the main hero section with correct text', () => {
+    render(<LandingPage />);
+    expect(screen.getByText('Settle Globally.')).toBeInTheDocument();
+    expect(screen.getByText('Instantly & Non-Custodial.')).toBeInTheDocument();
+  });
+
+  it('renders the "Powered by Stellar & Soroban" headline as required', () => {
+    render(<LandingPage />);
+    expect(screen.getByText('Powered by Stellar & Soroban')).toBeInTheDocument();
+  });
+
+  it('renders all three feature cards with translations', () => {
+    render(<LandingPage />);
+    
+    // Feature 1
+    expect(screen.getByText('Instant Settlement')).toBeInTheDocument();
+    expect(screen.getByText('Transactions settle in 3-5 seconds.')).toBeInTheDocument();
+    
+    // Feature 2
+    expect(screen.getByText('SEP-24 Fiat Off-Ramps')).toBeInTheDocument();
+    expect(screen.getByText('Automated routing to Stellar Anchors.')).toBeInTheDocument();
+    
+    // Feature 3
+    expect(screen.getByText('Smart Fee Splits')).toBeInTheDocument();
+    expect(screen.getByText('Soroban contracts automatically calculate and route platform fees.')).toBeInTheDocument();
+  });
+
+  it('renders feature elements within a list structure', () => {
+    render(<LandingPage />);
+    // The grid div has role="list"
+    const list = screen.getByRole('list');
+    expect(list).toBeInTheDocument();
+
+    // Features are in listitems
+    const listitems = screen.getAllByRole('listitem');
+    expect(listitems).toHaveLength(3);
+  });
+});

app/page.tsx

@@ -81,18 +81,32 @@ export default function LandingPage() {
             </p>
           </div>
 
-          <div className="grid md:grid-cols-3 gap-6" role="list">
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-6" role="list">
             {features.map((feature, i) => (
               <div
                 key={i}
-                className="p-8 rounded-2xl bg-card border border-border hover:border-primary/40 hover:shadow-md transition-all duration-200"
+                className={`group relative overflow-hidden p-8 rounded-3xl bg-card border border-border hover:border-primary/40 hover:shadow-lg transition-all duration-300 ${
+                  i === 0 ? "md:col-span-8 md:row-span-2 flex flex-col justify-center min-h-[400px]" : "md:col-span-4"
+                }`}
                 role="listitem"
               >
-                <div className="w-11 h-11 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center mb-6" aria-hidden="true">
-                  <feature.icon className="w-5 h-5 text-primary" />
+                {/* Subtle background decoration for the primary card */}
+                {i === 0 && (
+                  <div className="absolute right-0 top-0 -mt-8 -mr-8 w-64 h-64 bg-primary/5 rounded-full blur-3xl group-hover:bg-primary/10 transition-colors duration-500" aria-hidden="true" />
+                )}
+
+                <div className={`relative z-10 w-12 h-12 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center mb-6 ${i === 0 ? 'w-16 h-16 mb-8' : ''}`} aria-hidden="true">
+                  <feature.icon className={`text-primary ${i === 0 ? 'w-8 h-8' : 'w-6 h-6'}`} />
+                </div>
+
+                <div className="relative z-10">
+                  <h3 className={`font-bold mb-3 text-foreground ${i === 0 ? 'text-3xl lg:text-4xl' : 'text-xl'}`}>
+                    {t(`landing.features.${feature.key}.title`)}
+                  </h3>
+                  <p className={`text-muted-foreground leading-relaxed ${i === 0 ? 'text-lg max-w-xl' : 'text-base'}`}>
+                    {t(`landing.features.${feature.key}.description`)}
+                  </p>
                 </div>
-                <h3 className="text-lg font-semibold mb-3 text-foreground">{t(`landing.features.${feature.key}.title`)}</h3>
-                <p className="text-muted-foreground leading-relaxed text-sm">{t(`landing.features.${feature.key}.description`)}</p>
               </div>
             ))}
           </div>