Skip to content

Commit

Permalink
feat(solidr-front-next): beautify home page
Browse files Browse the repository at this point in the history
  • Loading branch information
tchambard committed Aug 24, 2024
1 parent 2e23ba4 commit 295ec6c
Show file tree
Hide file tree
Showing 15 changed files with 328 additions and 78 deletions.
63 changes: 60 additions & 3 deletions packages/fronts/solidr-front-next/messages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,65 @@
"wallet": {
"pleaseConnect": "Please connect your Solana wallet"
},
"homePage": {
"start": "Start"
"home": {
"hero": {
"title": "Simplify Group Expense Management with SolidR",
"subtitle": "Manage, share, and settle expenses with one click on the Solana blockchain.",
"solanaText": "Powered by the Solana blockchain for secure and fast transactions.",
"getStarted": "Get Started",
"learnMore": "Learn More"
},
"features": {
"heading": "Key Features",
"items": [
{
"title": "Easy Group Expense Management",
"description": "Organize and track shared expenses with ease."
},
{
"title": "Instant SOL Payments",
"description": "Settle debts instantly using SOL."
},
{
"title": "Secure and Transparent",
"description": "All transactions are secured on the Solana blockchain."
}
]
},
"howItWorks": {
"heading": "How It Works",
"steps": [
{
"title": "Create a Session",
"description": "Start by creating a new expense session."
},
{
"title": "Add Members",
"description": "Invite members to join and share expenses."
},
{
"title": "Track Expenses",
"description": "Record and track all shared expenses."
},
{
"title": "Settle Debts",
"description": "Easily settle debts with SOL payments."
}
]
},
"testimonials": {
"heading": "Testimonials",
"comingSoon": "Coming soon! Stay tuned for what our users have to say."
},
"getStarted": {
"heading": "Ready to Simplify Your Group Expenses?",
"description": "Get started today and take the hassle out of managing group expenses.",
"button": "Get Started Now"
}
},
"footer": {
"text": "©{year} SolidR. All rights reserved.",
"solanaText": "Powered by the Solana blockchain for fast and secure transactions."
},
"sessions": {
"list": {
Expand Down Expand Up @@ -195,7 +252,7 @@
"transfers": {
"title": "Refunds",
"button": {
"title": "Refund other members"
"title": "Refund"
},
"list": {
"empty": "Refunds will be available as soon as costs become unbalanced",
Expand Down
63 changes: 60 additions & 3 deletions packages/fronts/solidr-front-next/messages/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,65 @@
"wallet": {
"pleaseConnect": "Veuillez connecter votre portefeuille Solana"
},
"homePage": {
"start": "Commencer"
"home": {
"hero": {
"title": "Simplifiez la gestion des dépenses de groupe avec SolidR",
"subtitle": "Gérez, partagez et remboursez en un clic sur la blockchain Solana.",
"solanaText": "Propulsé par la blockchain Solana pour des transactions rapides et sécurisées.",
"getStarted": "Commencer",
"learnMore": "En savoir plus"
},
"features": {
"heading": "Fonctionnalités Clés",
"items": [
{
"title": "Gestion facile des dépenses de groupe",
"description": "Organisez et suivez les dépenses partagées facilement."
},
{
"title": "Paiements instantanés en SOL",
"description": "Régularisez les dettes instantanément avec SOL."
},
{
"title": "Sécurisé et Transparent",
"description": "Toutes les transactions sont sécurisées sur la blockchain Solana."
}
]
},
"howItWorks": {
"heading": "Comment ça marche",
"steps": [
{
"title": "Créer une session",
"description": "Commencez par créer une nouvelle session de dépenses."
},
{
"title": "Ajouter des membres",
"description": "Invitez des membres à rejoindre et partager des dépenses."
},
{
"title": "Suivre les dépenses",
"description": "Enregistrez et suivez toutes les dépenses partagées."
},
{
"title": "Régler les dettes",
"description": "Régularisez facilement les dettes avec des paiements en SOL."
}
]
},
"testimonials": {
"heading": "Témoignages",
"comingSoon": "Bientôt disponible ! Restez à l'écoute pour découvrir ce que nos utilisateurs ont à dire."
},
"getStarted": {
"heading": "Prêt à simplifier vos dépenses de groupe?",
"description": "Commencez dès aujourd'hui et éliminez les tracas de la gestion des dépenses de groupe.",
"button": "Commencer maintenant"
}
},
"footer": {
"text": "©{year} SolidR. Tous droits réservés.",
"solanaText": "Propulsé par la blockchain Solana pour des transactions rapides et sécurisées."
},
"sessions": {
"list": {
Expand Down Expand Up @@ -195,7 +252,7 @@
"transfers": {
"title": "Remboursements",
"button": {
"title": "Rembourser les autres membres"
"title": "Rembourser"
},
"list": {
"empty": "Les remboursements seront disponibles dès que les coûts deviendront déséquilibrés",
Expand Down
21 changes: 21 additions & 0 deletions packages/fronts/solidr-front-next/src/app/home/FeaturesSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { useTranslations } from 'next-intl';

export default function FeaturesSection() {
const t = useTranslations('home.features');

return (
<section id="features" className="py-20 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100">
<div className="container mx-auto px-6">
<h2 className="text-3xl md:text-4xl font-semibold text-center">{t('heading')}</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-10">
{t.raw('items').map((item: any, index: number) => (
<div key={index} className="p-6 bg-zinc-100 dark:bg-zinc-800 rounded-lg shadow-lg">
<h3 className="text-2xl font-bold">{item.title}</h3>
<p className="mt-4">{item.description}</p>
</div>
))}
</div>
</div>
</section>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { useTranslations } from 'next-intl';
import Link from 'next/link';

export default function GetStartedSection() {
const t = useTranslations('home.getStarted');

return (
<section id="get-started" className="py-20 bg-gradient-to-r from-solanaGreen to-solanaPurple text-white text-center">
<div className="container mx-auto px-6">
<h2 className="text-3xl md:text-4xl font-semibold">{t('heading')}</h2>
<p className="mt-4 text-lg md:text-xl">{t('description')}</p>
<div className="mt-8">
<Link href={`/sessions`} passHref>
<button className="bg-white text-black py-2 px-4 rounded-md">
{t('button')}
</button>
</Link>
</div>
</div>
</section>
);
}
38 changes: 38 additions & 0 deletions packages/fronts/solidr-front-next/src/app/home/HeroSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import Link from 'next/link';

export default function HeroSection() {
const t = useTranslations('home.hero');

return (
<section className="bg-gradient-to-r from-solanaGreen to-solanaPurple text-white h-screen flex flex-col justify-center items-center text-center px-4">
<div className="max-w-4xl mx-auto">
<Image
src="/logo.png"
alt="SolidR Logo"
className="h-24 md:h-32 lg:h-40 mx-auto mb-8"
/>
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
{t('title')}
</h1>
<p className="mt-4 text-base sm:text-lg md:text-xl lg:text-2xl leading-relaxed">
{t('subtitle')}
</p>
<p className="mt-4 text-sm sm:text-md md:text-lg lg:text-xl italic opacity-75">
{t('solanaText')}
</p>
<div className="mt-8 space-x-4">
<Link href={`/sessions`} passHref>
<button className="bg-white text-black py-2 px-4 rounded-md text-sm md:text-base lg:text-lg">
{t('getStarted')}
</button>
</Link>
<button className="bg-transparent border border-white py-2 px-4 rounded-md text-sm md:text-base lg:text-lg">
{t('learnMore')}
</button>
</div>
</div>
</section>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { useTranslations } from 'next-intl';

export default function HowItWorksSection() {
const t = useTranslations('home.howItWorks');

return (
<section id="how-it-works" className="py-20 bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100">
<div className="container mx-auto px-6">
<h2 className="text-3xl md:text-4xl font-semibold text-center">{t('heading')}</h2>
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mt-10">
{t.raw('steps').map((step: any, index: number) => (
<div key={index} className="p-6 bg-white dark:bg-zinc-700 rounded-lg shadow-lg">
<h3 className="text-xl font-bold">{step.title}</h3>
<p className="mt-4">{step.description}</p>
</div>
))}
</div>
</div>
</section>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { useTranslations } from 'next-intl';

export default function TestimonialsSection() {
const t = useTranslations('home.testimonials');

return (
<section id="testimonials" className="py-20 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100">
<div className="container mx-auto px-6">
<h2 className="text-3xl md:text-4xl font-semibold text-center">{t('heading')}</h2>
<div className="mt-10 flex justify-center">
<p className="text-lg md:text-xl font-medium text-center">
{t('comingSoon')}
</p>
</div>
</div>
</section>
);
}
2 changes: 1 addition & 1 deletion packages/fronts/solidr-front-next/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export default async function RootLayout({
</header>
<main
id="page-component"
className="break-words min-h-[calc(100vh-112px)] py-4"
className="break-words min-h-[calc(100vh-152px)] py-4 pt-16"
>
{children}
</main>
Expand Down
53 changes: 47 additions & 6 deletions packages/fronts/solidr-front-next/src/app/layout/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,52 @@
export default function DefaultFooter() {
import { useTranslations } from 'next-intl';

export default function Footer() {
const t = useTranslations('footer');

return (
<footer className="py-4">
<div className="container mx-auto px-4">
<div className="flex justify-center">
<p className="text-sm text-zinc-600 dark:text-zinc-400">
Alyra - Solana Foundation - ©2024
<footer className="bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 py-6">
<div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div className="text-center md:text-left">
<p className="text-sm">
{t('text', { year: new Date().getFullYear() })}
</p>
<p className="text-sm mt-1">
{t('solanaText')}
</p>
</div>
<div className="flex space-x-4">
<a
href="https://github.com/your-github-username"
target="_blank"
rel="noopener noreferrer"
className="text-zinc-900 dark:text-zinc-100 hover:text-solanaGreen dark:hover:text-solanaGreen transition-colors"
aria-label="GitHub"
>
<svg
className="h-6 w-6"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M12 0C5.373 0 0 5.373 0 12c0 5.303 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.416-4.042-1.416-.546-1.386-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.085 1.838 1.24 1.838 1.24 1.07 1.834 2.807 1.304 3.492.997.108-.774.419-1.304.762-1.604-2.665-.305-5.466-1.334-5.466-5.934 0-1.31.467-2.381 1.235-3.221-.124-.304-.535-1.527.117-3.176 0 0 1.007-.322 3.3 1.23a11.484 11.484 0 013.004-.404c1.02.004 2.047.138 3.004.404 2.292-1.553 3.297-1.23 3.297-1.23.653 1.65.242 2.872.118 3.176.77.84 1.234 1.911 1.234 3.221 0 4.61-2.804 5.625-5.475 5.922.43.37.814 1.1.814 2.22v3.293c0 .32.218.694.825.576C20.565 21.795 24 17.298 24 12 24 5.373 18.627 0 12 0z" />
</svg>
</a>
<a
href="https://twitter.com/your-twitter-handle"
target="_blank"
rel="noopener noreferrer"
className="text-zinc-900 dark:text-zinc-100 hover:text-solanaGreen dark:hover:text-solanaGreen transition-colors"
aria-label="Twitter"
>
<svg
className="h-6 w-6"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M24 4.557a9.94 9.94 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.86 9.86 0 01-3.127 1.195 4.916 4.916 0 00-8.379 4.482A13.934 13.934 0 011.671 3.149 4.903 4.903 0 003.195 9.72a4.902 4.902 0 01-2.23-.616v.062a4.918 4.918 0 003.946 4.827 4.902 4.902 0 01-2.224.084 4.923 4.923 0 004.6 3.417A9.862 9.862 0 010 21.54a13.9 13.9 0 007.548 2.212c9.056 0 14.01-7.512 14.01-14.01 0-.214-.005-.428-.014-.64A9.985 9.985 0 0024 4.557z" />
</svg>
</a>
</div>
</div>
</footer>
Expand Down
Loading

0 comments on commit 295ec6c

Please sign in to comment.