A simple landing page built with React and Material UI that looks like Instagram.
- Basic components: Navbar ,Sidebar,Feed, Rightbar
- Material UI components
- Dark and light theme support
- Fully responsive design
- Interactive components
To get started, simply clone the repository and install the dependencies.
git clone [https://github.com/yourusername/InstaLandingPage.git](https://github.com/zahidrahimoon/InstaGood.git)
cd Rahi Dev
npm install
The InstaLandingPage supports both dark and light themes. The theme can be changed by clicking the moon icon in the top right corner of the page.
The InstaLandingPage is fully responsive and includes media queries to ensure that it looks great on all devices.
Check out the project demo here.
The project consists of the following components:
- Sidebar: Contains the theme switcher and social media links.
- Feed: Displays the main content of the landing page.
- Rightbar: Displays additional content or information.
To run the project, use the following command:
npm start
import React, { useState } from "react";
import Sidebar from "./components/Sidebar";
import Feed from "./components/Feed";
import Rightbar from "./components/Rightbar";
import Navbar from "./components/Navbar";
import { Box, Stack, ThemeProvider, createTheme } from "@mui/material";
const App = () => {
const [mode, setMode] = useState("dark");
const darkTheme = createTheme({
palette: {
mode: mode,
}
});
return (
<ThemeProvider theme={darkTheme}>
<Box bgcolor={"background.default"} color={"text.primary"}>
<Navbar />
<Stack direction="row" spacing={2} justifyContent="space-between">
<Sidebar setMode={setMode} mode={mode}/>
<Feed />
<Rightbar />
</Stack>
</Box>
</ThemeProvider>
);
};
export default App;
Thanks š„°