bender/a2ae82df-d4bc-4867-9925-a74df493385a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 10 commits from version_2 into main 2026-04-15 18:32:51 +00:00
Conversation 0 Commits 10 Files Changed 10 +489 -129
10 changed files with 489 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/calendar/page.tsx Normal file
View File

@@ -0,0 +1,54 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterMedia from '@/components/sections/footer/FooterMedia';
export default function CalendarPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Calendar", id: "/calendar" }
]}
brandName="Bookly"
/>
</div>
<div className="container mx-auto px-4 py-20 min-h-[60vh] flex flex-col items-center justify-center text-center">
<h1 className="text-4xl font-bold mb-6">Scheduling & Calendar</h1>
<p className="text-lg opacity-80 max-w-2xl">
View your upcoming appointments, manage availability, and sync events with your team effortlessly.
This dashboard view provides full control over your service schedule.
</p>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/copy-space-background-curved-sheets-paper_23-2148319072.jpg"
logoText="Bookly"
columns={[
{ title: "Company", items: [{ label: "About", href: "/#" }, { label: "Careers", href: "/#" }] },
{ title: "Resources", items: [{ label: "Blog", href: "/#" }, { label: "Support", href: "/#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

77
src/app/conversations/page.tsx Normal file
View File

@@ -0,0 +1,77 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { useState } from "react";
export default function ConversationsPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Solutions", id: "solutions" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Conversations", id: "/conversations" },
]}
brandName="Bookly"
/>
</div>
<main className="min-h-screen pt-32 pb-20 px-4 md:px-8">
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-6">
<div className="md:col-span-1 bg-white/50 backdrop-blur-md p-6 rounded-2xl border border-white/20">
<h2 className="text-xl font-semibold mb-6">Threads</h2>
<div className="space-y-4">
{[1, 2, 3].map((i) => (
<div key={i} className="p-4 bg-white/40 rounded-xl hover:bg-white/60 transition-colors cursor-pointer">
<div className="font-medium">Customer Thread {i}</div>
<div className="text-sm opacity-70">Last message summary...</div>
</div>
))}
</div>
</div>
<div className="md:col-span-3 bg-white/50 backdrop-blur-md p-6 rounded-2xl border border-white/20">
<h2 className="text-xl font-semibold mb-6">Message View</h2>
<div className="h-[400px] flex flex-col justify-between">
<div className="space-y-4 overflow-y-auto pr-2">
<div className="bg-primary-cta text-white p-3 rounded-xl self-end ml-auto max-w-xs">Hey, are you available today?</div>
<div className="bg-white/80 p-3 rounded-xl self-start max-w-xs">Yes, we can be there at 2pm!</div>
</div>
<div className="mt-6">
<input type="text" placeholder="Type your message..." className="w-full p-4 rounded-xl border border-white/30 bg-white/50" />
</div>
</div>
</div>
</div>
</main>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/copy-space-background-curved-sheets-paper_23-2148319072.jpg"
logoText="Bookly"
columns={[
{ title: "Company", items: [{ label: "About", href: "/" }, { label: "Careers", href: "/" }] },
{ title: "Resources", items: [{ label: "Blog", href: "/" }, { label: "Support", href: "/" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

57
src/app/leads/page.tsx Normal file
View File

@@ -0,0 +1,57 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useState } from "react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
export default function LeadsPage() {
const [search, setSearch] = useState("");
return (
<ThemeProvider>
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Leads", id: "/leads" },
]}
brandName="Bookly"
/>
<main className="container mx-auto p-8 pt-32">
<h1 className="text-4xl font-bold mb-8">Leads Dashboard</h1>
<div className="flex gap-4 mb-6">
<input
type="text"
placeholder="Search leads..."
className="p-2 border rounded-lg flex-1"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
<button className="px-4 py-2 bg-primary text-white rounded-lg">Export</button>
</div>
<div className="border rounded-lg overflow-hidden">
<table className="w-full text-left">
<thead className="bg-gray-100">
<tr>
<th className="p-4">Name</th>
<th className="p-4">Status</th>
<th className="p-4">Last Contacted</th>
<th className="p-4">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td className="p-4">John Doe</td>
<td className="p-4">New</td>
<td className="p-4">2 mins ago</td>
<td className="p-4">
<button className="text-blue-600 mr-2">View</button>
<button className="text-green-600">Book</button>
</td>
</tr>
</tbody>
</table>
</div>
</main>
</ThemeProvider>
);
}

38
src/app/login/page.tsx Normal file
View File

@@ -0,0 +1,38 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useState } from "react";
import { useRouter } from "next/navigation";
export default function LoginPage() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const router = useRouter();
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!email || !password) {
setError("Please fill in all fields.");
return;
}
console.log("Logging in...", { email, password });
};
return (
<ThemeProvider defaultButtonVariant="bounce-effect" defaultTextAnimation="background-highlight" borderRadius="rounded" contentWidth="compact" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="solid" headingFontWeight="semibold">
<div className="min-h-screen flex items-center justify-center p-6">
<div className="w-full max-w-md p-8 bg-card rounded-xl shadow-lg border border-accent">
<h1 className="text-2xl font-bold mb-6">Welcome back</h1>
{error && <p className="text-red-500 mb-4">{error}</p>}
<form onSubmit={handleSubmit} className="space-y-4">
<input type="email" placeholder="Email" className="w-full p-3 rounded border border-accent" value={email} onChange={(e) => setEmail(e.target.value)} />
<input type="password" placeholder="Password" className="w-full p-3 rounded border border-accent" value={password} onChange={(e) => setPassword(e.target.value)} />
<button type="submit" className="w-full p-3 bg-primary-cta text-white rounded font-medium">Login</button>
</form>
<p className="mt-4 text-sm text-center">Don't have an account? <a href="/signup" className="text-primary-cta font-bold">Sign up</a></p>
</div>
</div>
</ThemeProvider>
);
}

