Add AI Chatbots & Custom Website services (popular), widen content to match header
- New services: AI Chatbots & Virtual Assistants (£3K-£10K), Custom Website Development (£2.5K-£15K) - Both marked as Popular with orange badge on Services and Pricing pages - Widen all content blocks to max-width 1200px to align with header container - Widen CTA blocks to 900px Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko
parent
9544aabf8b
commit
f53d385508
5 changed files with 112 additions and 23 deletions
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
/* Story */
|
||||
.about-story-text {
|
||||
max-width: 800px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
color: var(--light-grey-100);
|
||||
font-size: 1.05rem;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
max-width: 1000px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 1.25rem;
|
||||
max-width: 1100px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
display: flex;
|
||||
gap: 2.5rem;
|
||||
align-items: center;
|
||||
max-width: 900px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(12px);
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.25rem;
|
||||
max-width: 1000px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -283,7 +283,7 @@
|
|||
border: 1px solid rgba(255, 91, 4, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 3.5rem 2rem;
|
||||
max-width: 700px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
/* Implementation Pricing Table */
|
||||
.pricing-table-wrap {
|
||||
max-width: 800px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -65,9 +65,28 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
.pricing-table-row--popular {
|
||||
background: rgba(255, 91, 4, 0.06);
|
||||
}
|
||||
|
||||
.pricing-table-service {
|
||||
color: var(--light-grey-100);
|
||||
font-size: 0.95rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.pricing-popular-tag {
|
||||
background: var(--orange-100);
|
||||
color: #fff;
|
||||
padding: 0.15rem 0.6rem;
|
||||
border-radius: 100px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pricing-table-price {
|
||||
|
|
@ -82,7 +101,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
max-width: 1100px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -210,7 +229,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.25rem;
|
||||
max-width: 1000px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -248,7 +267,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.25rem;
|
||||
max-width: 1000px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -307,7 +326,7 @@
|
|||
border: 1px solid rgba(255, 91, 4, 0.18);
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem;
|
||||
max-width: 900px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -357,7 +376,7 @@
|
|||
|
||||
/* Comparison Table */
|
||||
.comparison-table-wrap {
|
||||
max-width: 900px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -401,7 +420,7 @@
|
|||
|
||||
/* FAQ */
|
||||
.faq-list {
|
||||
max-width: 800px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -471,7 +490,7 @@
|
|||
}
|
||||
|
||||
.pricing-quote-form-wrap {
|
||||
max-width: 800px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(12px);
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@ const fadeUp = {
|
|||
};
|
||||
|
||||
const implementationPricing = [
|
||||
{ service: 'AI Chatbots & Virtual Assistants', price: '£3,000 – £10,000', popular: true },
|
||||
{ service: 'Custom Website Development', price: '£2,500 – £15,000', popular: true },
|
||||
{ service: 'Workflow Automation Implementation', price: '£3,500 – £12,000' },
|
||||
{ service: 'System Integration & Synchronisation', price: '£2,500 – £10,000+' },
|
||||
{ service: 'CRM Workflow Optimisation', price: '£3,000 – £6,500' },
|
||||
|
|
@ -174,13 +176,16 @@ const PricingPage = () => {
|
|||
{implementationPricing.map((item, i) => (
|
||||
<motion.div
|
||||
key={item.service}
|
||||
className="pricing-table-row"
|
||||
className={`pricing-table-row ${'popular' in item && item.popular ? 'pricing-table-row--popular' : ''}`}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: i * 0.06 }}
|
||||
>
|
||||
<span className="pricing-table-service">{item.service}</span>
|
||||
<span className="pricing-table-service">
|
||||
{item.service}
|
||||
{'popular' in item && item.popular && <span className="pricing-popular-tag">Popular</span>}
|
||||
</span>
|
||||
<span className="pricing-table-price">{item.price}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
max-width: 1100px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +53,8 @@
|
|||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s, transform 0.2s;
|
||||
transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
|
|
@ -64,6 +65,31 @@
|
|||
border-color: var(--orange-100);
|
||||
}
|
||||
|
||||
.service-card--popular {
|
||||
border-color: var(--orange-100);
|
||||
background: rgba(255, 91, 4, 0.06);
|
||||
box-shadow: 0 0 30px rgba(255, 91, 4, 0.08);
|
||||
}
|
||||
|
||||
.service-card--popular:hover {
|
||||
border-color: var(--orange-100);
|
||||
box-shadow: 0 0 40px rgba(255, 91, 4, 0.15);
|
||||
}
|
||||
|
||||
.service-popular-badge {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
right: 1.5rem;
|
||||
background: var(--orange-100);
|
||||
color: #fff;
|
||||
padding: 0.25rem 0.9rem;
|
||||
border-radius: 100px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.service-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -153,7 +179,7 @@
|
|||
border: 1px solid rgba(255, 91, 4, 0.18);
|
||||
border-radius: 20px;
|
||||
padding: 2.5rem;
|
||||
max-width: 1000px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -205,7 +231,7 @@
|
|||
|
||||
/* Process Steps */
|
||||
.process-steps {
|
||||
max-width: 800px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -251,7 +277,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1rem;
|
||||
max-width: 1000px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -290,7 +316,7 @@
|
|||
border: 1px solid rgba(255, 91, 4, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 3.5rem 2rem;
|
||||
max-width: 700px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,44 @@ const fadeUp = {
|
|||
};
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
),
|
||||
title: 'AI Chatbots & Virtual Assistants',
|
||||
price: '£3,000 – £10,000',
|
||||
purpose: 'Deploy intelligent chatbots that handle customer support, qualify leads, and book appointments 24/7 — no human required.',
|
||||
popular: true,
|
||||
includes: [
|
||||
'Custom chatbot design & personality',
|
||||
'Integration with your website, WhatsApp, or Messenger',
|
||||
'Knowledge base training on your business data',
|
||||
'Lead qualification & CRM handoff',
|
||||
'Multi-language support',
|
||||
'Analytics dashboard & conversation insights',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
|
||||
</svg>
|
||||
),
|
||||
title: 'Custom Website Development',
|
||||
price: '£2,500 – £15,000',
|
||||
purpose: 'High-performance, conversion-optimised websites built with modern tech — fast, SEO-ready, and fully yours.',
|
||||
popular: true,
|
||||
includes: [
|
||||
'Custom design & responsive development',
|
||||
'React / Next.js or WordPress build',
|
||||
'SEO optimisation & Core Web Vitals',
|
||||
'CMS integration for easy content updates',
|
||||
'Contact forms, analytics & tracking setup',
|
||||
'Hosting setup on your own infrastructure',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
|
|
@ -211,13 +249,14 @@ const ServicesPage = () => {
|
|||
return (
|
||||
<motion.div
|
||||
key={s.title}
|
||||
className={`service-card ${isExpanded ? 'service-card--expanded' : ''}`}
|
||||
className={`service-card ${isExpanded ? 'service-card--expanded' : ''} ${'popular' in s && s.popular ? 'service-card--popular' : ''}`}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.5, delay: i * 0.08 }}
|
||||
onClick={() => setExpandedCard(isExpanded ? null : i)}
|
||||
>
|
||||
{'popular' in s && s.popular && <span className="service-popular-badge">Popular</span>}
|
||||
<div className="service-card-header">
|
||||
<div className="service-card-icon">{s.icon}</div>
|
||||
<div className="service-card-price">{s.price}</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue