A modern, responsive website for Fileme, offering comprehensive professional services including tax services, accounting & financial reporting, business process outsourcing, financial analysis, internal controls, and risk advisory. Built with Next.js 15, TypeScript, Tailwind CSS, and Shadcn UI.
- 🎨 Modern, responsive design
- 📱 Mobile-first approach
- 📧 Contact form with email functionality
- ⚡ Fast performance with Next.js 15
- 🔒 Secure form handling
- 🎯 SEO optimized
- 🚀 Production ready
- 🎭 Smooth animations and interactions
- 📋 Professional services overview
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Shadcn UI + Radix UI
- Icons: Lucide React
- Email Service: Resend
- Notifications: React Hot Toast
- Fonts: Geist (Local)
- Carousel: Embla Carousel
- Node.js 18+
- npm or yarn
- Resend account for email functionality
- Clone the repository:
git clone <repository-url>
cd fileme- Install dependencies:
npm install- Set up environment variables:
cp env.example .env.local- Configure your environment variables in
.env.local:
# Email Configuration (Resend)
RESEND_API_KEY=your_resend_api_key_here
CONTACT_EMAIL=your@email.com- Sign up for a Resend account
- Get your API key from the dashboard
- Add your API key to
.env.local - Update the
CONTACT_EMAILwith your actual email address
Run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
npm run build
npm startfileme/
├── app/ # Next.js App Router
│ ├── api/
│ │ └── contact/
│ │ └── route.ts # Contact form API endpoint
│ ├── contact/
│ │ └── page.tsx # Contact page
│ ├── demo/ # Demo pages
│ ├── fonts/ # Local font files
│ ├── favicon.ico # Site favicon
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/
│ ├── ui/ # Shadcn UI components
│ │ ├── animated-card.tsx # Animated card component
│ │ ├── button.tsx # Button component
│ │ ├── carousel.tsx # Carousel component
│ │ ├── footer.tsx # Footer component
│ │ ├── input.tsx # Input component
│ │ ├── loading-spinner.tsx # Loading animations
│ │ ├── navigation.tsx # Navigation component
│ │ ├── select.tsx # Select component
│ │ ├── table.tsx # Table component
│ │ └── typeface.tsx # Typeface component
│ └── view/ # Page-specific components
│ └── home/
│ ├── cta-section.tsx # Call-to-action section
│ ├── experts.tsx # Experts carousel section
│ ├── hero-section.tsx # Hero section
│ └── services-section.tsx # Services overview
├── constants/
│ └── component-types.ts # Component type definitions
├── hooks/ # Custom React hooks
│ ├── custom-hook.ts # Example custom hook
│ ├── use-local-storage.ts # Local storage hook
│ └── use-scroll-animation.ts # Scroll animation hook
├── lib/
│ └── utils.ts # Utility functions
├── public/ # Static assets
├── store/ # State management
│ └── example.ts # Example store
├── types/ # TypeScript type definitions
│ └── index.ts # Global types
├── .husky/ # Git hooks
├── .next/ # Next.js build output
├── node_modules/ # Dependencies
├── .cursorrules # Cursor IDE rules
├── .eslintrc.json # ESLint configuration
├── .gitignore # Git ignore rules
├── .prettierrc # Prettier configuration
├── bitbucket-pipelines.yml # CI/CD pipeline
├── components.json # Shadcn UI configuration
├── Dockerfile # Docker configuration
├── env.example # Environment variables example
├── next.config.mjs # Next.js configuration
├── next-env.d.ts # Next.js TypeScript definitions
├── package.json # Project dependencies
├── postcss.config.mjs # PostCSS configuration
├── README.md # Project documentation
├── sonar-project.properties # SonarQube configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
- Hero Section: Deadline-focused messaging with call-to-action
- Services Section: Comprehensive professional services overview including tax services, accounting & financial reporting, business process outsourcing, financial analysis, internal controls, and risk advisory
- Experts Section: Team showcase with interactive carousel
- CTA Section: Final call-to-action for tax filing
- Contact form with validation
- Contact information
- Email integration with Resend
- Toast notifications for form feedback
The project uses Tailwind CSS with a custom design system:
- Primary Colors: Blue (#3b82f6) and Indigo (#6366f1)
- Secondary Colors: Green (#10b981) for success states
- Typography: Geist font family
- Components: Shadcn UI components with custom styling
- Responsive: Mobile-first approach with breakpoints
- Gradients: Subtle gradients for visual appeal
- Mobile-first approach
- Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
- Flexible grid layouts
- Touch-friendly interactions
- Next.js 15 with App Router
- Server-side rendering
- Optimized images and assets
- Fast loading times
- Semantic HTML structure
- ARIA labels and roles
- Keyboard navigation support
- Screen reader friendly
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is licensed under the MIT License.
Fileme - Professional financial services and advisory. Comprehensive solutions for your business needs.