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