Home

Relevant source files

The following files were used as context for generating this wiki page: - [app/(tabs)/index.tsx](https://github.com/Pirzl/aidoit4u-mobile-app/blob/HEAD/app/(tabs)/index.tsx) - [design.md](https://github.com/Pirzl/aidoit4u-mobile-app/blob/HEAD/design.md) - [lib/translations.ts](https://github.com/Pirzl/aidoit4u-mobile-app/blob/HEAD/lib/translations.ts) - [todo.md](https://github.com/Pirzl/aidoit4u-mobile-app/blob/HEAD/todo.md) - [package.json](https://github.com/Pirzl/aidoit4u-mobile-app/blob/HEAD/package.json) - [app/(tabs)/analyze.tsx](https://github.com/Pirzl/aidoit4u-mobile-app/blob/HEAD/app/(tabs)/analyze.tsx) - [app/(tabs)/generate.tsx](https://github.com/Pirzl/aidoit4u-mobile-app/blob/HEAD/app/(tabs)/generate.tsx) - [app/(tabs)/chat.tsx](https://github.com/Pirzl/aidoit4u-mobile-app/blob/HEAD/app/(tabs)/chat.tsx)

The Home screen serves as the primary entry point for the "Strategic Legal Analyzer AI" mobile application. Its main purpose is to provide users with immediate access to the app's core functionalities through a series of quick action cards and a prominent call-to-action button. The screen is designed to be the central hub from which users can navigate to analyze, generate, or chat about legal documents.

The layout is structured within a scrollable view, ensuring all content is accessible on various screen sizes. It features a welcome header, a responsive hero image, a feature banner highlighting integrations, and clearly defined navigation elements. All text content is internationalized to support multiple languages.

Sources: app/(tabs)/index.tsx, design.md, todo.md

Screen Layout and Components

The HomeScreen is built using React Native components and styled with NativeWind. The main container is a ScreenContainer wrapping a ScrollView to accommodate content that might exceed the viewport height.

Sources: app/(tabs)/index.tsx:16-21

The following diagram illustrates the component hierarchy of the Home screen.

Key UI Components

The screen is composed of several distinct visual blocks:

Component	Description	Source File
Header	Displays the app title "Legal AI" and a tagline.	app/(tabs)/index.tsx:24-30
Hero Image	A responsive image (hero-image.png) that scales with the screen width.	app/(tabs)/index.tsx:33-41
Feature Banner	A highlighted block with a bg-primary background, announcing a new feature or integration (e.g., "Connected with BOE, EUR-Lex, INE").	app/(tabs)/index.tsx:44-52
Quick Action Cards	A set of three TouchableOpacity components that navigate to the core features: Analyze, Generate, and Chat. Styled with bg-surface.	app/(tabs)/index.tsx:55-89
Primary CTA	A main call-to-action TouchableOpacity button with a bg-primary background to encourage users to start an analysis.	app/(tabs)/index.tsx:92-109

Sources: app/(tabs)/index.tsx, design.md

Navigation

Navigation from the Home screen is handled using the useRouter hook from expo-router. Each of the three quick action cards and the primary CTA button are wrapped in a TouchableOpacity component with an onPress event that triggers router.push() to navigate to the corresponding screen within the tab navigator.

Sources: app/(tabs)/index.tsx:17, 60, 71, 82, 93

The diagram below shows the navigation flow initiated from the Home screen.

Navigation Targets

Action	Target Route	Description
Tap "Analyze Document"	/(tabs)/analyze	Navigates to the document analysis screen.
Tap "Generate Document"	/(tabs)/generate	Navigates to the document generation screen.
Tap "Chat with AI"	/(tabs)/chat	Navigates to the AI chat interface.
Tap "Analyze My Case Free"	/(tabs)/analyze	Navigates to the document analysis screen.

Sources: app/(tabs)/index.tsx:60, 71, 82, 93

Internationalization (i18n)

All user-facing text on the Home screen is managed through a translation system to support multiple languages. The implementation relies on a custom useLanguage hook and a getTranslation utility function.

1. The useLanguage hook provides the currently selected language (e.g., 'EN', 'ES', 'DE').
2. A helper function t is defined to call getTranslation(language, key).
3. Text components display the translated string by referencing a key, like t("professionalLegalAnalysis" as any).

The available languages and their corresponding translation strings are defined in lib/translations.ts.

Sources: app/(tabs)/index.tsx:18-19, lib/translations.ts

Example Translation Keys

Key	English Value (EN)
professionalLegalAnalysis	"Professional legal analysis at your fingertips"
newFeature	"New Feature"
connectedWith	"Connected with BOE, EUR-Lex, INE & Civil Codes"
analyzeDocument	"Analyze Document"
uploadAndAnalyze	"Upload and analyze legal documents for key clauses and risks"
generateDocument	"Generate Document"
chatWithAI	"Chat with AI"
analyzeMyCaseFree	"Analyze My Case Free"
noCreditCardRequired	"No credit card required"

Sources: lib/translations.ts:133-141

Styling and Responsiveness

Styling is primarily achieved using NativeWind, which allows for Tailwind CSS-like utility classes directly in the className prop of components (e.g., text-4xl font-bold text-foreground). The color palette (e.g., primary, surface, foreground) is defined in the theme and applied via these classes.

Sources: app/(tabs)/index.tsx:25, design.md

The screen incorporates responsive design for the hero image. Its size is dynamically calculated to be 80% of the screen's width, with a maximum size of 300px, ensuring it adapts gracefully to different device sizes.

// File: app/(tabs)/index.tsx:20-22
const screenWidth = Dimensions.get("window").width;
// Make hero image responsive: 80% of screen width, max 300px
const heroImageSize = Math.min(screenWidth * 0.8, 300);

Sources: app/(tabs)/index.tsx:20-22