Skip to content

Fix layout inconsistencies: remove duplicate content, standardize spacing and card heights #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcelo-m7 merged 3 commits into from
Nov 1, 2025
Merged

Fix layout inconsistencies: remove duplicate content, standardize spacing and card heights #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f8618d
Initial plan
Copilot Nov 1, 2025
5e64749
Fix layout and design inconsistencies across pages
Copilot Nov 1, 2025
c532541
Extract card height values to reusable CSS classes
Copilot Nov 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 14 additions & 12 deletions src/components/TeamSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,18 +127,20 @@ const TeamSection = () => {
</p>
)}

{member.linkedin_url && (
<Button
variant="outline"
size="sm"
aria-label={t('team.linkedin')}
className="rounded-full border-brand-blue text-brand-blue hover:bg-brand-blue hover:text-white"
onClick={() => window.open(member.linkedin_url!, '_blank')}
>
<Linkedin className="w-4 h-4" />
<span className="sr-only">{t('team.linkedin')}</span>
</Button>
)}
<div className="flex justify-center">
{member.linkedin_url && (
<Button
variant="outline"
size="sm"
aria-label={t('team.linkedin')}
className="rounded-full border-brand-blue text-brand-blue hover:bg-brand-blue hover:text-white"
onClick={() => window.open(member.linkedin_url!, '_blank')}
>
<Linkedin className="w-4 h-4" />
<span className="sr-only">{t('team.linkedin')}</span>
</Button>
)}
</div>
</CardContent>
</Card>
))}
Expand Down
13 changes: 13 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,4 +66,17 @@
.card-hover {
@apply transition-all ease-in-out duration-300 hover:shadow-soft-lg hover:-translate-y-1;
}

/* Card minimum heights for consistent layouts */
.card-min-h-sm {
@apply min-h-[320px];
}

.card-min-h-md {
@apply min-h-[400px];
}

