82:I[903690,["/chat-static/_next/static/immutable/chunks/2x9h_dqajku2h.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/051wt7f-miggg.js","/chat-static/_next/static/immutable/chunks/2oaqmt76j32uy.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/04qcbhsoi2ven.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1dvpa8vmf1cw-.js","/chat-static/_next/static/immutable/chunks/0bsgteld9iyte.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/25mfdeh9gj-j-.js","/chat-static/_next/static/immutable/chunks/1e773rf8k8t2c.js","/chat-static/_next/static/immutable/chunks/2zsqw2aqz_g_4.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0uyf3u8xap1mo.js"],"ExplicitChatIdProvider"] 83:I[838238,["/chat-static/_next/static/immutable/chunks/2x9h_dqajku2h.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/051wt7f-miggg.js","/chat-static/_next/static/immutable/chunks/2oaqmt76j32uy.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/04qcbhsoi2ven.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1dvpa8vmf1cw-.js","/chat-static/_next/static/immutable/chunks/0bsgteld9iyte.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/25mfdeh9gj-j-.js","/chat-static/_next/static/immutable/chunks/1e773rf8k8t2c.js","/chat-static/_next/static/immutable/chunks/2zsqw2aqz_g_4.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0uyf3u8xap1mo.js"],"SWRDataProvider"] 84:Tdc68,[V0_FILE]typescriptreact:file="components/section.tsx" isQuickEdit="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" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" 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: Mirsolava Jeremić

Datum: 25/01/2025

Verzija: 1.0

) } export default HeroSection [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="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" /** @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" isQuickEdit="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" 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" 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" isQuickEdit="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 TermsAndConditions from "@/components/sections/terms-and-conditions" import TermsOfPayment from "@/components/sections/terms-of-payment" import OptionalServices from "@/components/sections/optional-services" import PregledProcena from "@/components/sections/pregled-procena" import Footer from "@/components/footer" export default function Home() { const firstSectionRef = useRef(null) return (

) } [V0_FILE]typescriptreact:file="components/sections/about-builtt.tsx" 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 jedinstvenih i angažujućih 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" 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 sadržati jasnu i korisnički prijatnu UI, optimizovanu za mobilni pristup, u skladu sa identitetom brenda Tesla. Ključne funkcionalnosti uključuju:

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 ne u potpunosti 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 svim 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 dizajnirana 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/project-phases.tsx" import Section from "@/components/section" export default function ProjectPhases() { return (

Ponuda obuhvata sledeće faze konceptualizacije i razvoja veb sajta:

Uvodni sastanak (Discovery and Strategy)
Wireframe faza (Wireframe)
Art direkcija
Faza dizajna
Faza razvoja (development)
Objavljivanje sajta na produkcioni server

Uvodni sastanak

Naša usluga, istraživanje i strategija - "Discovery and Strategy", dizajnirana je da vas postavi na put ka uspehu kroz temeljno razumevanje vašeg poslovanja i kreiranje prilagođenog plana. Počinjemo detaljnim istraživanjem vaših trenutnih operacija, tržišne pozicije i izazova. Ovo uključuje angažovanje vašeg tima, analizu podataka i identifikaciju ključnih prilika.

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.

Wireframe Faza

Wireframe faza je posvećena definisanju strukture i sadržaja vašeg sajta. Pošto već imamo postojeće module i sadržaj, fokusiraćemo se na poboljšanje sekcija sajta koje zahtevaju najviše pažnje, kao što su navigacioni meni, raspored i korisnički tok. Za potrebe ove ponude, naš tim je radio na ovoj fazi kako bismo upotpunili tvrdnju da nismo zadovoljni dizajnom koji ste dostavili uz zahtev za kreiranje ponude i taj materijal vam dostavljamo kao dodatak ovoj ponudi.

Art direkcija

Pošto klijent još uvek nije potvrdio umetničku direkciju za veb sajt, naš tim će pregledati smernice vašeg brenda i usmeriti vizuelni pravac za ceo sajt. Ovo će obezbediti doslednost sa vašim identitetom brenda, a ujedno poboljšati celokupno korisničko iskustvo.

Faza dizajna

Tokom faze dizajna, primenićemo utvrđenu "art direkciju" za dizajn novih stranica vašeg sajta. Iako već znamo koje module i sadržaj imamo, naš dizajnerski tim će se fokusirati na redizajn i restrukturiranje tih elemenata kako bi obezbedio najbolje moguće korisničko iskustvo i prenošenje poruke vašeg brenda. Za potrebe ove ponude, naš tim je radio na ovoj fazi kako bismo upotpunili tvrdnju da nismo zadovoljni dizajnom koji ste dostavili uz zahtev za kreiranje ponude i taj materijal vam dostavljamo kao dodatak ovoj ponudi. Ukoliko vam se svidja definisani pravac i pravac dizajna koji smo kreirali za vas, ovo će biti korišćeno kao polazna tačka za razvoj svih ostalih stranica koje su neophodne.

Faza razvoja

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="components/sections/project-benefits.tsx" isQuickEdit="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 besprekorno, korisniku prijateljsko iskustvo, čime se dodatno učvršćuje prisutnost brenda u digitalnom prostoru.

Podrška za više jezika: Veb sajt će podržavati 20+ 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 sučelje 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 sa centralizovane nadzorne ploče, č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 potpunu prilagodbu 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.

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 sa intuitivnim nadzornim panelom.
Potpunu prilagodbu koja 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/estimacije.tsx" 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/table-of-contents.tsx" isQuickEdit="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: "payment-terms", title: "Uslovi plaćanja" }, { id: "additional-services", title: "Dodatne usluge" }, { id: "terms-and-conditions", title: "Opšti uslovi i odredbe" }, ] return ( ) } export default TableOfContents [V0_FILE]typescriptreact:file="components/sections/terms-of-payment.tsx" isQuickEdit="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" isQuickEdit="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/terms-and-conditions.tsx" isQuickEdit="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" import { Github, Linkedin, Twitter } from "lucide-react" const Footer = () => { return ( ) } export default Footer [V0_FILE]typescriptreact:file="components/project-timeline.tsx" 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" 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" 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" 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/pricing-list.tsx" isFixed="true" isQuickEdit="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/sections/pregled-procena.tsx" isFixed="true" isQuickEdit="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.

) } 7a:["$","$L82",null,{"chatId":"Tc1wlFeMjCV","children":["$","$L83",null,{"data":{"@\"active-block\",\"Tc1wlFeMjCV\",":{"id":"yLv1bwkMEG1","messageId":"2aQbe59PSapDtjy1oVHRai9CS0xKgfFc","source":"$84","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"vertical-nav-sections","type":"code-project","project":"vertical-nav-sections"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"Tc1wlFeMjCV\",":false,"":null},"children":"$L85"}]}]

About

Tags

Share

About

Tags

Share

More from gaspar09

More Templates Like This