feat: insights grid initial layout (#6591)

frontend/src/component/project/Project/Project.tsx

@@ -44,6 +44,7 @@ import { HiddenProjectIconWithTooltip } from './HiddenProjectIconWithTooltip/Hid
 import { ChangeRequestPlausibleProvider } from 'component/changeRequest/ChangeRequestContext';
 import { ProjectApplications } from '../ProjectApplications/ProjectApplications';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { ProjectInsights } from './ProjectInsights/ProjectInsights';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
@@ -311,7 +312,7 @@ export const Project = () => {
                 <Route path='environments' element={<ProjectEnvironment />} />
                 <Route path='archive' element={<ProjectFeaturesArchive />} />
                 {Boolean(projectOverviewRefactor) && (
-                    <Route path='insights' element={<div>Hello world</div>} />
+                    <Route path='insights' element={<ProjectInsights />} />
                 )}
                 <Route path='logs' element={<ProjectLog />} />
                 <Route

frontend/src/component/project/Project/ProjectInsights/ProjectInsights.tsx

@@ -0,0 +1,47 @@
+import { Box, styled } from '@mui/material';
+
+const Grid = styled(Box)(({ theme }) => ({
+    display: 'grid',
+    gap: theme.spacing(2),
+    gridTemplateColumns: 'repeat(10, 1fr)',
+}));
+
+const Overview = styled(Box)(({ theme }) => ({
+    gridColumn: '1 / -1',
+}));
+
+const Health = styled(Box)(({ theme }) => ({
+    gridColumn: 'span 5',
+}));
+
+const LeadTime = styled(Box)(({ theme }) => ({
+    gridColumn: 'span 5',
+}));
+
+const ToggleTypesUsed = styled(Box)(({ theme }) => ({
+    gridColumn: 'span 2',
+}));
+
+const ProjectMembers = styled(Box)(({ theme }) => ({
+    gridColumn: 'span 2',
+}));
+
+const ChangeRequests = styled(Box)(({ theme }) => ({
+    gridColumn: 'span 5',
+}));
+
+export const ProjectInsights = () => {
+    return (
+        <Grid>
+            <Overview>
+                Total changes / avg time to production / feature flags /stale
+                flags
+            </Overview>
+            <Health>Project Health</Health>
+            <LeadTime>Lead time</LeadTime>
+            <ToggleTypesUsed>Toggle types used</ToggleTypesUsed>
+            <ProjectMembers>Project members</ProjectMembers>
+            <ChangeRequests>Change Requests</ChangeRequests>
+        </Grid>
+    );
+};