Remove Company Details section, redesign Industries as icon cards with descriptions
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko
parent
d80b93ce74
commit
5522820df4
2 changed files with 123 additions and 88 deletions
|
|
@ -196,72 +196,57 @@
|
|||
}
|
||||
|
||||
/* Industries */
|
||||
.about-industries {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
max-width: 800px;
|
||||
.about-industries-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.25rem;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.about-industry-badge {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 100px;
|
||||
padding: 0.6rem 1.5rem;
|
||||
color: var(--light-grey-100);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
transition: border-color 0.3s, color 0.3s;
|
||||
.about-industries-grid > :last-child:nth-child(4n - 2) {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
|
||||
.about-industry-badge:hover {
|
||||
border-color: var(--orange-100);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Company Details */
|
||||
.about-company-details {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
.about-industry-card {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 14px;
|
||||
padding: 1.5rem 1.25rem;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
transition: background 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.about-detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
.about-industry-card:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
box-shadow: 0 4px 25px rgba(255, 91, 4, 0.08);
|
||||
}
|
||||
|
||||
.about-detail-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.about-detail-row span:first-child {
|
||||
color: var(--light-grey-100);
|
||||
opacity: 0.7;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.about-detail-row span:last-child {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.about-detail-row a {
|
||||
.about-industry-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: var(--orange-100);
|
||||
text-decoration: none;
|
||||
margin: 0 auto 0.75rem;
|
||||
}
|
||||
|
||||
.about-detail-row a:hover {
|
||||
text-decoration: underline;
|
||||
.about-industry-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.about-industry-card h3 {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.about-industry-card p {
|
||||
color: var(--light-grey-100);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.45;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
|
|
@ -315,6 +300,10 @@
|
|||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.about-industries-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.about-founder-card {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
@ -341,19 +330,14 @@
|
|||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.about-industries-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.about-founder-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.about-detail-row {
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.about-detail-row span:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.about-cta {
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,8 +61,69 @@ const values = [
|
|||
];
|
||||
|
||||
const industries = [
|
||||
'E-commerce', 'Professional Services', 'SaaS', 'Charities',
|
||||
'Education', 'Healthcare', 'Public Sector',
|
||||
{
|
||||
name: 'E-commerce',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
|
||||
</svg>
|
||||
),
|
||||
desc: 'Order processing, inventory sync, customer journeys',
|
||||
},
|
||||
{
|
||||
name: 'Professional Services',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 7V5a4 4 0 0 0-8 0v2"/>
|
||||
</svg>
|
||||
),
|
||||
desc: 'CRM, invoicing, client onboarding automation',
|
||||
},
|
||||
{
|
||||
name: 'SaaS',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
|
||||
</svg>
|
||||
),
|
||||
desc: 'User onboarding, billing, support ticket workflows',
|
||||
},
|
||||
{
|
||||
name: 'Charities',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
),
|
||||
desc: 'Donor management, grant reporting, volunteer coordination',
|
||||
},
|
||||
{
|
||||
name: 'Education',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||
</svg>
|
||||
),
|
||||
desc: 'Enrolment, student comms, content delivery',
|
||||
},
|
||||
{
|
||||
name: 'Healthcare',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
||||
</svg>
|
||||
),
|
||||
desc: 'Appointment scheduling, patient records, compliance',
|
||||
},
|
||||
{
|
||||
name: 'Public Sector',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 21h18M3 10h18M5 6l7-3 7 3M4 10v11M20 10v11M8 14v3M12 14v3M16 14v3"/>
|
||||
</svg>
|
||||
),
|
||||
desc: 'Case management, reporting, citizen services',
|
||||
},
|
||||
];
|
||||
|
||||
const AboutPage = () => {
|
||||
|
|
@ -223,38 +284,28 @@ const AboutPage = () => {
|
|||
<section className="about-section">
|
||||
<div className="container">
|
||||
<motion.h2 className="section-title" {...fadeUp}>Industries We Serve</motion.h2>
|
||||
<div className="about-industries">
|
||||
<div className="about-industries-grid">
|
||||
{industries.map((ind, i) => (
|
||||
<motion.span
|
||||
key={ind}
|
||||
className="about-industry-badge"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: i * 0.06 }}
|
||||
whileHover={{ scale: 1.1, borderColor: 'rgba(255, 91, 4, 0.6)', color: '#fff', transition: { duration: 0.2 } }}
|
||||
<motion.div
|
||||
key={ind.name}
|
||||
className="about-industry-card"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.4, delay: i * 0.07 }}
|
||||
whileHover={{ y: -5, borderColor: 'rgba(255, 91, 4, 0.5)', transition: { duration: 0.25 } }}
|
||||
>
|
||||
{ind}
|
||||
</motion.span>
|
||||
<motion.div className="about-industry-icon" whileHover={{ scale: 1.15, rotate: 5 }}>
|
||||
{ind.icon}
|
||||
</motion.div>
|
||||
<h3>{ind.name}</h3>
|
||||
<p>{ind.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Company Details */}
|
||||
<section className="about-section">
|
||||
<div className="container">
|
||||
<motion.h2 className="section-title" {...fadeUp}>Company Details</motion.h2>
|
||||
<motion.div className="about-company-details" {...fadeUp}>
|
||||
<div className="about-detail-row"><span>Legal Name</span><span>AImpress Ltd</span></div>
|
||||
<div className="about-detail-row"><span>Company Number</span><span>16417799 (England & Wales)</span></div>
|
||||
<div className="about-detail-row"><span>VAT Number</span><span>492173381</span></div>
|
||||
<div className="about-detail-row"><span>ICO Registration</span><span>ZB979660</span></div>
|
||||
<div className="about-detail-row"><span>Address</span><span>Suite 6065 Unit 3a, 34-35 Hatton Garden, London, EC1N 8DX</span></div>
|
||||
<div className="about-detail-row"><span>Email</span><span><a href="mailto:hello@ai-impress.com">hello@ai-impress.com</a></span></div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="about-section about-cta-section">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue