Initial commit: Remotion landing page with hero, features, showcase, and footer sections
This commit is contained in:
insidemedia
47
README.md
Normal file
47
README.md
Normal file
@@ -0,0 +1,47 @@
|
||||
# Remotion Site
|
||||
|
||||
A modern video creation project built with [Remotion](https://www.remotion.dev/).
|
||||
|
||||
## Project Structure
|
||||
|
||||
- `src/compositions/` - Video compositions
|
||||
- `src/components/` - Reusable components (HeroSection, FeaturesSection, ShowcaseSection, FooterSection)
|
||||
- `src/theme.ts` - Theme configuration
|
||||
- `src/Root.tsx` - Main composition registry
|
||||
- `src/index.ts` - Entry point
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js (v16 or higher)
|
||||
- npm or yarn
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Development
|
||||
|
||||
Start the Remotion Studio to preview and edit your videos:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
### Build
|
||||
|
||||
Render the video:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
This will create a video file at `out/video.mp4`.
|
||||
|
||||
## Learn More
|
||||
|
||||
- [Remotion Documentation](https://www.remotion.dev/docs)
|
||||
- [Remotion API Reference](https://www.remotion.dev/docs/api)
|
||||
3142
package-lock.json
generated
Normal file
3142
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
18
package.json
Normal file
18
package.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "remotion-site",
|
||||
"version": "1.0.0",
|
||||
"description": "A modern Remotion website",
|
||||
"scripts": {
|
||||
"start": "remotion studio",
|
||||
"build": "remotion render LandingPage out/video.mp4",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"remotion": "^4.0.422",
|
||||
"@remotion/cli": "^4.0.422",
|
||||
"@remotion/eslint-config": "^4.0.422"
|
||||
}
|
||||
}
|
||||
17
src/Root.tsx
Normal file
17
src/Root.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import {Composition} from 'remotion';
|
||||
import {LandingPage} from './compositions/LandingPage';
|
||||
|
||||
export const RemotionRoot: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<Composition
|
||||
id="LandingPage"
|
||||
component={LandingPage}
|
||||
durationInFrames={900}
|
||||
fps={30}
|
||||
width={1920}
|
||||
height={1080}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
188
src/components/FeaturesSection.tsx
Normal file
188
src/components/FeaturesSection.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import {useCurrentFrame, interpolate, useVideoConfig} from 'remotion';
|
||||
import {theme} from '../theme';
|
||||
|
||||
export const FeaturesSection = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const {fps} = useVideoConfig();
|
||||
|
||||
// Staggered fade-in for each card
|
||||
const card1Opacity = interpolate(frame, [0, 30], [0, 1], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
const card2Opacity = interpolate(frame, [0, 30], [0, 1], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
const card3Opacity = interpolate(frame, [0, 30], [0, 1], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: theme.colors.darkBackground,
|
||||
padding: 80,
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
color: theme.colors.lightText,
|
||||
fontSize: 64,
|
||||
fontWeight: 700,
|
||||
marginBottom: 60,
|
||||
textAlign: 'center',
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Powerful Features
|
||||
</h2>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 40,
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{/* Feature Card 1 */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
maxWidth: 400,
|
||||
padding: 40,
|
||||
backgroundColor: 'rgba(79, 70, 229, 0.1)',
|
||||
borderRadius: 16,
|
||||
opacity: card1Opacity,
|
||||
border: '2px solid rgba(79, 70, 229, 0.3)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 48,
|
||||
marginBottom: 20,
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
>
|
||||
⚡
|
||||
</div>
|
||||
<h3
|
||||
style={{
|
||||
color: theme.colors.lightText,
|
||||
fontSize: 32,
|
||||
fontWeight: 600,
|
||||
marginBottom: 12,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Lightning Fast
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 20,
|
||||
lineHeight: 1.5,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Render videos in seconds with our optimized engine.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature Card 2 */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
maxWidth: 400,
|
||||
padding: 40,
|
||||
backgroundColor: 'rgba(79, 70, 229, 0.1)',
|
||||
borderRadius: 16,
|
||||
opacity: card2Opacity,
|
||||
border: '2px solid rgba(79, 70, 229, 0.3)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 48,
|
||||
marginBottom: 20,
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
>
|
||||
🎨
|
||||
</div>
|
||||
<h3
|
||||
style={{
|
||||
color: theme.colors.lightText,
|
||||
fontSize: 32,
|
||||
fontWeight: 600,
|
||||
marginBottom: 12,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Fully Customizable
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 20,
|
||||
lineHeight: 1.5,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Build unique designs with React components and CSS.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature Card 3 */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
maxWidth: 400,
|
||||
padding: 40,
|
||||
backgroundColor: 'rgba(79, 70, 229, 0.1)',
|
||||
borderRadius: 16,
|
||||
opacity: card3Opacity,
|
||||
border: '2px solid rgba(79, 70, 229, 0.3)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 48,
|
||||
marginBottom: 20,
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
>
|
||||
🚀
|
||||
</div>
|
||||
<h3
|
||||
style={{
|
||||
color: theme.colors.lightText,
|
||||
fontSize: 32,
|
||||
fontWeight: 600,
|
||||
marginBottom: 12,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Production Ready
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 20,
|
||||
lineHeight: 1.5,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Deploy to any platform with our export tools.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
104
src/components/FooterSection.tsx
Normal file
104
src/components/FooterSection.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import {useCurrentFrame, interpolate, useVideoConfig} from 'remotion';
|
||||
import {theme} from '../theme';
|
||||
|
||||
export const FooterSection = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const {fps} = useVideoConfig();
|
||||
|
||||
// Fade-in animation
|
||||
const opacity = interpolate(frame, [0, 30], [0, 1], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: theme.colors.darkBackground,
|
||||
padding: 60,
|
||||
boxSizing: 'border-box',
|
||||
opacity,
|
||||
}}
|
||||
>
|
||||
{/* Links */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 40,
|
||||
marginBottom: 30,
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href="#about"
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 24,
|
||||
textDecoration: 'none',
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
transition: 'color 0.2s',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = theme.colors.lightText;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = theme.colors.mutedText;
|
||||
}}
|
||||
>
|
||||
About
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 24,
|
||||
textDecoration: 'none',
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
transition: 'color 0.2s',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = theme.colors.lightText;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = theme.colors.mutedText;
|
||||
}}
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
<a
|
||||
href="#privacy"
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 24,
|
||||
textDecoration: 'none',
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
transition: 'color 0.2s',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = theme.colors.lightText;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = theme.colors.mutedText;
|
||||
}}
|
||||
>
|
||||
Privacy
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Copyright */}
|
||||
<p
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 20,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
© 2024 Remotion Site. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
87
src/components/HeroSection.tsx
Normal file
87
src/components/HeroSection.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import {useCurrentFrame, interpolate, useVideoConfig} from 'remotion';
|
||||
import {theme} from '../theme';
|
||||
|
||||
export const HeroSection = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const {fps} = useVideoConfig();
|
||||
|
||||
// Fade-in animation over first 30 frames
|
||||
const opacity = interpolate(frame, [0, 30], [0, 1], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: theme.colors.bg,
|
||||
opacity,
|
||||
}}
|
||||
>
|
||||
{/* Brand Name */}
|
||||
<h1
|
||||
style={{
|
||||
color: theme.colors.textLight,
|
||||
fontSize: 80,
|
||||
fontWeight: 700,
|
||||
marginBottom: 20,
|
||||
fontFamily: theme.fontFamily,
|
||||
}}
|
||||
>
|
||||
Remotion Site
|
||||
</h1>
|
||||
|
||||
{/* Headline */}
|
||||
<h2
|
||||
style={{
|
||||
color: theme.colors.textLight,
|
||||
fontSize: 48,
|
||||
fontWeight: 600,
|
||||
marginBottom: 16,
|
||||
textAlign: 'center',
|
||||
fontFamily: theme.fontFamily,
|
||||
}}
|
||||
>
|
||||
Design better stories with code-driven video
|
||||
</h2>
|
||||
|
||||
{/* Subheading */}
|
||||
<p
|
||||
style={{
|
||||
color: theme.colors.textMuted,
|
||||
fontSize: 24,
|
||||
maxWidth: 800,
|
||||
textAlign: 'center',
|
||||
lineHeight: 1.5,
|
||||
fontFamily: theme.fontFamily,
|
||||
}}
|
||||
>
|
||||
Create professional videos programmatically using React and Remotion.
|
||||
Perfect for marketing, social media, and more.
|
||||
</p>
|
||||
|
||||
{/* CTA Button */}
|
||||
<button
|
||||
style={{
|
||||
marginTop: 40,
|
||||
padding: '16px 32px',
|
||||
backgroundColor: theme.colors.accent,
|
||||
color: theme.colors.textLight,
|
||||
fontSize: 24,
|
||||
fontWeight: 600,
|
||||
border: 'none',
|
||||
borderRadius: 8,
|
||||
cursor: 'pointer',
|
||||
fontFamily: theme.fontFamily,
|
||||
}}
|
||||
>
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
191
src/components/ShowcaseSection.tsx
Normal file
191
src/components/ShowcaseSection.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import {useCurrentFrame, interpolate, useVideoConfig} from 'remotion';
|
||||
import {theme} from '../theme';
|
||||
|
||||
export const ShowcaseSection = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const {fps} = useVideoConfig();
|
||||
|
||||
// Slide-up animation for each tile
|
||||
const tile1Y = interpolate(frame, [0, 30], [100, 0], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
const tile2Y = interpolate(frame, [0, 30], [100, 0], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
const tile3Y = interpolate(frame, [0, 30], [100, 0], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
const tile4Y = interpolate(frame, [0, 30], [100, 0], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: theme.colors.darkBackground,
|
||||
padding: 80,
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
color: theme.colors.lightText,
|
||||
fontSize: 64,
|
||||
fontWeight: 700,
|
||||
marginBottom: 60,
|
||||
textAlign: 'center',
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Our Work
|
||||
</h2>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
gap: 40,
|
||||
width: '100%',
|
||||
maxWidth: 1600,
|
||||
}}
|
||||
>
|
||||
{/* Project Tile 1 */}
|
||||
<div
|
||||
style={{
|
||||
padding: 40,
|
||||
backgroundColor: 'rgba(79, 70, 229, 0.1)',
|
||||
borderRadius: 16,
|
||||
border: '2px solid rgba(79, 70, 229, 0.3)', transform: `translateY(${tile1Y}px)`,
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
style={{
|
||||
color: theme.colors.lightText,
|
||||
fontSize: 28,
|
||||
fontWeight: 600,
|
||||
marginBottom: 12,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Project Alpha
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 20,
|
||||
lineHeight: 1.5,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
A cutting-edge solution for modern businesses.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Project Tile 2 */}
|
||||
<div
|
||||
style={{
|
||||
padding: 40,
|
||||
backgroundColor: 'rgba(79, 70, 229, 0.1)',
|
||||
borderRadius: 16,
|
||||
border: '2px solid rgba(79, 70, 229, 0.3)',
|
||||
transform: `translateY(${tile2Y}px)`,
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
style={{
|
||||
color: theme.colors.lightText,
|
||||
fontSize: 28,
|
||||
fontWeight: 600,
|
||||
marginBottom: 12,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Project Beta
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 20,
|
||||
lineHeight: 1.5,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Innovative approach to complex problems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Project Tile 3 */}
|
||||
<div
|
||||
style={{
|
||||
padding: 40,
|
||||
backgroundColor: 'rgba(79, 70, 229, 0.1)',
|
||||
borderRadius: 16,
|
||||
border: '2px solid rgba(79, 70, 229, 0.3)',
|
||||
transform: `translateY(${tile3Y}px)`,
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
style={{
|
||||
color: theme.colors.lightText,
|
||||
fontSize: 28,
|
||||
fontWeight: 600,
|
||||
marginBottom: 12,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Project Gamma
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 20,
|
||||
lineHeight: 1.5,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Scalable architecture for enterprise needs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Project Tile 4 */}
|
||||
<div
|
||||
style={{
|
||||
padding: 40,
|
||||
backgroundColor: 'rgba(79, 70, 229, 0.1)',
|
||||
borderRadius: 16,
|
||||
border: '2px solid rgba(79, 70, 229, 0.3)',
|
||||
transform: `translateY(${tile4Y}px)`,
|
||||
}}
|
||||
>
|
||||
<h3
|
||||
style={{
|
||||
color: theme.colors.lightText,
|
||||
fontSize: 28,
|
||||
fontWeight: 600,
|
||||
marginBottom: 12,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Project Delta
|
||||
</h3>
|
||||
<p
|
||||
style={{
|
||||
color: theme.colors.mutedText,
|
||||
fontSize: 20,
|
||||
lineHeight: 1.5,
|
||||
fontFamily: theme.fonts.sans.join(', '),
|
||||
}}
|
||||
>
|
||||
Next-generation technology platform.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
32
src/compositions/LandingPage.tsx
Normal file
32
src/compositions/LandingPage.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import {AbsoluteFill, Sequence} from 'remotion';
|
||||
import {theme} from '../theme';
|
||||
import {HeroSection} from '../components/HeroSection';
|
||||
import {FeaturesSection} from '../components/FeaturesSection';
|
||||
import {ShowcaseSection} from '../components/ShowcaseSection';
|
||||
import {FooterSection} from '../components/FooterSection';
|
||||
|
||||
export const LandingPage = () => {
|
||||
return (
|
||||
<AbsoluteFill style={{backgroundColor: theme.colors.darkBackground}}>
|
||||
{/* Hero Section - Frames 0-225 */}
|
||||
<Sequence from={0} durationInFrames={225}>
|
||||
<HeroSection />
|
||||
</Sequence>
|
||||
|
||||
{/* Features Section - Frames 225-450 */}
|
||||
<Sequence from={225} durationInFrames={225}>
|
||||
<FeaturesSection />
|
||||
</Sequence>
|
||||
|
||||
{/* Showcase Section - Frames 450-675 */}
|
||||
<Sequence from={450} durationInFrames={225}>
|
||||
<ShowcaseSection />
|
||||
</Sequence>
|
||||
|
||||
{/* Footer Section - Frames 675-900 */}
|
||||
<Sequence from={675} durationInFrames={225}>
|
||||
<FooterSection />
|
||||
</Sequence>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
3
src/index.ts
Normal file
3
src/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import {registerRoot} from "remotion";
|
||||
import {RemotionRoot} from "./Root";
|
||||
registerRoot(RemotionRoot);
|
||||
11
src/theme.ts
Normal file
11
src/theme.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export const theme = {
|
||||
colors: {
|
||||
primary: '#4F46E5',
|
||||
darkBackground: '#0F172A',
|
||||
lightText: '#F8FAFC',
|
||||
mutedText: '#94A3B8',
|
||||
},
|
||||
fonts: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
};
|
||||
18
tsconfig.json
Normal file
18
tsconfig.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"jsx": "react",
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user