[V0_FILE]typescriptreact:file="components/section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { type ReactNode, forwardRef } from "react" interface SectionProps { id: string title: string children: ReactNode } const Section = forwardRef(({ id, title, children }, ref) => { return (

{title}

{children}

) }) Section.displayName = "Section" export default Section [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 39 8% 95%; --primary-foreground: 196 88% 8%; --secondary: 196 88% 8%; --secondary-foreground: 38 6% 94%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom styles */ html { scroll-behavior: smooth; } body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } /* Custom styles for scroll arrow */ @keyframes mouse-wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } } @keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1; } } [V0_FILE]javascript:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#f4f3f1", foreground: "#022029", }, secondary: { DEFAULT: "#022029", foreground: "#f4f3ef", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/scroll-arrow.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, type React } from "react" interface ScrollArrowProps { targetRef: React.RefObject } const ScrollArrow: React.FC = ({ targetRef }) => { useEffect(() => { const style = document.createElement("style") style.textContent = ` @keyframes mouse-wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } } @keyframes mouse-scroll { 0% { opacity: 0; } 50% { opacity: 0.5; } 100% { opacity: 1; } } ` document.head.appendChild(style) return () => { document.head.removeChild(style) } }, []) const handleClick = () => { targetRef.current?.scrollIntoView({ behavior: "smooth" }) } return (

{[0, 1, 2].map((i) => ( ))}

) } export default ScrollArrow [V0_FILE]typescriptreact:file="components/brand-section.tsx" isMerged="true" import Image from "next/image" const BrandSection = () => { return (

Empowering Your Brand with Scalable and High-Performance Web Solutions

) } export default BrandSection [V0_FILE]typescriptreact:file="components/lorem.tsx" isMerged="true" import type React from "react" interface LoremProps { paragraphs?: number sentences?: number } export const Lorem: React.FC = ({ paragraphs = 1, sentences = 5 }) => { const loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." const generateParagraph = () => { const sentences = loremText.split(".") const shuffled = sentences.sort(() => 0.5 - Math.random()) return shuffled.slice(0, sentences).join(". ") + "." } return ( <> {Array.from({ length: paragraphs }).map((_, index) => (

{generateParagraph()}

))} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useRef } from "react" import TableOfContents from "@/components/table-of-contents" import HeroSection from "@/components/hero-section" import AboutBuiltt from "@/components/sections/about-builtt" import AboutProject from "@/components/sections/about-project" import ProjectPhases from "@/components/sections/project-phases" import ProjectBenefits from "@/components/sections/project-benefits" import PregledProcena from "@/components/sections/pregled-procena" import SupportAndMaintenance from "@/components/sections/support-and-maintenance" import TermsOfPayment from "@/components/sections/terms-of-payment" import OptionalServices from "@/components/sections/optional-services" import PropratnaDokumentacija from "@/components/sections/propratna-dokumentacija" import TermsAndConditions from "@/components/sections/terms-and-conditions" import Footer from "@/components/footer" export default function Home() { const firstSectionRef = useRef(null) return (

) } [V0_FILE]typescriptreact:file="components/sections/about-builtt.tsx" isEdit="true" isMerged="true" import Section from "@/components/section" export default function AboutBuiltt() { return (

U Builtt-u specijalizovani smo za kreiranje inovativnih, skalabilnih i dugoročnih rešenja za razvoj veb sajtova koji pokreću poslovni uspeh. Sa više od 15 godina iskustva u industriji, naš posvećeni tim stručnjaka uspešno je realizovao više od 100 projekata u različitim industrijama, pružajući prilagođena rešenja za veb sajtove koja odgovaraju jedinstvenim poslovnim potrebama.

Nudimo našim klijentima kompletnu uslugu pozicioniranja u veb produkciji, koja uključuje:

Dizajn: Kreiranje jedinstvenog i interaktivnog dizajna koji odražavaju vaš brend i unapređuju korisničko iskustvo.
Razvoj: Izgradnja robusnih, skalabilnih i sigurnih veb sajtova koji su prilagođeni vašim specifičnim zahtevima.
Strategija i rast: Pomoć u definisanju jasne digitalne strategije koja podržava vaše dugoročne poslovne ciljeve, optimizujući vašu online prisutnost za maksimalni rast.
Podrška i održavanje: Pružanje kontinuirane podrške i održavanja kako bi vaš veb sajt bio uvek ažuriran, siguran i optimizovan.
Skaliranje tima: Pružanje fleksibilnih i skalabilnih timskih resursa za podršku vašim projektima kako rastu, bilo kroz kratkoročne saradnje ili dugoročna partnerstva.

Razumemo da svaka kompanija ima svoj jedinstveni identitet, koji se odražava i na specifične potrebe za razvojem veb sajtova. Naš tim pristupa svakom projektu na personalizovan način, kako bi u potpunosti razumeo vaše ciljeve, ciljne grupe i tržišne dinamike.

Na taj način razvijamo sveobuhvatnu strategiju koja ne samo da se usklađuje sa vašim ciljevima za veb sajt, već i unapređuje korisničko iskustvo, obezbeđujući da vaš veb sajt bude efikasan alat za postizanje poslovnih ciljeva.

) } [V0_FILE]typescriptreact:file="components/sections/about-project.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Section from "@/components/section" export default function AboutProject() { return (

Tesla zahteva razvoj prilagođenog, višejezičkog B2C veb sajta, kao i integraciju B2B i teslagiveaways.com veb sajtova. Nova platforma će podržavati 18 jezika i dizajnirana je da unapredi prepoznatljivost brenda, poboljša korisničko iskustvo i prikaže rastući katalog proizvoda.

Veb sajt će imati jasan i intuitivan interfejs, optimizovan za mobilne uređaje i usklađen sa identitetom brenda.

Katalog proizvoda sa stranicama za detalje proizvoda (PDP) i stranice za listu proizvoda (PLP)
Pretragu proizvoda i funkcionalnost poređenja
Do 25 prilagođenih UI elemenata

