Tips

- To import anything relative to src directory use `@` like following code
Structure
```text
src
	app
		page.jsx
	components
		card.jsx
```
In `src/app/page.jsx`
```jsx
import Card from '@/components/card'

export default function App(){
	<>
		<Card>Tools</Card>
	</>
}
```
In `src/components/card`
```jsx
export default function Card({ children }) {
  const cardStyle = {
    padding: "100px",
    margin: "10px",
    boxShadow: "0 4px 8px 0 rgba(0,0,0,0.2)",
    border: "1px solid #ddd",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  };

  return <div style={cardStyle}>{children}</div>;
}

```
- multiple root layouts
 https://www.youtube.com/watch?v=X9_XqeqWBR0
 &nbsp;
 Route grouping will be used so remove layout,jsx from root and instead use them in route group folders. Multiple layouts at same root is possible but not multiple pages so at whichever route there is page.jsx that will be considered as default route
 Next.js App Router Multiple Root Layouts： Explained With Examples.mp4
 https://files.catbox.moe/eiy18h.mp4