Galaxy of Coders - Landing Page

A modern, responsive landing page for a software development company built with SvelteKit and TailwindCSS.

🚀 Features

• Responsive Design: Looks great on all devices from mobile to desktop
• Dark/Light Mode: Supports theme switching with system preference detection
• Smooth Scrolling: Navigation with scroll animations
• Scrollspy: Active section tracking in navigation
• Modern UI Components: Custom buttons, cards, and interactive elements
• Optimized Performance: Fast loading and rendering
• Accessibility: Designed with a11y best practices

🛠️ Technologies

• SvelteKit: Modern web framework
• Svelte 5: Component-based UI library with runes
• TailwindCSS 4: Utility-first CSS framework
• TypeScript: Type-safe JavaScript
• Vite: Next-generation frontend tooling
• Iconify: Comprehensive icon library

📋 Prerequisites

• Node.js (v18 or newer)
• pnpm (recommended) or npm

🔧 Installation

1. Clone the repository:

   git clone https://github.com/mhmd1619/galaxy-of-coders.git
   cd galaxy-of-coders
   

2. Install dependencies:

   pnpm install
   # or
   npm install
   

3. Start the development server:

   pnpm dev
   # or
   npm run dev
   

4. Open your browser and navigate to http://localhost:5173

🏗️ Building for Production

Create a production build:

pnpm build
# or
npm run build

Preview the production build:

pnpm preview
# or
npm run preview

📁 Project Structure

galaxy-of-coders/
├── src/                  # Source files
│   ├── app.css           # Global styles
│   ├── app.html          # HTML template
│   ├── lib/              # Shared utilities
│   │   ├── Theme.ts      # Theme handling
│   │   └── index.ts      # Library exports
│   ├── components/       # UI components
│   │   ├── ui/           # Base UI components
│   │   ├── Hero.svelte   # Hero section
│   │   ├── Services.svelte # Services section
│   │   ├── WhyUs.svelte  # Why Us section
│   │   ├── Testimonials.svelte # Testimonials section
│   │   ├── FAQ.svelte    # FAQ section
│   │   ├── Footer.svelte # Footer section
│   │   └── Navbar.svelte # Navigation bar
│   └── routes/           # SvelteKit routes
│       ├── +layout.svelte # Root layout
│       └── +page.svelte  # Home page
├── static/               # Static assets
│   ├── favicon.png       # Favicon
│   └── goc.svg           # Logo
├── svelte.config.js      # Svelte configuration
├── tsconfig.json         # TypeScript configuration
├── vite.config.ts        # Vite configuration
└── package.json          # Project dependencies

🎨 Customization

Modifying Content

• Edit the content in the component files to change text, images, and other content
• Update the services list in src/components/Services.svelte
• Modify testimonials in src/components/Testimonials.svelte
• Change FAQ items in src/components/FAQ.svelte

Styling

• Global styles are defined in src/app.css
• Theme colors can be modified in the CSS variables in src/app.css
• Component-specific styles are included within each component

Adding New Sections

1. Create a new component in the src/components directory
2. Import and add the component to src/routes/+page.svelte
3. Add a new navigation link in src/components/Navbar.svelte

🌐 Browser Support

The landing page is compatible with:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📧 Contact

Project Link: https://github.com/mhmd1619/galaxy-of-coders

Built with ❤️ by mhmd1619