bender/b6bbdcee-b7a0-4f48-8ca3-76a96a44c931
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_2 bender:version_1
...
pull from: bender:version_2
Branches Tags
bender:main bender:version_2 bender:version_1

3 Commits
version_1 ... version_2

Author SHA1 Message Date
bender
26ba670936 Update src/app/page.tsx 2026-03-09 20:53:33 +00:00
bender
cd3e40cb3e Update src/app/layout.tsx 2026-03-09 20:53:33 +00:00
bender
30ade3a156 Merge version_1 into main 
Merge version_1 into main
 2026-03-09 20:51:53 +00:00
2 changed files with 59 additions and 59 deletions
Expand all files Collapse all files

38
src/app/layout.tsx
View File

@@ -1,45 +1,20 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import { Manrope } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const halant = Halant({
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const manrope = Manrope({
variable: "--font-manrope", subsets: ["latin"],
});
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Neon Sign Builder - Custom Neon Design & Ordering", description: "Create custom neon signs with real-time preview, live pricing calculator, and instant WhatsApp ordering. Design your perfect neon in minutes.", keywords: "neon sign builder, custom neon, LED neon, sign designer, online neon builder, neon customizer, create neon signs", robots: {
index: true,
follow: true,
},
};
title: "Create Custom Neon Signs | NeonBuilder", description: "Design stunning custom neon signs with real-time preview, dynamic pricing, and instant WhatsApp ordering. Create your perfect neon in seconds."};
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${halant.variable} ${inter.variable} ${manrope.variable} antialiased`}
>
<Tag />
{children}
<html lang="en">
<body className={inter.className}>{children}
<script
dangerouslySetInnerHTML={{
__html: `
@@ -1407,7 +1382,6 @@ export default function RootLayout({
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

80
src/app/page.tsx
View File

@@ -37,7 +37,8 @@ export default function LandingPage() {
{ name: "Contact", id: "contact" },
]}
button={{
text: "Start Customizing", href: "#builder"}}
text: "Start Customizing", href: "#builder"
}}
/>
</div>
@@ -83,22 +84,28 @@ export default function LandingPage() {
features={[
{
icon: Type,
title: "Text Input", description: "Enter your custom text and watch it transform into glowing neon in real-time"},
title: "Text Input", description: "Enter your custom text and watch it transform into glowing neon in real-time"
},
{
icon: Palette,
title: "Color Picker", description: "Choose from hundreds of vibrant neon colors to match your style perfectly"},
title: "Color Picker", description: "Choose from hundreds of vibrant neon colors to match your style perfectly"
},
{
icon: Maximize2,
title: "Size Selector", description: "Select from Small (40-60cm), Medium (60-90cm), or Large (90-120cm) sizes"},
title: "Size Selector", description: "Select from Small (40-60cm), Medium (60-90cm), or Large (90-120cm) sizes"
},
{
icon: Square,
title: "Backboard Options", description: "Choose cut-to-shape, rectangle, or round backboards for your neon sign"},
title: "Backboard Options", description: "Choose cut-to-shape, rectangle, or round backboards for your neon sign"
},
{
icon: Zap,
title: "Mounting Solutions", description: "Wall screws, hanging kits, or stands - we have the perfect mounting for you"},
title: "Mounting Solutions", description: "Wall screws, hanging kits, or stands - we have the perfect mounting for you"
},
{
icon: DollarSign,
title: "Auto Price Calculator", description: "Real-time pricing updates based on letter count, size, and customizations"},
title: "Auto Price Calculator", description: "Real-time pricing updates based on letter count, size, and customizations"
},
]}
textboxLayout="default"
animationType="slide-up"
@@ -109,28 +116,32 @@ export default function LandingPage() {
<div id="pricing" data-section="pricing">
<PricingCardOne
title="Transparent Pricing"
description="Our pricing is straightforward and scales with your design complexity"
description="Starting at €18/letter — Join 500+ Happy Customers. Our pricing is straightforward and scales with your design complexity"
tag="Pricing"
plans={[
{
id: "letters-1-3", badge: "Small Text", badgeIcon: Type,
price: "€30/letter", subtitle: "1-3 letters", features: [
"Perfect for initials", "Individual letters or monograms", "Great for personal use", "Quick customization"],
"Perfect for initials", "Individual letters or monograms", "Great for personal use", "Quick customization"
],
},
{
id: "letters-4-7", badge: "Standard", badgeIcon: Sparkles,
price: "€25/letter", subtitle: "4-7 letters", features: [
"Short names and words", "Best for storefronts", "Popular choice", "Great value"],
"Short names and words", "Best for storefronts", "Popular choice", "Great value"
],
},
{
id: "letters-8-11", badge: "Extended", badgeIcon: Sparkles,
price: "€22/letter", subtitle: "8-11 letters", features: [
"Longer phrases supported", "Bulk discount applied", "Professional signs", "Maximum flexibility"],
"Longer phrases supported", "Bulk discount applied", "Professional signs", "Maximum flexibility"
],
},
{
id: "letters-12plus", badge: "Premium", badgeIcon: Crown,
price: "€18/letter", subtitle: "12+ letters", features: [
"Full sentence support", "Best value pricing", "Custom dimensions", "Enterprise solutions"],
"Full sentence support", "Best value pricing", "Custom dimensions", "Enterprise solutions"
],
},
]}
textboxLayout="default"
@@ -147,16 +158,20 @@ export default function LandingPage() {
testimonials={[
{
id: "1", name: "Sarah Martinez", role: "Cafe Owner", company: "The Glow Cafe", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands-d_1258-123449.jpg", imageAlt: "Sarah Martinez, Cafe Owner"},
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands-d_1258-123449.jpg", imageAlt: "Sarah Martinez, Cafe Owner"
},
{
id: "2", name: "Marcus Chen", role: "Boutique Manager", company: "Urban Fashion Studio", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-female-employee-working-remotely-takes-selfie-with-smartphone-break-home-office_482257-135020.jpg", imageAlt: "Marcus Chen, Boutique Manager"},
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-female-employee-working-remotely-takes-selfie-with-smartphone-break-home-office_482257-135020.jpg", imageAlt: "Marcus Chen, Boutique Manager"
},
{
id: "3", name: "Jessica Thompson", role: "Bar Owner", company: "Neon Nights Lounge", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-apron_23-2149007469.jpg", imageAlt: "Jessica Thompson, Bar Owner"},
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-wearing-apron_23-2149007469.jpg", imageAlt: "Jessica Thompson, Bar Owner"
},
{
id: "4", name: "David Rodriguez", role: "Event Coordinator", company: "Creative Events Co", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg", imageAlt: "David Rodriguez, Event Coordinator"},
imageSrc: "http://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg", imageAlt: "David Rodriguez, Event Coordinator"
},
]}
gridVariant="uniform-all-items-equal"
textboxLayout="default"
@@ -172,17 +187,23 @@ export default function LandingPage() {
tag="Help"
faqs={[
{
id: "1", title: "How does the real-time preview work?", content: "Our advanced neon preview engine uses CSS text-shadow effects and glowing animations to simulate authentic neon tube lighting. As you adjust text, colors, fonts, and sizes, the preview updates instantly to show exactly how your final sign will look."},
id: "1", title: "How does the real-time preview work?", content: "Our advanced neon preview engine uses CSS text-shadow effects and glowing animations to simulate authentic neon tube lighting. As you adjust text, colors, fonts, and sizes, the preview updates instantly to show exactly how your final sign will look."
},
{
id: "2", title: "What fonts are available?", content: "We offer 4+ distinctive font styles including handwriting-style scripts, simple geometric fonts, tube-style fonts that mimic actual neon tubes, and decorative fonts. Each font is optimized for neon display to ensure maximum visual impact."},
id: "2", title: "What fonts are available?", content: "We offer 4+ distinctive font styles including handwriting-style scripts, simple geometric fonts, tube-style fonts that mimic actual neon tubes, and decorative fonts. Each font is optimized for neon display to ensure maximum visual impact."
},
{
id: "3", title: "How is pricing calculated?", content: "Pricing is based on four factors: (1) letter count determines base price per letter, (2) size multiplies the total (Medium 1.4x, Large 1.8x), (3) backboard type adds cost (Rectangle +€20, Round +€30), (4) mounting option adds cost (Hanging Kit +€10, Stand +€15)."},
id: "3", title: "How is pricing calculated?", content: "Pricing is based on four factors: (1) letter count determines base price per letter, (2) size multiplies the total (Medium 1.4x, Large 1.8x), (3) backboard type adds cost (Rectangle +€20, Round +€30), (4) mounting option adds cost (Hanging Kit +€10, Stand +€15)."
},
{
id: "4", title: "What is the estimated neon width?", content: "Our system automatically calculates the approximate width in centimeters based on your letter count and selected font. The calculation factors in spacing and font width to give you an accurate estimate before ordering."},
id: "4", title: "What is the estimated neon width?", content: "Our system automatically calculates the approximate width in centimeters based on your letter count and selected font. The calculation factors in spacing and font width to give you an accurate estimate before ordering."
},
{
id: "5", title: "How do I order?", content: "Once you're happy with your design and see the final price, click the 'Order on WhatsApp' button. This will automatically send your neon text, selected options, and total price to our team via WhatsApp for instant confirmation and next steps."},
id: "5", title: "How do I order?", content: "Once you're happy with your design and see the final price, click the 'Order on WhatsApp' button. This will automatically send your neon text, selected options, and total price to our team via WhatsApp for instant confirmation and next steps."
},
{
id: "6", title: "What backboard options do you offer?", content: "We provide three backboard styles: Cut-to-Shape (custom fitted), Rectangle (classic standard option), and Round (modern circular design). Each can be combined with your chosen mounting solution."},
id: "6", title: "What backboard options do you offer?", content: "We provide three backboard styles: Cut-to-Shape (custom fitted), Rectangle (classic standard option), and Round (modern circular design). Each can be combined with your chosen mounting solution."
},
]}
textboxLayout="default"
faqsAnimation="slide-up"
@@ -196,16 +217,21 @@ export default function LandingPage() {
ctaDescription="Design your custom neon sign now with our interactive builder. Real-time preview, transparent pricing, and instant WhatsApp ordering."
ctaIcon={Zap}
ctaButton={{
text: "Start Designing Now", href: "#builder"}}
text: "Start Designing Now", href: "#builder"
}}
faqs={[
{
id: "1", title: "How long does it take to create a design?", content: "Most customers complete their design in 2-5 minutes using our intuitive builder. You can customize text, colors, fonts, and all options in real-time."},
id: "1", title: "How long does it take to create a design?", content: "Most customers complete their design in 2-5 minutes using our intuitive builder. You can customize text, colors, fonts, and all options in real-time."
},
{
id: "2", title: "Can I save my designs?", content: "Your design is preserved in your browser session. When you're ready to order, simply click WhatsApp and our team will help finalize your creation."},
id: "2", title: "Can I save my designs?", content: "Your design is preserved in your browser session. When you're ready to order, simply click WhatsApp and our team will help finalize your creation."
},
{
id: "3", title: "What payment methods do you accept?", content: "We accept all major payment methods. Your payment details will be confirmed through WhatsApp after you place your order through our builder."},
id: "3", title: "What payment methods do you accept?", content: "We accept all major payment methods. Your payment details will be confirmed through WhatsApp after you place your order through our builder."
},
{
id: "4", title: "How fast can I receive my neon sign?", content: "Standard production takes 7-14 business days. Our team will provide exact timeline once you place your order through WhatsApp."},
id: "4", title: "How fast can I receive my neon sign?", content: "Standard production takes 7-14 business days. Our team will provide exact timeline once you place your order through WhatsApp."
},
]}
useInvertedBackground={false}
animationType="slide-up"