Project-Pro/project-pro.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Google Ads campaign landing page with responsive design and interactive features

Browse Source 
- Created index.html for the Google Ads campaign landing page with structured sections including navigation, hero, benefits, channels, pricing, and contact information.
- Implemented script.js for mobile menu toggle, scroll animations, budget calculator, and smooth scrolling for anchor links.
- Developed style.css for styling the landing page, ensuring a modern and responsive layout with animations and hover effects.
This commit is contained in:
Jacek Pyziak
2026-03-08 23:32:48 +01:00
parent a956ec670d
commit ed4ddfd8d8
4 changed files with 1302 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
.htaccess
View File

@@ -118,38 +118,50 @@ RewriteRule ^systemy-zarzadzania-trescia-cms(|/)$ index.php?a=page&id=24&lang=pl
RewriteRule ^systemy-zarzadzania-trescia-cms/s/1(|/)$ systemy-zarzadzania-trescia-cms [R=301,L]
RewriteRule ^systemy-zarzadzania-trescia-cms/s/([0-9]+)(|/)$ index.php?a=page&id=24&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^blog(|/)$ index.php?a=page&id=7&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^blog/s/1(|/)$ blog [R=301,L]
RewriteRule ^blog/s/([0-9]+)(|/)$ index.php?a=page&id=7&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^obsluga-istniejacych-stron(|/)$ index.php?a=page&id=25&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^obsluga-istniejacych-stron/s/1(|/)$ obsluga-istniejacych-stron [R=301,L]
RewriteRule ^obsluga-istniejacych-stron/s/([0-9]+)(|/)$ index.php?a=page&id=25&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^o-nas(|/)$ index.php?a=page&id=2&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^o-nas/s/1(|/)$ o-nas [R=301,L]
RewriteRule ^o-nas/s/([0-9]+)(|/)$ index.php?a=page&id=2&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^blog(|/)$ index.php?a=page&id=7&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^blog/s/1(|/)$ blog [R=301,L]
RewriteRule ^blog/s/([0-9]+)(|/)$ index.php?a=page&id=7&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-stron-internetowych(|/)$ index.php?a=page&id=26&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-stron-internetowych/s/1(|/)$ pozycjonowanie-stron-internetowych [R=301,L]
RewriteRule ^pozycjonowanie-stron-internetowych/s/([0-9]+)(|/)$ index.php?a=page&id=26&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^s-56-baza-wiedzy(|/)$ index.php?a=page&id=56&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^s-56-baza-wiedzy/s/1(|/)$ s-56-baza-wiedzy [R=301,L]
RewriteRule ^s-56-baza-wiedzy/s/([0-9]+)(|/)$ index.php?a=page&id=56&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^s-54-google(|/)$ index.php?a=page&id=54&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^s-54-google/s/1(|/)$ s-54-google [R=301,L]
RewriteRule ^s-54-google/s/([0-9]+)(|/)$ index.php?a=page&id=54&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-lokalne(|/)$ index.php?a=page&id=27&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-lokalne/s/1(|/)$ pozycjonowanie-lokalne [R=301,L]
RewriteRule ^pozycjonowanie-lokalne/s/([0-9]+)(|/)$ index.php?a=page&id=27&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^kontakt(|/)$ index.php?a=page&id=8&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^kontakt/s/1(|/)$ kontakt [R=301,L]
RewriteRule ^kontakt/s/([0-9]+)(|/)$ index.php?a=page&id=8&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-long-tail(|/)$ index.php?a=page&id=28&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-long-tail/s/1(|/)$ pozycjonowanie-long-tail [R=301,L]
RewriteRule ^pozycjonowanie-long-tail/s/([0-9]+)(|/)$ index.php?a=page&id=28&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^google-ads(|/)$ index.php?a=page&id=49&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^google-ads/s/1(|/)$ google-ads [R=301,L]
RewriteRule ^google-ads/s/([0-9]+)(|/)$ index.php?a=page&id=49&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-sklepow-internetowych(|/)$ index.php?a=page&id=29&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-sklepow-internetowych/s/1(|/)$ pozycjonowanie-sklepow-internetowych [R=301,L]
RewriteRule ^pozycjonowanie-sklepow-internetowych/s/([0-9]+)(|/)$ index.php?a=page&id=29&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^e-commerce(|/)$ index.php?a=page&id=50&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^e-commerce/s/1(|/)$ e-commerce [R=301,L]
RewriteRule ^e-commerce/s/([0-9]+)(|/)$ index.php?a=page&id=50&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^seo(|/)$ index.php?a=page&id=48&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^seo/s/1(|/)$ seo [R=301,L]
RewriteRule ^seo/s/([0-9]+)(|/)$ index.php?a=page&id=48&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^social-media(|/)$ index.php?a=page&id=30&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^social-media/s/1(|/)$ social-media [R=301,L]
RewriteRule ^social-media/s/([0-9]+)(|/)$ index.php?a=page&id=30&lang=pl&bs=$1&%{QUERY_STRING} [L]
@@ -158,14 +170,30 @@ RewriteRule ^oprogramowanie-dla-firm(|/)$ index.php?a=page&id=31&lang=pl&%{QUERY
RewriteRule ^oprogramowanie-dla-firm/s/1(|/)$ oprogramowanie-dla-firm [R=301,L]
RewriteRule ^oprogramowanie-dla-firm/s/([0-9]+)(|/)$ index.php?a=page&id=31&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^media-spolecznosciowe(|/)$ index.php?a=page&id=51&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^media-spolecznosciowe/s/1(|/)$ media-spolecznosciowe [R=301,L]
RewriteRule ^media-spolecznosciowe/s/([0-9]+)(|/)$ index.php?a=page&id=51&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^identyfikacja-wizualna(|/)$ index.php?a=page&id=32&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^identyfikacja-wizualna/s/1(|/)$ identyfikacja-wizualna [R=301,L]
RewriteRule ^identyfikacja-wizualna/s/([0-9]+)(|/)$ index.php?a=page&id=32&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^strony-internetowe(|/)$ index.php?a=page&id=52&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^strony-internetowe/s/1(|/)$ strony-internetowe [R=301,L]
RewriteRule ^strony-internetowe/s/([0-9]+)(|/)$ index.php?a=page&id=52&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^s-53-rozne(|/)$ index.php?a=page&id=53&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^s-53-rozne/s/1(|/)$ s-53-rozne [R=301,L]
RewriteRule ^s-53-rozne/s/([0-9]+)(|/)$ index.php?a=page&id=53&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-debica(|/)$ index.php?a=page&id=33&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-debica/s/1(|/)$ pozycjonowanie-debica [R=301,L]
RewriteRule ^pozycjonowanie-debica/s/([0-9]+)(|/)$ index.php?a=page&id=33&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^s-55-slownik-seo/sem(|/)$ index.php?a=page&id=55&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^s-55-slownik-seo/sem/s/1(|/)$ s-55-slownik-seo/sem [R=301,L]
RewriteRule ^s-55-slownik-seo/sem/s/([0-9]+)(|/)$ index.php?a=page&id=55&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-krakow(|/)$ index.php?a=page&id=34&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-krakow/s/1(|/)$ pozycjonowanie-krakow [R=301,L]
RewriteRule ^pozycjonowanie-krakow/s/([0-9]+)(|/)$ index.php?a=page&id=34&lang=pl&bs=$1&%{QUERY_STRING} [L]
@@ -174,10 +202,18 @@ RewriteRule ^pozycjonowanie-jaslo(|/)$ index.php?a=page&id=47&lang=pl&%{QUERY_ST
RewriteRule ^pozycjonowanie-jaslo/s/1(|/)$ pozycjonowanie-jaslo [R=301,L]
RewriteRule ^pozycjonowanie-jaslo/s/([0-9]+)(|/)$ index.php?a=page&id=47&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^o-nas(|/)$ index.php?a=page&id=2&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^o-nas/s/1(|/)$ o-nas [R=301,L]
RewriteRule ^o-nas/s/([0-9]+)(|/)$ index.php?a=page&id=2&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-kielce(|/)$ index.php?a=page&id=35&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-kielce/s/1(|/)$ pozycjonowanie-kielce [R=301,L]
RewriteRule ^pozycjonowanie-kielce/s/([0-9]+)(|/)$ index.php?a=page&id=35&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^kontakt(|/)$ index.php?a=page&id=8&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^kontakt/s/1(|/)$ kontakt [R=301,L]
RewriteRule ^kontakt/s/([0-9]+)(|/)$ index.php?a=page&id=8&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-krosno(|/)$ index.php?a=page&id=36&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^pozycjonowanie-krosno/s/1(|/)$ pozycjonowanie-krosno [R=301,L]
RewriteRule ^pozycjonowanie-krosno/s/([0-9]+)(|/)$ index.php?a=page&id=36&lang=pl&bs=$1&%{QUERY_STRING} [L]
@@ -218,36 +254,6 @@ RewriteRule ^test-page(|/)$ index.php?a=page&id=46&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^test-page/s/1(|/)$ test-page [R=301,L]
RewriteRule ^test-page/s/([0-9]+)(|/)$ index.php?a=page&id=46&lang=pl&bs=$1&%{QUERY_STRING} [L]
RewriteRule ^cechy-dobrej-strony-internetowej(|/)$ index.php?article=10&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^czym-jest-certyfikat-ssl-i-dlaczego-warto-go-miec(|/)$ index.php?article=12&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^zakladka-zakupy-w-wyszukiwarce-google(|/)$ index.php?article=8&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^speed-update-pagespeed-czynnikiem-rankingowym-w-mobilnej-wyszukiwarce-google(|/)$ index.php?article=4&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^zalety-posiadania-strony-firmowej-na-facebooku(|/)$ index.php?article=11&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^responsywnosc-strony-internetowej-czym-jest-i-dlaczego-jest-tak-wazna-przy-prowadzeniu-biznesu(|/)$ index.php?article=13&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^co-to-jest-pozycjonowanie-lokalne(|/)$ index.php?article=57&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^jak-sprawdzic-do-kogo-nalezy-domena-poradnik(|/)$ index.php?article=80&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^najnowsze-trendy-w-email-marketingu-na-co-zwrocic-uwage-w-2023-roku(|/)$ index.php?article=81&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^prowadzenie-bloga-firmowego-jako-element-strategii-marketingowej(|/)$ index.php?article=83&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^seo-vs-sem-na-czym-polega-roznica-i-ktore-z-nich-wybrac(|/)$ index.php?article=82&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^dropshipping-na-czym-polega-wady-zalety(|/)$ index.php?article=84&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^grafika-wektorowa-czym-jest-i-gdzie-znajduje-zastosowanie(|/)$ index.php?article=85&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^cross-selling-sposob-na-wieksza-sprzedaz(|/)$ index.php?article=86&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^blad-404-co-oznacza-i-jak-go-naprawic(|/)$ index.php?article=87&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^realizacje-patekapartaments(|/)$ index.php?article=88&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^realizacje-gbvidok(|/)$ index.php?article=89&lang=pl&%{QUERY_STRING} [L]
@@ -280,6 +286,68 @@ RewriteRule ^realizacje-lulandia(|/)$ index.php?article=102&lang=pl&%{QUERY_STRI
RewriteRule ^realizacje-wingedit(|/)$ index.php?article=103&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^serwer-dns-czym-jest-i-jak-dziala(|/)$ index.php?article=107&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^cross-selling-sposob-na-wieksza-sprzedaz(|/)$ index.php?article=86&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^dropshipping-na-czym-polega-wady-zalety(|/)$ index.php?article=84&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^seo-vs-sem-na-czym-polega-roznica-i-ktore-z-nich-wybrac(|/)$ index.php?article=82&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^co-to-jest-pozycjonowanie-lokalne(|/)$ index.php?article=57&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^responsywnosc-strony-internetowej-czym-jest-i-dlaczego-jest-tak-wazna-przy-prowadzeniu-biznesu(|/)$ index.php?article=13&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^zalety-posiadania-strony-firmowej-na-facebooku(|/)$ index.php?article=11&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^speed-update-pagespeed-czynnikiem-rankingowym-w-mobilnej-wyszukiwarce-google(|/)$ index.php?article=4&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^zakladka-zakupy-w-wyszukiwarce-google(|/)$ index.php?article=8&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^czym-jest-certyfikat-ssl-i-dlaczego-warto-go-miec(|/)$ index.php?article=12&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^cechy-dobrej-strony-internetowej(|/)$ index.php?article=10&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^co-to-jest-google-pagespeed-insights(|/)$ index.php?article=109&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^blad-404-co-oznacza-i-jak-go-naprawic(|/)$ index.php?article=87&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^jak-sprawdzic-do-kogo-nalezy-domena-poradnik(|/)$ index.php?article=80&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^najnowsze-trendy-w-email-marketingu-na-co-zwrocic-uwage-w-2023-roku(|/)$ index.php?article=81&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^prowadzenie-bloga-firmowego-jako-element-strategii-marketingowej(|/)$ index.php?article=83&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^grafika-wektorowa-czym-jest-i-gdzie-znajduje-zastosowanie(|/)$ index.php?article=85&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^jak-czesto-google-aktualizuje-street-view-i-zdjecia-satelitarne-wszystko-co-musisz-wiedziec(|/)$ index.php?article=108&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^jak-sprawdzic-i-usunac-historie-wyszukiwania-w-google(|/)$ index.php?article=106&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^blad-403-co-oznacza-i-jak-go-naprawic(|/)$ index.php?article=110&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^adres-url(|/)$ index.php?article=111&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^atrybut-alt(|/)$ index.php?article=112&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^anchor-text(|/)$ index.php?article=113&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^breadcrumbs(|/)$ index.php?article=114&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^jak-google-zbiera-informacje-o-nas-i-do-czego-je-wykorzystuje(|/)$ index.php?article=104&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^bounce-rate-wspolczynnik-odrzucen(|/)$ index.php?article=116&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^buzz-marketing(|/)$ index.php?article=117&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^broken-inks(|/)$ index.php?article=118&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^branding(|/)$ index.php?article=119&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^backlink(|/)$ index.php?article=115&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^canonical-tag(|/)$ index.php?article=120&lang=pl&%{QUERY_STRING} [L]
RewriteRule ^oferty-pracy(|/)$ index.php?module=globelusAdverts&action=adverts_list&cp=1&%{QUERY_STRING} [L]
RewriteRule ^newsletter/signin$ index.php?module=newsletter&action=signin [L]
RewriteRule ^newsletter/confirm/hash=(.*)$ index.php?module=newsletter&action=confirm&hash=$1 [L]

250
oferta/google_ads/index.html Normal file
View File

@@ -0,0 +1,250 @@
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kampanie Google Ads - Project-Pro | Marketing w wersji PRO</title>
<meta name="description" content="Profesjonalne prowadzenie kampanii Google Ads. Skuteczna reklama w wyszukiwarce, Google Zakupy, YouTube, Display Network. Oferta od Project-Pro Rzeszów.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav__inner">
<div class="nav__logo"><img src="https://www.project-pro.pl/upload/filemanager/Project-Design/logos/project-pro/logo-color.svg" alt="Project-Pro"></div>
<ul class="nav__links">
<li><a href="#dlaczego">Dlaczego Google Ads?</a></li>
<li><a href="#kanaly">Kanały reklamy</a></li>
<li><a href="#cennik">Cennik</a></li>
<li><a href="#kontakt" class="nav__cta">Kontakt</a></li>
</ul>
<div class="nav__hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero__inner">
<div class="hero__text">
<p class="hero__subtitle">Project-Pro &bull; marketing w wersji PRO</p>
<h1>Kampanie Google Ads</h1>
<p>Docieraj do klientów dokładnie wtedy, gdy szukają Twoich produktów lub usług. Skuteczna reklama w Google z natychmiastowymi efektami.</p>
<div class="hero__buttons">
<a href="#cennik" class="btn btn--white">Zobacz cennik</a>
<a href="#kontakt" class="btn btn--outline">Skontaktuj się</a>
</div>
</div>
<div class="hero__visual">
<div class="hero__icon-grid">
<div class="hero__icon-card">
<div class="icon">&#127919;</div>
<span>Trafność</span>
</div>
<div class="hero__icon-card">
<div class="icon">&#128205;</div>
<span>Lokalizacja</span>
</div>
<div class="hero__icon-card">
<div class="icon">&#128200;</div>
<span>Mierzalność</span>
</div>
<div class="hero__icon-card">
<div class="icon">&#9889;</div>
<span>Skuteczność</span>
</div>
</div>
</div>
</div>
</section>
<!-- DLACZEGO GOOGLE ADS -->
<section id="dlaczego" class="section">
<div class="section__inner">
<div class="section__header fade-in">
<h2>Dlaczego Google Ads?</h2>
<p>Reklama w Google to jeden z najskuteczniejszych sposobów na pozyskanie nowych klientów.</p>
</div>
<div class="why-grid">
<div class="why-card fade-in">
<div class="why-card__icon">&#127919;</div>
<h3>Trafność</h3>
<p>Ty podejmujesz decyzję komu, gdzie i kiedy wyświetli się Twoja reklama. Pełna kontrola nad kampanią.</p>
</div>
<div class="why-card fade-in">
<div class="why-card__icon">&#128205;</div>
<h3>Lokalizacja</h3>
<p>Targetowanie geolokalizacyjne pozwala wyświetlać reklamy Google Ads wyłącznie klientom z danej okolicy.</p>
</div>
<div class="why-card fade-in">
<div class="why-card__icon">&#128200;</div>
<h3>Mierzalność</h3>
<p>Dzięki statystykom możesz badać skuteczność swoich działań i zachowania klientów.</p>
</div>
<div class="why-card fade-in">
<div class="why-card__icon">&#9889;</div>
<h3>Skuteczność</h3>
<p>Włączenie kampanii powoduje natychmiastowe osiąganie założonych celów.</p>
</div>
<div class="why-card fade-in">
<div class="why-card__icon">&#128176;</div>
<h3>Budżet dzienny</h3>
<p>Sam ustalasz dzienny budżet reklamowy. Masz pełną kontrolę nad wydatkami na kampanię.</p>
</div>
<div class="why-card fade-in">
<div class="why-card__icon">&#128640;</div>
<h3>Szybkie efekty</h3>
<p>Reklama zaczyna działać natychmiast po uruchomieniu kampanii — bez czekania na efekty pozycjonowania.</p>
</div>
</div>
</div>
</section>
<!-- KANALY REKLAMY -->
<section id="kanaly" class="section section--alt">
<div class="section__inner">
<div class="section__header fade-in">
<h2>Kanały reklamy</h2>
<p>Wykorzystujemy pełen potencjał ekosystemu Google, dobierając kanały do Twojego biznesu.</p>
</div>
<div class="channels-grid">
<div class="channel-card fade-in">
<div class="icon">&#128269;</div>
<h3>Linki sponsorowane</h3>
<p>Sieć wyszukiwania / Search</p>
</div>
<div class="channel-card fade-in">
<div class="icon">&#128722;</div>
<h3>Google Zakupy</h3>
<p>Sieć wyszukiwania / Shopping</p>
</div>
<div class="channel-card fade-in">
<div class="icon">&#128161;</div>
<h3>Discovery</h3>
<p>Sieć reklamowa / Discovery</p>
</div>
<div class="channel-card fade-in">
<div class="icon">&#128257;</div>
<h3>Remarketing</h3>
<p>Ponowne dotarcie do klientów</p>
</div>
<div class="channel-card fade-in">
<div class="icon">&#128187;</div>
<h3>Display Network</h3>
<p>Sieć reklamowa / Display</p>
</div>
<div class="channel-card fade-in">
<div class="icon">&#9654;&#65039;</div>
<h3>YouTube</h3>
<p>Sieć wideo / YouTube</p>
</div>
</div>
</div>
</section>
<!-- CENNIK -->
<section id="cennik" class="section">
<div class="section__inner">
<div class="section__header fade-in">
<h2>Ile to kosztuje?</h2>
<p>Przejrzyste zasady rozliczenia. Płacisz procent od budżetu reklamowego.</p>
</div>
<div class="pricing-box fade-in">
<div class="pricing-box__header">
<h3>Prowadzenie kampanii Google Ads</h3>
<div class="pricing-box__price">10% <small>budżetu</small></div>
<div class="pricing-box__min-badge">min. 800 zł netto / miesiąc</div>
</div>
<div class="pricing-box__calculator">
<h4>Oblicz koszt prowadzenia kampanii</h4>
<label for="budgetSlider">Miesięczny budżet reklamowy: <strong id="budgetValue">3 000 zł</strong></label>
<input type="range" id="budgetSlider" min="2000" max="20000" step="500" value="3000">
<div class="calculator__result">
<div class="calculator__result-item">
<span>Budżet reklamowy</span>
<strong id="calcBudget">3 000 zł</strong>
</div>
<div class="calculator__result-item">
<span>Koszt prowadzenia (10%)</span>
<strong id="calcFee">800 zł</strong>
</div>
<div class="calculator__result-item calculator__result-item--total">
<span>Razem miesięcznie</span>
<strong id="calcTotal">3 800 zł</strong>
</div>
</div>
</div>
<div class="pricing-box__body">
<ul class="pricing-box__features">
<li>Określenie strategii kampanii</li>
<li>Dobór priorytetowych kampanii</li>
<li>Sieć wyszukiwania / Search</li>
<li>Sieć wyszukiwania / Google Zakupy</li>
<li>Sieć reklamowa / Display</li>
<li>Sieć reklamowa / Discovery</li>
<li>Sieć wideo / YouTube</li>
<li>Harmonogram wyświetleń</li>
<li>Dobór słów kluczowych</li>
<li>Stworzenie tekstów reklam</li>
<li>Stworzenie rozszerzeń reklamy</li>
<li>Raport wyników kampanii</li>
</ul>
</div>
</div>
</div>
</section>
<!-- KONTAKT -->
<section id="kontakt" class="section section--alt">
<div class="section__inner">
<div class="section__header fade-in">
<h2>Skontaktuj się z nami</h2>
<p>Porozmawiajmy o Twojej kampanii Google Ads.</p>
</div>
<div class="contact-cards fade-in">
<a href="tel:+48530755774" class="contact-card">
<div class="contact-card__icon">&#128222;</div>
<strong>Telefon</strong>
<span>530 755 774</span>
</a>
<a href="mailto:biuro@project-pro.pl" class="contact-card">
<div class="contact-card__icon">&#9993;</div>
<strong>Email</strong>
<span>biuro@project-pro.pl</span>
</a>
<div class="contact-card">
<div class="contact-card__icon">&#127968;</div>
<strong>Adres</strong>
<span>ul. Krakowska 156/104<br>35-506 Rzeszów</span>
</div>
<a href="https://www.project-pro.pl" target="_blank" class="contact-card">
<div class="contact-card__icon">&#127760;</div>
<strong>Strona www</strong>
<span>project-pro.pl</span>
</a>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="footer__inner">
<div class="footer__logo"><img src="https://www.project-pro.pl/upload/filemanager/Project-Design/logos/project-pro/logo-color.svg" alt="Project-Pro" class="footer__logo-img"></div>
<ul class="footer__links">
<li><a href="https://www.project-pro.pl">Strona główna</a></li>
<li><a href="tel:+48530755774">530 755 774</a></li>
<li><a href="mailto:biuro@project-pro.pl">biuro@project-pro.pl</a></li>
</ul>
<div class="footer__copy">
&copy; Project-Pro | ul. Krakowska 156/104, 35-506 Rzeszów | NIP: PL 5170167517
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

68
oferta/google_ads/script.js Normal file
View File

@@ -0,0 +1,68 @@
document.addEventListener('DOMContentLoaded', function () {
// Mobile menu toggle
const hamburger = document.querySelector('.nav__hamburger');
const navLinks = document.querySelector('.nav__links');
hamburger.addEventListener('click', function () {
navLinks.classList.toggle('active');
hamburger.classList.toggle('open');
});
// Close mobile menu on link click
navLinks.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function () {
navLinks.classList.remove('active');
hamburger.classList.remove('open');
});
});
// Scroll animations
const faders = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
faders.forEach(function (el) {
observer.observe(el);
});
// Budget calculator
var slider = document.getElementById('budgetSlider');
if (slider) {
var MIN_FEE = 800;
function formatPLN(val) {
return val.toLocaleString('pl-PL') + ' zł';
}
function updateCalc() {
var budget = parseInt(slider.value);
var fee = Math.max(budget * 0.1, MIN_FEE);
var total = budget + fee;
document.getElementById('budgetValue').textContent = formatPLN(budget);
document.getElementById('calcBudget').textContent = formatPLN(budget);
document.getElementById('calcFee').textContent = formatPLN(fee);
document.getElementById('calcTotal').textContent = formatPLN(total);
}
slider.addEventListener('input', updateCalc);
updateCalc();
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
anchor.addEventListener('click', function (e) {
var target = document.querySelector(this.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
});

875
oferta/google_ads/style.css Normal file
View File

@@ -0,0 +1,875 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #0a7b7b;
--primary-dark: #065e5e;
--primary-light: #0d9e9e;
--text: #333;
--text-light: #666;
--bg: #fff;
--bg-light: #f7fafa;
--bg-dark: #0a2e2e;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text);
line-height: 1.6;
background: var(--bg);
}
a {
color: var(--primary);
text-decoration: none;
}
a:hover {
color: var(--primary-dark);
}
/* NAV */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.08);
z-index: 100;
transition: box-shadow .3s;
}
.nav__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
}
.nav__logo img {
height: 60px;
width: auto;
}
.nav__links {
display: flex;
gap: 28px;
list-style: none;
}
.nav__links a {
color: var(--text);
font-size: .95rem;
font-weight: 500;
transition: color .2s;
}
.nav__links a:hover {
color: var(--primary);
}
.nav__cta {
background: var(--primary);
color: #fff !important;
padding: 8px 22px;
border-radius: 6px;
font-weight: 600;
transition: background .2s;
}
.nav__cta:hover {
background: var(--primary-dark);
color: #fff !important;
}
.nav__hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.nav__hamburger span {
width: 26px;
height: 3px;
background: var(--text);
border-radius: 2px;
transition: .3s;
}
/* HERO */
.hero {
margin-top: 70px;
padding: 80px 24px 60px;
background: linear-gradient(135deg, var(--bg-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
color: #fff;
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
right: -100px;
top: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
border-radius: 50%;
}
.hero__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 60px;
position: relative;
z-index: 1;
}
.hero__text {
flex: 1;
}
.hero__subtitle {
font-size: .95rem;
text-transform: uppercase;
letter-spacing: 2px;
opacity: .85;
margin-bottom: 12px;
}
.hero__text h1 {
font-size: 2.8rem;
font-weight: 800;
line-height: 1.15;
margin-bottom: 20px;
}
.hero__text p {
font-size: 1.15rem;
opacity: .9;
max-width: 520px;
margin-bottom: 32px;
}
.hero__buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.btn {
display: inline-block;
padding: 14px 32px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
border: none;
transition: all .25s;
}
.btn--white {
background: #fff;
color: var(--primary-dark);
}
.btn--white:hover {
background: #e6f5f5;
color: var(--primary-dark);
}
.btn--outline {
background: transparent;
color: #fff;
border: 2px solid rgba(255,255,255,.5);
}
.btn--outline:hover {
border-color: #fff;
background: rgba(255,255,255,.1);
color: #fff;
}
.btn--primary {
background: var(--primary);
color: #fff;
}
.btn--primary:hover {
background: var(--primary-dark);
color: #fff;
}
.hero__visual {
flex: 0 0 340px;
display: flex;
justify-content: center;
}
.hero__icon-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.hero__icon-card {
background: rgba(255,255,255,.12);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.15);
border-radius: 14px;
padding: 24px 18px;
text-align: center;
transition: transform .3s;
}
.hero__icon-card:hover {
transform: translateY(-4px);
}
.hero__icon-card .icon {
font-size: 2rem;
margin-bottom: 8px;
}
.hero__icon-card span {
font-size: .85rem;
font-weight: 500;
}
/* SECTIONS */
.section {
padding: 80px 24px;
}
.section--alt {
background: var(--bg-light);
}
.section__inner {
max-width: 1200px;
margin: 0 auto;
}
.section__header {
text-align: center;
margin-bottom: 56px;
}
.section__header h2 {
font-size: 2.2rem;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 12px;
}
.section__header p {
color: var(--text-light);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
/* WHY CARDS */
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.why-card {
background: #fff;
border-radius: 14px;
padding: 36px 28px;
box-shadow: 0 4px 20px rgba(0,0,0,.05);
border: 1px solid #eef5f5;
transition: transform .3s, box-shadow .3s;
}
.why-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 36px rgba(10,123,123,.12);
}
.why-card__icon {
width: 56px;
height: 56px;
border-radius: 12px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #fff;
margin-bottom: 20px;
}
.why-card h3 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 10px;
color: var(--primary-dark);
}
.why-card p {
color: var(--text-light);
font-size: .95rem;
}
/* CHANNELS */
.channels-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
}
.channel-card {
background: #fff;
border-radius: 12px;
padding: 32px 20px;
text-align: center;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
border: 1px solid #eef5f5;
transition: transform .3s, border-color .3s;
}
.channel-card:hover {
transform: translateY(-4px);
border-color: var(--primary);
}
.channel-card .icon {
font-size: 2.2rem;
margin-bottom: 14px;
}
.channel-card h3 {
font-size: 1rem;
font-weight: 600;
color: var(--text);
}
.channel-card p {
font-size: .85rem;
color: var(--text-light);
margin-top: 6px;
}
/* PRICING */
.pricing-box {
max-width: 700px;
margin: 0 auto;
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 40px rgba(10,123,123,.1);
}
.pricing-box__header {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
color: #fff;
padding: 40px 40px 32px;
text-align: center;
}
.pricing-box__header h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 8px;
}
.pricing-box__price {
font-size: 3rem;
font-weight: 800;
margin: 12px 0 4px;
}
.pricing-box__price small {
font-size: 1rem;
font-weight: 400;
opacity: .8;
}
.pricing-box__min-badge {
display: inline-block;
margin-top: 16px;
padding: 10px 28px;
background: rgba(255,255,255,.2);
border: 2px solid rgba(255,255,255,.5);
border-radius: 50px;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: .5px;
}
/* CALCULATOR */
.pricing-box__calculator {
padding: 32px 40px;
background: var(--bg-light);
border-bottom: 1px solid #eef5f5;
}
.pricing-box__calculator h4 {
font-size: 1.1rem;
color: var(--primary-dark);
margin-bottom: 20px;
text-align: center;
}
.pricing-box__calculator label {
display: block;
font-size: .95rem;
color: var(--text);
margin-bottom: 12px;
text-align: center;
}
.pricing-box__calculator label strong {
color: var(--primary);
font-size: 1.1rem;
}
.pricing-box__calculator input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
border-radius: 4px;
background: linear-gradient(to right, var(--primary), var(--primary-light));
outline: none;
margin-bottom: 24px;
}
.pricing-box__calculator input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--primary);
border: 4px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
cursor: pointer;
transition: transform .15s;
}
.pricing-box__calculator input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.pricing-box__calculator input[type="range"]::-moz-range-thumb {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--primary);
border: 4px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
cursor: pointer;
}
.calculator__result {
display: flex;
gap: 16px;
}
.calculator__result-item {
flex: 1;
background: #fff;
border-radius: 10px;
padding: 16px;
text-align: center;
border: 1px solid #eef5f5;
}
.calculator__result-item span {
display: block;
font-size: .8rem;
color: var(--text-light);
margin-bottom: 6px;
}
.calculator__result-item strong {
font-size: 1.25rem;
color: var(--text);
}
.calculator__result-item--total {
background: var(--primary);
border-color: var(--primary);
}
.calculator__result-item--total span {
color: rgba(255,255,255,.8);
}
.calculator__result-item--total strong {
color: #fff;
font-size: 1.4rem;
}
.pricing-box__body {
padding: 36px 40px 40px;
}
.pricing-box__features {
list-style: none;
margin-bottom: 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
.pricing-box__features li {
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
font-size: .95rem;
display: flex;
align-items: center;
gap: 12px;
}
.pricing-box__features li::before {
content: '\2713';
color: var(--primary);
font-weight: 700;
font-size: 1.1rem;
flex-shrink: 0;
}
.pricing-box__body .btn {
width: 100%;
text-align: center;
font-size: 1.1rem;
padding: 16px;
}
/* CONTACT */
.contact-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.contact-card {
background: #fff;
border-radius: 14px;
padding: 36px 24px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,.05);
border: 1px solid #eef5f5;
transition: transform .3s, box-shadow .3s;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--text);
text-decoration: none;
}
.contact-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 36px rgba(10,123,123,.12);
}
a.contact-card:hover {
color: var(--primary);
}
.contact-card__icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: #fff;
margin-bottom: 8px;
}
.contact-card strong {
font-size: .85rem;
color: var(--text-light);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-card span {
font-size: 1.1rem;
font-weight: 600;
}
/* FOOTER */
.footer {
background: var(--bg-dark);
color: #fff;
padding: 48px 24px 24px;
}
.footer__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}
.footer__logo-img {
height: 36px;
width: auto;
filter: brightness(0) invert(1);
}
.footer__links {
display: flex;
gap: 24px;
list-style: none;
}
.footer__links a {
color: rgba(255,255,255,.7);
font-size: .9rem;
transition: color .2s;
}
.footer__links a:hover {
color: #fff;
}
.footer__copy {
width: 100%;
text-align: center;
padding-top: 24px;
margin-top: 24px;
border-top: 1px solid rgba(255,255,255,.1);
font-size: .85rem;
opacity: .6;
}
/* ANIMATIONS */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* RESPONSIVE */
@media (max-width: 900px) {
.hero__inner {
flex-direction: column;
text-align: center;
}
.hero__text p {
margin-left: auto;
margin-right: auto;
}
.hero__buttons {
justify-content: center;
}
.hero__visual {
flex: none;
}
.why-grid {
grid-template-columns: 1fr 1fr;
}
.contact-cards {
grid-template-columns: 1fr 1fr;
}
.pricing-box__features {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.nav__inner {
padding: 10px 16px;
}
.nav__logo img {
height: 44px;
}
.nav__links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
flex-direction: column;
padding: 16px 24px;
gap: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.nav__links.active {
display: flex;
}
.nav__hamburger {
display: flex;
}
.hero {
padding: 60px 16px 48px;
}
.hero__text h1 {
font-size: 2rem;
}
.hero__text p {
font-size: 1rem;
}
.hero__icon-grid {
gap: 10px;
}
.hero__icon-card {
padding: 16px 12px;
}
.section {
padding: 56px 16px;
}
.section__header h2 {
font-size: 1.7rem;
}
.section__header p {
font-size: 1rem;
}
.channels-grid {
grid-template-columns: 1fr 1fr;
}
.pricing-box__header {
padding: 28px 20px 24px;
}
.pricing-box__header h3 {
font-size: 1.2rem;
}
.pricing-box__price {
font-size: 2.4rem;
}
.pricing-box__min-badge {
font-size: 1rem;
padding: 8px 20px;
}
.pricing-box__body,
.pricing-box__calculator {
padding: 24px 20px;
}
.pricing-box__features {
grid-template-columns: 1fr;
}
.calculator__result {
flex-direction: column;
}
.contact-cards {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.contact-card {
padding: 24px 16px;
}
.contact-card__icon {
width: 52px;
height: 52px;
font-size: 1.5rem;
}
.contact-card span {
font-size: .95rem;
word-break: break-word;
}
.footer {
padding: 36px 16px 20px;
}
.footer__inner {
flex-direction: column;
text-align: center;
}
.footer__links {
flex-wrap: wrap;
justify-content: center;
}
.footer__copy {
font-size: .78rem;
}
}
@media (max-width: 480px) {
.hero__text h1 {
font-size: 1.6rem;
}
.hero__visual {
width: 100%;
}
.hero__icon-grid {
width: 100%;
}
.why-grid {
grid-template-columns: 1fr;
}
.channels-grid {
grid-template-columns: 1fr 1fr;
}
.contact-cards {
grid-template-columns: 1fr;
}
.btn {
padding: 12px 24px;
font-size: .95rem;
}
}