Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/crystalgamesstudio/crystalgamesstudio.github.io

This project is a landing page for CrystalGames Studio, a game development studio. The aim of the project is to create a modern, responsive, and user-friendly landing page that showcases the studio's games and services, it is also the approach to test high-conveting UI/UX practices implemented in static sites.
https://github.com/crystalgamesstudio/crystalgamesstudio.github.io

landing-page static-site vitejs

Last synced: 21 days ago
JSON representation

This project is a landing page for CrystalGames Studio, a game development studio. The aim of the project is to create a modern, responsive, and user-friendly landing page that showcases the studio's games and services, it is also the approach to test high-conveting UI/UX practices implemented in static sites.

Awesome Lists containing this project

README 

        
# CrystalGames Studio - Landing Page



## Project Overview



This project is a landing page for CrystalGames Studio, a game development studio. The aim of the project is to create a modern, responsive, and user-friendly landing page that showcases the studio's games and services, it is also the approach to test high-conveting UI/UX practices implemented in static sites. 



The page should attract new users and encourage them to play the games developed by the studio and buy assets and additional perks which might be used in the games.



## Core Functionalities



Below described elements should appear on the page, one after another in the given order, each section should be easily configurable, content should be held in the `content.json` file. Every section should be responsive and adaptive to the screen size. Use separate components for each section. This page will be hosted as a static site, so use static site generation techniques, we will use GitHub Pages for this.



1. Sticky Bar



    At the top of the page, there is a sticky bar with eye-catching icon and single sentence with a link.



    Icon path, sentence and link should be configurable in the `content.json` file.



2. Header



    Below the sticky bar, there is a header with logo placeholder and navigation menu with 4 items.



    Logo path and navigation items should be configurable in the `content.json` file.



3. Hero Section



    With headline promoting a key product (the newest game and a link to this game page), the subheadline with a additional details related to the key product and the call to action button.



    Headline, subheadline and call to action button text and link should be configurable in the `content.json` file.



4. Features section



    With 3 items, each item has an icon, a title, and a description (highlighting the key features of the key product).



    Icon paths, titles and descriptions should be configurable in the `content.json` file.



5. Products Showcase section (Our best sellers)



    With 4 items, each item has an image, a title and add to cart button.



    Icons, titles and button text and links should be configurable in the `content.json` file.



6. Social Proof section



    With 3 items, each item has a logo, a quote and a rating.



    Icons, quotes and ratings should be configurable in the `content.json` file.



7. FAQ section



    Expandable section with questions and answers.



    Questions and answers should be configurable in the `content.json` file.



8. GoodBuy section



    On the top of this section there is a rating of the key product. It contains a headline and a subheadline.

    Below there is a call to action button with icon and text. Under the button there is a quote from the social proof section with an icon on the left side of the quote.



    CTA text, link and icon should be configurable in the `content.json` file.



9. Footer section



    Multiple columns with links (site map, social media links, policy links, etc.) and copyright.



    Links and copyright should be configurable in the `content.json` file.



## File Structure



```

src/

├── components/

│   ├── layout/

│   │   ├── StickyBar.tsx

│   │   ├── Header.tsx

│   │   └── Footer.tsx

│   ├── home/

│   │   ├── HeroSection.tsx

│   │   ├── FeaturesSection.tsx

│   │   ├── ProductsShowcase.tsx

│   │   ├── SocialProofSection.tsx

│   │   ├── GoodBuySection.tsx

│   │   └── FAQSection.tsx

├── hooks/

│   └── useContentData.ts

├── types/

│   └── content.ts

├── utils/

│   └── helpers.ts

├── index.css

├── App.tsx

├── main.tsx

└── vite-env.d.ts

```