dave
This commit is contained in:
Flatlogic Bot
parent
12344b8cd6
commit
c0c1673e46
@ -1,166 +1,327 @@
|
|||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import type { ReactElement } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import {
|
||||||
|
mdiMagnify,
|
||||||
|
mdiBookOpenPageVariant,
|
||||||
|
mdiSync,
|
||||||
|
mdiThemeLightDark,
|
||||||
|
mdiDownload,
|
||||||
|
mdiCellphoneMarker,
|
||||||
|
mdiTranslate,
|
||||||
|
mdiShieldCheck,
|
||||||
|
mdiGithub,
|
||||||
|
} from '@mdi/js';
|
||||||
import BaseButton from '../components/BaseButton';
|
import BaseButton from '../components/BaseButton';
|
||||||
import CardBox from '../components/CardBox';
|
import BaseIcon from '../components/BaseIcon';
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { getPageTitle } from '../config';
|
import { getPageTitle } from '../config';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
import { useAppSelector } from '../stores/hooks';
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
|
||||||
|
|
||||||
|
const FEATURED_MANGA = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: 'Shadow Chronicles',
|
||||||
|
image: 'https://images.unsplash.com/photo-1578632738980-43318b770d76?w=400&h=600&fit=crop',
|
||||||
|
rating: '4.9',
|
||||||
|
chapters: '124',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: 'Neon Catalyst',
|
||||||
|
image: 'https://images.unsplash.com/photo-1607604276483-4efdd6d43bb3?w=400&h=600&fit=crop',
|
||||||
|
rating: '4.7',
|
||||||
|
chapters: '85',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: 'Eternal Bloom',
|
||||||
|
image: 'https://images.unsplash.com/photo-1541562232579-512a21360020?w=400&h=600&fit=crop',
|
||||||
|
rating: '4.8',
|
||||||
|
chapters: '210',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: 'Void Walker',
|
||||||
|
image: 'https://images.unsplash.com/photo-1560972550-aba3456b5564?w=400&h=600&fit=crop',
|
||||||
|
rating: '4.6',
|
||||||
|
chapters: '45',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function Starter() {
|
const FEATURES = [
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
{
|
||||||
src: undefined,
|
title: 'Universal Reader',
|
||||||
photographer: undefined,
|
description: 'Customize your reading experience with vertical, horizontal, or webtoon scrolling modes.',
|
||||||
photographer_url: undefined,
|
icon: mdiBookOpenPageVariant,
|
||||||
})
|
color: 'text-indigo-500',
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
},
|
||||||
const [contentType, setContentType] = useState('video');
|
{
|
||||||
const [contentPosition, setContentPosition] = useState('right');
|
title: 'Tracker Sync',
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
description: 'Automatically sync your reading progress with MyAnimeList, AniList, and more.',
|
||||||
|
icon: mdiSync,
|
||||||
|
color: 'text-cyan-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Offline Access',
|
||||||
|
description: 'Download your favorite chapters and read them anywhere, even without an internet connection.',
|
||||||
|
icon: mdiDownload,
|
||||||
|
color: 'text-rose-500',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Custom Themes',
|
||||||
|
description: 'Choose from multiple themes or use our "Theme Based on Cover" for a unique look.',
|
||||||
|
icon: mdiThemeLightDark,
|
||||||
|
color: 'text-amber-500',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const title = 'App Draft'
|
export default function LandingPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const { currentUser } = useAppSelector((state) => state.auth);
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
useEffect(() => {
|
||||||
useEffect(() => {
|
const handleScroll = () => {
|
||||||
async function fetchData() {
|
setIsScrolled(window.scrollY > 50);
|
||||||
const image = await getPexelsImage();
|
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSearch = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (searchQuery.trim()) {
|
||||||
|
router.push(`/search?query=${encodeURIComponent(searchQuery)}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="min-h-screen bg-slate-900 text-slate-100 font-sans selection:bg-indigo-500 selection:text-white">
|
||||||
style={
|
|
||||||
contentPosition === 'background'
|
|
||||||
? {
|
|
||||||
backgroundImage: `${
|
|
||||||
illustrationImage
|
|
||||||
? `url(${illustrationImage.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>{getPageTitle('Komikku - Your Ultimate Manga Reader')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
{/* Navigation */}
|
||||||
<div
|
<nav
|
||||||
className={`flex ${
|
className={`fixed top-0 w-full z-50 transition-all duration-300 ${
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
isScrolled ? 'bg-slate-900/80 backdrop-blur-md border-b border-slate-800 py-3' : 'bg-transparent py-6'
|
||||||
} min-h-screen w-full`}
|
}`}
|
||||||
>
|
>
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
<div className="container mx-auto px-6 flex items-center justify-between">
|
||||||
? imageBlock(illustrationImage)
|
<div className="flex items-center space-x-2">
|
||||||
: null}
|
<div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-500/20">
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
<BaseIcon path={mdiBookOpenPageVariant} className="text-white" size={24} />
|
||||||
? videoBlock(illustrationVideo)
|
|
||||||
: null}
|
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<CardBoxComponentTitle title="Welcome to your App Draft app!"/>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
|
||||||
<p className='text-center '>For guides and documentation please check
|
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span className="text-2xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-slate-400">
|
||||||
<BaseButtons>
|
Komikku
|
||||||
<BaseButton
|
</span>
|
||||||
href='/login'
|
</div>
|
||||||
label='Login'
|
|
||||||
color='info'
|
|
||||||
className='w-full'
|
|
||||||
/>
|
|
||||||
|
|
||||||
</BaseButtons>
|
<div className="hidden md:flex items-center space-x-8">
|
||||||
</CardBox>
|
<a href="#features" className="text-sm font-medium text-slate-300 hover:text-white transition-colors">
|
||||||
|
Features
|
||||||
|
</a>
|
||||||
|
<a href="#popular" className="text-sm font-medium text-slate-300 hover:text-white transition-colors">
|
||||||
|
Popular
|
||||||
|
</a>
|
||||||
|
{currentUser ? (
|
||||||
|
<BaseButton href="/dashboard" label="Dashboard" color="info" className="rounded-full px-6" />
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<Link href="/login" className="text-sm font-medium text-slate-300 hover:text-white transition-colors">
|
||||||
|
Login
|
||||||
|
</Link>
|
||||||
|
<BaseButton href="/register" label="Get Started" color="info" className="rounded-full px-6" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</SectionFullScreen>
|
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
|
||||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
|
||||||
Privacy Policy
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
|
||||||
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 pointer-events-none">
|
||||||
|
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-indigo-600/20 blur-[120px] rounded-full" />
|
||||||
|
<div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-cyan-600/10 blur-[120px] rounded-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 text-center">
|
||||||
|
<h1 className="text-5xl lg:text-7xl font-extrabold mb-8 tracking-tight">
|
||||||
|
Discover and Read <br />
|
||||||
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-cyan-400">
|
||||||
|
Your Favorite Manga
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg lg:text-xl text-slate-400 max-w-2xl mx-auto mb-12">
|
||||||
|
The most versatile open-source manga reader for the web. Track your series, customize your reader, and sync across devices.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleSearch} className="max-w-2xl mx-auto relative group">
|
||||||
|
<div className="absolute inset-y-0 left-5 flex items-center pointer-events-none">
|
||||||
|
<BaseIcon path={mdiMagnify} className="text-slate-500 group-focus-within:text-indigo-400 transition-colors" size={24} />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
placeholder="Search across 100+ sources..."
|
||||||
|
className="w-full bg-slate-800/50 border border-slate-700 backdrop-blur-sm rounded-2xl py-5 pl-14 pr-32 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all text-white placeholder:text-slate-500 shadow-2xl"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="absolute right-2 top-2 bottom-2 px-8 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl transition-all shadow-lg shadow-indigo-600/20 active:scale-95"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-16 flex flex-wrap justify-center gap-4 text-sm text-slate-500 font-medium">
|
||||||
|
<div className="flex items-center space-x-2 bg-slate-800/40 px-4 py-2 rounded-full border border-slate-700/50">
|
||||||
|
<BaseIcon path={mdiShieldCheck} className="text-green-500" size={16} />
|
||||||
|
<span>Ad-Free</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2 bg-slate-800/40 px-4 py-2 rounded-full border border-slate-700/50">
|
||||||
|
<BaseIcon path={mdiGithub} className="text-slate-400" size={16} />
|
||||||
|
<span>Open Source</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2 bg-slate-800/40 px-4 py-2 rounded-full border border-slate-700/50">
|
||||||
|
<BaseIcon path={mdiCellphoneMarker} className="text-indigo-400" size={16} />
|
||||||
|
<span>Mobile Ready</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Popular Section */}
|
||||||
|
<section id="popular" className="py-20 bg-slate-900/50">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<div className="flex items-center justify-between mb-12">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl font-bold mb-2">Popular Right Now</h2>
|
||||||
|
<p className="text-slate-400">Trending series across all extensions</p>
|
||||||
|
</div>
|
||||||
|
<Link href="/series/series-list" className="text-indigo-400 hover:text-indigo-300 font-medium flex items-center group">
|
||||||
|
View All
|
||||||
|
<span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
|
||||||
|
{FEATURED_MANGA.map((manga) => (
|
||||||
|
<div key={manga.id} className="group cursor-pointer">
|
||||||
|
<div className="relative aspect-[2/3] rounded-2xl overflow-hidden mb-4 shadow-xl ring-1 ring-slate-800">
|
||||||
|
<img
|
||||||
|
src={manga.image}
|
||||||
|
alt={manga.title}
|
||||||
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent opacity-60" />
|
||||||
|
<div className="absolute top-3 left-3 bg-slate-900/80 backdrop-blur-md px-2 py-1 rounded-lg border border-slate-700/50 flex items-center space-x-1">
|
||||||
|
<span className="text-xs font-bold text-amber-400">★</span>
|
||||||
|
<span className="text-xs font-bold">{manga.rating}</span>
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-3 left-3 text-xs font-medium text-slate-300">
|
||||||
|
{manga.chapters} Chapters
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-bold text-lg group-hover:text-indigo-400 transition-colors line-clamp-1">
|
||||||
|
{manga.title}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<section id="features" className="py-20">
|
||||||
|
<div className="container mx-auto px-6 text-center mb-16">
|
||||||
|
<h2 className="text-3xl lg:text-5xl font-extrabold mb-4">Powerful Features</h2>
|
||||||
|
<p className="text-slate-400 max-w-2xl mx-auto text-lg">
|
||||||
|
Everything you need for the perfect reading experience, all in one place.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container mx-auto px-6 grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{FEATURES.map((feature, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className="p-8 bg-slate-800/30 rounded-3xl border border-slate-700/50 hover:border-indigo-500/50 hover:bg-slate-800/50 transition-all group"
|
||||||
|
>
|
||||||
|
<div className={`w-14 h-14 rounded-2xl bg-slate-800 flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform`}>
|
||||||
|
<BaseIcon path={feature.icon} className={feature.color} size={32} />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3">{feature.title}</h3>
|
||||||
|
<p className="text-slate-400 leading-relaxed text-sm">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="py-20 container mx-auto px-6">
|
||||||
|
<div className="relative rounded-[3rem] overflow-hidden bg-indigo-600 px-8 py-16 lg:px-20 lg:py-24 text-center">
|
||||||
|
<div className="absolute top-0 left-0 w-full h-full -z-1 pointer-events-none">
|
||||||
|
<div className="absolute top-[-50%] left-[-20%] w-[60%] h-[120%] bg-white/10 blur-[120px] rounded-full rotate-12" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="text-4xl lg:text-6xl font-extrabold text-white mb-8 tracking-tight">
|
||||||
|
Ready to Start Reading?
|
||||||
|
</h2>
|
||||||
|
<p className="text-indigo-100 text-lg lg:text-xl max-w-2xl mx-auto mb-12">
|
||||||
|
Join thousands of readers and experience manga like never before. Completely free and open-source.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<BaseButton
|
||||||
|
href="/register"
|
||||||
|
label="Create Free Account"
|
||||||
|
color="white"
|
||||||
|
className="w-full sm:w-auto px-10 py-4 text-indigo-600 font-bold rounded-2xl shadow-xl shadow-black/10"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="text-white font-bold hover:underline"
|
||||||
|
>
|
||||||
|
Already have an account? Log in
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="py-12 border-t border-slate-800">
|
||||||
|
<div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-2 mb-8 md:mb-0">
|
||||||
|
<div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
|
||||||
|
<BaseIcon path={mdiBookOpenPageVariant} className="text-white" size={18} />
|
||||||
|
</div>
|
||||||
|
<span className="text-xl font-bold tracking-tight">Komikku</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap justify-center gap-8 text-sm text-slate-500 font-medium mb-8 md:mb-0">
|
||||||
|
<Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy Policy</Link>
|
||||||
|
<Link href="/terms-of-use" className="hover:text-white transition-colors">Terms of Use</Link>
|
||||||
|
<a href="https://github.com/komikku-app/komikku" target="_blank" rel="noreferrer" className="hover:text-white transition-colors flex items-center">
|
||||||
|
<BaseIcon path={mdiGithub} size={16} className="mr-2" />
|
||||||
|
Source Code
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-sm text-slate-500">
|
||||||
|
© 2026 Komikku. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user