Structuring Business Website Sections
Structuring Business Website Sections — Full Prompt Generator
Jab user Roman Urdu/Hindi mein bole ke "web banwana hai" ya "AI builder ke liye prompt likh do", to seedha upar wale skill ka poora analysis internally chalao (Decision Framework → Section Template → Examples logic), lekin user ko wapas sirf ek hi final cheez do: ek single, copy-paste-ready master prompt jo kisi bhi AI website builder (Framer AI, Wix ADI, 10Web, v0, Lovable, etc.) mein paste karne se poori site ek hi baar mein ban jaye — page by page, visual detail ke sath.
Neeche wo exact process hai jo follow karni hai.
User se sirf itna maloom karo (agar already na diya ho):
- Business kis type ka hai (clinic, restaurant, e-commerce, SaaS, freelancer, etc.)
- Kitni services/products/offerings hain
- Brand ka naam, tone (professional / friendly / luxury / minimal), aur color preference (agar hai)
- Business location/city (agar local business hai)
Agar user ne yeh sab pehle hi message mein de diya hai — koi sawal nahi, seedha final prompt generate karo. Agar bilkul kuch nahi diya, to reasonable defaults use karo aur note kar do "yeh maine assume kiya hai."
Progress:
- Step 1: Business type identify karo, Decision Framework se single-page vs multi-page decide karo
- Step 2: Sections/pages ki final list finalize karo (Home, Services/Shop/Menu/Features, Testimonials, About Us, Contact) — business type ke hisaab se naam adjust karo
- Step 3: Har section ke liye Section Template use karke: purpose, content, desktop layout, mobile layout, SEO decide karo
- Step 4: Yeh sab analysis ko ek hi continuous prompt mein convert karo — internal analysis ko user ko mat dikhao, sirf final prompt do
- Step 5: Final prompt ko is format mein present karo:
- Ek intro line jo bataye ke "yeh site is-tarah banayen"
- Overall style/brand guide (colors, fonts, mood)
- Page-by-page / section-by-section poora breakdown, visuals ke sath
- Mobile responsiveness ka instruction
- SEO instruction
- End mein ek line: "Sab sections ko is exact order mein aur is detail ke sath banao"
Ek [business type] ke liye [single-page / multi-page] professional website banao,
brand name "[Brand Name]". Overall tone/mood: [professional/friendly/luxury/minimal].
Color palette: [primary color] + [accent color], background [light/dark].
Font style: modern sans-serif headings, readable body text.
Har section fully mobile-responsive ho, tap targets minimum 44px, mobile par
sab multi-column grids single column mein stack ho jayen.
--- HOME SECTION ---
Purpose: [ek line mein bataye kya show karna hai]
Layout (Desktop): Full-width hero image/video ke sath headline "[headline text]",
subheading, aur primary CTA button "[CTA text]" jo [color] mein highlighted ho.
Uske neeche 3-column grid mein highlights/benefits, phir testimonial strip.
Layout (Mobile): Hero text image ke upar stack ho, 3-column grid vertical stack
mein convert ho, CTA button full-width ho.
SEO: H1 = "[keyword + brand + location]", meta description ≤160 characters.
--- [SERVICES/SHOP/MENU/FEATURES] SECTION ---
Purpose: [kya explain karna hai]
Layout (Desktop): [3-4 column card grid / product grid / menu categories] — har card
mein icon/image, title, 1-2 line description.
Layout (Mobile): Single column stacked cards.
SEO: [har offering ke liye alag H2 keyword ya sub-page keyword]
--- TESTIMONIALS SECTION ---
Purpose: Trust build karna
Layout (Desktop): [Carousel / 3-column grid] of quote cards with names, photos,
star ratings.
Layout (Mobile): Swipeable single-card carousel.
SEO: Review/AggregateRating schema add karo.
--- ABOUT US SECTION ---
Purpose: Brand story aur team humanize karna
Layout (Desktop): Text + image split section, phir team grid.
Layout (Mobile): Image text ke upar stack, team grid 1-2 column.
SEO: Organization schema, brand/trust keywords include karo.
--- CONTACT US SECTION ---
Purpose: Conversion aur easy contact
Layout (Desktop): 2-column split — ek side form (name, email, message), doosri
side phone/email/address/hours + map embed.
Layout (Mobile): Form aur details stack ho jayen, phone number tel: link ho,
map fixed height block.
SEO: LocalBusiness schema with consistent NAP.
Sab sections ko exactly is order mein, is visual detail ke sath, aur is
responsiveness ke sath banao. Navigation sticky header mein ho, [agar single-page
hai to: "smooth scroll anchor links ke sath"].
Example 1: Input: "Mujhe apni dental clinic ki website banwani hai, naam 'Smile Care Dental', Lahore mein" Output: Decision Framework apply hota hai → clinic = 5+ services → multi-page structure. Final prompt generate hota hai jisme Home ka CTA "Book Appointment" hai, Services section mein Cleanings/Whitening/Root Canals/Emergency Care cards hain (har ek sub-page keyword ke sath), Testimonials mein patient reviews + schema markup, About Us mein dentist ka intro, Contact Us mein click-to-call + map embed with LocalBusiness schema (Lahore location ke sath). Poora prompt upar wale template mein fill hoke user ko diya jata hai.
Example 2: Input: "Freelance graphic designer hu, simple portfolio site chahiye" Output: Single offering, low content → single-page structure. Final prompt mein Home hero mein tagline + featured work, Services compact cards (Branding/Web Design/Illustration), Testimonials 3-quote strip (carousel nahi), About Us text+image split, Contact Us simple form + social links (map nahi). Mobile mein anchor nav hamburger menu mein collapse hota hai. Yeh sab final prompt format mein likh ke diya jata hai.
Example 3: Input: "Skincare brand ka online store banana hai" Output: E-commerce → Services section replace hota hai Shop/Product Grid se, har product Product Detail page pe link karta hai. Testimonials product reviews + UGC photos section ban jate hain. Final prompt mein Product schema, "Add to Cart" sticky mobile bar, filterable shop grid — sab detail ke sath likha jata hai.
- Hamesha internally Decision Framework aur Section Template apply karo, lekin user ko final output mein sirf ek complete, ready-to-paste prompt do — beech ka analysis mat dikhao jab tak user khud na maange
- Prompt itna detailed ho ke AI builder ko koi guess na karna pade — colors, layout, mobile behavior, CTA text sab specify karo
- Business type ke hisaab se section names adjust karo (Shop, Menu, Features, Portfolio) — generic "Services" har jagah mat thoko
- Agar user ne kam offerings bataye hain (1-2), single-page recommend karo aur prompt mein bhi single-page hi likho
- Prompt ke end mein clear instruction do: "sab sections is exact order aur detail ke sath banao" — taake AI builder skip na kare
- User ko beech ka raw analysis (table, framework) mat do — sirf final prompt chahiye, wo bhi ek hi baar mein
- Prompt mein mobile responsiveness ka instruction bhool kar mat chhodo — har section ke liye alag se likhna zaroori hai
- Generic "make me a website" type prompt mat do — har section ka layout, color, CTA text, SEO explicitly likhna hai
- Agar business ka type unclear ho aur user ne bata diya ho, to sawal wapas mat pucho — reasonable default lagake seedha final prompt bana do
- Single-page aur multi-page ka decision skip mat karo — yeh galat structure recommend karne ki sabse badi wajah hai