Iako je Tesla dostavio početni dizajn, tim za dizajn Builtt-a je uočio oblasti u kojima trenutni dizajn u potpunosti ne odgovara potrebama klijenta. Stoga, ova ponuda uključuje kompletan redizajn sva tri sajta (B2C, B2B i teslagiveaways.com), uključujući mobilnu i desktop verziju.

Projekat će takođe obuhvatiti migraciju podataka, prenos svih blogova sa trenutnog sajta u novi CMS, kao i unos sadržaja na svih 18 jezika. Tesla je odgovoran za obezbeđivanje celokupnog sadržaja i prevoda za sajt.

Rešenje će biti optimizovano za SEO, usklađeno sa GDPR-om, efikasno u upravljanju resursima i podržavaće bogat sadržaj. Sajt će uključivati praćenje korisnika i analitiku, a dizajniran je sa ciljem buduće skalabilnosti, uključujući mogućnost dodavanja novih prodavnica po zemljama.

Veb sajt neće sadržavati korisničke naloge ili cene u svom početnom lansiranju.

) } [V0_FILE]typescriptreact:file="components/sections/estimacije.tsx" isMerged="true" import Section from "@/components/section" import { Lorem } from "@/components/lorem" export default function Estimacije() { return (

Pregled Estimacija

Metodologija

Faktori Uticaja

Proces Estimacije

Zaključak

) } [V0_FILE]typescriptreact:file="components/pricing-list.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { useState, useEffect } from "react" interface PricingItem { service: string price: number } const PricingList: React.FC = () => { const [total, setTotal] = useState(0) const [discountAmount, setDiscountAmount] = useState(0) const [discountedTotal, setDiscountedTotal] = useState(0) const DISCOUNT_PERCENTAGE = 7.5 const pricingItems: PricingItem[] = [ { service: "Dizajn", price: 15000 }, { service: "Development (Razvoj)", price: 36000 }, { service: "Projektni Menadžment", price: 7500 }, { service: "Postavljanje projekta", price: 500 }, { service: "Tehnički SEO", price: 2500 }, { service: "Unos sadrzaja (svi jezici, sadrzaj dostavlja klijent)", price: 5000 }, { service: "Kontrola kvaliteta", price: 3000 }, { service: "Tehnička dokumentacija", price: 1500 }, { service: "Prenos svih Blog objava sa trenutnog sajta", price: 2000 }, ] useEffect(() => { const newTotal = pricingItems.reduce((sum, item) => sum + item.price, 0) const newDiscountAmount = (newTotal * DISCOUNT_PERCENTAGE) / 100 const newDiscountedTotal = newTotal - newDiscountAmount setTotal(newTotal) setDiscountAmount(newDiscountAmount) setDiscountedTotal(newDiscountedTotal) }, []) return (

{pricingItems.map((item, index) => ( ))}

Usluga	Cena (EUR)
{item.service}	{item.price.toLocaleString()}
UKUPNO	{total.toLocaleString()}
Popust ({DISCOUNT_PERCENTAGE}%)	-{discountAmount.toLocaleString()}
UKUPNO SA POPUSTOM	{discountedTotal.toLocaleString()}

*Dodatni zahtevi - 45 EUR / radnom satu

) } export default PricingList [V0_FILE]typescriptreact:file="components/table-of-contents.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { cn } from "@/lib/utils" const TableOfContents = () => { const [activeSection, setActiveSection] = useState("") useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setActiveSection(entry.target.id) } }) }, { threshold: 0.3, rootMargin: "-10% 0px -90% 0px" }, ) document.querySelectorAll("section[id]").forEach((section) => { observer.observe(section) }) return () => observer.disconnect() }, []) const scrollToSection = (id: string) => { const element = document.getElementById(id) if (element) { element.scrollIntoView({ behavior: "smooth" }) } } const sections = [ { id: "about-builtt", title: "O Builtt-u" }, { id: "about-project", title: "O projektu" }, { id: "project-phases", title: "Projektne faze" }, { id: "project-benefits", title: "Prednosti ovog projekta" }, { id: "cost-overview", title: "Pregled procena" }, { id: "support-and-maintenance", title: "Podrška i održavanje" }, { id: "payment-terms", title: "Uslovi plaćanja" }, { id: "additional-services", title: "Dodatne usluge" }, { id: "propratna-dokumentacija", title: "Propratna dokumentacija" }, { id: "terms-and-conditions", title: "Opšti uslovi i odredbe" }, ] return ( ) } export default TableOfContents [V0_FILE]typescriptreact:file="components/sections/terms-of-payment.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Section from "@/components/section" export default function TermsOfPayment() { return (

Raspored plaćanja za projekat biće sledeći:

15% pri pokretanju projekta
30% nakon završetka faze dizajna
55% nakon završetka projekta i spremnosti za lansiranje

U slučaju kašnjenja sa plaćanjem, Builtt zadržava pravo da obustavi izvršenje radova dok se ne izvrši uplata.

Ako dođe do prekida u realizaciji projekta zbog kašnjenja sa plaćanjem i potrebno je ponovno pokrenuti projekat, biće kreiran novi vremenski okvir za razvoj projekta, uzimajući u obzir trenutno dostupne resurse.

Rok za početak planiranja resursa i projekta biće 3 dana od prijema avansne uplate.

) } [V0_FILE]typescriptreact:file="components/sections/optional-services.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Section from "@/components/section" export default function OptionalServices() { return (

Zahtevi za promene (Change requests)

Tokom implementacije i nakon lansiranja projekta, često se dešava da klijenti shvate da će biti potrebno izvršiti promene u okviru originalnog opsega projekta (promene koje nisu bile prvobitno planirane i dogovorene). Da bismo omogućili ovakve zahteve, razvili smo nekoliko modela za njihovu implementaciju:

