AppCakes
112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
IonApp,
|
|
IonContent,
|
|
IonPage,
|
|
IonButton,
|
|
IonIcon,
|
|
setupIonicReact,
|
|
} from '@ionic/react';
|
|
import {
|
|
star,
|
|
chevronForward,
|
|
calculator,
|
|
flash,
|
|
leaf,
|
|
flask,
|
|
} from 'ionicons/icons';
|
|
|
|
import '@ionic/react/css/core.css';
|
|
import '@ionic/react/css/normalize.css';
|
|
import '@ionic/react/css/structure.css';
|
|
import '@ionic/react/css/typography.css';
|
|
import '@ionic/react/css/padding.css';
|
|
import '@ionic/react/css/float-elements.css';
|
|
import '@ionic/react/css/text-alignment.css';
|
|
import '@ionic/react/css/text-transformation.css';
|
|
import '@ionic/react/css/flex-utils.css';
|
|
import '@ionic/react/css/display.css';
|
|
|
|
import './theme/variables.css';
|
|
import './App.css';
|
|
|
|
const urlMode = new URLSearchParams(window.location.search).get('mode');
|
|
setupIonicReact({ mode: (urlMode === 'md' ? 'md' : 'ios') as 'ios' | 'md' });
|
|
|
|
const WelcomeScreen: React.FC = () => {
|
|
return (
|
|
<IonPage>
|
|
<IonContent fullscreen className="welcome-content">
|
|
<div className="background-shapes">
|
|
<div className="shape-1"></div>
|
|
<div className="shape-2"></div>
|
|
</div>
|
|
|
|
<div className="content-wrapper">
|
|
<div className="hero-section">
|
|
<div className="badge">
|
|
<span>IGCSE Excellence</span>
|
|
</div>
|
|
|
|
<h1 className="hero-title">
|
|
Unlock Your
|
|
<br />
|
|
<span className="text-gradient">Full Potential</span>
|
|
</h1>
|
|
|
|
<p className="hero-subtitle">
|
|
Master Mathematics, Sciences, and more with interactive bite-sized
|
|
lessons tailored for your exams.
|
|
</p>
|
|
|
|
<div className="subject-pills">
|
|
<div className="subject-pill">
|
|
<div className="subject-icon icon-math">
|
|
<IonIcon icon={calculator} />
|
|
</div>
|
|
<span className="subject-name">Maths</span>
|
|
</div>
|
|
<div className="subject-pill">
|
|
<div className="subject-icon icon-physics">
|
|
<IonIcon icon={flash} />
|
|
</div>
|
|
<span className="subject-name">Physics</span>
|
|
</div>
|
|
<div className="subject-pill">
|
|
<div className="subject-icon icon-bio">
|
|
<IonIcon icon={leaf} />
|
|
</div>
|
|
<span className="subject-name">Biology</span>
|
|
</div>
|
|
<div className="subject-pill">
|
|
<div className="subject-icon icon-chem">
|
|
<IonIcon icon={flask} />
|
|
</div>
|
|
<span className="subject-name">Chemistry</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="action-section">
|
|
<IonButton expand="block" className="start-button">
|
|
Get Started
|
|
<IonIcon icon={chevronForward} slot="end" />
|
|
</IonButton>
|
|
<IonButton expand="block" fill="clear" className="login-button">
|
|
I already have an account
|
|
</IonButton>
|
|
</div>
|
|
</div>
|
|
</IonContent>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<IonApp>
|
|
<WelcomeScreen />
|
|
</IonApp>
|
|
);
|
|
|
|
export default App;
|