Francis Agency - Web Template

A modern, responsive landing page template for web development agencies built with Svelte 5, SvelteKit, and TailwindCSS.

Features

• 16 Sections: Complete landing page with all essential sections
• Responsive Design: Mobile-first approach with breakpoints for all devices
• SEO Optimized: JSON-LD structured data, Open Graph, Twitter Cards
• Accessible: WCAG 2.1 AA compliant with skip links and focus management
• Fast: Minimal bundle size, lazy loading images
• TypeScript: Full type safety throughout
• Svelte 5 Runes: Modern reactive primitives ($state, $derived, $props)

Sections Included

1. Header/Navbar
2. Hero
3. Brand Logos
4. Services
5. About Us
6. Statistics
7. Portfolio/Projects
8. Process
9. Testimonials
10. Team
11. Pricing
12. FAQ
13. CTA Banner
14. Blog
15. Contact
16. Footer

Getting Started

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Project Structure

src/
├── routes/
│   ├── +page.svelte          # Main landing page
│   ├── +page.ts              # SEO metadata
│   └── +layout.svelte        # Root layout
├── lib/
│   ├── components/
│   │   ├── sections/         # 16 section components
│   │   └── ui/               # Shared UI components
│   ├── data/
│   │   └── agencia.ts        # Content data
│   ├── utils/
│   │   └── seo.ts            # SEO utilities
│   └── types/
│       └── index.ts          # TypeScript interfaces
└── app.css                   # Global styles

Customization

Changing Content

Edit src/lib/data/agencia.ts to update all content:

export const agencia: AgenciaData = {
  meta: {
    title: 'Your Agency Name',
    description: 'Your description',
    // ...
  },
  // ...
};

Changing Colors

Update tailwind.config.js:

export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {extend: {
      colors: {primary: '#YOUR_COLOR',},
    },},
  plugins: [],
}

Adding New Sections

1. Create a new component in src/lib/components/sections/
2. Define props interface in src/lib/types/index.ts
3. Add content data in src/lib/data/agencia.ts
4. Import and use in src/routes/+page.svelte

Performance

• Lighthouse Performance: >90
• Lighthouse Accessibility: >95
• Bundle size: <200KB gzipped

Browser Support

• Chrome/Edge (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)
• Mobile browsers

License

MIT