Definisani mesečni honorar (Retainer): Ovaj paket uključuje unapred definisan broj sati mesečno (koji se fakturišu na mesečnom nivou) i namenjen je implementaciji promena koje klijent zahteva. Mesečna naknada (ili broj sati) je fiksna. Takođe, ukoliko mesečni honorar nije dovoljan za realizaciju zahteva, klijent može platiti dodatnu naknadu po satu za preostale sate.
Naplaćivanje prema potrošnji: U ovom modelu, klijent se obraća sa zahtevima bez obaveze fiksnog honorara. Na kraju svakog meseca, računamo broj sati potrošenih na rešavanje klijentovih zadataka i izveštavamo klijenta. Klijent se potom fakturiše na osnovu potrošenih sati u tom mesecu.
Naplaćivanje prema proceni: U ovom sistemu, klijent dostavlja svoj zahtev za promenu sa opisom, a tim Builtt-a procenjuje vreme potrebno za implementaciju. Procena se šalje klijentu na odobrenje. Rad na zadatku počinje nakon odobrenja klijenta. Svi odobreni zahtevi fakturišu se mesečno.

** Svi zahtevi za promene naplaćuju se po satnoj tarifi od 45 €.

Zahtev za promenu vs. Izveštaj o grešci (Change Request VS Bug Report)

Zahtevi za promene: Ovi zahtevi se odnose na promene koje klijent zahteva u vezi sa dogovorenom funkcionalnošću ili dizajnom, kao i na dodavanje novih funkcionalnosti i/ili dizajna koji nisu bili prvobitno dogovoreni prilikom postavljanja projekta. Na primer, ako klijent odobri dizajn stranice, a zatim (npr. dva meseca kasnije) zatraži promene na već odobrenom dizajnu, to se smatra zahtevom za promenu.

Greške: Greške su portalne/funkcionalne greške koje nisu u skladu sa specifikacijama projekta i javljaju se u garantnom periodu. Ako se greška pojavi nakon isteka garantnog perioda, njeno rešavanje smatraće se zahtevom za promenu i biće naplaćeno odvojeno.

Garantni period

Garantni period podrazumeva ispravljanje grešaka na portalu/aplikaciji tokom prvog meseca nakon lansiranja. Garantni period ne uključuje implementaciju zahteva za promene koje klijent postavi tokom tog perioda, već samo rešavanje grešaka od strane agencije.

U slučaju da je sa Builtt potpisan ugovor o održavanju, garantni period se produžava do datuma navedenog u ugovoru, a obim usluga biće definisan u odnosu na tip održavanja definisan u tom ugovoru.

) } [V0_FILE]typescriptreact:file="components/sections/pregled-procena.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import Section from "@/components/section" import PricingList from "@/components/pricing-list" import ProjectTimelineTable from "@/components/project-timeline-table" export default function PregledProcena() { return (

U svakom projektu, tačna procena je ključna kako bi se osigurao usklađenost između očekivanja klijenta i resursa potrebnih za ispunjenje uspešnog rezultata. U Builtt-u, pratimo strukturirani proces za procenu kako vremenskih okvira tako i troškova koji su uključeni u svaku fazu projekta, osiguravajući transparentnost i jasno razumevanje isporuka.

Proces procene podeljen je u sledeće faze:

Procena opsega projekta

Počinjemo analizom opsega projekta, uključujući sve zahteve, funkcionalnosti i specifikacije dizajna. Ovo nam pomaže da razumemo celokupan obim rada i identifikujemo potencijalne složenosti ili dodatne zahteve koji se mogu pojaviti.

Cilj lansiranja: Oktobar 2025
Trajanje projekta: 8-9 meseci
Tokom trajanja projekta: Dvo-nedeljni sastanci; Mesečni izveštaji;

Vremenske procene

Na osnovu opsega projekta, naš tim procenjuje vreme potrebno za završavanje svake faze projekta, od otkrivanja i strategije do dizajna, razvoja i lansiranja. Ove vremenske procene zasnivamo na našem prethodnom iskustvu, industrijskim standardima i složenosti rada koji je uključen.

Troškovne procene

Kada su vremenske procene jasne, izračunavamo ukupne troškove projekta na osnovu naših satnica i vremena potrebnog za svaku fazu. Takođe, uzimamo u obzir bilo koje dodatne troškove, kao što su alati trećih strana, licence ili integracije koje će biti potrebne za završavanje projekta.

Fleksibilnost i prilagođavanja

Iako su naše procene što tačnije, razumemo da se mogu pojaviti nepredviđeni izazovi. Ako bude potrebno bilo kakve promene ili dodatni rad, pružićemo ažurirane procene i vremenske okvire kako bi se osiguralo da projekat bude na pravom putu.

Kontinuirana komunikacija

Tokom projekta, održavamo otvorenu komunikaciju sa našim klijentima kako bismo osigurali da projekat napreduje kako je planirano. Svaka odstupanja od početnih procena biće diskutovana, a revidirani vremenski okviri ili troškovi će biti blagovremeno saopšteni.

Razbijanjem projekta u jasne faze i pružanjem detaljnih procena, naš cilj je da klijentima pružimo transparentan i predvidljiv put ka uspehu. Ovaj proces nam omogućava da upravljamo očekivanjima, efikasno raspodelimo resurse i osiguramo pravovremenu isporuku.

) } [V0_FILE]typescriptreact:file="components/sections/terms-and-conditions.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Section from "@/components/section" export default function TermsAndConditions() { return (

Ponuda je važeća 15 dana od datuma prijema.
Ponuda uključuje do 3 runde povratnih informacija ili zahteva za izmenama. Na primer, nakon što Builtt isporuči dizajn veb stranice, klijent pruža povratne informacije, a izmeni dizajna se vrše u skladu s tim. Nakon prve runde izmena, klijent ima pravo na još jednu rundu. Ukoliko je potrebna treća (ili više) runda izmena, svaka naredna runda biće naplaćena dodatno.
Rok za davanje povratnih informacija i odgovaranje na upite/emailove je 2 radna dana. Ukoliko vreme odgovora premaši ovaj rok, rok isporuke projekta smatraće se odloženim.
Prilagođavanje sajta za Internet Explorer 11 je dodatna usluga i biće naplaćeno odvojeno.
Prihvatanje stavki navedenih u ponudi podrazumeva odobrenje projekta. Proizvodnja odobrenog projekta počinje nakon potpisivanja ugovora o saradnji i uplate avansa.
Ponuda uključuje potpisivanje projekta od strane Builtt-a kao i njegovo korišćenje u promotivne svrhe. Ako je potrebna "white label" verzija projekta, ova usluga će se smatrati dodatnim troškom i biće naplaćena odvojeno.
Ponuda ne uključuje proizvodnju, prilagođavanje foto/video sadržaja. Ove usluge su opcione i mogu se zahtevati odvojeno, ako je potrebno.
Ponuda uključuje unos tekstualnog i/ili foto/video sadržaja za svih 18 jezika. Klijent je dužan da obezbedi sav sadržaj, kao i prevode na sve jezike.
Ponuda uključuje samo implementaciju stavki navedenih u ponudi i u skladu sa uslovima koji su istaknuti u ponudi. Ako klijent zahteva kupovinu specifičnih licenci, fontova, domena, foto/video/audio sadržaja ili drugih potrošnih materijala, ove usluge neće biti uključene u cenu ponude, već će biti tretirane kao dodatni trošak.
Ukoliko klijent zahteva implementaciju koja nije obuhvaćena specifikacijom, smatraće se zahtevom za promenu, i biće kreirana nova (separatna) procena za nju.

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import { Github, Linkedin, Twitter } from "lucide-react" const Footer = () => { return ( ) } export default Footer [V0_FILE]typescriptreact:file="components/project-timeline.tsx" isMerged="true" import type React from "react" interface TimelinePhase { name: string duration: number unit: "weeks" | "days" } const ProjectTimeline: React.FC = () => { const phases: TimelinePhase[] = [ { name: "Wireframe faza", duration: 2, unit: "weeks" }, { name: "Art direkcija", duration: 1, unit: "weeks" }, { name: "Faza dizajna", duration: 7, unit: "weeks" }, { name: "Faza razvoja", duration: 24, unit: "weeks" }, { name: "Testiranje", duration: 2, unit: "weeks" }, { name: "Garantni period", duration: 30, unit: "days" }, ] const totalWeeks = phases.reduce((total, phase) => { return total + (phase.unit === "weeks" ? phase.duration : phase.duration / 7) }, 0) return (

Project Timeline

{phases.map((phase, index) => { const startPercentage = (phases.slice(0, index).reduce((total, p) => { return total + (p.unit === "weeks" ? p.duration : p.duration / 7) }, 0) / totalWeeks) * 100 const widthPercentage = ((phase.unit === "weeks" ? phase.duration : phase.duration / 7) / totalWeeks) * 100 return (

{phase.name}

{phase.duration} {phase.unit}

) })}

) } export default ProjectTimeline [V0_FILE]typescriptreact:file="components/horizontal-timeline.tsx" isMerged="true" import type React from "react" interface TimelinePhase { name: string duration: number unit: "weeks" | "days" } const HorizontalTimeline: React.FC = () => { const phases: TimelinePhase[] = [ { name: "Wireframe faza", duration: 2, unit: "weeks" }, { name: "Art direkcija", duration: 1, unit: "weeks" }, { name: "Faza dizajna", duration: 7, unit: "weeks" }, { name: "Faza razvoja", duration: 24, unit: "weeks" }, { name: "Testiranje", duration: 2, unit: "weeks" }, { name: "Garantni period", duration: 30, unit: "days" }, ] const totalWeeks = phases.reduce((total, phase) => { return total + (phase.unit === "weeks" ? phase.duration : phase.duration / 7) }, 0) return (

{phase.name}

{phase.duration} {phase.unit}

) })}

) } export default HorizontalTimeline [V0_FILE]typescriptreact:file="components/gantt-timeline.tsx" isEdit="true" isMerged="true" import type React from "react" interface TimelinePhase { name: string duration: number unit: "weeks" color: string } const GanttTimeline: React.FC = () => { const phases: TimelinePhase[] = [ { name: "Wireframe faza", duration: 2, unit: "weeks", color: "bg-blue-500" }, { name: "Art direkcija", duration: 1, unit: "weeks", color: "bg-green-500" }, { name: "Faza dizajna", duration: 7, unit: "weeks", color: "bg-yellow-500" }, { name: "Faza razvoja", duration: 24, unit: "weeks", color: "bg-red-500" }, { name: "Testiranje", duration: 2, unit: "weeks", color: "bg-purple-500" }, ] const totalWeeks = phases.reduce((total, phase) => total + phase.duration, 0) return (

{phases.map((phase, index) => { const startWeek = phases.slice(0, index).reduce((total, p) => total + p.duration, 0) const widthPercentage = (phase.duration / totalWeeks) * 100 return (

{phase.name}

{phase.duration} {phase.unit}

) })}

) } export default GanttTimeline [V0_FILE]typescriptreact:file="components/project-timeline-table.tsx" isEdit="true" isMerged="true" import type React from "react" interface TimelinePhase { name: string duration: string } const ProjectTimelineTable: React.FC = () => { const phases: TimelinePhase[] = [ { name: "Wireframe faza (Wireframe)", duration: "2 nedelje" }, { name: "Art direkcija", duration: "1 nedelja" }, { name: "Faza dizajna", duration: "7 nedelja" }, { name: "Faza razvoja", duration: "24 nedelje" }, { name: "Testiranje", duration: "2 nedelje" }, { name: "Garantni period", duration: "30 dana" }, ] return (

{phases.map((phase, index) => ( ))}

Faza projekta	Trajanje
{phase.name}	{phase.duration}

) } export default ProjectTimelineTable [V0_FILE]typescriptreact:file="components/sections/support-and-maintenance.tsx" isEdit="true" isMerged="true" import Section from "@/components/section" import MaintenancePlans from "@/components/maintenance-plans" export default function SupportAndMaintenance() { return (

Hosting Solution

Pre lansiranja vašeg sajta, jedan od ključnih faktora koji će obezbediti njegovu pouzdanost, brzinu i skalabilnost je izbor odgovarajuće hosting infrastrukture. S obzirom na to da koristimo Next.js kao frontend framework i Payload CMS kao headless CMS, naš pristup hostovanju je optimizovan za ove tehnologije, koristeći najbolje prakse i rešenja koja omogućavaju brzo i sigurno funkcionisanje sajta.

Za vašu web aplikaciju, predlažemo cloud-based hosting sa CDN-om (Content Delivery Network), kako bismo obezbedili sledeće:

Visoka dostupnost i skalabilnost: Korišćenjem cloud infrastrukture (kao što su Vercel, AWS, Google Cloud ili Azure), možemo automatski skalirati resurse u zavisnosti od saobraćaja na sajtu, čime se garantuje visok nivo dostupnosti bez obzira na broj posetilaca. Ova infrastruktura omogućava brzo proširenje sa resursima koji se prilagođavaju potrebama vašeg sajta.
CDN integracija: Za bolju brzinu učitavanja stranica i bolji korisnički doživljaj, koristićemo CDN (kao što je Cloudflare ili AWS CloudFront). CDN raspoređuje statički sadržaj (kao što su slike, CSS, JavaScript datoteke) na servere širom sveta, omogućavajući brži pristup tim sadržajem korisnicima, bez obzira na njihovu geografsko područje. Ovo je naročito važno za sajtove sa globalnim posetiocima, jer smanjuje latenciju i ubrzava učitavanje stranica.
Sigurnost i backup: Cloud rešenja omogućavaju visoku sigurnost, uključujući enkripciju podataka, firewall zaštitu i automatske rezervne kopije. U slučaju nepredviđenih problema, možemo brzo obnoviti sajt sa poslednje sigurne kopije.
Brzina i optimizacija: Korišćenje Next.js omogućava server-side rendering (SSR) i static site generation (SSG), što znači da vaša stranica može biti unapred generisana i distribuirana putem CDN-a, što dodatno ubrzava vreme učitavanja. Payload CMS omogućava lako upravljanje sadržajem i integraciju sa cloud uslugama za optimizaciju performansi.

Ovaj holistički pristup hostovanju i distribuciji sadržaja obezbeđuje da vaš sajt bude brz, siguran i spreman za rast.

Nakon uspešnog lansiranja vašeg veb sajta, naša posvećenost vašem projektu se ne završava. Builtt nudi sveobuhvatne usluge podrške i održavanja kako bi osigurali da vaš sajt ostane siguran, ažuran i optimizovan za najbolje performanse.

Planovi održavanja

Nudimo različite planove održavanja prilagođene vašim specifičnim potrebama:

) } [V0_FILE]typescriptreact:file="components/maintenance-plans.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import { Server, Search, Paintbrush, Code, Check } from "lucide-react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" interface ServiceCategory { title: string items: string[] icon: React.ReactNode } interface Plan { name: string hours: number regularPrice: number discountedPrice: number hourlyRate?: number services: ServiceCategory[] hostingIncluded?: boolean } const technicalMaintenanceItems = [ "Debagovanje i rešavanje problema sa SSR i SSG", "Implementacija i održavanje server logike", "Optimizacija performansi i vremena učitavanja", "API integracije", "Upravljanje serverless funkcijama", "Rešavanje sigurnosnih ranjivosti", ] const seoServicesItems = ["Tehnički SEO", "On-page SEO"] const designServicesItems = ["UI/UX dizajn", "Redizajn postojećih elemenata"] const developmentServicesItems = [ "Front-end razvoj", "Back-end razvoj", "Integracija API-ja", "Optimizacija performansi", ] const plans: Plan[] = [ { name: "BASIC", hours: 0, regularPrice: 500, discountedPrice: 500, services: [ { title: "Tehničko održavanje", items: technicalMaintenanceItems, icon: , }, ], }, { name: "START", hours: 40, regularPrice: 1800, discountedPrice: 1800, hourlyRate: 45, services: [ { title: "Tehničko održavanje", items: technicalMaintenanceItems, icon: }, { title: "SEO usluge", items: seoServicesItems, icon: }, { title: "Dizajn usluge", items: designServicesItems, icon: }, { title: "Razvoj", items: developmentServicesItems, icon:

 },
    ],
    hostingIncluded: true,
  },
  {
    name: "MEDIUM",
    hours: 80,
    regularPrice: 3600,
    discountedPrice: 3400,
    hourlyRate: 42.5,
    services: [
      { title: "Tehničko održavanje", items: technicalMaintenanceItems, icon:  },
      { title: "SEO usluge", items: seoServicesItems, icon:  },
      { title: "Dizajn usluge", items: designServicesItems, icon:  },
      { title: "Razvoj", items: developmentServicesItems, icon:  },
    ],
    hostingIncluded: true,
  },
  {
    name: "PRO",
    hours: 120,
    regularPrice: 5400,
    discountedPrice: 4800,
    hourlyRate: 40,
    services: [
      { title: "Tehničko održavanje", items: technicalMaintenanceItems, icon:  },
      { title: "SEO usluge", items: seoServicesItems, icon:  },
      { title: "Dizajn usluge", items: designServicesItems, icon:  },
      { title: "Razvoj", items: developmentServicesItems, icon:  },
    ],
    hostingIncluded: true,
  },
]

const MaintenancePlans: React.FC = () => {
  return (
    
      Izaberite svoj plan održavanja
      
        {plans.map((plan) => {
          return (
            
              {plan.name}
              
                {plan.regularPrice !== plan.discountedPrice ? (
                  <>
                    {plan.regularPrice} €
                    {plan.discountedPrice} €
                    Uštedite {plan.regularPrice - plan.discountedPrice} €
                  
                ) : (
                  {plan.discountedPrice} €
                )}
              
              {plan.hours} radnih sati mesečno
              {plan.hourlyRate && {plan.hourlyRate} € po satu}
              {plan.hostingIncluded && (
                
                  
                  Hosting uključen
                
              )}
              {plan.services.map((service, index) => (
                
                  
                    
                      {service.icon}
                      {service.title}
                    
                    
                      
                        {service.items.map((item, itemIndex) => (
                          
                            
                            {item}
                          
                        ))}
                      
                      {service.title === "SEO usluge" && (
                        Off-page SEO nije uključen
                      )}
                    
                  
                
              ))}
            
          )
        })}
      
      
        Broj sati raspoloživ u retainer-u je moguće trošiti na usluge koje uključuje retainer. Takođe, u slučaju potrebe
        za većom potrošnjom od one predviđene ovim retainer-om, biće naplaćeno po radnom satu koji je predviđen radnim
        satom u retaineru (cena sata iz paketa).
      
    
  )
}

