Przeniesienie projektu z Figma do Tailwind CSS na Next.js

Na podstawie już istniejącego szablonu projektu strony internetowej wykonać szereg dla frameworka Laravel. Makieta projektu została stworzona w Figma. Bardziej szczegółowo opiszę już w wiadomościach prywatnych.

Jest lejek sprzedażowy dla sklepu internetowego, który chcemy powtórzyć u siebie Wygląda on tak Główna strona (produkt, który jest główny w sprzedaży, na przykład koszula) Potem strona checkout (gdzie osoba wprowadza swoje dane i wybiera, ile na przykład koszul chce kupić) Następnie przechodzi dalej w lejek i oferowane są dodatkowe sprzedaże 1 (skarpetki) + potem dodatkowa sprzedaż 2 (majtki) i na końcu strona dziękuję Jak to powinno działać w kwestii przejść między stronami i logiki, możesz zobaczyć tutaj (trzeba dojść do końca do strony dziękuję) https://3plus3.heroman.com.ua/standard/ Mamy przykłady stron, które chcemy zrobić u siebie To znaczy, dla nas w zasadzie skopiujemy design - zrealizujemy - wypełnimy pod nasz produkt Strony z dodatkowymi sprzedażami będą takie same pod względem designu i struktury jak na stronie, którą wysłałem powyżej (majtki) Nie musisz wypełniać stron informacjami, tylko zebrać szkielet - aby zgłoszenie przychodziło poprawnie Nie trzeba też wymyślać struktury stron Od Ciebie w zasadzie Skopiować i zrealizować Ustawić, aby technicznie działało poprawnie Pokazać, jak z tym pracować, abyśmy mogli to robić sami Są 2 konstruktorzy stron, które mamy na myśli, z jednym intensywnie pracujemy teraz i trzeba zrozumieć, czy można na nim coś takiego rozwinąć (ale czytałem w GPT, że można)

Zadanie Trzeba stworzyć stylowy, responsywny szablon e-mailowy na podstawie dostarczonego tekstu i przygotować go do załadowania do usługi e-mail marketingowej. Co należy zrobić Opracować projekt e-maila. Stworzyć responsywny HTML e-mail. Wstawić dostarczony tekst. Przygotować bloki na obrazy i ikony. Dodaj przyciski CTA. Przygotować linki z znacznikami UTM. Stworzyć wersję tekstową wiadomości. Sprawdzić wyświetlanie w głównych klientach e-mailowych. Przygotować finalny plik do załadowania do usługi wysyłkowej. Wymagania dotyczące projektu Potrzebny jest czysty, nowoczesny, premium-style e-mail. Wiadomość powinna być łatwa do przeczytania, nieprzeładowana, z jasną strukturą, krótkimi blokami tekstowymi, wizualnymi akcentami i kilkoma przyciskami CTA. Wymagania techniczne responsywna HTML e-mailowa; poprawne wyświetlanie na desktopie i urządzeniach mobilnych; układ oparty na tabelach; szerokość kontenera około 600–700 px; inline CSS / CSS kompatybilne z e-mailem; przyciski powinny być HTML/CSS, nie obrazkami; wszystkie ważne dane powinny być tekstem HTML; obrazy powinny mieć tekst alternatywny; bez JavaScript; bez formularzy w e-mailu; poprawne działanie linków; przygotowanie znaczników UTM dla CTA. Sprawdzenie Trzeba sprawdzić wyświetlanie w co najmniej: Gmail; Apple Mail; Outlook; mobilnych klientach e-mailowych. Na wyjściu trzeba otrzymać Gotowy plik HTML e-maila. Wersję tekstową. Podgląd lub zrzuty ekranu desktop/mobile. Instrukcję, gdzie zmieniać linki, tekst i obrazy. Plik/wersję gotową do załadowania do usługi wysyłkowej. W odpowiedzi proszę dołączyć przykłady HTML e-maili, które wykonaliście, oraz wskazać, z jakimi usługami wysyłkowymi pracowaliście.

It is necessary to reproduce as accurately as possible:– the structure of the pages; – the layout of the blocks; – the catalog grid; – the sizes of the elements; – the margins; – the typography; – the colors; – the header and footer; – product cards – the menu structure; – menu categories; – modal windows; – adaptive behavior; – hover, active, and mobile states. – the product page must have microdata for products – Pages must be optimized according to Google SEO recommendations1. Type of siteResponsive online sushi delivery store.Main versions:– desktop – from 1280 px; – tablet – 768–1279 px; – mobile – 320–767 px.2. NavigationHomeCategoriesPromotionsAbout UsDelivery and PaymentContactsMenuProduct CardShopping CartPage TemplateThe “Page Template” block should contain:– header;– breadcrumb;— “up” arrow— Light and dark theme switcher with user choice retention.— A watermark with the logo on the background of the page— Fix an image of chopsticks on the right edge of the background— Footer ResultDeliver:– Figma mockup for desktop and mobile; – HTML files; – CSS; – JavaScript; – a folder with placeholders; – responsive version of the page; – archive of the completed project.The main requirement is the most accurate reproduction of the structure, design, and behavior of the page example.com

Kontynuacja projektu. Redesign i restart strony internetowej kliniki stomatologicznej Brovchak Family Dental Care 0680006609 http://brovchak-clinic.com.ua/ specyfikacja od eksperta SEO https://docs.google.com/spreadsheets/d/17_WyPf3XVpzbuBjpJ7MNFs12QUL-aHv7iIbKudY-IEw/edit?gid=0#gid=0 https://miro.com/app/board/uXjVHXxFvIE=/O projekcie Wymagany jest pełny redesign istniejącej strony internetowej kliniki stomatologicznej na podstawie gotowego prototypu w Miro. Wynik powinien obejmować: projekt UI/UX responsywne kodowanie integrację z WordPress SEO-bezpieczny restart optymalizację techniczną ustawienie analityki możliwość łatwej samodzielnej edycji treści Krytycznie ważne: strona nie tylko musi wyglądać nowocześnie, ale także poprawiać wskaźniki biznesowe i nie tracić aktualnych pozycji SEO.Cele biznesowe projektu Redesign jest realizowany w celu: zwiększenia liczby zapytań z strony; podniesienia konwersji formularzy rejestracji; wzmocnienia zaufania do kliniki; prezentacji ekspertyzy lekarzy; prezentacji skomplikowanych przypadków klinicznych; formowania premium pozycjonowania; zwiększenia liczby zapytań o implantację, ortopedię i kompleksowe leczenie.Koncept wizualnyPozycjonowanie Premium autorska stomatologia. Nie sieciowa klinika. Nie masowy napływ pacjentów. Indywidualne podejście, przewidywalne wyniki i skomplikowane rozwiązania kliniczne.Emocja, jaką ma wywoływać strona "Tutaj pracują nie tylko stomatolodzy. Tutaj zespół ekspertów tworzy długoterminowe i przewidywalne rozwiązania, zwracając uwagę na każdy detal."Styl Warsztat / Atelier Stomatologiczne. Autorska stomatologia. Premium minimalizm. Akcent na: mikroskopię; nawigacyjną implantację; cyfrowe skanowanie; gnatologię; skomplikowane rehabilitacje. Używać: wielkich profesjonalnych zdjęć lekarzy; zdjęć lekarzy w trakcie pracy; realnych przypadków pacjentów; zdjęć kliniki. Zminimalizować lub całkowicie wykluczyć: zdjęcia stockowe; szablonowe obrazy stomatologiczne; typowe rozwiązania projektowe sieciowych klinik.SEO i restart Krytyczny wymóg: Redesign nie powinien prowadzić do znacznego spadku organicznego ruchu. Wymagane: zachowanie struktury SEO strony; zachowanie lub poprawne przeniesienie URL; ustawienie 301 przekierowań; przeniesienie wszystkich metatagów; zachowanie indeksacji stron; sprawdzenie robots.txt; sprawdzenie sitemap.xml; sprawdzenie canonical; sprawdzenie schema.org; przeprowadzenie audytu SEO przed i po uruchomieniu.KPI SEO Dopuszczalny spadek organicznego ruchu po uruchomieniu: nie więcej niż 10%. Preferowani są wykonawcy, którzy mają udane przypadki SEO-bezpiecznych migracji.UX i konwersja Strona powinna zapewniać: szybki dostęp do rejestracji na konsultację; zrozumiałą strukturę usług; łatwą nawigację; mobilną wygodę; szybki kontakt z kliniką. Przewidzieć: bloki CTA; formularze rejestracji; szybki telefon; messengery; bloki zaufania; wideo-rekomendacje; przypadki leczenia.Wymagania technicznePrędkość Google PageSpeed: Desktop — 90+ Mobile — 95+ Core Web Vitals muszą odpowiadać zaleceniom Google.Optymalizacja Wymagane: optymalizacja CSS; optymalizacja JS; ustawienie cache; optymalizacja obrazów; użycie WebP; zminimalizowanie zewnętrznych skryptów.Jakość kodu Ważne: czysty kod; brak zbędnych wtyczek; użycie standardowych możliwości WordPress i motywu; kompatybilność z przyszłymi aktualizacjami WordPress.Asystent AI (agent) Wymagane jest zaproponowanie rozwiązania do wdrożenia konsultanta AI. Pożądana funkcjonalność: odpowiedzi na typowe pytania; rejestracja na konsultację; integracja z Telegram; integracja z Instagram Direct; integracja z Facebook Messenger; integracja z Viber; przekazywanie leadów do CRM lub administratorów, lub do bota telegramowego Proszę opisać zaproponowane rozwiązanie osobno.Wynik pracy Na wyjściu należy uzyskać: Nowy projekt strony. Responsywne kodowanie. SEO-bezpieczne uruchomienie. Optymalizowany kod. Ustawioną analitykę. Instrukcję dla administratora. Gwarancyjne wsparcie po uruchomieniu. Realizacja AI Search i AI-wydania W ramach projektu należy zrealizować osobny kompleks prac przygotowawczych strony do Google AI Overviews, AI Mode, ChatGPT, Gemini, Perplexity, Copilot i innych systemów wyszukiwania AI. Do prac należy: Projektowanie mapy podmiotów kliniki: organizacja, filie, lekarze, usługi, przypadki, artykuły, FAQ, wideo i ceny. Tworzenie logicznych powiązań między: lekarzami a usługami; usługami a przypadkami; usługami a FAQ; artykułami a autorami; filie a dostępnymi kierunkami leczenia. Realizacja danych strukturalnych JSON-LD: Organizacja; KlinikaMedyczna / Dentysta; LokalnyBiznes; Osoba; ProfilStrony; Usługa; ProceduraMedyczna — gdzie semantycznie poprawnie; Artykuł / BlogPosting; ObiektWideo; FAQPage; BreadcrumbList; WebSite; WebPage; ObiektObrazu. Tworzenie w WordPress strukturalnych typów treści: usługi; lekarze; przypadki; artykuły; FAQ; wideo; filie; ceny. Realizacja powiązań ACF między typami treści oraz automatyczne generowanie schema.org z zatwierdzonych pól. Budowa FAQ w trzech poziomach: FAQ na stronach usług; osobne strony eksperckie decision-guide; ogólny centrum pytań pacjentów. Zabezpieczenie dostępności podstawowej treści w HTML bez zależności od klienta JavaScript, obrazów lub PDF. Realizacja autorstwa treści medycznej: autor; recenzent medyczny; data publikacji; data aktualizacji; link do profilu lekarza. Dodanie transkrypcji do eksperckich wideo oraz powiązanie wideo z usługami, lekarzami i przypadkami. Sprawdzenie robots.txt, sitemap.xml, canonical, noindex, snippet controls i dostępności strony dla wyszukiwarek i crawlerów AI. Ustawienie śledzenia ruchu AI: osobna grupa kanałów w GA4; źródła referrer ChatGPT, Perplexity, Gemini, Copilot, Claude; przekazywanie źródła do CRM i zgłoszeń Telegram; raport w Looker Studio; uwzględnienie self-reported attribution od pacjenta. Stworzenie podstawowego zestawu zapytań do regularnego monitorowania widoczności kliniki w AI-wydaniu. Sprawdzenie danych strukturalnych przez Rich Results Test oraz Schema Markup Validator. Przygotowanie instrukcji dla administratora: jak dodawać FAQ; jak tworzyć przypadek; jak wskazywać autora; jak aktualizować datę przeglądu medycznego; jak dodawać wideo i transkrypt; jak powiązać materiał z usługą i lekarzem. inne.