Merge version_1 into main #2
@@ -7,7 +7,7 @@ import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import Link from "next/link";
|
||||
import { FileText, Phone, Sparkles, Zap } from "lucide-react";
|
||||
import { FileText, Phone, Sparkles, Zap, Package } from "lucide-react";
|
||||
|
||||
export default function QuoteBuilderPage() {
|
||||
const navItems = [
|
||||
@@ -36,9 +36,7 @@ export default function QuoteBuilderPage() {
|
||||
brandName="Audiocity Zimbabwe"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Get Quote",
|
||||
href: "/quote-builder",
|
||||
}}
|
||||
text: "Get Quote", href: "/quote-builder"}}
|
||||
className="fixed top-6 left-1/2 -translate-x-1/2 z-50"
|
||||
buttonClassName="bg-gradient-to-r from-[#d4af37] to-[#f0d570] text-black font-bold"
|
||||
/>
|
||||
@@ -48,52 +46,26 @@ export default function QuoteBuilderPage() {
|
||||
<PricingCardTwo
|
||||
plans={[
|
||||
{
|
||||
id: "quote-basic",
|
||||
badge: "Quick Quote",
|
||||
badgeIcon: Zap,
|
||||
price: "Free",
|
||||
subtitle: "Instant quotation for selected items",
|
||||
buttons: [
|
||||
id: "quote-basic", badge: "Quick Quote", badgeIcon: Zap,
|
||||
price: "Free", subtitle: "Instant quotation for selected items", buttons: [
|
||||
{
|
||||
text: "Start Quote",
|
||||
href: "/quote-builder",
|
||||
},
|
||||
text: "Start Quote", href: "/quote-builder"},
|
||||
{
|
||||
text: "WhatsApp",
|
||||
href: "https://wa.me/263",
|
||||
},
|
||||
text: "WhatsApp", href: "https://wa.me/263"},
|
||||
],
|
||||
features: [
|
||||
"Select multiple items",
|
||||
"Get instant pricing",
|
||||
"Download PDF invoice",
|
||||
"Send via WhatsApp",
|
||||
"Vehicle compatibility check",
|
||||
],
|
||||
"Select multiple items", "Get instant pricing", "Download PDF invoice", "Send via WhatsApp", "Vehicle compatibility check"],
|
||||
},
|
||||
{
|
||||
id: "quote-premium",
|
||||
badge: "Professional Consultation",
|
||||
badgeIcon: Sparkles,
|
||||
price: "Included",
|
||||
subtitle: "Expert guidance on installations",
|
||||
buttons: [
|
||||
id: "quote-premium", badge: "Professional Consultation", badgeIcon: Sparkles,
|
||||
price: "Included", subtitle: "Expert guidance on installations", buttons: [
|
||||
{
|
||||
text: "Get Consultation",
|
||||
href: "/about",
|
||||
},
|
||||
text: "Get Consultation", href: "/about"},
|
||||
{
|
||||
text: "Call Us",
|
||||
href: "tel:+263",
|
||||
},
|
||||
text: "Call Us", href: "tel:+263"},
|
||||
],
|
||||
features: [
|
||||
"Personalized product recommendations",
|
||||
"Installation quotes",
|
||||
"Vehicle-specific compatibility",
|
||||
"Priority support",
|
||||
"After-sales service included",
|
||||
],
|
||||
"Personalized product recommendations", "Installation quotes", "Vehicle-specific compatibility", "Priority support", "After-sales service included"],
|
||||
},
|
||||
]}
|
||||
title="Custom Quote System"
|
||||
@@ -112,58 +84,28 @@ export default function QuoteBuilderPage() {
|
||||
<ProductCardThree
|
||||
products={[
|
||||
{
|
||||
id: "prod-001",
|
||||
name: "20 Inch Premium Alloy Rims",
|
||||
price: "Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/back-side-wheel-vintage-black-sedan-car_114579-4027.jpg?_wi=2",
|
||||
imageAlt: "20-inch premium alloy rims",
|
||||
initialQuantity: 1,
|
||||
id: "prod-001", name: "20 Inch Premium Alloy Rims", price: "Quote", imageSrc: "http://img.b2bpic.net/free-photo/back-side-wheel-vintage-black-sedan-car_114579-4027.jpg", imageAlt: "20-inch premium alloy rims", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
id: "prod-002",
|
||||
name: "18 Inch Performance Wheels",
|
||||
price: "Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/auto-mechanic-checking-car_1303-14040.jpg?_wi=2",
|
||||
imageAlt: "18-inch performance wheels",
|
||||
initialQuantity: 1,
|
||||
id: "prod-002", name: "18 Inch Performance Wheels", price: "Quote", imageSrc: "http://img.b2bpic.net/free-photo/auto-mechanic-checking-car_1303-14040.jpg", imageAlt: "18-inch performance wheels", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
id: "prod-003",
|
||||
name: "Toyota Aqua Nano Ceramic Tint",
|
||||
price: "Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193568.jpg?_wi=2",
|
||||
imageAlt: "Toyota Aqua nano ceramic window tint",
|
||||
initialQuantity: 1,
|
||||
id: "prod-003", name: "Toyota Aqua Nano Ceramic Tint", price: "Quote", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193568.jpg", imageAlt: "Toyota Aqua nano ceramic window tint", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
id: "prod-004",
|
||||
name: "Nissan Note LED Projector Grille",
|
||||
price: "Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-5496.jpg?_wi=2",
|
||||
imageAlt: "Nissan Note LED projector grille",
|
||||
initialQuantity: 1,
|
||||
id: "prod-004", name: "Nissan Note LED Projector Grille", price: "Quote", imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-5496.jpg", imageAlt: "Nissan Note LED projector grille", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
id: "prod-005",
|
||||
name: "Mini Cooper LED Projector Light",
|
||||
price: "Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746591.jpg?_wi=2",
|
||||
imageAlt: "Mini Cooper LED projector light",
|
||||
initialQuantity: 1,
|
||||
id: "prod-005", name: "Mini Cooper LED Projector Light", price: "Quote", imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746591.jpg", imageAlt: "Mini Cooper LED projector light", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
id: "prod-006",
|
||||
name: "Prado FJ150 Bennett Guard",
|
||||
price: "Quote",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ordered-composition-baking-tools_23-2150096569.jpg?_wi=2",
|
||||
imageAlt: "Prado FJ150 protective Bennett guard",
|
||||
initialQuantity: 1,
|
||||
id: "prod-006", name: "Prado FJ150 Bennett Guard", price: "Quote", imageSrc: "http://img.b2bpic.net/free-photo/ordered-composition-baking-tools_23-2150096569.jpg", imageAlt: "Prado FJ150 protective Bennett guard", initialQuantity: 1,
|
||||
},
|
||||
]}
|
||||
title="Premium Product Selection"
|
||||
description="Browse our curated collection of premium car audio, rims, lights, and automotive accessories. Add items to your quote for instant pricing."
|
||||
tag="E-Commerce"
|
||||
tagIcon="Package"
|
||||
tagIcon={Package}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -182,13 +124,9 @@ export default function QuoteBuilderPage() {
|
||||
description="Contact Audiocity Zimbabwe today to discuss your automotive customization needs. Our expert team is ready to bring your vision to life with premium quality and exceptional service."
|
||||
buttons={[
|
||||
{
|
||||
text: "WhatsApp Us",
|
||||
href: "https://wa.me/263",
|
||||
},
|
||||
text: "WhatsApp Us", href: "https://wa.me/263"},
|
||||
{
|
||||
text: "Visit Our Store",
|
||||
href: "https://maps.google.com/?q=58+Glamorgan+Avenue,+Harare,+Zimbabwe",
|
||||
},
|
||||
text: "Visit Our Store", href: "https://maps.google.com/?q=58+Glamorgan+Avenue,+Harare,+Zimbabwe"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
@@ -200,13 +138,9 @@ export default function QuoteBuilderPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="Audiocity Zimbabwe"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Terms of Service", href: "#"}}
|
||||
className="bg-black"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,51 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
fontSize?: number;
|
||||
fontWeight?: 'normal' | 'bold' | 'semibold';
|
||||
letterSpacing?: number;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text,
|
||||
className = '',
|
||||
fontSize = 24,
|
||||
fontWeight = 'bold',
|
||||
letterSpacing = 0,
|
||||
}) => {
|
||||
const fontWeightMap = {
|
||||
normal: 400,
|
||||
semibold: 600,
|
||||
bold: 700,
|
||||
};
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox={`0 0 ${text.length * 20} 50`}
|
||||
width="auto"
|
||||
height="32"
|
||||
className={className}
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
y="35"
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeightMap[fontWeight]}
|
||||
fill="currentColor"
|
||||
letterSpacing={letterSpacing}
|
||||
dominantBaseline="hanging"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user