mirror of
https://github.com/emuplace/folium.emuplace.app.git
synced 2024-11-22 02:12:48 +01:00
Removed old home
This commit is contained in:
Jarrod Norwell
parent
90d026e2bd
commit
fdda7e42ea
8584
package-lock.json
generated
8584
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,40 +0,0 @@
|
||||
import '@mantine/carousel/styles.css';
|
||||
import "@mantine/core/styles.css";
|
||||
import { Container, MantineProvider, Space } from "@mantine/core";
|
||||
import { theme } from "../theme";
|
||||
// import { CardsCarousel } from './CardsCarousel/CardsCarousel';
|
||||
// import { DoubleHeader } from "./DoubleHeader/DoubleHeader";
|
||||
// import { FAQSimple } from "./FAQSimple/FAQSimple";
|
||||
// import { FooterSimple } from "./FooterSimple/FooterSimple";
|
||||
// import { NintendoFeaturesTitle } from "./FeaturesTitles/NintendoFeaturesTitle";
|
||||
// import { PlayStationFeaturesTitle } from "./FeaturesTitles/PlayStationFeaturesTitle";
|
||||
// import { SEGAFeaturesTitle } from './FeaturesTitles/SEGAFeaturesTitle';
|
||||
// // import { HeroText } from "./HeroText/HeroText";
|
||||
// import { Welcome } from "./Welcome/Welcome";
|
||||
//
|
||||
// import { HomeGameplayCarousel } from './HomeGameplayCarousel/HomeGameplayCarousel';
|
||||
// import { DeveloperFooter } from './DeveloperFooter/DeveloperFooter';
|
||||
|
||||
import { HomeHero } from './HomeHero/HomeHero';
|
||||
import { HomeCores } from './HomeCores/HomeCores';
|
||||
import { HomeScreenshots } from './HomeScreenshots/HomeScreenshots';
|
||||
import { HomeFAQ } from './HomeFAQ/HomeFAQ';
|
||||
import { HomeFooter } from './HomeFooter/HomeFooter';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<MantineProvider theme={theme}>
|
||||
<Container pt={100}>
|
||||
<HomeHero />
|
||||
<Space h={'xl'} />
|
||||
<HomeCores />
|
||||
<Space h={'xl'} />
|
||||
<HomeScreenshots />
|
||||
<Space h={'xl'} />
|
||||
<HomeFAQ />
|
||||
<Space h={'xl'} />
|
||||
<HomeFooter />
|
||||
</Container>
|
||||
</MantineProvider>
|
||||
);
|
||||
}
|
||||
@ -1,104 +0,0 @@
|
||||
import {
|
||||
Badge, SimpleGrid,
|
||||
Space, Text, ThemeIcon,
|
||||
Title, useMantineTheme
|
||||
} from '@mantine/core';
|
||||
import { Icon, IconProps } from '@tabler/icons-react';
|
||||
import { ForwardRefExoticComponent, RefAttributes } from 'react';
|
||||
|
||||
interface HomeCoreFeatures {
|
||||
icon: ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
export enum Availability {
|
||||
AVAILABLE = 0,
|
||||
COMING_SOON = 1
|
||||
}
|
||||
|
||||
interface HomeCoreCardProps {
|
||||
availability: Availability;
|
||||
features: Array<HomeCoreFeatures>;
|
||||
subtitle: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
|
||||
export function HomeCoreCard({ title, subtitle, availability, features }: HomeCoreCardProps) {
|
||||
const theme = useMantineTheme();
|
||||
|
||||
const map = features.map((feature) => (
|
||||
<div key={feature.title}>
|
||||
<ThemeIcon radius='md' size={'lg'}>
|
||||
<feature.icon style={{ height: '66%', width: '66%' }} />
|
||||
</ThemeIcon>
|
||||
<Space h={'md'} />
|
||||
<Title order={3}>
|
||||
{feature.title}
|
||||
</Title>
|
||||
<Text c={'dimmed'}>
|
||||
{feature.subtitle}
|
||||
</Text>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title order={2}>
|
||||
{title}
|
||||
</Title>
|
||||
<Text c={'dimmed'}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
<Space h={'md'} />
|
||||
<Badge color={availability == Availability.AVAILABLE ? theme.primaryColor : 'orange'}>
|
||||
{availability == Availability.AVAILABLE ? 'Available Now' : 'Coming Soon'}
|
||||
</Badge>
|
||||
<Space h={'lg'} />
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }}>
|
||||
{map}
|
||||
</SimpleGrid>
|
||||
</>
|
||||
);
|
||||
|
||||
/*
|
||||
const items = features.map((feature) => (
|
||||
<div key={feature.title}>
|
||||
<ThemeIcon
|
||||
size={'xl'}
|
||||
radius="md"
|
||||
color={'black'}
|
||||
>
|
||||
<feature.icon style={{ width: rem(26), height: rem(26) }} stroke={2} />
|
||||
</ThemeIcon>
|
||||
<Text fz="lg" mt="sm" fw={500}>
|
||||
{feature.title}
|
||||
</Text>
|
||||
<Text c="dimmed" fz="sm">
|
||||
{feature.subtitle}
|
||||
</Text>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<Grid gutter={80}>
|
||||
<Grid.Col span={{ base: 12, md: 5 }}>
|
||||
<Title className={classes.title} order={2}>
|
||||
{title}
|
||||
</Title>
|
||||
<Text c="dimmed">
|
||||
{subtitle}
|
||||
</Text>
|
||||
<Text c={availability == 'Available Now' ? 'green' : 'orange'}>
|
||||
{availability}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 7 }}>
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }} spacing={30}>
|
||||
{items}
|
||||
</SimpleGrid>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
);*/
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
.wrapper {
|
||||
position: relative;
|
||||
margin-bottom: rem(120px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family:
|
||||
Greycliff CF,
|
||||
var(--mantine-font-family);
|
||||
font-size: rem(36px);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin-bottom: var(--mantine-spacing-md);
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
}
|
||||
|
||||
.control {
|
||||
&[data-inactive] {
|
||||
opacity: 0;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
@ -1,155 +0,0 @@
|
||||
/*
|
||||
import { Carousel } from '@mantine/carousel';
|
||||
import { Container, rem } from '@mantine/core';
|
||||
import {
|
||||
IconDeviceGamepad, IconDeviceGamepad2, IconBrandGithub,
|
||||
IconMicrophone, IconVolume, IconCircleArrowLeft,
|
||||
IconCircleArrowRight
|
||||
} from '@tabler/icons-react';
|
||||
import { HomeCoreCard } from './HomeCoreCard';
|
||||
import classes from './HomeCores.module.css';
|
||||
*/
|
||||
|
||||
import { Tabs, Space, Title } from "@mantine/core";
|
||||
import {
|
||||
IconDeviceGamepad, IconDeviceGamepad2, IconBrandGithub,
|
||||
IconMicrophone, IconVolume
|
||||
} from '@tabler/icons-react';
|
||||
import { Availability, HomeCoreCard } from './HomeCoreCard';
|
||||
|
||||
const data = [
|
||||
{
|
||||
availability: Availability.AVAILABLE,
|
||||
features: [
|
||||
{
|
||||
icon: IconDeviceGamepad,
|
||||
title: 'Full Controller Support',
|
||||
subtitle: 'Supports Backbone One, PlayStation DualShock 4, PlayStation 5 DualSense, Xbox Series S and Xbox Series X controllers'
|
||||
},
|
||||
{
|
||||
icon: IconBrandGithub,
|
||||
title: 'Fully Open Source',
|
||||
subtitle: 'Licensed under GPLv3 to maintain full transparency and to give people the opportunity to build Folium for themselves'
|
||||
},
|
||||
{
|
||||
icon: IconMicrophone,
|
||||
title: 'Audio Input',
|
||||
subtitle: 'Making use of OpenAL, Folium provides supported cores with crystal clear audio input'
|
||||
},
|
||||
{
|
||||
icon: IconVolume,
|
||||
title: 'Native Audio Output',
|
||||
subtitle: 'Making use of Apple\'s CoreAudio API, Folium provides a seamless audio listening experience'
|
||||
}
|
||||
],
|
||||
title: 'Nintendo',
|
||||
subtitle: 'Emulate the Game Boy Advance, Nintendo 3DS and Nintendo DS'
|
||||
},
|
||||
{
|
||||
availability: Availability.COMING_SOON,
|
||||
features: [
|
||||
{
|
||||
icon: IconDeviceGamepad2,
|
||||
title: 'Full Controller Support',
|
||||
subtitle: 'Supports Backbone One, PlayStation DualShock 4, PlayStation 5 DualSense, Xbox Series S and Xbox Series X controllers'
|
||||
},
|
||||
{
|
||||
icon: IconBrandGithub,
|
||||
title: 'Fully Open Source',
|
||||
subtitle: 'Licensed under GPLv3 to maintain full transparency and to give people the oppurtunity to build Folium for themselves'
|
||||
}
|
||||
],
|
||||
title: 'PlayStation',
|
||||
subtitle: 'Emulate the PlayStation 1 and PlayStation 2'
|
||||
},
|
||||
{
|
||||
availability: Availability.COMING_SOON,
|
||||
features: [
|
||||
{
|
||||
icon: IconDeviceGamepad,
|
||||
title: 'Full Controller Support',
|
||||
subtitle: 'Supports Backbone One, PlayStation DualShock 4, PlayStation 5 DualSense, Xbox Series S and Xbox Series X controllers'
|
||||
},
|
||||
{
|
||||
icon: IconBrandGithub,
|
||||
title: 'Fully Open Source',
|
||||
subtitle: 'Licensed under GPLv3 to maintain full transparency and to give people the oppurtunity to build Folium for themselves'
|
||||
}
|
||||
],
|
||||
title: 'SEGA',
|
||||
subtitle: 'Emulate the SEGA Genesis'
|
||||
}
|
||||
];
|
||||
|
||||
export function HomeCores() {
|
||||
const tabValues = [
|
||||
{
|
||||
disabled: false,
|
||||
id: 'nintendo',
|
||||
title: 'Nintendo'
|
||||
},
|
||||
{
|
||||
disabled: true,
|
||||
id: 'playstation',
|
||||
title: 'PlayStation'
|
||||
},
|
||||
{
|
||||
disabled: true,
|
||||
id: 'sega',
|
||||
title: 'SEGA'
|
||||
}
|
||||
];
|
||||
|
||||
const tabs = tabValues.map((tab) => (
|
||||
<Tabs.Tab disabled={tab.disabled} value={tab.id}>{tab.title}</Tabs.Tab>
|
||||
));
|
||||
|
||||
const panels = tabValues.map((tab, index) => (
|
||||
<Tabs.Panel value={tab.id}>
|
||||
<HomeCoreCard {...data[index]} />
|
||||
</Tabs.Panel>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title order={1}>
|
||||
Cores
|
||||
</Title>
|
||||
<Space h={'md'} />
|
||||
<Tabs defaultValue={tabValues[0].id} radius={'xl'} variant="pills">
|
||||
<Tabs.List>
|
||||
{tabs}
|
||||
</Tabs.List>
|
||||
<Space h={'md'} />
|
||||
{...panels}
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
|
||||
/*
|
||||
const slides = data.map((item) => (
|
||||
<Carousel.Slide key={item.title}>
|
||||
<HomeCoreCard {...item} />
|
||||
</Carousel.Slide>
|
||||
));
|
||||
|
||||
return (
|
||||
<Container className={classes.wrapper}>
|
||||
<Carousel
|
||||
align={'start'}
|
||||
classNames={classes}
|
||||
slideSize={'100%'}
|
||||
slideGap={{ base: rem(2), sm: 'xl' }}
|
||||
nextControlIcon={
|
||||
<IconCircleArrowRight size={'lg'} />
|
||||
}
|
||||
previousControlIcon={
|
||||
<IconCircleArrowLeft size={'lg'} />
|
||||
}
|
||||
>
|
||||
{slides}
|
||||
</Carousel>
|
||||
</Container>
|
||||
);
|
||||
*/
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
import { Space, Title, Accordion } from '@mantine/core';
|
||||
import { IconMoneybag, IconFileImport, IconPaint } from '@tabler/icons-react';
|
||||
|
||||
/*
|
||||
const questions = [
|
||||
{
|
||||
value: 'purchase-price-and-type',
|
||||
answer: 'Folium will cost a one-time payment of $4.99 USD',
|
||||
question: 'What will Folium cost on the App Store?'
|
||||
},
|
||||
{
|
||||
value: 'games-and-system-files',
|
||||
answer: 'Games and system files must be dumped from a console or handheld you own',
|
||||
question: 'How do we get games and system files?'
|
||||
},
|
||||
{
|
||||
value: 'supported-and-upcoming-cores',
|
||||
answer: 'Currently the Game Boy Advance, Nintendo 3DS and Nintendo DS are supported with plans for a handful of other retro consoles and handhelds to be added',
|
||||
question: 'What consoles and handhelds are and will be supported?'
|
||||
},
|
||||
{
|
||||
value: 'is-jit-supported',
|
||||
answer: 'No. Apple does not allow JIT for apps on both the App Store and TestFlight',
|
||||
question: 'Does Folium on the App Store or TestFlight support JIT?'
|
||||
},
|
||||
{
|
||||
value: 'game-compatibility',
|
||||
answer: 'Folium has a high compatibility for most games in most of the cores however, some games work better than others and the device it is being played on plays a significant role in compatibility',
|
||||
question: 'Do all games work on all cores within Folium?'
|
||||
},
|
||||
{
|
||||
value: 'missing-features-and-functionality',
|
||||
answer: 'Folium is still very much a work-in-progress, a lot of features and functionality do exist within the app but there is still a lot more that need to be added',
|
||||
question: 'Does Folium contain all features and functionality?'
|
||||
},
|
||||
{
|
||||
value: 'cheats-mods-and-saves',
|
||||
answer: 'The Cytrus core supports all 3 however, some need to be done manually through Files. Grape supports saves but neither cheats nor mods at this time',
|
||||
question: 'Does Folium support cheats, mods and saves?'
|
||||
},
|
||||
];
|
||||
*/
|
||||
|
||||
const questions = [
|
||||
{
|
||||
icon: IconMoneybag,
|
||||
id: 'pricing',
|
||||
question: 'How much does Folium cost on the App Store?',
|
||||
answer: 'Folium costs a one-time payment of $4.99 USD'
|
||||
},
|
||||
{
|
||||
icon: IconFileImport,
|
||||
id: 'file-types',
|
||||
question: 'What file extensions does Folium support?',
|
||||
answer: 'Folium currently supports .3ds, .app, .cia, .cci and .cxi for Cytrus and .gba, .ds and .nds for Grape'
|
||||
},
|
||||
{
|
||||
icon: IconPaint,
|
||||
id: 'skins',
|
||||
question: 'How does someone make a skin for Folium?',
|
||||
answer: 'Skins can be made by following the guide here: https://official-antique.gitbook.io/folium'
|
||||
}
|
||||
];
|
||||
|
||||
export function HomeFAQ() {
|
||||
const map = questions.map((question) => (
|
||||
<Accordion.Item value={question.id}>
|
||||
<Accordion.Control icon={<question.icon size={20} />}>
|
||||
{question.question}
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>{question.answer}</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title order={1}>
|
||||
Frequently Asked Questions
|
||||
</Title>
|
||||
<Space h={'md'} />
|
||||
<Accordion radius={'md'} variant="contained">
|
||||
{map}
|
||||
</Accordion>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
.footer {
|
||||
border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: var(--mantine-spacing-xl);
|
||||
padding-bottom: var(--mantine-spacing-xl);
|
||||
|
||||
@media (max-width: $mantine-breakpoint-xs) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
@media (max-width: $mantine-breakpoint-xs) {
|
||||
margin-top: var(--mantine-spacing-md);
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import { Container, Group, ActionIcon, Title } from '@mantine/core';
|
||||
import {
|
||||
IconBrandReddit, IconBrandTwitch,
|
||||
IconBrandTwitter, IconBrandYoutube
|
||||
} from '@tabler/icons-react';
|
||||
import classes from './HomeFooter.module.css';
|
||||
|
||||
export function HomeFooter() {
|
||||
return (
|
||||
<div className={classes.footer}>
|
||||
<Container className={classes.inner}>
|
||||
<Title order={2}>
|
||||
Folium
|
||||
</Title>
|
||||
<Group className={classes.links} justify="flex-end" wrap="nowrap">
|
||||
{/*<ActionIcon onClick={(event) => {
|
||||
window.open('https://youtube.com/watch?v=dQw4w9WgXcQ', '_blank');
|
||||
event.preventDefault();
|
||||
}} color='blue' size="lg" variant="transparent">
|
||||
<IconBrandOnlyfans style={{ width: '70%', height: '70%' }} stroke={2} />
|
||||
</ActionIcon>*/}
|
||||
<ActionIcon onClick={(event) => {
|
||||
window.open('https://reddit.com/u/antique_codes', '_blank');
|
||||
event.preventDefault();
|
||||
}} color='orange' size="lg" variant="transparent">
|
||||
<IconBrandReddit style={{ width: '70%', height: '70%' }} stroke={2} />
|
||||
</ActionIcon>
|
||||
<ActionIcon onClick={(event) => {
|
||||
window.open('https://twitch.tv/antique_codes', '_blank');
|
||||
event.preventDefault();
|
||||
}} color='violet' size="lg" variant="transparent">
|
||||
<IconBrandTwitch style={{ width: '70%', height: '70%' }} stroke={2} />
|
||||
</ActionIcon>
|
||||
<ActionIcon onClick={(event) => {
|
||||
window.open('https://twitter.com/antique_codes', '_blank');
|
||||
event.preventDefault();
|
||||
}} color='blue' size="lg" variant="transparent">
|
||||
<IconBrandTwitter style={{ width: '70%', height: '70%' }} stroke={2} />
|
||||
</ActionIcon>
|
||||
<ActionIcon onClick={(event) => {
|
||||
window.open('https://www.youtube.com/@antique_plays', '_blank');
|
||||
event.preventDefault();
|
||||
}} color='red' size="lg" variant="transparent">
|
||||
<IconBrandYoutube style={{ width: '70%', height: '70%' }} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
import { vars } from "../../theme";
|
||||
import { rem } from "@mantine/core";
|
||||
|
||||
export const title = style({
|
||||
color: vars.colors.black,
|
||||
fontSize: rem(100),
|
||||
fontWeight: 900,
|
||||
letterSpacing: rem(-2),
|
||||
|
||||
selectors: {
|
||||
[vars.darkSelector]: {
|
||||
color: vars.colors.white,
|
||||
},
|
||||
},
|
||||
|
||||
"@media": {
|
||||
[vars.smallerThan("md")]: {
|
||||
fontSize: rem(50),
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -1,63 +0,0 @@
|
||||
.wrapper {
|
||||
position: relative;
|
||||
margin-bottom: rem(120px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
padding-top: rem(200px);
|
||||
padding-bottom: rem(120px);
|
||||
|
||||
@media (max-width: $mantine-breakpoint-sm) {
|
||||
padding-bottom: rem(80px);
|
||||
padding-top: rem(80px);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family:
|
||||
Greycliff CF,
|
||||
var(--mantine-font-family);
|
||||
font-size: rem(62px);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
|
||||
@media (max-width: $mantine-breakpoint-sm) {
|
||||
font-size: rem(42px);
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: var(--mantine-spacing-xl);
|
||||
font-size: rem(24px);
|
||||
|
||||
@media (max-width: $mantine-breakpoint-sm) {
|
||||
font-size: rem(18px);
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: calc(var(--mantine-spacing-xl) * 2);
|
||||
|
||||
@media (max-width: $mantine-breakpoint-sm) {
|
||||
margin-top: var(--mantine-spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
height: rem(54px);
|
||||
padding-left: rem(38px);
|
||||
padding-right: rem(38px);
|
||||
|
||||
@media (max-width: $mantine-breakpoint-sm) {
|
||||
height: rem(54px);
|
||||
padding-left: rem(18px);
|
||||
padding-right: rem(18px);
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@ -1,158 +0,0 @@
|
||||
import {
|
||||
Blockquote, Button, Group, SimpleGrid, Space, Stack, Text, Title,
|
||||
useMantineTheme
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconBrandDiscord, IconBrandGithub,
|
||||
IconExclamationCircle
|
||||
} from '@tabler/icons-react';
|
||||
|
||||
export function HomeHero() {
|
||||
const theme = useMantineTheme();
|
||||
|
||||
// const map = changes.map((change) => (
|
||||
// <Accordion.Item value={change.id}>
|
||||
// <Accordion.Control icon={<IconTimelineEventText size={20} />}>
|
||||
// {change.title}
|
||||
// </Accordion.Control>
|
||||
// <Accordion.Panel>
|
||||
// <List>
|
||||
// {change.changes.map((change) => (<List.Item>{change}</List.Item>))}
|
||||
// </List>
|
||||
// </Accordion.Panel>
|
||||
// </Accordion.Item>
|
||||
// ));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title c={theme.primaryColor} order={1}>
|
||||
Folium
|
||||
</Title>
|
||||
<Text c={'dimmed'}>
|
||||
Beautifully designed, high performing multi-system emulation in the palm of your hands
|
||||
</Text>
|
||||
<Space h={'md'} />
|
||||
<Group>
|
||||
<Stack gap={'sm'}>
|
||||
<Button onClick={(event) => {
|
||||
window.open('ipas/Folium-v1.6-Sideload.ipa.zip', '_blank');
|
||||
event.preventDefault();
|
||||
}} radius={'xl'} variant='default'>
|
||||
Download
|
||||
</Button>
|
||||
<Text c={'dimmed'} ta={'center'}>v1.6</Text>
|
||||
</Stack>
|
||||
<Stack gap={'sm'}>
|
||||
<Button onClick={(event) => {
|
||||
window.open('https://apps.apple.com/us/app/folium/id6498623389', '_blank');
|
||||
event.preventDefault();
|
||||
}} radius={'xl'}>
|
||||
$4.99 USD
|
||||
</Button>
|
||||
<Text c={'dimmed'} ta={'center'}>v1.6</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Space h={'xl'} />
|
||||
<Blockquote color='red' icon={<IconExclamationCircle size={30} />} iconSize={30} px={'md'} py={'md'} radius={'md'}>
|
||||
Please read the rules before interacting with the Discord server
|
||||
</Blockquote>
|
||||
<Space h={'xl'} />
|
||||
<SimpleGrid cols={{ base: 1, sm: 2 }}>
|
||||
<div key={'discord'}>
|
||||
<Title c={'violet'} order={1}>
|
||||
<IconBrandDiscord /> Discord
|
||||
</Title>
|
||||
<Text c={'dimmed'}>
|
||||
Join the Discord server and get or give help, post gameplay videos and know when the latest releases are available!
|
||||
</Text>
|
||||
<Space h={'md'} />
|
||||
<Button color='violet' onClick={(event) => {
|
||||
window.open('https://discord.gg/TqsjtpaAtk', '_blank');
|
||||
event.preventDefault();
|
||||
}} radius={'xl'}>
|
||||
Accept Invitation
|
||||
</Button>
|
||||
</div>
|
||||
<div key={'discord'}>
|
||||
<Title order={1}>
|
||||
<IconBrandGithub /> GitHub
|
||||
</Title>
|
||||
<Text c={'dimmed'}>
|
||||
Browse the Folium codebase along with the codebase's of all cores used within the application
|
||||
</Text>
|
||||
<Space h={'md'} />
|
||||
<Button onClick={(event) => {
|
||||
window.open('https://github.com/folium-app', '_blank');
|
||||
event.preventDefault();
|
||||
}} radius={'xl'} variant='default'>
|
||||
Open in GitHub
|
||||
</Button>
|
||||
</div>
|
||||
</SimpleGrid>
|
||||
{
|
||||
/*
|
||||
<Space h={'xl'} />
|
||||
<Title order={1}>
|
||||
Upcoming (v1.4)
|
||||
</Title>
|
||||
<Text c={'dimmed'}>
|
||||
Below is a non-exhaustive list of all upcoming additions, changes and fixes coming to Folium
|
||||
</Text>
|
||||
<Space h={'md'} />
|
||||
<Accordion radius={'md'} variant="contained">
|
||||
{map}
|
||||
</Accordion>
|
||||
*/
|
||||
}
|
||||
</>
|
||||
);
|
||||
|
||||
/*
|
||||
return (
|
||||
<Container className={classes2.wrapper}>
|
||||
<Title className={classes.title} ta="center" mt={100}>
|
||||
Welcome to{" "}
|
||||
<Text
|
||||
inherit
|
||||
component="span"
|
||||
c={'green'}>
|
||||
Folium
|
||||
</Text>
|
||||
</Title>
|
||||
<Text c="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
|
||||
Beautifully designed, high performing multi-system emulation in the palm of your hands
|
||||
</Text>
|
||||
<Space h={'xl'} />
|
||||
<Center>
|
||||
<Stack align='center'>
|
||||
<Group>
|
||||
<Stack align='center'>
|
||||
<Button color={'black'} radius="xl" size="lg" variant="default" onClick={(event) => {
|
||||
window.open('/ipas/Folium-v1.0.9-Sideload.ipa.zip', '_blank');
|
||||
event.preventDefault();
|
||||
}}>
|
||||
Download
|
||||
</Button>
|
||||
<Text c={'dimmed'} size='md'>
|
||||
v1.0.9 Sideload
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack align='center'>
|
||||
<Button color={'blue'} radius="xl" size="lg" variant="filled">
|
||||
$4.99
|
||||
</Button>
|
||||
<Text c={'dimmed'} size='md'>
|
||||
v1.0.9 AppStore
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Space h={'xl'} />
|
||||
<Text c="dimmed" ta="center" size="lg" maw={580} mx="auto">
|
||||
Developed by <Anchor href='https://jarrodnorwell.com' target='_blank'>Jarrod Norwell</Anchor>
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
</Container>
|
||||
);
|
||||
*/
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import { Card, Image } from "@mantine/core";
|
||||
|
||||
interface HomeScreenshotCardProps {
|
||||
url: string;
|
||||
}
|
||||
|
||||
export function HomeScreenshotCard({ url }: HomeScreenshotCardProps) {
|
||||
return (
|
||||
<>
|
||||
<Card padding={'lg'} radius={'md'} withBorder>
|
||||
<Card.Section>
|
||||
<Image src={url} />
|
||||
</Card.Section>
|
||||
</Card></>
|
||||
);
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
.wrapper {
|
||||
position: relative;
|
||||
margin-bottom: rem(120px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family:
|
||||
Greycliff CF,
|
||||
sans-serif;
|
||||
font-weight: 900;
|
||||
color: var(--mantine-color-white);
|
||||
line-height: 1.2;
|
||||
font-size: rem(32px);
|
||||
margin-top: var(--mantine-spacing-xs);
|
||||
}
|
||||
|
||||
.category {
|
||||
color: var(--mantine-color-white);
|
||||
opacity: 0.7;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.control {
|
||||
&[data-inactive] {
|
||||
opacity: 0;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import { Carousel } from '@mantine/carousel';
|
||||
import { Space, Title } from '@mantine/core';
|
||||
import { IconCircleArrowLeftFilled, IconCircleArrowRightFilled } from '@tabler/icons-react';
|
||||
import { HomeScreenshotCard } from './HomeScreenshotCard';
|
||||
import classes from './HomeScreenshots.module.css';
|
||||
|
||||
const data = [
|
||||
{ url: '/one.png' },
|
||||
{ url: '/two.png' },
|
||||
{ url: '/three.png' },
|
||||
{ url: '/four.png' }
|
||||
];
|
||||
|
||||
export function HomeScreenshots() {
|
||||
const slides = data.map((item) => (
|
||||
<Carousel.Slide key={item.url}>
|
||||
<HomeScreenshotCard {...item} />
|
||||
</Carousel.Slide>
|
||||
));
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title order={1}>
|
||||
Screenshots
|
||||
</Title>
|
||||
<Space h={'md'} />
|
||||
<Carousel
|
||||
align={'start'}
|
||||
classNames={classes}
|
||||
slideGap={'md'}
|
||||
slideSize={{ base: '100%', sm: '33.333333%' }}
|
||||
nextControlIcon={
|
||||
<IconCircleArrowRightFilled size={'lg'} />
|
||||
}
|
||||
previousControlIcon={
|
||||
<IconCircleArrowLeftFilled size={'lg'} />
|
||||
}
|
||||
>
|
||||
{slides}
|
||||
</Carousel></>
|
||||
);
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import Home from "./Home.tsx";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<Home />
|
||||
</React.StrictMode>
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user