.card-min-h-lg {
@apply min-h-[500px];
}
}
20 changes: 10 additions & 10 deletions src/pages/Index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,9 +194,9 @@ const Index = () => {
</section>

{/* Features Section */}
<section className="py-24 bg-white">
<section className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<div className="text-center mb-12">
<h2 className="text-3xl lg:text-4xl font-bold text-neutral-900 mb-4">
{t('index.why.title')}
</h2>
Expand Down Expand Up @@ -231,9 +231,9 @@ const Index = () => {
</section>

{/* Solutions Preview */}
<section className="py-24 bg-neutral-50">
<section className="py-20 bg-neutral-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<div className="text-center mb-12">
<h2 className="text-3xl lg:text-4xl font-bold text-neutral-900 mb-4">
{t('index.solutions.title')}
</h2>
Expand All @@ -245,16 +245,16 @@ const Index = () => {
{displaySolutions.map((solution, index) => (
<Card
key={index}
className="border-0 shadow-soft hover:shadow-soft-lg transition-all ease-in-out duration-300 card-hover rounded-2xl overflow-hidden"
className="border-0 shadow-soft hover:shadow-soft-lg transition-all ease-in-out duration-300 card-hover rounded-2xl overflow-hidden flex flex-col card-min-h-md"
>
<div
className={`h-4 bg-gradient-to-r ${solution.gradient}`}
></div>
<CardContent className="p-8">
<CardContent className="p-8 flex flex-col flex-1">
<h3 className="text-2xl font-bold text-neutral-900 mb-4">
{solution.name}
</h3>
<p className="text-neutral-600 mb-6">
<p className="text-neutral-600 mb-6 flex-1">
{solution.description}
</p>
{solution.features &&
Expand All @@ -266,13 +266,13 @@ const Index = () => {
key={featureIndex}
className="flex items-center text-neutral-700"
>
<CheckCircle className="h-5 w-5 text-brand-blue mr-3" />
<CheckCircle className="h-5 w-5 text-brand-blue mr-3 flex-shrink-0" />
{feature}
</li>
))}
</ul>
)}
<Link to="/solutions">
<Link to="/solutions" className="mt-auto">
<Button className="btn-secondary w-full">
{t('index.learnMore')}
<ArrowRight className="ml-2 h-4 w-4" />
Expand All @@ -292,7 +292,7 @@ const Index = () => {
<NewsletterSection />

{/* CTA Section */}
<section className="py-24 bg-gradient-hero text-white">
<section className="py-20 bg-gradient-hero text-white">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl lg:text-4xl font-bold mb-6">
{t('index.cta.title')}
Expand Down
199 changes: 85 additions & 114 deletions src/pages/Projects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,15 +221,15 @@ const Projects = () => {
ogDescription={t('projects.description')}
ogImage="/placeholder.svg"
/>
<div className="max-w-7xl mx-auto px-4 pt-4">
<div className="max-w-7xl mx-auto px-4 pt-4 pb-2">
<PageBreadcrumb
segments={[{ label: t('navigation.projects') }]}
/>
</div>

<div className="container mx-auto px-4 py-16">
<div className="container mx-auto px-4 py-12">
{/* Header */}
<div className="text-center mb-16">
<div className="text-center mb-12">
<h1 className="text-4xl md:text-5xl font-bold text-neutral-900 mb-6">
<Trans
i18nKey="projects.title"
Expand All @@ -247,9 +247,9 @@ const Projects = () => {
</div>

{/* Solutions Section */}
<section className="mb-20">
<section className="mb-16">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<div className="text-center mb-10">
<h2 className="text-3xl font-bold text-neutral-900 mb-4">
{t('solutionsPage.title')}
</h2>
Expand All @@ -268,9 +268,81 @@ const Projects = () => {
? combinedSolutions.map((solution) => (
<Card
key={solution.id ?? solution.slug}
className="border-0 shadow-soft-lg flex flex-col overflow-hidden"
className="border-0 shadow-soft-lg flex flex-col overflow-hidden card-min-h-lg"
>
{/* ...existing card rendering code... */}
{solution.imageUrl && (
<div className="relative h-48 w-full overflow-hidden">
<img
src={solution.imageUrl}
alt={solution.title}
loading="lazy"
className="h-full w-full object-cover"
/>
<div
className={`absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r ${solution.gradient}`}
/>
</div>
)}
<CardContent className="p-8 flex flex-col flex-1">
<div
className={`h-1 w-16 bg-gradient-to-r ${solution.gradient} rounded-full mb-6`}
/>
<Link to={`/solutions/${solution.slug}`} className="group">
<h3 className="text-2xl font-semibold text-neutral-900 group-hover:text-brand-blue transition-colors">
{solution.title}
</h3>
</Link>
<p className="text-neutral-600 mt-4 leading-relaxed flex-1">
{solution.description}
</p>

{solution.features.length > 0 && (
<ul className="mt-8 space-y-3">
{solution.features.map((feature, featureIndex) => (
<li
key={`${solution.slug}-feature-${featureIndex}`}
className="flex items-start gap-3"
>
<span
className={`mt-1 inline-flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-r ${solution.gradient}`}
>
<CheckCircle className="h-4 w-4 text-white" />
</span>
<span className="text-sm text-neutral-600 leading-relaxed">
{feature}
</span>
</li>
))}
</ul>
)}

<div className="mt-10 flex flex-col sm:flex-row gap-3">
<Button
asChild
variant="outline"
className="flex-1 border-neutral-200 hover:border-brand-blue hover:text-brand-blue transition-colors"
>
<Link
to={`/solutions/${solution.slug}`}
className="flex items-center justify-center"
>
{t('index.learnMore')}
</Link>
</Button>
<Button
asChild
className="flex-1 bg-gradient-to-r from-brand-purple to-brand-blue hover:shadow-soft-lg transition-all"
>
<Link
to="/contact"
className="flex items-center justify-center gap-2"
>
{t('solutionsPage.requestDemo')}
<ArrowRight className="h-4 w-4" />
</Link>
</Button>
</div>
</CardContent>
</Card>
))
: null}
Expand All @@ -294,7 +366,7 @@ const Projects = () => {
) : (
<div className="grid md:grid-cols-2 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
{repositories.map((repo) => (
<Card key={repo.id} className="card-hover border-0 shadow-soft">
<Card key={repo.id} className="card-hover border-0 shadow-soft flex flex-col card-min-h-sm">
<CardHeader className="pb-4">
<div className="flex items-start justify-between">
<CardTitle className="text-xl font-semibold text-neutral-900 mb-2">
Expand Down Expand Up @@ -375,8 +447,11 @@ const Projects = () => {
)}
</section>

{/* Call to Action */}
<div className="text-center mt-16">
</div>

{/* Call to Action */}
<section className="py-16 bg-neutral-50">
<div className="max-w-4xl mx-auto px-4 text-center">
<h3 className="text-2xl font-semibold text-neutral-900 mb-4">
{t('projects.like')}
</h3>
Expand All @@ -391,110 +466,6 @@ const Projects = () => {
<Link to="/contact">{t('projects.contactUs')}</Link>
</Button>
</div>
</div>

<section className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl lg:text-4xl font-bold text-neutral-900 mb-6">
{t('solutionsPage.title')}
</h2>
<p className="text-lg text-neutral-600 max-w-3xl mx-auto">
{t('solutionsPage.description')}
</p>
</div>

{isGitHubLoading ? (
<div className="text-center text-neutral-500">Loading...</div>
) : isGitHubError ? (
<div className="text-center text-red-500">
Error loading GitHub projects
</div>
) : (
<div className="grid gap-8 md:grid-cols-2 xl:grid-cols-3">
{displayGitHubSolutions.map((solution) => (
<Card
key={solution.id ?? solution.slug}
className="border-0 shadow-soft-lg flex flex-col overflow-hidden"
>
{solution.imageUrl && (
<div className="relative h-48 w-full overflow-hidden">
<img
src={solution.imageUrl}
alt={solution.title}
loading="lazy"
className="h-full w-full object-cover"
/>
<div
className={`absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r ${solution.gradient}`}
/>
</div>
)}
<CardContent className="p-8 flex flex-col flex-1">
<div
className={`h-1 w-16 bg-gradient-to-r ${solution.gradient} rounded-full mb-6`}
/>
<Link to={`/solutions/${solution.slug}`} className="group">
<h3 className="text-2xl font-semibold text-neutral-900 group-hover:text-brand-blue transition-colors">
{solution.title}
</h3>
</Link>
<p className="text-neutral-600 mt-4 leading-relaxed flex-1">
{solution.description}
</p>

{solution.features.length > 0 && (
<ul className="mt-8 space-y-3">
{solution.features.map((feature, featureIndex) => (
<li
key={`${solution.slug}-feature-${featureIndex}`}
className="flex items-start gap-3"
>
<span
className={`mt-1 inline-flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-r ${solution.gradient}`}
>
<CheckCircle className="h-4 w-4 text-white" />
</span>
<span className="text-sm text-neutral-600 leading-relaxed">
{feature}
</span>
</li>
))}
</ul>
)}

<div className="mt-10 flex flex-col sm:flex-row gap-3">
<Button
asChild
variant="outline"
className="flex-1 border-neutral-200 hover:border-brand-blue hover:text-brand-blue transition-colors"
>
<Link
to={`/solutions/${solution.slug}`}
className="flex items-center justify-center"
>
{t('index.learnMore')}
</Link>
</Button>
<Button
asChild
className="flex-1 bg-gradient-to-r from-brand-purple to-brand-blue hover:shadow-soft-lg transition-all"
>
<Link
to="/contact"
className="flex items-center justify-center gap-2"
>
{t('solutionsPage.requestDemo')}
<ArrowRight className="h-4 w-4" />
</Link>
</Button>
</div>
</CardContent>
</Card>
))}
</div>
)}
</div>
</section>

</Layout>
Expand Down
Loading