export default MaintenancePlans

[V0_FILE]typescriptreact:file="components/sections/project-benefits.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Section from "@/components/section"

export default function ProjectBenefits() {
  return (
    
      Ciljevi projekta
      
        Prepoznatljivost brenda: Kreiraćemo prilagođeno rešenje koje ne samo da se usklađuje sa
        identitetom brenda Tesla, već i pruža korisniku dobro korisničko iskustvo, čime se jača digitalnu prisutnost
        brenda.
      
      
        Podrška za više jezika: Veb sajt će podržavati 18 jezika, a njegova arhitektura biće
        dizajnirana tako da u budućnosti podrži bilo koji broj jezika, čime se obezbeđuje globalna dostupnost i
        pristupačnost.
      
      
        SEO funkcionalnosti: Optimizovaćemo veb sajt za pretraživače, sa ciljem da postignemo SEO
        rezultat veći od 90 na PageSpeed Insights, čime ćemo osigurati dobar rang i efikasne performanse sajta. Ovo je
        tehnički deo SEO-a.
      
      
        Usklađenost sa GDPR-om: Veb sajt će biti usklađen sa GDPR propisima, uključujući jasne politike
        privatnosti i mehanizme za saglasnost sa kolačićima, obezbeđujući zaštitu podataka i privatnost korisnika na
        svim tačkama kontakta.
      
      Predloženo rešenje: 
      Headless CMS (Payload CMS) sa Next.js
      
        Predlažemo moderno rešenje za razvoj veb sajta koje kombinuje Payload CMS (headless CMS) za back-end i Next.js
        za front-end. Ova kombinacija pruža fleksibilnost, performanse i skalabilnost koja je potrebna za budućnost vama
        prilagođenog digitalnog iskustva.
      

      Zašto Headless CMS (Payload CMS) i Next.js?
      
        
          Razdvojena arhitektura: Sa headless CMS-om kao što je Payload CMS, front-end (ono što
          korisnik vidi) i back-end (upravljanje sadržajem) su odvojeni. Ovo omogućava veću fleksibilnost i
          skalabilnost. Sadržaj se upravlja kroz Payload CMS i može se distribuirati na bilo koju platformu (vlasnički
          sajt, mobilne aplikacije, IoT uređaji) putem API-ja, bez da bude vezan za specifičan frontend dizajn ili
          tehnologiju.
        
        
          Brzina i performanse: Next.js je poznat po brzini i koristi server-side rendering (SSR) ili
          static site generation (SSG), što rezultira bržim učitavanjem stranica i boljim korisničkim iskustvom. Sajtovi
          izgrađeni pomoću Next.js učitavaju se brže, što je ključno za korisničko zadovoljstvo i SEO. Brži sajt znači
          bolje korisničko iskustvo i bolji rang na pretraživačima.
        
        
          Skalabilnost: Ovaj pristup je inherentno skalabilan. Kako vaše poslovanje raste, arhitektura
          omogućava lako proširivanje. Dodavanje novih stranica, proizvoda, ili čak novih jezika može se obaviti bez
          većih tehničkih promena. Fleksibilnost Payload CMS i Next.js znači da vaš sajt može brzo da se prilagodi novim
          tehnologijama ili rastućim potrebama za sadržajem.
        
      

      Upravljanje sadržajem bez problema
      
        Payload CMS nudi intuitivno i lako za korišćenje okruženje koje pojednostavljuje upravljanje sadržajem. Nema
        potrebe da budete tehnički stručnjak da biste ažurirali sadržaj sajta. Lako možete upravljati tekstovima,
        slikama, video sadržajem, pa čak i složenim strukturama sadržaja iz sistema za upravljanje sadržajem, čineći
        proces efikasnim i pojednostavljenim.
      

      Priprema za budućnost
      
        Pošto je Payload CMS odvojen od front-end-a, lako se prilagođava novim tehnologijama i može se lako integrisati
        sa budućim platformama. Možete unapređivati sajt bez brige o ograničenjima koja dolaze sa zastarelim CMS
        rešenjima.
      

      Prednosti u odnosu na custom ili tradicionalna CMS rešenja
      
        
          Fleksibilnost: Tradicionalni CMS sistemi kao što su WordPress ili custom rešenja su tesno
          povezani sa strukturom svog front-end-a. To znači da ako želite da redizajnirate ili ažurirate sajt, to može
          biti dugotrajan proces. Sa headless CMS-om, front-end i back-end su nezavisni, pa se promene u dizajnu ili
          ažuriranje sadržaja mogu vršiti bez uticaja na drugi deo.
        
        
          Prilagođavanje: Za razliku od tradicionalnih CMS platformi koje često koriste unapred definisane teme ili šablone, Next.js omogućava potpuno prilagođavanje dizajna i funkcionalnosti sajta. Imate potpunu kontrolu nad korisničkim iskustvom i možete napraviti zaista jedinstven i brendiran sajt.
        
        
          Brži razvoj: Tradicionalni CMS sistemi zahtevaju upravljanje mnogim ugrađenim funkcijama koje
          možda nisu potrebne za vaše poslovanje. Sa Next.js i Payload CMS možemo izgraditi tačno ono što vam treba, bez
          nepotrebnog opterećenja. Ovo smanjuje vreme razvoja i omogućava efikasniji proces izgradnje.
        
        
          Skalabilnost za rast: Sa tradicionalnim CMS rešenjima, kako sajt raste (više sadržaja, više
          posetilaca), može postati sporiji ili složeniji za upravljanje. Next.js i Payload CMS su dizajnirani da se
          nose sa velikim količinama sadržaja i saobraćaja, bez ugrožavanja performansi ili funkcionalnosti. Ovo je
          posebno važno kako vaše poslovanje raste i treba vam platforma koja može da prati taj rast.
        
        
          SEO optimizacija: Next.js je dizajniran da bude SEO-prijateljski od samog početka. Mogućnost
          renderovanja stranica na serveru omogućava pretraživačima lakše indeksiranje vašeg sadržaja, što nije uvek
          slučaj sa tradicionalnim CMS platformama, posebno onima koje se oslanjaju na klijentsko renderovanje.
        
        
          Laka integracija: Payload CMS je izgrađen sa pristupom zasnovanim na API-ju, što olakšava
          integraciju sa drugim sistemima, uslugama ili alatima koje vaše poslovanje može koristiti u budućnosti.
          Tradicionalni CMS sistemi često zahtevaju komplikovane dodatke ili custom razvoj za integracije, što može
          usporiti napredak.
        
      

      SEO Proposal – Tehnička Postavka i Optimizacija
      
        Za novi Tesla sajt, dobra tehnička SEO osnova je ključna kako bi se osiguralo da pretraživači pravilno
        indeksiraju, pretražuju i rangiraju sajt. Naš pristup se fokusira na izgradnju skalabilne i SEO-friendly
        strukture koja podržava dugoročni rast, uz rešavanje ključnih tehničkih aspekata koji utiču na vidljivost i
        performanse sajta.
      

      1. Struktura Sajta i Tehnička Osnova
      
        Dobro strukturiran sajt je od suštinskog značaja za indeksiranje od strane pretraživača i korisničko iskustvo.
        Mi ćemo:
      
      
        Implementirati SEO-friendly strukturu URL-a, obezbeđujući logičku hijerarhiju i čiste permalinke.
        
          Postaviti odgovarajuću arhitekturu sajta sa strategijama unutrašnjeg linkovanja koje efikasno distribuiraju
          link equity.
        
        
          Optimizovati mogućnost pretrage i indeksiranja, osiguravajući da pretraživači mogu pristupiti ključnim
          stranicama bez problema.
        
      

      2. Core Web Vitals i Optimizacija Brzine Stranice
      Brzina učitavanja stranice i korisničko iskustvo direktno utiču na rangiranje. Mi ćemo:
      
        
          Optimizovati brzinu učitavanja, smanjujući vreme odgovora servera i implementirajući strategije keširanja.
        
        Minimizirati render-blocking resurse kao što su veliki JavaScript i CSS fajlovi.
        Poboljšati mobilnu responzivnost, obezbeđujući besprekorno iskustvo na svim uređajima.
      

      3. Tehnička Postavka i SEO Osnovne Funkcionalnosti
      Kako bismo osigurali da je sajt potpuno optimizovan sa tehničke strane, mi ćemo:
      
        
          Postaviti i konfigurisati Google Search Console i Google Analytics za praćenje i izveštavanje u realnom
          vremenu.
        
        Generisati i poslati XML sitemape i robots.txt fajlove kako bismo usmeravali pretraživače.
        
          Implementirati kanonske tagove i rešavati probleme sa duplim sadržajem kako bismo sprečili razblaživanje
          rangiranja.
        
        
          Optimizovati strukturalne podatke (Schema Markup) za poboljšano razumevanje pretraživača i bogate rezultate.
        
      

      4. Optimizacija Indeksiranja i Crawl Budžeta
      
        Pretraživači dodeljuju crawl budžet za svaki sajt, a pravilno upravljanje ovim budžetom osigurava da ključne
        stranice budu indeksirane. Mi ćemo:
      
      
        
          Optimizovati efikasnost crawl-a, osiguravajući da nepotrebne ili nisko-vredne stranice ne troše crawl resurse.
        
        
          Identifikovati i rešavati problem sa orphan stranicama koje nemaju unutrašnje linkove i rizikuju lošu
          indeksaciju.
        
        
          Poboljšati upravljanje faceted navigacijom, osiguravajući da dinamičke stranice ne prouzrokuju probleme sa
          duplim sadržajem.
        
      

      5. SEO Tehnička Zdravlje i Kontinuirani Monitoring
      
        SEO je kontinuiran proces i održavanje tehničkog zdravlja je od suštinske važnosti. Mi ćemo:
      
      
        Postaviti automatizovane SEO audit-e koji će detektovati probleme pre nego što utiču na rangiranje.
        Sprovoditi analizu log fajlova kako bismo pratili kako pretraživači pretražuju sajt.
        
          Pratiti 404 greške, pokidane linkove i redirect lance kako bismo održali čistu i efikasnu strukturu sajta.
        
      

      Ukratko:
      Kombinacija Headless CMS (Payload CMS) i Next.js vam pruža:
      
        Veću fleksibilnost i skalabilnost za budući rast.
        Brže performanse sajta koje poboljšavaju korisničko iskustvo i SEO.
        Pojednostavljeno upravljanje sadržajem u pozadini.
        Potpuno prilagođavanje koje omogućava izradu jedinstvenog, brendiranog digitalnog iskustva.
        Laku integraciju sa alatima i uslugama trećih strana.
        Pripremu za budućnost koja se lako prilagođava novim tehnologijama.
      
      
        Ovo rešenje vam daje najbolje od oba sveta: fleksibilan, brz i skalabilan sajt koji može da raste sa vašim
        poslovanjem, sve to uz platformu koja je korisniku prijateljska za upravljanje sadržajem. Birajući Payload CMS i
        Next.js, ulažete u moderno, efikasno i robusno veb rešenje koje će nastaviti da pruža vrednost u budućnosti.
      
    
  )
}

