Landing pages
Balcon Studio
A design-studio landing page with a six-question project estimate that ends in a checked brief and a contact form.
Context / scope
Overview and scope
Balcon Studio designs interiors. The site turns a visit into a project brief: six questions about the premises and the visitor's taste, then their contact details.
Pages: home, and the questionnaire with its brief, contact form and confirmation. The logo in the interface reads BALCONY Dubai.
Solo front-end developer: all 5 commits in the repository, April 2024.
Results
- No results were recorded, so none are claimed.
- Names, phone numbers and emails in the captures are sample values.
Interface / screens
Walkthrough
Screen 1 of 9: Home page. Real interface, sample data.
Responsive and states
Screen 1 of 1: Home page on a phone. Real interface, sample data.
Behaviour / flows
Features and flows
A six-question brief
- Visitors choose the kind of premises, its area, an interior style from photographs, when to start, the state of the property and what matters most to them in design.
- The area can be typed or set on a slider, and must be a whole number from 10 to 10,000 m².
- Going back keeps every answer, and progress is kept for the browser tab, so a refresh does not restart the questionnaire.
Checking before sending
- After the last question the brief lists every answer, each with a Change link that opens the question and then returns to the brief.
- The contact form asks for a name, phone, email, contact method and language, with a label on every field and a message under any that needs fixing. Phones are checked for the chosen country.
- Once sent, the page thanks the visitor by name and repeats how they will be contacted, the style of the catalog they will receive and the date their 5% discount ends.
The landing page
- The home page lists what the estimate gives (a cost calculation, a catalog in the visitor's style and a discount) and starts the questionnaire.
- Order a call checks the number and confirms on the page. The Instagram, Telegram and WhatsApp links come from the build settings and are hidden when they are not set.
- On phones the photograph sits above the offer instead of beside it.
Engineering / decisions
Architecture and decisions
Next.js 14 (App Router) with React 18, TypeScript, Tailwind CSS 3 and daisyUI, exported as static pages.
The contact form uses React Hook Form. Phone numbers use react-phone-number-input with its flags bundled, so no request goes to another site.
Questions as data
The six questions, their answers and the short labels used in the brief live in one list, and one card renders whichever step is current, so adding or reordering a question is a change to the list.
Answers keyed by question number
Answers are kept in the questionnaire's state by question number, and each step reads its selected answer from there. That is why Back and Change show the earlier choice instead of an empty step.
Usable from the keyboard
Every answer is a real radio button in a fieldset, visually hidden behind its styled card, so Tab and the arrow keys work. Each new step moves focus to its question.
A static site with one place to send from
The site is exported as static pages. Sending the brief sits in a single function where the studio's own service connects.
Limits / notes
Known limitations
- The brief and the call request are not sent anywhere yet: the confirmation is shown without a request until the studio's service is connected.
- The captures run the real static build in a browser with every outside request blocked.
Stack / tools
Technologies
- Next.js
- React
- TypeScript
- Tailwind CSS
- daisyUI
- React Hook Form
- react-phone-number-input