Merge version_1 into main #2
348
src/app/page.tsx
348
src/app/page.tsx
@@ -17,240 +17,138 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Start",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Dlaczego my",
|
||||
id: "why",
|
||||
},
|
||||
{
|
||||
name: "Demo",
|
||||
id: "demo",
|
||||
},
|
||||
{
|
||||
name: "Oferta",
|
||||
id: "pricing",
|
||||
},
|
||||
]}
|
||||
brandName="AW Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Start", id: "hero" },
|
||||
{ name: "Dlaczego my", id: "why" },
|
||||
{ name: "Demo", id: "demo" },
|
||||
{ name: "Oferta", id: "pricing" },
|
||||
]}
|
||||
brandName="AW Studio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="AW STUDIO"
|
||||
description="Nowoczesne strony dla lokalnych biznesów. Więcej klientów. Lepszy wizerunek. Prosta rezerwacja."
|
||||
buttons={[
|
||||
{
|
||||
text: "Zobacz przykład",
|
||||
href: "#demo",
|
||||
},
|
||||
{
|
||||
text: "Napisz na Instagramie",
|
||||
href: "https://instagram.com/adam.websites",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg?_wi=1",
|
||||
imageAlt: "Barbershop interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg?_wi=2",
|
||||
imageAlt: "Eleganckie wnętrze salonu",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg?_wi=3",
|
||||
imageAlt: "Minimalistyczny design",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg?_wi=4",
|
||||
imageAlt: "Nowoczesna strona WWW",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg?_wi=5",
|
||||
imageAlt: "Profesjonalne podejście",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="AW STUDIO"
|
||||
description="Nowoczesne strony dla lokalnych biznesów. Więcej klientów. Lepszy wizerunek. Prosta rezerwacja."
|
||||
buttons={[
|
||||
{ text: "Zobacz przykład", href: "#demo" },
|
||||
{ text: "Napisz na Instagramie", href: "https://instagram.com/adam.websites" },
|
||||
]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg", imageAlt: "Barbershop interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg", imageAlt: "Eleganckie wnętrze salonu" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg", imageAlt: "Minimalistyczny design" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg", imageAlt: "Nowoczesna strona WWW" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg", imageAlt: "Profesjonalne podejście" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why" data-section="why">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Brak strony = tracisz klientów"
|
||||
description="Dobra strona zwiększa zaufanie i kieruje klientów prosto do rezerwacji. Budujemy wizerunek, który sprzedaje Twoje usługi każdego dnia."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg?_wi=6"
|
||||
/>
|
||||
</div>
|
||||
<div id="why" data-section="why">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Brak strony = tracisz klientów"
|
||||
description="Dobra strona zwiększa zaufanie i kieruje klientów prosto do rezerwacji. Budujemy wizerunek, który sprzedaje Twoje usługi każdego dnia."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="demo" data-section="demo">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Więcej klientów",
|
||||
description: "Lokalna widoczność na mapach",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-searching-black-friday-sales-smartphone_23-2149093512.jpg?_wi=1",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-searching-black-friday-sales-smartphone_23-2149093512.jpg?_wi=2",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg?_wi=7",
|
||||
imageAlt: "barbershop interior blurred",
|
||||
},
|
||||
{
|
||||
title: "Automatyczna rezerwacja",
|
||||
description: "Wygodne planowanie wizyt",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-searching-black-friday-sales-smartphone_23-2149093512.jpg?_wi=3",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-searching-black-friday-sales-smartphone_23-2149093512.jpg?_wi=4",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-searching-black-friday-sales-smartphone_23-2149093512.jpg?_wi=5",
|
||||
imageAlt: "smartphone website mockup",
|
||||
},
|
||||
]}
|
||||
showStepNumbers={false}
|
||||
title="Tak może wyglądać Twoja strona"
|
||||
description="Projekt przygotowany na podstawie realnych salonów. Zobacz jak elegancja spotyka się z funkcjonalnością."
|
||||
/>
|
||||
</div>
|
||||
<div id="demo" data-section="demo">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
showStepNumbers={false}
|
||||
title="Tak może wyglądać Twoja strona"
|
||||
description="Projekt przygotowany na podstawie realnych salonów. Zobacz jak elegancja spotyka się z funkcjonalnością."
|
||||
features={[
|
||||
{
|
||||
title: "Więcej klientów", description: "Lokalna widoczność na mapach", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/person-searching-black-friday-sales-smartphone_23-2149093512.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/person-searching-black-friday-sales-smartphone_23-2149093512.jpg" }
|
||||
},
|
||||
{
|
||||
title: "Automatyczna rezerwacja", description: "Wygodne planowanie wizyt", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/person-searching-black-friday-sales-smartphone_23-2149093512.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/person-searching-black-friday-sales-smartphone_23-2149093512.jpg" }
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "web",
|
||||
badge: "Jednorazowo",
|
||||
price: "od 400 zł",
|
||||
subtitle: "Strona WWW",
|
||||
buttons: [
|
||||
{
|
||||
text: "Wybieram",
|
||||
href: "https://instagram.com/adam.websites",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Estetyczny design",
|
||||
"Do 5 podstron",
|
||||
"Formularz kontaktowy",
|
||||
"Podpięcie Booksy",
|
||||
"Szybka realizacja",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "sub",
|
||||
badge: "Miesięcznie",
|
||||
price: "100 zł",
|
||||
subtitle: "Abonament",
|
||||
buttons: [
|
||||
{
|
||||
text: "Wybieram",
|
||||
href: "https://instagram.com/adam.websites",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Domena",
|
||||
"Hosting",
|
||||
"Drobne zmiany w cenie",
|
||||
"Certyfikat SSL",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Prosta inwestycja"
|
||||
description="Wybierz model, który najlepiej wspiera Twój biznes."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "web", badge: "Jednorazowo", price: "od 400 zł", subtitle: "Strona WWW", buttons: [{ text: "Wybieram", href: "https://instagram.com/adam.websites" }],
|
||||
features: ["Estetyczny design", "Do 5 podstron", "Formularz kontaktowy", "Podpięcie Booksy", "Szybka realizacja"],
|
||||
},
|
||||
{
|
||||
id: "sub", badge: "Miesięcznie", price: "100 zł", subtitle: "Abonament", buttons: [{ text: "Wybieram", href: "https://instagram.com/adam.websites" }],
|
||||
features: ["Domena", "Hosting", "Drobne zmiany w cenie", "Certyfikat SSL"],
|
||||
},
|
||||
]}
|
||||
title="Prosta inwestycja"
|
||||
description="Wybierz model, który najlepiej wspiera Twój biznes."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="how" data-section="how">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Kontakt",
|
||||
content: "Piszesz do mnie na Instagramie lub mailowo.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Demo",
|
||||
content: "W ciągu 48h dostajesz darmowy podgląd strony.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Realizacja",
|
||||
content: "Omawiamy zmiany i finalną cenę.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Wdrożenie",
|
||||
content: "Publikujemy stronę w sieci.",
|
||||
},
|
||||
]}
|
||||
title="Jak pracujemy?"
|
||||
description="Proces tworzenia strony jest szybki i bezproblemowy."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="how" data-section="how">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "Kontakt", content: "Piszesz do mnie na Instagramie lub mailowo." },
|
||||
{ id: "2", title: "Demo", content: "W ciągu 48h dostajesz darmowy podgląd strony." },
|
||||
{ id: "3", title: "Realizacja", content: "Omawiamy zmiany i finalną cenę." },
|
||||
{ id: "4", title: "Wdrożenie", content: "Publikujemy stronę w sieci." },
|
||||
]}
|
||||
title="Jak pracujemy?"
|
||||
description="Proces tworzenia strony jest szybki i bezproblemowy."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Chcesz zobaczyć, jak może wyglądać Twoja strona?"
|
||||
description="Napisz do mnie i zacznijmy przygodę z Twoim nowym wizerunkiem."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Twoje imię",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email lub Instagram",
|
||||
},
|
||||
]}
|
||||
buttonText="Napisz na Instagramie"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg?_wi=8"
|
||||
/>
|
||||
</div>
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Chcesz zobaczyć, jak może wyglądać Twoja strona?"
|
||||
description="Napisz do mnie i zacznijmy przygodę z Twoim nowym wizerunkiem."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Twoje imię" },
|
||||
{ name: "email", type: "email", placeholder: "Email lub Instagram" },
|
||||
]}
|
||||
buttonText="Napisz na Instagramie"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/waiting-room-with-chairs-blurred_1203-1404.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Kontakt",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com/adam.websites",
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
href: "mailto:adam.websites@interia.pl",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="AW Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Kontakt", items: [
|
||||
{ label: "Instagram", href: "https://instagram.com/adam.websites" },
|
||||
{ label: "Email", href: "mailto:adam.websites@interia.pl" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="AW Studio"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user