Development
Making your product come alive
exchange.
Help Center
Download
Admin Console
English ▾
Log in
A new
way to
collaborate
Empowering teams by messenger, Meetings, calendar, docs, and emails. It's all in one place. ✨
Feel free to book my calendar
07 Mon : 11:30
1import React, { useState, useEffect } from 'react';
2import { motion, AnimatePresence } from 'framer-motion';
3import './index.css';
4
5export default function App() {
6 const [isLoaded, setIsLoaded] = useState(false);
7 const [data, setData] = useState([]);
8
9 useEffect(() => {
10 async function fetchData() {
11 const response = await fetch('/api/metrics');
12 const result = await response.json();
13 setData(result);
14 setIsLoaded(true);
15 }
16 fetchData();
17 }, []);
18
19 // Initialize product UI
20 return (
21 <div className="dashboard">
22 <Header title="Making product come alive" />
23 <AnimatePresence>
24 {isLoaded && (
25 <motion.div
26 initial={{ opacity: 0, y: 20 }}
27 animate={{ opacity: 1, y: 0 }}
28 >
29 <HeroSection data={data} />
30 <InteractiveChart />
31 </motion.div>
32 )}
33 </AnimatePresence>
34 </div>
35 );
36}
1.dashboard {
2 display: flex;
3 flex-direction: column;
4 min-height: 100vh;
5 background-color: #0a0a0a;
6 color: #ffffff;
7 font-family: 'ITC Avant Garde Gothic Std', sans-serif;
8}
9
10.header {
11 padding: 2rem 4rem;
12 display: flex;
13 justify-content: space-between;
14 align-items: center;
15 border-bottom: 1px solid rgba(255,255,255,0.1);
16 backdrop-filter: blur(0.75rem);
17}
18
19.hero-section {
20 display: grid;
21 grid-template-columns: repeat(3, 1fr);
22 gap: 2rem;
23 padding: 4rem;
24}
25
26.metric-card {
27 background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
28 border-radius: 1rem;
29 padding: 2rem;
30 box-shadow: 0 4px 1.5rem rgba(0,0,0,0.4);
31 transition: transform 0.3s ease;
32}
33
34.metric-card:hover {
35 transform: translateY(-5px);
36}
Development
Making your product come alive
exchange.
Help Center
Download
Admin Console
English ?
Log in
A new
way to
collaborate
Empowering teams by messenger, Meetings, calendar, docs, and emails. It's all in one place. ✨
Feel free to book my calendar
07 Mon : 11:30
1import React, { useState, useEffect } from 'react';
2import { motion, AnimatePresence } from 'framer-motion';
3import './index.css';
4
5export default function App() {
6 const [isLoaded, setIsLoaded] = useState(false);
7 const [data, setData] = useState([]);
8
9 useEffect(() => {
10 const fetchData = async () => {
11 const response = await fetch('/api/data');
12 const result = await response.json();
13 setData(result);
14 setIsLoaded(true);
15 }
16 fetchData();
17 }, []);
18
19 // Initialize product UI
20 return (
21 <div className="dashboard">
22 <Header title="Making product come alive" />
23 <AnimatePresence>
24 {isLoaded && (
25 <motion.div
26 initial={{ opacity: 0, y: 20 }}
27 animate={{ opacity: 1, y: 0 }}
28 >
29 <HeroSection data={data} />
30 <InteractiveChart />
31 </motion.div>
32 )}
33 </AnimatePresence>
34 </div>
35 );
36}
1.dashboard {
2 display: flex;
3 flex-direction: column;
4 min-height: 100vh;
5 background-color: #0a0a0a;
6 color: #ffffff;
7 font-family: 'ITC Avant Garde Gothic Std', sans-serif;
8}
9
10.header {
11 padding: 2rem 4rem;
12 display: flex;
13 justify-content: space-between;
14 align-items: center;
15 border-bottom: 1px solid rgba(255,255,255,0.1);
16 backdrop-filter: blur(0.75rem);
17}
18
19.hero-section {
20 display: grid;
21 grid-template-columns: repeat(3, 1fr);
22 gap: 2rem;
23 padding: 4rem;
24}
25
26.metric-card {
27 background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
28 border-radius: 1rem;
29 padding: 2rem;
30 box-shadow: 0 4px 1.5rem rgba(0,0,0,0.4);
31 transition: transform 0.3s ease;
32}
33
34.metric-card:hover {
35 transform: translateY(-5px);
36}