Merge version_2 into main #3
153
src/app/menu/page.tsx
Normal file
153
src/app/menu/page.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Menu, MapPin, Clock, Phone } from "lucide-react";
|
||||
|
||||
export default function MenuPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Menu", id: "menu" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const menuCategories = [
|
||||
{
|
||||
id: 1,
|
||||
tag: "Appetizers", title: "Starters & Bites", subtitle: "Perfect for sharing", description: "Fresh handcrafted appetizers to kick off your meal. From crispy bruschetta to artisan cheese boards, each bite is made with premium ingredients and authentic recipes.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-vibrant-collage-of-authentic-user-gene-1773787782155-a937a412.png", imageAlt: "Appetizers and starters", buttons: [
|
||||
{ text: "View Details", href: "#appetizers" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
tag: "Main Courses", title: "Signature Dishes", subtitle: "Chef's specialties", description: "Our bestselling main courses prepared fresh to order. From succulent steaks to perfectly prepared seafood, each dish showcases our culinary excellence and commitment to quality.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-warm-inviting-restaurant-environment-s-1773787782695-76591905.png", imageAlt: "Main courses", buttons: [
|
||||
{ text: "View Details", href: "#mains" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
tag: "Desserts", title: "Sweet Endings", subtitle: "Crafted confections", description: "Indulge in our decadent desserts made fresh daily. From classic favorites to innovative creations, each dessert is a celebration of flavor and artistry.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-split-screen-showing-the-before-and-af-1773787783817-cf650179.png", imageAlt: "Desserts", buttons: [
|
||||
{ text: "View Details", href: "#desserts" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
tag: "Beverages", title: "Drinks & Refreshments", subtitle: "Premium selections", description: "Curated drinks from craft cocktails and premium wines to fresh juices and specialty coffee. Each beverage is thoughtfully selected to complement your meal.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-gamified-rewards-dashboard-showing-a-c-1773787782724-e3baaa49.png", imageAlt: "Beverages", buttons: [
|
||||
{ text: "View Details", href: "#beverages" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="grid"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Restaurant Menu"
|
||||
bottomLeftText="Experience Excellence"
|
||||
bottomRightText="Open Daily 11AM - 10PM"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full py-8 md:py-12 lg:py-16 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
|
||||
<div className="max-w-6xl mx-auto px-4 md:px-6">
|
||||
<div className="text-center mb-8 md:mb-12">
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
||||
Our Digital Menu
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 mb-6 md:mb-8">
|
||||
Explore our carefully crafted offerings
|
||||
</p>
|
||||
<div className="flex flex-col md:flex-row gap-4 md:gap-6 justify-center items-center text-gray-700 dark:text-gray-300 text-sm md:text-base">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-5 h-5" />
|
||||
<span>123 Main Street</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-5 h-5" />
|
||||
<span>Open 11AM - 10PM</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="w-5 h-5" />
|
||||
<span>(555) 123-4567</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<FeatureCardNineteen
|
||||
title="Menu Categories"
|
||||
description="Discover our full range of culinary creations, each prepared with passion and premium ingredients."
|
||||
tag="Dining Experience"
|
||||
tagIcon={Menu}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={menuCategories}
|
||||
buttonAnimation="opacity"
|
||||
buttons={[
|
||||
{
|
||||
text: "Download Full Menu (PDF)", href: "#"},
|
||||
{
|
||||
text: "Make a Reservation", href: "#"},
|
||||
]}
|
||||
ariaLabel="Digital restaurant menu with all categories"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full py-8 md:py-12 lg:py-16 bg-gray-50 dark:bg-gray-900">
|
||||
<div className="max-w-6xl mx-auto px-4 md:px-6">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 md:p-8 shadow-lg">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4 md:mb-6">
|
||||
Loyalty Rewards Program
|
||||
</h2>
|
||||
<p className="text-gray-700 dark:text-gray-300 mb-4 md:mb-6">
|
||||
Every visit earns you points! Submit your dining experience photos and videos using our QR code to collect rewards and unlock exclusive benefits.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
|
||||
<div className="p-4 md:p-5 bg-blue-50 dark:bg-blue-900/30 rounded-lg">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Earn Points</h3>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">1 point per dollar spent + bonus points for submissions</p>
|
||||
</div>
|
||||
<div className="p-4 md:p-5 bg-green-50 dark:bg-green-900/30 rounded-lg">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Redeem Rewards</h3>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">Free meals, discounts, and exclusive member perks</p>
|
||||
</div>
|
||||
<div className="p-4 md:p-5 bg-purple-50 dark:bg-purple-900/30 rounded-lg">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">Share & Earn</h3>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">Extra points when your content is featured</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Restaurant"
|
||||
leftLink={{
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service", href: "#"}}
|
||||
ariaLabel="Restaurant menu footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
436
src/app/page.tsx
436
src/app/page.tsx
@@ -11,15 +11,98 @@ import TestimonialCardThirteen from "@/components/sections/testimonial/Testimoni
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Sparkles, Target, Zap, TrendingUp, Heart, DollarSign, Award, MessageCircle, HelpCircle, Users, BarChart3 } from "lucide-react";
|
||||
import { Sparkles, Target, Zap, TrendingUp, Heart, DollarSign, Award, MessageCircle, HelpCircle, Users, BarChart3, Zap as Login, Gift, Star, Trophy } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function HomePage() {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [userPoints, setUserPoints] = useState(0);
|
||||
const [showRewardsPanel, setShowRewardsPanel] = useState(false);
|
||||
|
||||
// Initialize user session from localStorage
|
||||
useEffect(() => {
|
||||
const savedUser = localStorage.getItem("scaleUserData");
|
||||
if (savedUser) {
|
||||
try {
|
||||
const userData = JSON.parse(savedUser);
|
||||
setIsLoggedIn(true);
|
||||
setUserPoints(userData.points || 0);
|
||||
} catch (e) {
|
||||
console.log("Error loading user data");
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Reward tiers
|
||||
const rewardTiers = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Bronze Member", pointsRequired: 0,
|
||||
rewards: ["Free appetizer"],
|
||||
icon: "🥉"},
|
||||
{
|
||||
id: 2,
|
||||
name: "Silver Member", pointsRequired: 100,
|
||||
rewards: ["Free main course", "10% discount"],
|
||||
icon: "🥈"},
|
||||
{
|
||||
id: 3,
|
||||
name: "Gold Member", pointsRequired: 250,
|
||||
rewards: ["Free dessert", "15% discount", "Priority support"],
|
||||
icon: "🥇"},
|
||||
{
|
||||
id: 4,
|
||||
name: "Platinum Member", pointsRequired: 500,
|
||||
rewards: ["Free month of service", "20% discount", "VIP events", "Exclusive perks"],
|
||||
icon: "💎"},
|
||||
];
|
||||
|
||||
const handleLogin = () => {
|
||||
const userData = {
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
points: 50,
|
||||
joinedDate: new Date().toISOString(),
|
||||
};
|
||||
localStorage.setItem("scaleUserData", JSON.stringify(userData));
|
||||
setIsLoggedIn(true);
|
||||
setUserPoints(userData.points);
|
||||
};
|
||||
|
||||
const handleVideoSubmit = () => {
|
||||
const savedUser = localStorage.getItem("scaleUserData");
|
||||
if (savedUser) {
|
||||
const userData = JSON.parse(savedUser);
|
||||
userData.points = (userData.points || 0) + 25;
|
||||
localStorage.setItem("scaleUserData", JSON.stringify(userData));
|
||||
setUserPoints(userData.points);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFrequentVisit = () => {
|
||||
const savedUser = localStorage.getItem("scaleUserData");
|
||||
if (savedUser) {
|
||||
const userData = JSON.parse(savedUser);
|
||||
userData.points = (userData.points || 0) + 10;
|
||||
localStorage.setItem("scaleUserData", JSON.stringify(userData));
|
||||
setUserPoints(userData.points);
|
||||
}
|
||||
};
|
||||
|
||||
const getCurrentTier = () => {
|
||||
return rewardTiers.reduce((tier, current) => {
|
||||
if (userPoints >= current.pointsRequired) {
|
||||
return current;
|
||||
}
|
||||
return tier;
|
||||
}, rewardTiers[0]);
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "How It Works", id: "how-it-works" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "For Brands", id: "for-brands" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Rewards", id: "rewards" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
@@ -40,11 +123,68 @@ export default function HomePage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="Scale Social"
|
||||
bottomLeftText="Transform Content into Revenue"
|
||||
bottomRightText="hello@scalesocial.com"
|
||||
bottomLeftText={isLoggedIn ? `${userPoints} Points` : "Transform Content into Revenue"}
|
||||
bottomRightText={isLoggedIn ? "Account" : "hello@scalesocial.com"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isLoggedIn && (
|
||||
<div className="fixed top-20 right-6 z-40 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-lg max-w-xs">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Your Rewards</h3>
|
||||
<button
|
||||
onClick={() => setShowRewardsPanel(!showRewardsPanel)}
|
||||
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<p className="text-2xl font-bold text-blue-600 dark:text-blue-400">{userPoints}</p>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Total Points</p>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{getCurrentTier().icon} {getCurrentTier().name}
|
||||
</p>
|
||||
<div className="bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${Math.min(
|
||||
(userPoints / getCurrentTier().pointsRequired) * 100,
|
||||
100
|
||||
)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
|
||||
{getCurrentTier().rewards.map((reward, idx) => (
|
||||
<div key={idx}>✓ {reward}</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowRewardsPanel(false)}
|
||||
className="mt-3 w-full text-xs bg-blue-600 hover:bg-blue-700 text-white py-1 rounded transition-colors"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoggedIn && (
|
||||
<div className="fixed top-20 right-6 z-40 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-lg">
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">Join now to earn rewards</p>
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded font-medium transition-colors"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
title="Transform Customer Stories into Marketing Power"
|
||||
@@ -54,45 +194,28 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Start for Free",
|
||||
href: "#contact",
|
||||
},
|
||||
text: isLoggedIn ? "Submit Content" : "Start for Free", href: isLoggedIn ? "#rewards" : "#contact"},
|
||||
{
|
||||
text: "See Demo",
|
||||
href: "/how-it-works",
|
||||
},
|
||||
text: "See Demo", href: "#how-it-works"},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-vibrant-collage-of-authentic-user-gene-1773787782155-a937a412.png",
|
||||
imageAlt: "Authentic user-generated content gallery",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-vibrant-collage-of-authentic-user-gene-1773787782155-a937a412.png", imageAlt: "Authentic user-generated content gallery"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-mobile-phone-screen-showing-a-customer-1773787783282-5029cdce.png?_wi=1",
|
||||
imageAlt: "Customer scanning QR code for incentives",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-mobile-phone-screen-showing-a-customer-1773787783282-5029cdce.png?_wi=1", imageAlt: "Customer scanning QR code for incentives"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-gamified-rewards-dashboard-showing-a-c-1773787782724-e3baaa49.png?_wi=1",
|
||||
imageAlt: "Gamified loyalty rewards dashboard",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-gamified-rewards-dashboard-showing-a-c-1773787782724-e3baaa49.png?_wi=1", imageAlt: "Gamified loyalty rewards dashboard"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-split-screen-showing-the-before-and-af-1773787783817-cf650179.png?_wi=1",
|
||||
imageAlt: "AI-enhanced content transformation",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-split-screen-showing-the-before-and-af-1773787783817-cf650179.png?_wi=1", imageAlt: "AI-enhanced content transformation"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-content-distribution-dashboard-showing-1773787782906-2f473b05.png?_wi=1",
|
||||
imageAlt: "Multi-channel content distribution",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-content-distribution-dashboard-showing-1773787782906-2f473b05.png?_wi=1", imageAlt: "Multi-channel content distribution"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-warm-inviting-restaurant-environment-s-1773787782695-76591905.png",
|
||||
imageAlt: "Restaurant partnership and collaboration",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-warm-inviting-restaurant-environment-s-1773787782695-76591905.png", imageAlt: "Restaurant partnership and collaboration"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
ariaLabel="Scale Social hero section showcasing platform capabilities"
|
||||
/>
|
||||
</div>
|
||||
@@ -105,9 +228,7 @@ export default function HomePage() {
|
||||
title="Bridging Authenticity and Scalability"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "/how-it-works",
|
||||
},
|
||||
text: "Learn More", href: "#how-it-works"},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
useInvertedBackground={true}
|
||||
@@ -127,51 +248,25 @@ export default function HomePage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
tag: "Collection",
|
||||
title: "Smart QR Integration",
|
||||
subtitle: "Seamless customer participation",
|
||||
description: "Customers scan QR codes at point-of-sale to access digital menus and submit content. Optional login creates loyalty profiles while maintaining accessibility for all visitors.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-mobile-phone-screen-showing-a-customer-1773787783282-5029cdce.png?_wi=2",
|
||||
imageAlt: "QR code scanning interface",
|
||||
buttons: [],
|
||||
tag: "Collection", title: "Smart QR Integration", subtitle: "Seamless customer participation", description: "Customers scan QR codes at point-of-sale to access digital menus and submit content. Optional login creates loyalty profiles while maintaining accessibility for all visitors.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-mobile-phone-screen-showing-a-customer-1773787783282-5029cdce.png?_wi=2", imageAlt: "QR code scanning interface", buttons: [],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
tag: "Rewards",
|
||||
title: "Points-Based Loyalty System",
|
||||
subtitle: "Incentivize ongoing engagement",
|
||||
description: "Customers earn points for every submission and return visit. Accumulated points unlock rewards like free desserts, exclusive offers, and partner benefits—driving repeat business and continuous content flow.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-gamified-rewards-dashboard-showing-a-c-1773787782724-e3baaa49.png?_wi=2",
|
||||
imageAlt: "Rewards and points dashboard",
|
||||
buttons: [],
|
||||
tag: "Rewards", title: "Points-Based Loyalty System", subtitle: "Incentivize ongoing engagement", description: "Customers earn points for every submission and return visit. Accumulated points unlock rewards like free desserts, exclusive offers, and partner benefits—driving repeat business and continuous content flow.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-gamified-rewards-dashboard-showing-a-c-1773787782724-e3baaa49.png?_wi=2", imageAlt: "Rewards and points dashboard", buttons: [],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
tag: "Enhancement",
|
||||
title: "AI-Powered Content Optimization",
|
||||
subtitle: "Professional quality, instantly",
|
||||
description: "Our AI automatically enhances customer submissions—optimizing lighting, sound, colors, and composition. Transform raw videos and photos into broadcast-ready marketing assets without manual editing.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-split-screen-showing-the-before-and-af-1773787783817-cf650179.png?_wi=2",
|
||||
imageAlt: "AI content enhancement interface",
|
||||
buttons: [],
|
||||
tag: "Enhancement", title: "AI-Powered Content Optimization", subtitle: "Professional quality, instantly", description: "Our AI automatically enhances customer submissions—optimizing lighting, sound, colors, and composition. Transform raw videos and photos into broadcast-ready marketing assets without manual editing.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-split-screen-showing-the-before-and-af-1773787783817-cf650179.png?_wi=2", imageAlt: "AI content enhancement interface", buttons: [],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
tag: "Distribution",
|
||||
title: "Multi-Channel Publishing",
|
||||
subtitle: "Amplify across all platforms",
|
||||
description: "Automatically distribute polished content to social media, email campaigns, websites, and advertising platforms. One submission, infinite reach—maximizing ROI on every customer story.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-content-distribution-dashboard-showing-1773787782906-2f473b05.png?_wi=2",
|
||||
imageAlt: "Content distribution dashboard",
|
||||
buttons: [],
|
||||
tag: "Distribution", title: "Multi-Channel Publishing", subtitle: "Amplify across all platforms", description: "Automatically distribute polished content to social media, email campaigns, websites, and advertising platforms. One submission, infinite reach—maximizing ROI on every customer story.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-content-distribution-dashboard-showing-1773787782906-2f473b05.png?_wi=2", imageAlt: "Content distribution dashboard", buttons: [],
|
||||
},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore All Features",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Explore All Features", href: "#contact"},
|
||||
]}
|
||||
ariaLabel="Scale Social core features and capabilities"
|
||||
/>
|
||||
@@ -188,32 +283,16 @@ export default function HomePage() {
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "5x",
|
||||
title: "More Content",
|
||||
description: "Average increase in monthly marketing content volume",
|
||||
icon: BarChart3,
|
||||
id: "1", value: "5x", title: "More Content", description: "Average increase in monthly marketing content volume", icon: BarChart3,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "3x",
|
||||
title: "Higher Engagement",
|
||||
description: "User-generated content attracts more interactions than branded content",
|
||||
icon: Heart,
|
||||
id: "2", value: "3x", title: "Higher Engagement", description: "User-generated content attracts more interactions than branded content", icon: Heart,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "40%",
|
||||
title: "Cost Reduction",
|
||||
description: "Lower content creation costs compared to traditional production",
|
||||
icon: DollarSign,
|
||||
id: "3", value: "40%", title: "Cost Reduction", description: "Lower content creation costs compared to traditional production", icon: DollarSign,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
value: "90%",
|
||||
title: "Customer Loyalty",
|
||||
description: "Customers participating in rewards earn higher lifetime value",
|
||||
icon: Award,
|
||||
id: "4", value: "90%", title: "Customer Loyalty", description: "Customers participating in rewards earn higher lifetime value", icon: Award,
|
||||
},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
@@ -224,6 +303,96 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="rewards" data-section="rewards" className="py-16 px-6">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">Rewards Tiers</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-6">
|
||||
Earn points and unlock exclusive rewards as you engage with our platform
|
||||
</p>
|
||||
{isLoggedIn && (
|
||||
<div className="inline-block bg-blue-100 dark:bg-blue-900 px-4 py-2 rounded-lg">
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">
|
||||
Current Tier: <span className="font-bold text-blue-600 dark:text-blue-300">{getCurrentTier().name}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||||
{rewardTiers.map((tier) => (
|
||||
<div
|
||||
key={tier.id}
|
||||
className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition-shadow bg-white dark:bg-gray-900"
|
||||
>
|
||||
<div className="text-4xl mb-3">{tier.icon}</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{tier.name}</h3>
|
||||
<p className="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">{tier.pointsRequired}+ Points</p>
|
||||
<div className="space-y-2">
|
||||
{tier.rewards.map((reward, idx) => (
|
||||
<p key={idx} className="text-sm text-gray-600 dark:text-gray-400">✓ {reward}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
|
||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-800 rounded-lg p-6">
|
||||
<Gift className="w-8 h-8 text-blue-600 dark:text-blue-300 mb-3" />
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">Submit a Video</h3>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">Earn 25 points for each video submission</p>
|
||||
{isLoggedIn && (
|
||||
<button
|
||||
onClick={handleVideoSubmit}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded font-medium transition-colors"
|
||||
>
|
||||
Submit Video
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900 dark:to-green-800 rounded-lg p-6">
|
||||
<Star className="w-8 h-8 text-green-600 dark:text-green-300 mb-3" />
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">Frequent Visits</h3>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">Earn 10 points for each visit to a partner location</p>
|
||||
{isLoggedIn && (
|
||||
<button
|
||||
onClick={handleFrequentVisit}
|
||||
className="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded font-medium transition-colors"
|
||||
>
|
||||
Log Visit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900 dark:to-purple-800 rounded-lg p-6">
|
||||
<Trophy className="w-8 h-8 text-purple-600 dark:text-purple-300 mb-3" />
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">Leaderboard</h3>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">Top contributors earn exclusive monthly prizes</p>
|
||||
{isLoggedIn && (
|
||||
<button className="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded font-medium transition-colors">
|
||||
View Leaderboard
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isLoggedIn && (
|
||||
<div className="text-center bg-blue-50 dark:bg-blue-900 rounded-lg p-8">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">Ready to start earning rewards?</h3>
|
||||
<p className="text-gray-700 dark:text-gray-300 mb-6">Sign in to begin submitting content and tracking your points</p>
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-semibold transition-colors"
|
||||
>
|
||||
Sign In Now
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
title="What Our Partners Say"
|
||||
@@ -236,49 +405,23 @@ export default function HomePage() {
|
||||
showRating={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Maria Rodriguez",
|
||||
handle: "Restaurant Owner",
|
||||
testimonial: "Scale Social transformed how we market our restaurant. Our customers love earning rewards for sharing their experiences, and the quality of content we're getting is incredible. Our social media engagement increased by 300% in just three months.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/professional-headshot-of-a-diverse-resta-1773787781592-b364fc2d.png",
|
||||
imageAlt: "Maria Rodriguez, restaurant owner",
|
||||
},
|
||||
id: "1", name: "Maria Rodriguez", handle: "Restaurant Owner", testimonial: "Scale Social transformed how we market our restaurant. Our customers love earning rewards for sharing their experiences, and the quality of content we're getting is incredible. Our social media engagement increased by 300% in just three months.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/professional-headshot-of-a-diverse-resta-1773787781592-b364fc2d.png", imageAlt: "Maria Rodriguez, restaurant owner"},
|
||||
{
|
||||
id: "2",
|
||||
name: "James Chen",
|
||||
handle: "Marketing Director",
|
||||
testimonial: "The AI enhancement feature is a game-changer. We're getting professional-quality content from customers without the production headaches. Our cost per piece of content dropped dramatically while quality went up.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/professional-headshot-of-a-creative-mark-1773787781413-1c592e38.png",
|
||||
imageAlt: "James Chen, marketing director",
|
||||
},
|
||||
id: "2", name: "James Chen", handle: "Marketing Director", testimonial: "The AI enhancement feature is a game-changer. We're getting professional-quality content from customers without the production headaches. Our cost per piece of content dropped dramatically while quality went up.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/professional-headshot-of-a-creative-mark-1773787781413-1c592e38.png", imageAlt: "James Chen, marketing director"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sarah Thompson",
|
||||
handle: "Brand Manager",
|
||||
testimonial: "Authenticity is everything in marketing today. Scale Social helps us tap into real customer stories at scale. The loyalty system keeps customers coming back, and the content keeps flowing. It's a win-win.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/professional-headshot-of-a-brand-manager-1773787783005-3a48ffbe.png",
|
||||
imageAlt: "Sarah Thompson, brand manager",
|
||||
},
|
||||
id: "3", name: "Sarah Thompson", handle: "Brand Manager", testimonial: "Authenticity is everything in marketing today. Scale Social helps us tap into real customer stories at scale. The loyalty system keeps customers coming back, and the content keeps flowing. It's a win-win.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/professional-headshot-of-a-brand-manager-1773787783005-3a48ffbe.png", imageAlt: "Sarah Thompson, brand manager"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Alex Kumar",
|
||||
handle: "Digital Marketing Manager",
|
||||
testimonial: "The multi-channel distribution is seamless. We collect content once and it automatically goes to all our platforms. The time savings alone have justified the investment, not to mention the quality of content.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/professional-headshot-of-a-digital-marke-1773787781818-a51a2d38.png",
|
||||
imageAlt: "Alex Kumar, digital marketing manager",
|
||||
},
|
||||
id: "4", name: "Alex Kumar", handle: "Digital Marketing Manager", testimonial: "The multi-channel distribution is seamless. We collect content once and it automatically goes to all our platforms. The time savings alone have justified the investment, not to mention the quality of content.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/professional-headshot-of-a-digital-marke-1773787781818-a51a2d38.png", imageAlt: "Alex Kumar, digital marketing manager"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
buttonAnimation="opacity"
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Your Free Trial",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Start Your Free Trial", href: "#contact"},
|
||||
]}
|
||||
ariaLabel="Customer testimonials and success stories"
|
||||
/>
|
||||
@@ -296,42 +439,22 @@ export default function HomePage() {
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do customers participate in Scale Social?",
|
||||
content: "Customers simply scan a QR code at a partner location (like a restaurant). They can access the menu without logging in, or optionally create an account to participate in the content submission and rewards program. It's completely voluntary and non-intrusive.",
|
||||
},
|
||||
id: "1", title: "How do customers participate in Scale Social?", content: "Customers simply scan a QR code at a partner location (like a restaurant). They can access the menu without logging in, or optionally create an account to participate in the content submission and rewards program. It's completely voluntary and non-intrusive."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How are customers rewarded for their content?",
|
||||
content: "Customers earn points each time they submit content or return to the same business. These points accumulate and can be redeemed for tangible rewards like free desserts, exclusive offers, discounts, or partner perks. The more engaged they are, the more they earn.",
|
||||
},
|
||||
id: "2", title: "How are customers rewarded for their content?", content: "Customers earn points each time they submit content or return to the same business. These points accumulate and can be redeemed for tangible rewards like free desserts, exclusive offers, discounts, or partner perks. The more engaged they are, the more they earn."},
|
||||
{
|
||||
id: "3",
|
||||
title: "How does the AI enhancement work?",
|
||||
content: "Our AI analyzes each customer submission and automatically optimizes it—adjusting lighting, color grading, sound quality, and composition to professional standards. The process takes seconds and requires no manual intervention. You get broadcast-ready content instantly.",
|
||||
},
|
||||
id: "3", title: "How does the AI enhancement work?", content: "Our AI analyzes each customer submission and automatically optimizes it—adjusting lighting, color grading, sound quality, and composition to professional standards. The process takes seconds and requires no manual intervention. You get broadcast-ready content instantly."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Can businesses use their existing social media accounts?",
|
||||
content: "Yes! Scale Social integrates with major social platforms like Instagram, Facebook, TikTok, and LinkedIn. You can connect your existing accounts, and our platform automatically publishes optimized content on your schedule.",
|
||||
},
|
||||
id: "4", title: "Can businesses use their existing social media accounts?", content: "Yes! Scale Social integrates with major social platforms like Instagram, Facebook, TikTok, and LinkedIn. You can connect your existing accounts, and our platform automatically publishes optimized content on your schedule."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Is customer data secure and private?",
|
||||
content: "Absolutely. We comply with all data protection regulations including GDPR and CCPA. Customer content is only used with explicit permission, and all data is encrypted and securely stored. Customers maintain full control over their submissions.",
|
||||
},
|
||||
id: "5", title: "Is customer data secure and private?", content: "Absolutely. We comply with all data protection regulations including GDPR and CCPA. Customer content is only used with explicit permission, and all data is encrypted and securely stored. Customers maintain full control over their submissions."},
|
||||
{
|
||||
id: "6",
|
||||
title: "What happens if we want to stop using Scale Social?",
|
||||
content: "You can cancel anytime with no long-term contracts. All your customer content remains accessible for download. We make it easy to transition while maintaining your customer relationships and loyalty history.",
|
||||
},
|
||||
id: "6", title: "What happens if we want to stop using Scale Social?", content: "You can cancel anytime with no long-term contracts. All your customer content remains accessible for download. We make it easy to transition while maintaining your customer relationships and loyalty history."},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
buttons={[
|
||||
{
|
||||
text: "Still have questions?",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Still have questions?", href: "#contact"},
|
||||
]}
|
||||
ariaLabel="Frequently asked questions about Scale Social"
|
||||
/>
|
||||
@@ -348,22 +471,13 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
names={[]}
|
||||
logos={[
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-modern-minimalist-restaurant-brand-log-1773787780768-28ac6ff1.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-professional-hospitality-or-tourism-br-1773787782141-4cc679cd.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-food-and-beverage-brand-logo-with-mode-1773787781729-a2f848e7.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-customer-engagement-or-loyalty-program-1773787783262-96780ae1.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-digital-marketing-or-content-creation--1773787781830-1fd654d4.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-social-media-or-community-focused-bran-1773787781981-7c11975a.png",
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-technology-or-ai-focused-brand-logo-re-1773787782799-55265bf1.png",
|
||||
]}
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-modern-minimalist-restaurant-brand-log-1773787780768-28ac6ff1.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-professional-hospitality-or-tourism-br-1773787782141-4cc679cd.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-food-and-beverage-brand-logo-with-mode-1773787781729-a2f848e7.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-customer-engagement-or-loyalty-program-1773787783262-96780ae1.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-digital-marketing-or-content-creation--1773787781830-1fd654d4.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-social-media-or-community-focused-bran-1773787781981-7c11975a.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B5nFw8RqotNHgAYizCWg1FWKB6/a-technology-or-ai-focused-brand-logo-re-1773787782799-55265bf1.png"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
buttonAnimation="opacity"
|
||||
buttons={[
|
||||
{
|
||||
text: "Become a Partner",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Become a Partner", href: "#contact"},
|
||||
]}
|
||||
ariaLabel="Partner brands and companies using Scale Social"
|
||||
/>
|
||||
@@ -373,13 +487,9 @@ export default function HomePage() {
|
||||
<FooterLogoReveal
|
||||
logoText="Scale Social"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Terms of Service", href: "#"}}
|
||||
ariaLabel="Scale Social footer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user