[V0_FILE]typescriptreact:file="components/sections/propratna-dokumentacija.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Section from "@/components/section"

export default function PropratnaDokumentacija() {
  return (
    
      
      
        Za potrebe ove ponude, pripremili smo prototip dizajna za naslovnu stranicu B2C sajta. Možete pregledati
        prototip na sledećem Figma linku:{" "}
        
          Prototip B2C naslovne stranice
        {" "}
        - ovo je prototip dizajna za naslovnu stranicu B2C sajta, za cilj ima da prikazemo direkciju i dizajn koji u
        slučaju da usvojite i odobrite ponudu bismo dalje razrađivali.
      
      
      Na sledecem linku se nalazi kratka 
        prezentacija
       gde smo podelili razmisljanja koja imamo nakon kratkog istrazivanja za potrebe ove ponude, kao i predloge za dalje korake i zasto smatramo da je nesto dobro resenje.
      
    
  )
}

[V0_FILE]typescriptreact:file="components/sections/project-phases.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Section from "@/components/section"

export default function ProjectPhases() {
  return (
    
      Ponuda obuhvata sledeće faze konceptualizacije i razvoja veb sajta:
      
        Uvodni sastanak
        Discovery faza
        Exploration faza (Art direkcija)
        Dizajn faza
        Development faza ( Razvoj )
        Objavljivanje sajta na produkcioni server
      

      Uvodni sastanak
      
        Organizujemo sastanak sa vama kako bismo bolje razumeli vaš biznis, vaše poslovne potrebe i potrebe vaše ciljne
        grupe. Detaljno istražujemo vaše trenutno poslovanja, tržišne pozicije i izazove koje imate. Ovo uključuje
        angažovanje vašeg tima, analizu vaših podataka i prepoznavanje ključnih prilika za poboljšanje. Ova faza nam
        služi da dobijemo što bolju strategiju koja će se primenjivati u sledećim fazama.
      
      
        Nakon faze istraživanja, prelazimo u fazu Strategije, gde razvijamo prilagođeni plan koji definiše specifične
        akcije potrebne za postizanje vaših ciljeva. Ovaj strateški plan će služiti kao vodič za navigaciju kroz
        konkurentski pejzaž, optimizaciju resursa i podsticanje rasta.
      
      
        Investiranjem u ovu fazu osiguravate da svaki naredni korak bude informisan, strateški i u skladu sa vašom
        vizijom za budućnost.
      

      Discovery Faza
      
        U ovoj fazi postavljamo temelje za dizajn, definišemo strukturu i sadržaj, ali i vizuelne smernice koje će nam
        kasnije poslužiti kao osnova za art direkciju.
      

      Koraci ove faze su:

      Sitemapa i wireframeovi - informaciona arhitektura stranice
      
        Ovaj korak je posvećen definisanju strukture vašeg sajta i user flowa. Fokusiramo se na korisničko iskustvo i
        arhitekturu informacija. Definišemo broj potrebnih stranica i kreiramo "kostur" stranica. Analiziramo vašu
        postojeću strukturu, navigaciju, raspored i user flow koje su ključne za korisničko iskustvo.
      

      Moodboard i ključne reči - vizuelne smernice
      
        Ovaj korak je posvećen definisanju vizuelnog pravca za dizajn sajta. Koristimo vizuelne primere, tipografiju,
        boje, animacije, fotografiju i ključne reči koje definišu vaš brend, kao i materijal dobijen od vas (upitnik,
        brand guidelines…).
      

      Exploration faza  (Art direkcija)
      

U ovoj fazi koristimo strukturu i vizuelne smernice definisane u prethodnoj ( Discovery ) fazi. Spajamo strukturu, sadržaj i vizuelne elemente. Na kraju kreiramo dizajn jedne ili više stranica. Ovde prikazujemo kako različiti vizuelni elementi ( tipografija, boje, fotografija ) funkcionišu zajedno i kreiraju art direkciju. 



      

      Dizajn Faza
      
        Dizajn faza predstavlja primenu usvojene art direkcije na odobreni wireframe svih stranica. Obzirom da su poznata struktura i sadržaj stranica koji su usvojeni kroz wireframe i mapu sajta, dizajner u ovoj fazi brine o tome da art direkcija bude konzistentna na svim elementima i stranicama sajta. Takođe u ovoj fazi pripremamo dizajn za predaju programerima.
      
      
        Za potrebe ove ponude, pripremili smo prototip dizajna za naslovnu stranicu B2C sajta. Možete pregledati
        prototip na sledećem Figma linku:{" "}
        
          Prototip B2C naslovne stranice
        {" "}
        - ovo je prototip dizajna za naslovnu stranicu B2C sajta, za cilj ima da prikazemo direkciju i dizajn koji u
        slučaju da usvojite i odobrite ponudu bismo dalje razrađivali.
      

      Development faza ( Razvoj )
      
        Nakon što dizajn bude odobren, naš razvojni tim će započeti proces kreiranja vizuelnih i funkcionalnih
        komponenti sajta. Ovo uključuje prevođenje odobrenog dizajna u kod, obezbeđujući da animacije, hover efekti na
        dugmadi za poziv na akciju i druge interakcije budu potpuno funkcionalni i u skladu sa dizajnom. Paralelno s
        tim, razvijaćemo CMS prema vašim specifikacijama, omogućavajući jednostavno upravljanje sadržajem za vaš tim.
      

      Objavljivanje sajta na produkcioni server
      
        Poslednja faza našeg razvojnog ciklusa je objavljivanje projekta na produkcioni server. Nakon što dobijemo
        odobrenje za staging okruženje (i frontend i CMS), nastavljamo sa aktivnostima za Go-Live. Vreme trajanja ove
        faze zavisi od okruženja za hosting, bilo da je to naš server ili server klijenta.
      
    
  )
}