88
src/app/missed-calls/page.tsx Normal file
View File

@@ -0,0 +1,88 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { useState } from 'react';
export default function MissedCallsPage() {
// Mock data for demonstration
const [calls] = useState([
{ id: 1, caller: "John Doe", phone: "(555) 123-4567", time: "10:30 AM", status: "Missed" },
{ id: 2, caller: "Sarah Smith", phone: "(555) 987-6543", time: "09:15 AM", status: "Missed" },
{ id: 3, caller: "Acme Corp", phone: "(555) 555-5555", time: "Yesterday", status: "Callback Requested" },
]);
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Dashboard", id: "/" },
{ name: "Missed Calls", id: "/missed-calls" },
]}
brandName="Bookly"
/>
</div>
<main className="pt-32 pb-20 px-6 max-w-4xl mx-auto min-h-screen">
<h1 className="text-4xl font-bold mb-8">Missed Calls</h1>
<div className="bg-card p-6 rounded-xl border">
<table className="w-full text-left">
<thead>
<tr className="border-b">
<th className="pb-4">Caller</th>
<th className="pb-4">Phone</th>
<th className="pb-4">Time</th>
<th className="pb-4">Status</th>
<th className="pb-4">Action</th>
</tr>
</thead>
<tbody>
{calls.map((call) => (
<tr key={call.id} className="border-b last:border-0">
<td className="py-4">{call.caller}</td>
<td className="py-4">{call.phone}</td>
<td className="py-4">{call.time}</td>
<td className="py-4">{call.status}</td>
<td className="py-4">
<button
onClick={() => alert(`Calling back ${call.phone}...`)}
className="bg-primary text-white px-4 py-2 rounded-lg text-sm"
>
Callback
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</main>
<div id="footer" data-section="footer">
<FooterMedia
logoText="Bookly"
columns={[
{ title: "Company", items: [{ label: "About", href: "#" }] },
{ title: "Resources", items: [{ label: "Support", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

163
src/app/page.tsx
View File

@@ -29,12 +29,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Solutions", id: "solutions"},
{
name: "Features", id: "features"},
{
name: "Pricing", id: "pricing"},
{ name: "Solutions", id: "solutions" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Settings", id: "/settings" },
]}
brandName="Bookly"
/>
@@ -45,40 +43,23 @@ export default function LandingPage() {
title="Never miss a customer again."
description="Bookly is your AI front desk that answers every call and lead instantly and turns inquiries into booked appointments 24/7."
testimonials={[
{
name: "Mike J.", handle: "@MikeHVAC", testimonial: "Bookly saved my business 10 hours a week on scheduling alone. Worth every penny.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-male-builder-wearing-uniform-safety-helmet-showing-handshakes-gesture-purple_141793-74804.jpg"},
{
name: "Sarah P.", handle: "@PlumbingPros", testimonial: "Every call gets answered. No more losing jobs to competitors because I was on a roof.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiley-male-engineer-with-copy-space_23-2148453437.jpg"},
{
name: "Dave R.", handle: "@ApexRoofing", testimonial: "Instant ROI. The automation is seamless and feels human to my customers.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg"},
{
name: "Linda T.", handle: "@GreenPest", testimonial: "My conversion rate doubled once I stopped missing lead inquiries.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-call-center-manager-providing-guidance-intern-addressing-questions_482257-125804.jpg"},
{
name: "Tom B.", handle: "@ReliableElectric", testimonial: "Hands down the easiest implementation I've ever had for a service business tool.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-working-logistic_23-2148886820.jpg"},
{ name: "Mike J.", handle: "@MikeHVAC", testimonial: "Bookly saved my business 10 hours a week on scheduling alone. Worth every penny.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-male-builder-wearing-uniform-safety-helmet-showing-handshakes-gesture-purple_141793-74804.jpg" },
{ name: "Sarah P.", handle: "@PlumbingPros", testimonial: "Every call gets answered. No more losing jobs to competitors because I was on a roof.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-male-engineer-with-copy-space_23-2148453437.jpg" },
{ name: "Dave R.", handle: "@ApexRoofing", testimonial: "Instant ROI. The automation is seamless and feels human to my customers.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg" },
{ name: "Linda T.", handle: "@GreenPest", testimonial: "My conversion rate doubled once I stopped missing lead inquiries.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-call-center-manager-providing-guidance-intern-addressing-questions_482257-125804.jpg" },
{ name: "Tom B.", handle: "@ReliableElectric", testimonial: "Hands down the easiest implementation I've ever had for a service business tool.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-working-logistic_23-2148886820.jpg" },
]}
buttons={[
{
text: "Get Early Access", href: "#contact"},
{
text: "See How It Works", href: "#solution"},
{ text: "Get Early Access", href: "#contact" },
{ text: "See How It Works", href: "#solution" },
]}
imageSrc="http://img.b2bpic.net/free-photo/company-employee-presenting-business-strategy-with-charts-monitor-planning-project-workmates-analyzing-financial-statistics-display-working-together-company-development_482257-37174.jpg"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/young-female-holding-hand-her-chest-while-laughing-worker-uniform-looking-merry-front-view_176474-34381.jpg", alt: "Happy worker"},
{
src: "http://img.b2bpic.net/free-photo/female-worker-wearing-work-clothes_273609-10975.jpg", alt: "Female worker"},
{
src: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg", alt: "Smiling mechanic"},
{
src: "http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg", alt: "Worker in vest"},
{
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-posing-with-helmet_23-2148920601.jpg", alt: "Man with helmet"},
{ src: "http://img.b2bpic.net/free-photo/young-female-holding-hand-her-chest-while-laughing-worker-uniform-looking-merry-front-view_176474-34381.jpg", alt: "Happy worker" },
{ src: "http://img.b2bpic.net/free-photo/female-worker-wearing-work-clothes_273609-10975.jpg", alt: "Female worker" },
{ src: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg", alt: "Smiling mechanic" },
{ src: "http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg", alt: "Worker in vest" },
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-posing-with-helmet_23-2148920601.jpg", alt: "Man with helmet" },
]}
/>
</div>
@@ -89,12 +70,9 @@ export default function LandingPage() {
title="Missed calls = lost revenue."
description="You work hard for your leads, but you lose them when you can't answer. Stop throwing your ad budget away."
metrics={[
{
value: "100%", title: "Response Rate"},
{
value: "24/7", title: "Coverage"},
{
value: "Instant", title: "Reply Time"},
{ value: "100%", title: "Response Rate" },
{ value: "24/7", title: "Coverage" },
{ value: "Instant", title: "Reply Time" },
]}
imageSrc="http://img.b2bpic.net/free-photo/army-soldier-reviews-targets-satellite-world-map-ensure-global-protection_482257-91236.jpg"
/>
@@ -106,18 +84,9 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={true}
features={[
{
id: "f1", title: "Instant SMS Replies", descriptions: [
"Missed call? Our AI fires an immediate, friendly SMS to engage the lead instantly."],
imageSrc: "http://img.b2bpic.net/free-photo/heart-shape-favorite-social-media-notification-icon-speech-bubbles-3d-cartoon-banner-website-ui-pink-background-3d-rendering-illustration_56104-1333.jpg"},
{
id: "f2", title: "Smart Qualifying", descriptions: [
"We ask the right questions so you only spend time on high-value jobs."],
imageSrc: "http://img.b2bpic.net/free-vector/book-recommendation-icon_632498-3994.jpg"},
{
id: "f3", title: "Calendar Sync", descriptions: [
"Appointments drop straight into your calendar with zero manual entry."],
imageSrc: "http://img.b2bpic.net/free-photo/day-office-travel-agency_23-2150769962.jpg"},
{ id: "f1", title: "Instant SMS Replies", descriptions: ["Missed call? Our AI fires an immediate, friendly SMS to engage the lead instantly."], imageSrc: "http://img.b2bpic.net/free-photo/heart-shape-favorite-social-media-notification-icon-speech-bubbles-3d-cartoon-banner-website-ui-pink-background-3d-rendering-illustration_56104-1333.jpg" },
{ id: "f2", title: "Smart Qualifying", descriptions: ["We ask the right questions so you only spend time on high-value jobs."], imageSrc: "http://img.b2bpic.net/free-vector/book-recommendation-icon_632498-3994.jpg" },
{ id: "f3", title: "Calendar Sync", descriptions: ["Appointments drop straight into your calendar with zero manual entry."], imageSrc: "http://img.b2bpic.net/free-photo/day-office-travel-agency_23-2150769962.jpg" },
]}
title="Bookly responds instantly and books jobs for you."
description="We don't just answer; we qualify, schedule, and close."
@@ -130,18 +99,9 @@ export default function LandingPage() {
textboxLayout="split-description"
useInvertedBackground={false}
features={[
{
id: "d1", title: "Customer: Emergency?", descriptions: [
"Do you do emergency plumbing?"],
imageSrc: "http://img.b2bpic.net/free-photo/front-view-friends-reading-menu-restaurant_23-2150384834.jpg"},
{
id: "d2", title: "Bookly: 24/7 Ready", descriptions: [
"Yes—we offer 24/7 emergency services. What's going on?"],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-engineer-using-tablet-sustainable-data-center-implementing-green-technologies-it_482257-132419.jpg"},
{
id: "d3", title: "Booking confirmed", descriptions: [
"Got it. We can send someone today at 2 PM."],
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-speech-bubble_53876-13588.jpg"},
{ id: "d1", title: "Customer: Emergency?", descriptions: ["Do you do emergency plumbing?"], imageSrc: "http://img.b2bpic.net/free-photo/front-view-friends-reading-menu-restaurant_23-2150384834.jpg" },
{ id: "d2", title: "Bookly: 24/7 Ready", descriptions: ["Yes—we offer 24/7 emergency services. What's going on?"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-engineer-using-tablet-sustainable-data-center-implementing-green-technologies-it_482257-132419.jpg" },
{ id: "d3", title: "Booking confirmed", descriptions: ["Got it. We can send someone today at 2 PM."], imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-speech-bubble_53876-13588.jpg" },
]}
title="Turn conversations into booked jobs."
description="See how Bookly handles an emergency request seamlessly."
@@ -154,18 +114,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: "b1", title: "Fast", descriptions: [
"Under 10 seconds response time."],
imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151205016.jpg"},
{
id: "b2", title: "Always On", descriptions: [
"Nights, weekends, and holidays covered."],
imageSrc: "http://img.b2bpic.net/free-photo/clock-with-arrow-time-concept_187299-46702.jpg"},
{
id: "b3", title: "Efficient", descriptions: [
"Eliminate missed call anxiety forever."],
imageSrc: "http://img.b2bpic.net/free-photo/earth-day-environment-eco-concept-space-text_185193-110604.jpg"},
{ id: "b1", title: "Fast", descriptions: ["Under 10 seconds response time."], imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151205016.jpg" },
{ id: "b2", title: "Always On", descriptions: ["Nights, weekends, and holidays covered."], imageSrc: "http://img.b2bpic.net/free-photo/clock-with-arrow-time-concept_187299-46702.jpg" },
{ id: "b3", title: "Efficient", descriptions: ["Eliminate missed call anxiety forever."], imageSrc: "http://img.b2bpic.net/free-photo/earth-day-environment-eco-concept-space-text_185193-110604.jpg" },
]}
title="Built for service pros."
description="Powerful, simple, no receptionist required."
@@ -178,24 +129,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "starter", tag: "Basic", price: "$49", period: "/mo", description: "Perfect for new service pros.", button: {
text: "Get Started", href: "#contact"},
featuresTitle: "Included:", features: [
"Instant SMS", "Booking Sync", "Support"],
},
{
id: "pro", tag: "Popular", price: "$99", period: "/mo", description: "Best for growing teams.", button: {
text: "Get Started", href: "#contact"},
featuresTitle: "Everything in Basic, plus:", features: [
"Priority Routing", "Custom FAQ AI", "Analytics"],
},
{
id: "premium", tag: "Scale", price: "$149", period: "/mo", description: "For high-volume companies.", button: {
text: "Get Started", href: "#contact"},
featuresTitle: "Everything in Pro, plus:", features: [
"Dedicated Account Mgr", "Custom Integration", "API Access"],
},
{ id: "starter", tag: "Basic", price: "$49", period: "/mo", description: "Perfect for new service pros.", button: { text: "Get Started", href: "#contact" }, featuresTitle: "Included:", features: ["Instant SMS", "Booking Sync", "Support"] },
{ id: "pro", tag: "Popular", price: "$99", period: "/mo", description: "Best for growing teams.", button: { text: "Get Started", href: "#contact" }, featuresTitle: "Everything in Basic, plus:", features: ["Priority Routing", "Custom FAQ AI", "Analytics"] },
{ id: "premium", tag: "Scale", price: "$149", period: "/mo", description: "For high-volume companies.", button: { text: "Get Started", href: "#contact" }, featuresTitle: "Everything in Pro, plus:", features: ["Dedicated Account Mgr", "Custom Integration", "API Access"] },
]}
title="Simple monthly pricing."
description="Pick the tier that fits your business scale."
@@ -207,12 +143,9 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "q1", title: "Does this replace my dispatcher?", content: "Bookly works alongside your team to handle incoming leads so they can focus on high-priority tasks."},
{
id: "q2", title: "Can it integrate with my CRM?", content: "Yes, we integrate with all major home service platforms via Zapier or direct API."},
{
id: "q3", title: "Is the AI realistic?", content: "Yes, it's designed to sound like a professional, helpful member of your office staff."},
{ id: "q1", title: "Does this replace my dispatcher?", content: "Bookly works alongside your team to handle incoming leads so they can focus on high-priority tasks." },
{ id: "q2", title: "Can it integrate with my CRM?", content: "Yes, we integrate with all major home service platforms via Zapier or direct API." },
{ id: "q3", title: "Is the AI realistic?", content: "Yes, it's designed to sound like a professional, helpful member of your office staff." },
]}
title="Common questions."
description="Quick answers to help you get started."
@@ -223,15 +156,11 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "plain"}}
background={{ variant: "plain" }}
tag="Get Early Access"
title="Stop losing customers to missed calls."
description="Join the waitlist today and start booking more jobs instantly."
buttons={[
{
text: "Get Early Access", href: "#contact"},
]}
buttons={[{ text: "Get Early Access", href: "#contact" }]}
/>
</div>
@@ -240,26 +169,12 @@ export default function LandingPage() {
imageSrc="http://img.b2bpic.net/free-photo/copy-space-background-curved-sheets-paper_23-2148319072.jpg"
logoText="Bookly"
columns={[
{
title: "Company", items: [
{
label: "About", href: "#"},
{
label: "Careers", href: "#"},
],
},
{
title: "Resources", items: [
{
label: "Blog", href: "#"},
{
label: "Support", href: "#"},
],
},
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
{ title: "Resources", items: [{ label: "Blog", href: "#" }, { label: "Support", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

22
src/app/reset-password/page.tsx Normal file
View File

@@ -0,0 +1,22 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useState } from "react";
export default function ResetPasswordPage() {
const [email, setEmail] = useState("");
return (
<ThemeProvider defaultButtonVariant="bounce-effect" defaultTextAnimation="background-highlight" borderRadius="rounded" contentWidth="compact" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="solid" headingFontWeight="semibold">
<div className="min-h-screen flex items-center justify-center p-6">
<div className="w-full max-w-md p-8 bg-card rounded-xl shadow-lg border border-accent">
<h1 className="text-2xl font-bold mb-6">Reset password</h1>
<form className="space-y-4">
<input type="email" placeholder="Enter your email" className="w-full p-3 rounded border border-accent" value={email} onChange={(e) => setEmail(e.target.value)} />
<button type="submit" className="w-full p-3 bg-primary-cta text-white rounded font-medium">Send Reset Link</button>
</form>
</div>
</div>
</ThemeProvider>
);
}

75
src/app/settings/page.tsx Normal file
View File

@@ -0,0 +1,75 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { useState } from 'react';
export default function SettingsPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Dashboard", id: "/" },
{ name: "Settings", id: "/settings" },
]}
brandName="Bookly"
/>
</div>
<main className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
<h1 className="text-4xl font-bold mb-8">Account Settings</h1>
<div className="space-y-12">
<section className="p-8 bg-card rounded-lg border shadow-sm">
<h2 className="text-2xl font-semibold mb-4">Profile Information</h2>
<div className="grid gap-4">
<input type="text" placeholder="Full Name" className="w-full p-3 rounded border bg-transparent" />
<input type="email" placeholder="Email Address" className="w-full p-3 rounded border bg-transparent" />
</div>
</section>
<section className="p-8 bg-card rounded-lg border shadow-sm">
<h2 className="text-2xl font-semibold mb-4">Billing</h2>
<p className="mb-4">Current Plan: Pro ($99/mo)</p>
<button className="px-6 py-2 bg-primary text-white rounded">Manage Subscription</button>
</section>
<section className="p-8 bg-card rounded-lg border shadow-sm">
<h2 className="text-2xl font-semibold mb-4">Configuration</h2>
<div className="flex items-center justify-between py-2">
<span>Enable AI Auto-Reply</span>
<input type="checkbox" className="w-5 h-5" defaultChecked />
</div>
</section>
</div>
</main>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/copy-space-background-curved-sheets-paper_23-2148319072.jpg"
logoText="Bookly"
columns={[
{ title: "Company", items: [{ label: "About", href: "#" }] },
{ title: "Resources", items: [{ label: "Support", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

34
src/app/signup/page.tsx Normal file
View File

@@ -0,0 +1,34 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useState } from "react";
export default function SignupPage() {
const [email, setEmail] = useState("");
const [error, setError] = useState("");
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!email) {
setError("Email is required.");
return;
}
console.log("Signing up...", { email });
};
return (
<ThemeProvider defaultButtonVariant="bounce-effect" defaultTextAnimation="background-highlight" borderRadius="rounded" contentWidth="compact" sizing="medium" background="none" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="solid" headingFontWeight="semibold">
<div className="min-h-screen flex items-center justify-center p-6">
<div className="w-full max-w-md p-8 bg-card rounded-xl shadow-lg border border-accent">
<h1 className="text-2xl font-bold mb-6">Create an account</h1>
{error && <p className="text-red-500 mb-4">{error}</p>}
<form onSubmit={handleSubmit} className="space-y-4">
<input type="email" placeholder="Work Email" className="w-full p-3 rounded border border-accent" value={email} onChange={(e) => setEmail(e.target.value)} />
<button type="submit" className="w-full p-3 bg-primary-cta text-white rounded font-medium">Sign Up</button>
</form>
<p className="mt-4 text-sm text-center">Already have an account? <a href="/login" className="text-primary-cta font-bold">Login</a></p>
</div>
</div>
</ThemeProvider>
);
}

10
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #F9FAFB;
--background: #f9fafb;
--card: #ffffff;
--foreground: #111827;
--primary-cta: #1E1B4B;
--primary-cta: #4f46e5;
--primary-cta-text: #ffffff;
--secondary-cta: #22C55E;
--secondary-cta: #22c55e;
--secondary-cta-text: #111827;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
--accent: #e5e7eb;
--background-accent: #f3f4f6;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);