Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The FocusMind website will serve as an interactive landing page that employs a 3D scroll-telling experience to engage users. It will feature a unique visual journey through a brain-themed canvas, guiding users through various informational sections while utilizing React Router for seamless navigation.

## CORE FEATURES
1. **Landing Page:** A captivating entry point with a 3D brain animation that transitions through different phases of interaction.
2. **Scroll-Telling Experience:** A structured journey that unfolds as the user scrolls, revealing new content and visual effects.
3. **Dynamic Routing:** Utilizes React Router to navigate between the main landing page and three additional blank pages created for future content.
4. **Liquid Glass UI Elements:** Interactive cards and buttons that utilize a liquid glass effect, enhancing the aesthetic appeal and user engagement.
5. **Custom Cursor Effect:** An engaging hover effect that reveals Japanese Katakana characters as the user navigates, adding a unique interactive layer to the experience.
6. **Modern Footer:** Contains navigational links to all sections and essential contact information.

## DESIGN SPECIFICATIONS
- **Visual Style:** minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode:** Light theme with dark text on light backgrounds
- **Primary Color:** #1978E5 (accent for buttons, links, highlights)
- **Typography:** Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius:** 8px (moderately rounded) for buttons, cards, and inputs
- **Layout:** The main layout will feature a full-width hero section with 3D elements, followed by scrolling sections for content, and a fixed footer for navigation links and contact information.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript
- **Styling:** Tailwind CSS
- **UI Components:** shadcn/ui
- **State Management:** Not specified; consider using React's built-in state management or Context API if needed for future features.

## IMPLEMENTATION STEPS
1. **Initial Setup:** Create a new React project with TypeScript and install Tailwind CSS along with shadcn/ui components.
2. **Routing Configuration:** Set up the routes in your `App.tsx` for the landing page and the three new paths:
   ```tsx
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import LandingPage from './pages/LandingPage';
   import AutomacaoComIA from './pages/AutomacaoComIA';
   import SitesFocusMind from './pages/SitesFocusMind';
   import QuemNosSomos from './pages/QuemNosSomos';

   function App() {
       return (
           <Router>
               <Switch>
                   <Route path="/" exact component={LandingPage} />
                   <Route path="/automacao-com-ia" component={() => <div />} />
                   <Route path="/sites-focus-mind" component={() => <div />} />
                   <Route path="/quem-nos-somos" component={() => <div />} />
               </Switch>
           </Router>
       );
   }
   export default App;
   ```
3. **Canvas Setup:** Integrate a static 3D canvas as a background in the LandingPage component. Use a placeholder for the brain model that will be replaced later.
4. **Scroll Animation:** Implement scroll-triggered animations using libraries like GSAP for smooth transitions between phases.
5. **Liquid Glass Effect:** Apply Tailwind CSS styles to create the Liquid Glass effect for UI elements.
6. **Custom Cursor Implementation:** Add a custom cursor that reveals Katakana characters on mouse hover using CSS.
7. **Footer Creation:** Develop a modern footer that includes links to the new paths and contact information.

## USER EXPERIENCE
Users will be introduced to a visually stunning landing page that grabs their attention with a 3D brain animation. As they scroll down, a structured narrative will unfold, transitioning smoothly between different sections while maintaining an engaging visual style. The interactive elements, such as the Liquid Glass cards and custom cursor effects, will enhance the overall experience, ensuring that users feel compelled to explore all aspects of the FocusMind site. The footer will provide easy navigation to key areas, ensuring a seamless user journey.