7 Corrupting Sins Website

Status: IN PROGRESS

7 Corrupting Sins — Game Landing Page will be a visually immersive, responsive landing page for the game 7 Corrupting Sins, built with React, Vite, and Material UI (MUI).

Features

• Custom MUI Theme: Unique color palette, custom fonts, button variants, and AppBar styling
• Responsive Layout: Mobile-friendly with adaptive typography and layout
• 3D Globe Model: Interactive 3D model rendered with react-three-fiber
• Sectioned Content: Hero, About, Media Gallery, Factions, Pre-Order, The 7 Sins and Footer
• Animation: Used Framer Motion for smooth transitions and animations
• Accessible & Semantic: Semantic HTML and accessible MUI components

Tech Stack

• React 19
• Vite
• Material UI (MUI)
• Framer Motion
• @mui/lab Timeline
• react-three-fiber
• @emotion/styled
• Custom fonts via @font-face

Project Structure

        7CS-Website/
        ├── public/
        │   └── assets/                  # Static assets served by Vite    
        │       ├── fonts/               # Custom fonts
        │       ├── HorrorTexture.png    # Background texture for AppBar      
        │       ├── 7CSDrawingTheme.png  # Themed background image
        │       └── stylized_planet.glb  # 3D globe model
        ├── src/
        │   ├── components/             # React components
        │   │   ├── Navbar.jsx          # Custom AppBar with navigation
        │   │   ├── Hero.jsx            # Hero section with background image and buttons
        │   │   ├── About.jsx           # About section with video and lore
        │   │   ├── Media.jsx           # Media gallery with images
        │   │   ├── Factions.jsx        # Factions section with 3D globe and timelines
        │   │   ├── PreOrder.jsx        # Pre-order section with call-to-action
        │   │   ├── Footer.jsx          # Footer with social links and copyright
        │   │   └── Sin.jsx             # Individual sin component with rotating selector
        │   ├── fonts.css               # Global font styles
        │   ├── theme.jsx               # Custom MUI theme configuration
        │   ├── App.jsx                 # Main app component
        │   ├── index.css               # Global styles
        │   └── main.jsx                # Entry point for React app
        ├── index.html                  # HTML template
        └── package.json
        

Customization

• Fonts: Add/replace font files in public/assets/fonts/ and update src/fonts.css
• Theme: Edit src/theme.jsx for colors, typography, or component variants
• 3D Model: Replace public/assets/stylized_planet.glb with your own model
• Images: Add images to public/assets/ and update component imports
• Animations: Modify Framer Motion animations in components

Notable Components

• Navbar: Custom AppBar with textured background and themed navigation buttons
• Hero: Large banner with background image, gradient overlay, and call-to-action buttons
• About: Split layout with video and lore/description
• Factions: 3D globe and dual timelines for Humans and Jinns
• The 7 Sins: Individual sin component with rotating selector
• Footer: Social links and copyright

Video Demo

Gallery