# Biznis Feed — Landing Page (HTML) ## Folder struktura ```bash biznis-feed/ │ ├── index.html ├── style.css │ ├── images/ │ ├── hero-phone.png │ ├── hero-qr.png │ ├── dashboard.png │ ├── mobile-feed.png │ └── digital-card.png │ └── assets/ ``` --- # index.html ```html Biznis Feed
Registruj biznis
Nova generacija poslovne komunikacije

Pretvori svakog kupca u pratioca svog biznisa.

Podeli svoj QR kod. Kupci te zaprate. Ti deliš novosti, akcije i posebne ponude.

Kreiraj profil Pogledaj demo

10K+

Biznisa

250K+

Pratilaca

1.2M+

Objava
Hero Mockup
📱

Skeniraj QR

Kupac skenira QR kod i otvara tvoj profil.

💜

Zaprati

Jednim klikom postaje vaš pratilac.

🔔

Prima obaveštenja

Akcije, noviteti i posebne ponude.

💬

Komunicirajte

Ostanite direktno povezani sa kupcima.

Dashboard
Mobile Feed

Kako funkcioniše?

1

Registruj biznis

Napravi profil za par minuta.

2

Dobij QR kod

Podeli ga online ili štampaj.

3

Kupac skenira

Otvara tvoj profil i prati te.

4

Objavljuj

Šalji akcije i novosti direktno kupcima.

Zašto biznisi biraju Biznis Feed?

Više pratilaca

Pretvorite kupce u lojalne pratioce.

Više prodaje

Delite ponude koje donose rezultate.

Lojalni klijenti

Gradite direktan odnos sa kupcima.

Offline povezivanje

QR kod na stolu, kasi, pakovanju i vizitki.

Jednostavni paketi.

Starter

Besplatno
  • Osnovni profil
  • QR kod
  • Digitalna kartica
Počni besplatno

Pro

€7/m
  • Push notifikacije
  • Napredna statistika
  • Više objava
Izaberi Pro

Business

€15/m
  • Tim pristup
  • Brendirana PWA
  • Napredna analitika
Izaberi Business

Spremni da povežete svoj biznis sa više ljudi?

Kreiraj profil i počni za manje od 2 minuta.

Kreiraj profil Pogledaj demo
``` --- # style.css ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(to bottom, #f7f5ff, #ffffff); color: #111111; } img { max-width: 100%; } .navbar { width: 100%; padding: 24px 80px; display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 22px; } .logo-box { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #7b5cff, #5b3fff); color: white; display: flex; align-items: center; justify-content: center; } nav { display: flex; gap: 36px; } nav a { text-decoration: none; color: #333; font-weight: 500; } .hero { padding: 80px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; } .badge { display: inline-block; background: rgba(123, 92, 255, 0.12); color: #6d4dff; padding: 12px 18px; border-radius: 100px; margin-bottom: 24px; font-size: 14px; font-weight: 600; } .hero h1 { font-size: 72px; line-height: 1.05; margin-bottom: 24px; } .hero h1 span { color: #6f52ff; } .hero p { font-size: 20px; line-height: 1.7; color: #666; max-width: 600px; } .hero-buttons { display: flex; gap: 16px; margin-top: 36px; } .btn-primary, .btn-secondary { text-decoration: none; padding: 16px 28px; border-radius: 16px; font-weight: 600; transition: 0.3s ease; } .btn-primary { background: linear-gradient(135deg, #7a5cff, #5b3fff); color: white; } .btn-secondary { background: white; border: 1px solid #ececec; color: #111; } .large { padding: 18px 32px; } .stats { display: flex; gap: 60px; margin-top: 48px; } .stats h3 { font-size: 36px; margin-bottom: 8px; } .stats span { color: #666; } .hero-right { text-align: center; } .hero-right img { width: 90%; } .features, .benefit-grid, .pricing-grid, .steps { display: grid; gap: 24px; } .features, .benefit-grid { grid-template-columns: repeat(4, 1fr); padding: 40px 80px; } .feature-card, .benefit-card, .price-card { background: white; border: 1px solid #ededed; border-radius: 28px; padding: 32px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); } .feature-card h3, .benefit-card h3 { margin: 18px 0 12px; } .feature-card p, .benefit-card p { color: #666; line-height: 1.7; } .icon { font-size: 32px; } .showcase { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; padding: 80px; } .showcase img { border-radius: 32px; } .how, .benefits, .pricing { padding: 80px; } .how h2, .benefits h2, .pricing h2 { text-align: center; font-size: 52px; margin-bottom: 60px; } .steps { grid-template-columns: repeat(4, 1fr); } .step { text-align: center; } .step-number { width: 72px; height: 72px; border-radius: 24px; background: linear-gradient(135deg, #7a5cff, #5b3fff); color: white; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; margin: 0 auto 24px; } .step p { color: #666; margin-top: 12px; line-height: 1.7; } .pricing-grid { grid-template-columns: repeat(3, 1fr); } .price-card { text-align: center; } .price-card ul { list-style: none; margin: 30px 0; } .price-card li { margin-bottom: 16px; color: #555; } .price { font-size: 52px; font-weight: 800; margin-top: 20px; } .featured { border: 2px solid #6d4dff; transform: translateY(-10px); } .full { width: 100%; display: block; } .cta { margin: 80px; padding: 80px; border-radius: 40px; background: linear-gradient(135deg, #7b5cff, #4c2fff); color: white; text-align: center; } .cta h2 { font-size: 54px; max-width: 900px; margin: auto; } .cta p { margin-top: 20px; font-size: 20px; opacity: 0.9; } .footer { padding: 60px 80px; display: flex; justify-content: space-between; align-items: center; } .footer p { color: #777; } @media(max-width: 1100px) { .hero, .showcase, .features, .benefit-grid, .pricing-grid, .steps { grid-template-columns: 1fr; } .hero { padding: 40px 24px; } .navbar { padding: 24px; } nav { display: none; } .hero h1 { font-size: 48px; } .features, .showcase, .how, .benefits, .pricing { padding: 24px; } .cta { margin: 24px; padding: 40px 24px; } .cta h2 { font-size: 36px; } .footer { padding: 40px 24px; flex-direction: column; gap: 20px; } .stats { flex-wrap: wrap; gap: 24px; } } ``` --- # Slike koje treba da uploaduješ ## 1. hero-phone.png Koristi: * mockup sa telefonom + QR kodom * ljubičasta bela pozadina ## 2. dashboard.png Koristi: * dashboard overview mockup ## 3. mobile-feed.png Koristi: * sidebar/mobile feed mockup ## 4. digital-card.png Koristi: * digital business card sekciju --- # Preporuka Za najbolji rezultat: * koristi WebP format * kompresuj slike * koristi blur shadows u Figma exportu * exportuj u 2x rezoluciji