Skip to content

Commit

Permalink
Refactor Hero component for improved layout, accessibility, and visua…
Browse files Browse the repository at this point in the history 
…l consistency
  • Loading branch information
@abhaysinghr516
abhaysinghr516 committed Dec 2, 2024
1 parent aba00b7 commit 09ccadf
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 116 deletions.
60 changes: 0 additions & 60 deletions src/app/contents/docs/components/hero/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,64 +49,4 @@ export function Hero() {
</section>
);
}
```

### Side Image Hero
<Preview>
<SideImageHero />
</Preview>

```jsx showLineNumbers
import React from "react";
import { ChevronRight } from "lucide-react";

export function Hero() {
return (
<section className="bg-gray-100 dark:bg-gray-950 text-black dark:text-white min-h-screen flex items-center px-4 py-16">
<div className="max-w-7xl mx-auto w-full flex flex-col lg:flex-row items-center gap-16">
<div className="lg:w-1/2 lg:pr-8">
<h1 className="text-4xl lg:text-5xl font-bold mb-6 leading-tight tracking-tight">
Powerful UI Components at Your Fingertips
</h1>
<p className="text-xl mb-8 text-gray-600 dark:text-gray-400">
From sleek buttons to complex data visualizations, our library
offers a comprehensive suite of customizable components.
</p>
<ul className="mb-10 space-y-4">
{[
"Responsive by default",
"Dark mode support",
"Accessibility compliant",
"Easy customization",
].map((feature, index) => (
<li key={index} className="flex items-center">
<span className="w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full mr-3"></span>
<span className="text-lg">{feature}</span>
</li>
))}
</ul>
<a
href="#"
className="inline-flex items-center bg-blue-600 dark:bg-blue-500 text-white px-6 py-3 rounded-full text-lg font-semibold hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-300"
>
View Documentation
<ChevronRight className="ml-2" size={20} />
</a>
</div>
<div className="lg:w-1/2 relative">
<div className="relative">
<img
src="/components-page.png"
alt="UI Components Preview"
className="rounded-2xl shadow-2xl w-full h-auto"
/>
<div className="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 text-black dark:text-white py-2 px-4 rounded-full shadow-lg text-sm font-medium">
New in 2024
</div>
</div>
</div>
</div>
</section>
);
}
```
3 changes: 1 addition & 2 deletions src/app/lib/markdown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import { SearchableDropdown, DropdownwithIcons, SimpleDropdown } from "@/compone
import { BasicFeatures } from "@/components/Features";
import { DetailedFooter, FooterwithCTA, FooterwithMultipleSections, FooterwithNewsletter, SimpleFooter } from "@/components/Footer";
import { BasicHeader, CenteredAlignedHeader, HeaderwithAnimation, HeaderwithSearch } from "@/components/Header";
import { CenterContentHeroSection, SideImageHero } from "@/components/Hero";
import { CenterContentHeroSection } from "@/components/Hero";
import { Loaders } from "@/components/Loader";
import { BasicPagination, PaginationwithDots, PaginationwithIcons, PaginationwithInputField } from "@/components/Pagination";
import { BasicSettingsPage, SettingsPagewithTabs } from "@/components/Settings";
Expand Down Expand Up @@ -122,7 +122,6 @@ const components = {
HeaderwithAnimation,
CenteredAlignedHeader,
CenterContentHeroSection,
SideImageHero,
Loaders,
BasicPagination,
PaginationwithIcons,
Expand Down
76 changes: 22 additions & 54 deletions src/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,74 +28,42 @@ const heroData = {
};

export const CenterContentHeroSection: React.FC = () => (
<section className="bg-white dark:bg-gray-950 text-black dark:text-white min-h-screen flex items-center justify-center px-4 py-16 relative overflow-hidden">
<div className="absolute top-0 left-0 w-1/2 h-1/2 bg-blue-200 dark:bg-blue-800 rounded-full filter blur-3xl opacity-20 -translate-x-1/2 -translate-y-1/2"></div>
<div className="absolute bottom-0 right-0 w-1/2 h-1/2 bg-purple-200 dark:bg-purple-800 rounded-full filter blur-3xl opacity-20 translate-x-1/2 translate-y-1/2"></div>
<section className="bg-white dark:bg-gray-950 text-black dark:text-white min-h-screen flex items-center justify-center px-6 py-20 relative overflow-hidden">
<div className="absolute top-0 left-0 w-1/2 h-1/2 bg-blue-100 dark:bg-blue-900 rounded-full filter blur-3xl opacity-15 -translate-x-1/2 -translate-y-1/2"></div>
<div className="absolute bottom-0 right-0 w-1/2 h-1/2 bg-purple-100 dark:bg-purple-900 rounded-full filter blur-3xl opacity-15 translate-x-1/2 translate-y-1/2"></div>

<div className="max-w-3xl w-full text-center relative z-10">
<h1 className="text-5xl sm:text-6xl font-bold mb-6 leading-tight tracking-tight">
<div className="max-w-4xl w-full text-center relative z-10">
<h1 className="text-6xl sm:text-7xl font-semibold mb-8 leading-[1.1] tracking-tighter text-gray-800 dark:text-white">
{heroData.centerContent.title}
</h1>
<p className="text-xl mb-10 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<p className="text-2xl mb-12 text-gray-700 dark:text-gray-300 max-w-2xl mx-auto font-light tracking-tight">
{heroData.centerContent.description}
</p>
<a
href="#"
className="inline-flex items-center text-lg font-semibold text-blue-600 dark:text-blue-400 hover:underline"
className="inline-flex items-center text-xl font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-200 transition-colors duration-300 ease-in-out group"
>
{heroData.centerContent.ctaText}
<ChevronRight className="ml-1" size={20} />
<ChevronRight
className="ml-2 transition-transform duration-300 group-hover:translate-x-1"
size={24}
/>
</a>
<div className="mt-16 grid grid-cols-1 sm:grid-cols-3 gap-8">
<div className="mt-20 grid grid-cols-1 sm:grid-cols-3 gap-12">
{heroData.centerContent.stats.map((stat, index) => (
<div key={index} className="text-center">
<div className="text-4xl font-bold mb-2">{stat.value}</div>
<div className="text-gray-600 dark:text-gray-400">{stat.label}</div>
<div
key={index}
className="text-center bg-gray-50 dark:bg-gray-900 p-6 rounded-2xl shadow-sm dark:shadow-none border border-gray-100 dark:border-gray-800 transition-all duration-300 hover:shadow-md"
>
<div className="text-5xl font-semibold mb-3 text-gray-800 dark:text-white">
{stat.value}
</div>
<div className="text-gray-500 dark:text-gray-400 text-base tracking-wide font-medium">
{stat.label}
</div>
</div>
))}
</div>
</div>
</section>
);

export const SideImageHero: React.FC = () => (
<section className="bg-gray-100 dark:bg-gray-950 text-black dark:text-white min-h-screen flex items-center px-4 py-16">
<div className="max-w-7xl mx-auto w-full flex flex-col lg:flex-row items-center gap-16">
<div className="lg:w-1/2 lg:pr-8">
<h1 className="text-4xl lg:text-5xl font-bold mb-6 leading-tight tracking-tight">
{heroData.sideImage.title}
</h1>
<p className="text-xl mb-8 text-gray-600 dark:text-gray-400">
{heroData.sideImage.description}
</p>
<ul className="mb-10 space-y-4">
{heroData.sideImage.features.map((feature, index) => (
<li key={index} className="flex items-center">
<span className="w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full mr-3"></span>
<span className="text-lg">{feature}</span>
</li>
))}
</ul>
<a
href="#"
className="inline-flex items-center bg-blue-600 dark:bg-blue-500 text-white px-6 py-3 rounded-full text-lg font-semibold hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-300"
>
{heroData.sideImage.ctaText}
<ChevronRight className="ml-2" size={20} />
</a>
</div>
<div className="lg:w-1/2 relative">
<div className="relative">
<img
src="/components-page.png"
alt="UI Components Preview"
className="rounded-2xl shadow-2xl w-full h-auto"
/>
<div className="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 text-black dark:text-white py-2 px-4 rounded-full shadow-lg text-sm font-medium">
New in 2024
</div>
</div>
</div>
</div>
</section>
);

0 comments on commit 09ccadf

Please sign in to comment.