Symorph: A Simple Multi-Page Landing Website
This project reuses the same source code as Landing Page 1, but showcases a different set of products. The main goal here was reusability , using existing code to achieve the same outcome for another subcompany that required the same structure, just with different products, without reinventing the wheel. Thanks to having the codebase already in place, this only took a day instead of a week. This project reuses the same source code as Landing Page 1, but showcases a different set of products. The main goal here was reusability , using existing code to achieve the same outcome for another subcompany that required the same structure, just with different products, without reinventing the wheel. Thanks to having the codebase already in place, this only took a day instead of a week.
Live Site
Pages
- root — single page
- About — single page
- Products — subpages
- Solutions — subpages
Technologies
- Next.js
- shadcn/ui
- Tailwind CSS
Features
- Icons were converted into components for easier color and size manipulation, rather than using raw SVGs — this also allows icons to be reused throughout the application without redeclaring them each time.
- The logo in both the footer and header is the same component, rendered with different configurations.
- A carousel to display two different images.
- Easily interchangeable color palette.
- Fully responsive (RWD) — accessible on mobile, tablet, and desktop.
- A "Public Resources" section featuring a modal that displays available files for download, served directly from the public folder.
- Dynamic hover menu whose container width adjusts automatically to fit between 3 and 5 items.
Screenshots
Home Page
About Page
Product Page
Responsiveness
