design/feat: stringify about page, re-layout sections into cards, add hover effects (+home page)
This commit is contained in:
parent
b4330d8df8
commit
a3c7b47935
5 changed files with 225 additions and 96 deletions
10
app/page.tsx
10
app/page.tsx
|
@ -36,19 +36,19 @@ export default function Home() {
|
|||
alt="My Profile Picture"
|
||||
width={150}
|
||||
height={150}
|
||||
className="rounded-full mx-auto mb-6 border-4 border-gray-700"
|
||||
className="rounded-full mx-auto mb-6 border-4 border-gray-700 hover:border-gray-600 transition-colors duration-300"
|
||||
/>
|
||||
<h1 className="text-4xl font-bold mb-2 text-gray-100 glow">{t('home.profile.name')}</h1>
|
||||
<p className="text-gray-400 text-xl">{t('home.profile.description')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||||
<div className="p-8 border-2 border-gray-700 rounded-lg">
|
||||
<div className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
||||
<LastPlayed />
|
||||
</div>
|
||||
|
||||
{mainSections.map((section, secIndex) => (
|
||||
<section key={secIndex} className="p-8 border-2 border-gray-700 rounded-lg">
|
||||
<section key={secIndex} className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{section}</h2>
|
||||
{mainStrings[secIndex].map((text: string, index: number) => (
|
||||
<p key={index} className="text-gray-300 leading-relaxed mt-2">
|
||||
|
@ -67,7 +67,7 @@ export default function Home() {
|
|||
</section>
|
||||
))}
|
||||
|
||||
<section id="contact" className="p-8 border-2 border-gray-700 rounded-lg">
|
||||
<section id="contact" className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{t('home.contact.title')}</h2>
|
||||
<p className="text-gray-300 mb-6">{t('home.contact.description')}</p>
|
||||
<Button
|
||||
|
@ -77,7 +77,7 @@ export default function Home() {
|
|||
/>
|
||||
</section>
|
||||
|
||||
<section id="donation" className="p-8 border-2 border-gray-700 rounded-lg">
|
||||
<section id="donation" className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-gray-200">{t('home.donation.title')}</h2>
|
||||
<p className="text-gray-300 mb-6">{t('home.donation.description')}</p>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue