This project is a multi-page landing site named "Interior," designed to showcase services and works related to design and architecture. The site is built on the Sanity.io platform and is focused on providing a visually appealing and informative experience for users interested in interior design and architectural services. Below is a detailed description of each section of the website.
The app uses react-scroll for smooth navigation between sections. The available pages are:
-
Home- Includes:- Site Introduction: A section dedicated to explaining the purpose of the website.
- Project Slider: A slider displaying a selection of works, with options to view each project in detail.
- Services Overview: A section describing the types of services offered by the site owner.
-
Blog- Includes:- Design and Architecture News: Displays the latest updates in design and architecture, each represented by a card.
- Detailed Blog View: Clicking on a card takes the user to a detailed view of the selected blog post.
-
Works- Includes:- Project Presentation: A section dedicated to showcasing completed projects. The projects are displayed in a visually appealing slider format, allowing users to browse through and view detailed presentations of each project.
-
Services- Includes:- Service Description: A detailed overview of the services provided.
- YouTube Links: Links to a YouTube page where design tips and styling advice are provided.
-
Gallery- Includes:- Design Gallery: A gallery showcasing various design works by the service provider.
-
Header: Transforms into a mobile-friendly menu when viewed on smaller screens.
-
Footer: Contains links to the author's social media profiles for easy contact.
The site is fully responsive and adapts seamlessly to different devices. The mobile menu ensures that navigation remains easy and accessible on all screen sizes.
To run the application locally, follow these steps:
- Clone the repository:
git clone https://github.com/Inna-Mykytiuk/interior.git - Install dependencies:
npm install - Run the app:
npm run dev - Open http://localhost:3000 in your browser (Note: the port may change if port 3000 is already in use).
-
Next.js: Powers the website, providing server-side rendering and static site generation to ensure fast loading times and smooth navigation.
-
Tailwind CSS: Used for styling, offering a utility-first approach that ensures a responsive and attractive design across all devices.
-
TypeScript: Implemented for static type checking, enhancing code quality and reducing errors during development.
-
Sanity.io: A powerful content management system (CMS) used for managing the website's content, enabling easy updates and scalability.
"Interior" is a thoughtfully designed, multi-page landing site tailored for showcasing design and architectural services. Built using modern web development technologies, it ensures high performance, responsiveness, and an intuitive user interface. The strategic use of sliders, galleries, and detailed service descriptions creates an engaging user experience, making it easy for potential clients to explore the services offered and get in touch with the provider. The site's adaptability across various devices further enhances its accessibility and usability.