[V0_FILE]typescriptreact:file="component-with-error.tsx" isQuickEdit="true" isMerged="true"
import type React from "react"

interface Props {
  c: string
}

const MyComponent: React.FC = ({ c }) => {
  return (
    
      The value of c is: {c}
    
  )
}

const ComponentWithErrors: React.FC = () => {
  const booleanValue1 = true
  const booleanValue2 = false

  return (
    
      
      
      
      

      {/* Example with a dynamic boolean value */}
      {(() => {
        const dynamicBoolean = Math.random() < 0.5
        return 
      })()}
    
  )
}

export default ComponentWithErrors

[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true"
import Image from "next/image"
import ScrollArrow from "./scroll-arrow"
import type React from "react"

interface HeroSectionProps {
  nextSectionRef: React.RefObject
}

const HeroSection: React.FC = ({ nextSectionRef }) => {
  return (
    
      
      
        
          
        
        TESLA
        
          Pripremio: Darko Đoković
          Pripremljeno za: Miroslava Jeremić
          Datum: 24/01/2025
          Verzija: 1.0
        
      
      
    
  )
}

export default HeroSection

About

Tags

Share

About

Tags

Share

More from darko-5699

More Templates Like This

About

Tags

Share

About

Tags

Share

More from darko-5699

More Templates Like This