├── .gitignore ├── public ├── mail.png ├── flone.png ├── frothy.png ├── insta.png ├── logo1.png ├── logo2.png ├── logo3.png ├── facebook.png ├── favicon.ico ├── greentick.png ├── imgguide1.png ├── imgguide2.png ├── keepitup.png ├── mainimg.png ├── pagelike.png ├── sidearrow.png ├── twitter.png ├── whitetick.png ├── yellowcross.png ├── yellowearth.png ├── images │ ├── signup.png │ ├── temp21.png │ ├── temp23.png │ ├── temp27.png │ ├── closeSign.svg │ └── chimpLogo2.svg ├── imgprovider3.png ├── githubReadme │ ├── email.png │ ├── home.png │ ├── login.png │ ├── dashboard1.png │ └── dashboard2.png ├── BlocksTabImages │ ├── share.png │ ├── divider.png │ ├── footer.png │ ├── images.png │ ├── imgClick.png │ ├── leftLogo.png │ ├── mainImg.png │ ├── navbar.png │ ├── sidebar.png │ ├── textbox.png │ ├── boxedtext.png │ ├── imagecard.png │ ├── imagegroup.png │ ├── imagetext.png │ ├── buttonimage.png │ ├── codecardimage.png │ ├── socialfollow.png │ ├── footercardimage.png │ └── videocardimage.png ├── dashboard-images │ ├── bake.jpg │ ├── feedEnd.png │ ├── Card3_img1.png │ ├── Card3_img2.png │ ├── Card3_img3.png │ ├── Card3_img4.png │ ├── createwebsite.png │ ├── Vector.svg │ └── profile.svg ├── cross.svg ├── index.html └── notficon.svg ├── .env ├── src ├── fonts │ └── Graphik-font │ │ ├── Graphik-Bold.ttf │ │ ├── Graphik-Medium.ttf │ │ ├── Graphik-Regular.ttf │ │ ├── Graphik-Semibold.ttf │ │ ├── Graphik-MediumItalic.ttf │ │ └── Graphik-RegularItalic.ttf ├── components │ ├── Dashboard │ │ ├── Card1.css │ │ ├── Card1.jsx │ │ ├── Card3.jsx │ │ ├── Card2.jsx │ │ ├── CompletedCampaign.jsx │ │ ├── StyledComponent.jsx │ │ ├── AudienceCard.jsx │ │ ├── Card3.css │ │ ├── Card4.jsx │ │ ├── Card2.css │ │ ├── AudienceCard.module.css │ │ ├── DashboardMain.css │ │ ├── CompletedCampaign.module.css │ │ ├── Card4.css │ │ ├── DashboardMain.jsx │ │ └── Navbar.jsx │ ├── Template │ │ ├── Template.jsx │ │ ├── TempNavbar.jsx │ │ ├── AllTemplate.jsx │ │ ├── Template.module.css │ │ └── SelectTemplate.jsx │ ├── BlocksTab │ │ ├── BlockTabNavbar.module.css │ │ ├── BlocksTab.module.css │ │ ├── LeftBar.module.css │ │ ├── LeftBar.jsx │ │ ├── BlocksTab.jsx │ │ └── BlockTabNavbar.jsx │ ├── CampaignsSelectTab.module.css │ ├── FinalPages │ │ ├── EmailSent.jsx │ │ ├── SendEmail.jsx │ │ ├── Final.module.css │ │ └── Final.jsx │ ├── SignupPage │ │ ├── PasswordTab.jsx │ │ ├── Signup.module.css │ │ └── Signup.jsx │ ├── CampaignsSelectTab.jsx │ ├── CreatingAnEmail │ │ ├── CreatingAnEmail.module.css │ │ └── CreatingAnEmail.jsx │ ├── Homepage.module.css │ ├── Campaigns.module.css │ └── Homepage.jsx ├── App.js ├── index.js ├── styles.css └── Routers │ └── Routers.jsx ├── server ├── models │ └── user.model.js ├── db │ └── connect.js ├── server.js └── router │ └── auth.js ├── package.json └── Readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | config.env 3 | .vercel 4 | -------------------------------------------------------------------------------- /public/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/mail.png -------------------------------------------------------------------------------- /public/flone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/flone.png -------------------------------------------------------------------------------- /public/frothy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/frothy.png -------------------------------------------------------------------------------- /public/insta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/insta.png -------------------------------------------------------------------------------- /public/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/logo1.png -------------------------------------------------------------------------------- /public/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/logo2.png -------------------------------------------------------------------------------- /public/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/logo3.png -------------------------------------------------------------------------------- /public/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/facebook.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/greentick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/greentick.png -------------------------------------------------------------------------------- /public/imgguide1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/imgguide1.png -------------------------------------------------------------------------------- /public/imgguide2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/imgguide2.png -------------------------------------------------------------------------------- /public/keepitup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/keepitup.png -------------------------------------------------------------------------------- /public/mainimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/mainimg.png -------------------------------------------------------------------------------- /public/pagelike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/pagelike.png -------------------------------------------------------------------------------- /public/sidearrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/sidearrow.png -------------------------------------------------------------------------------- /public/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/twitter.png -------------------------------------------------------------------------------- /public/whitetick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/whitetick.png -------------------------------------------------------------------------------- /public/yellowcross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/yellowcross.png -------------------------------------------------------------------------------- /public/yellowearth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/yellowearth.png -------------------------------------------------------------------------------- /public/images/signup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/images/signup.png -------------------------------------------------------------------------------- /public/images/temp21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/images/temp21.png -------------------------------------------------------------------------------- /public/images/temp23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/images/temp23.png -------------------------------------------------------------------------------- /public/images/temp27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/images/temp27.png -------------------------------------------------------------------------------- /public/imgprovider3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/imgprovider3.png -------------------------------------------------------------------------------- /public/githubReadme/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/githubReadme/email.png -------------------------------------------------------------------------------- /public/githubReadme/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/githubReadme/home.png -------------------------------------------------------------------------------- /public/githubReadme/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/githubReadme/login.png -------------------------------------------------------------------------------- /public/BlocksTabImages/share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/share.png -------------------------------------------------------------------------------- /public/dashboard-images/bake.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/dashboard-images/bake.jpg -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | SERVER_PORT=3001 2 | DATABASE=mongodb+srv://Shah1117:Shah1117@mailchimp.8qw7x.mongodb.net/MailChimp?retryWrites=true&w=majority 3 | -------------------------------------------------------------------------------- /public/BlocksTabImages/divider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/divider.png -------------------------------------------------------------------------------- /public/BlocksTabImages/footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/footer.png -------------------------------------------------------------------------------- /public/BlocksTabImages/images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/images.png -------------------------------------------------------------------------------- /public/BlocksTabImages/imgClick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/imgClick.png -------------------------------------------------------------------------------- /public/BlocksTabImages/leftLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/leftLogo.png -------------------------------------------------------------------------------- /public/BlocksTabImages/mainImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/mainImg.png -------------------------------------------------------------------------------- /public/BlocksTabImages/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/navbar.png -------------------------------------------------------------------------------- /public/BlocksTabImages/sidebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/sidebar.png -------------------------------------------------------------------------------- /public/BlocksTabImages/textbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/textbox.png -------------------------------------------------------------------------------- /public/dashboard-images/feedEnd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/dashboard-images/feedEnd.png -------------------------------------------------------------------------------- /public/githubReadme/dashboard1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/githubReadme/dashboard1.png -------------------------------------------------------------------------------- /public/githubReadme/dashboard2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/githubReadme/dashboard2.png -------------------------------------------------------------------------------- /public/BlocksTabImages/boxedtext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/boxedtext.png -------------------------------------------------------------------------------- /public/BlocksTabImages/imagecard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/imagecard.png -------------------------------------------------------------------------------- /public/BlocksTabImages/imagegroup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/imagegroup.png -------------------------------------------------------------------------------- /public/BlocksTabImages/imagetext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/imagetext.png -------------------------------------------------------------------------------- /public/BlocksTabImages/buttonimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/buttonimage.png -------------------------------------------------------------------------------- /public/BlocksTabImages/codecardimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/codecardimage.png -------------------------------------------------------------------------------- /public/BlocksTabImages/socialfollow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/socialfollow.png -------------------------------------------------------------------------------- /public/dashboard-images/Card3_img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/dashboard-images/Card3_img1.png -------------------------------------------------------------------------------- /public/dashboard-images/Card3_img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/dashboard-images/Card3_img2.png -------------------------------------------------------------------------------- /public/dashboard-images/Card3_img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/dashboard-images/Card3_img3.png -------------------------------------------------------------------------------- /public/dashboard-images/Card3_img4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/dashboard-images/Card3_img4.png -------------------------------------------------------------------------------- /src/fonts/Graphik-font/Graphik-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/src/fonts/Graphik-font/Graphik-Bold.ttf -------------------------------------------------------------------------------- /public/BlocksTabImages/footercardimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/footercardimage.png -------------------------------------------------------------------------------- /public/BlocksTabImages/videocardimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/BlocksTabImages/videocardimage.png -------------------------------------------------------------------------------- /public/dashboard-images/createwebsite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/public/dashboard-images/createwebsite.png -------------------------------------------------------------------------------- /src/fonts/Graphik-font/Graphik-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/src/fonts/Graphik-font/Graphik-Medium.ttf -------------------------------------------------------------------------------- /src/fonts/Graphik-font/Graphik-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/src/fonts/Graphik-font/Graphik-Regular.ttf -------------------------------------------------------------------------------- /src/fonts/Graphik-font/Graphik-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/src/fonts/Graphik-font/Graphik-Semibold.ttf -------------------------------------------------------------------------------- /src/components/Dashboard/Card1.css: -------------------------------------------------------------------------------- 1 | .imgCard1 { 2 | position: absolute; 3 | width: 474px; 4 | height: 307px; 5 | left: 264px; 6 | top: 202px; 7 | } 8 | -------------------------------------------------------------------------------- /src/fonts/Graphik-font/Graphik-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/src/fonts/Graphik-font/Graphik-MediumItalic.ttf -------------------------------------------------------------------------------- /src/fonts/Graphik-font/Graphik-RegularItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshchaturvedi1/mailChimp-clone/HEAD/src/fonts/Graphik-font/Graphik-RegularItalic.ttf -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import "./styles.css"; 2 | import Routers from "./Routers/Routers" 3 | 4 | export default function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /server/models/user.model.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | 3 | const userSchema = { 4 | email:String, 5 | username:String, 6 | password:String 7 | } 8 | 9 | const User = mongoose.model('USER', userSchema); 10 | 11 | module.exports = User; -------------------------------------------------------------------------------- /public/dashboard-images/Vector.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/Dashboard/Card1.jsx: -------------------------------------------------------------------------------- 1 | import './Card1.css' 2 | 3 | export default function Card1({ status }) { 4 | return ( 5 | bake 6 | ) 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/components/Template/Template.jsx: -------------------------------------------------------------------------------- 1 | import Navbar from "./TempNavbar"; 2 | import SelectTemplate from "./SelectTemplate"; 3 | 4 | export default function Templete(){ 5 | 6 | return ( 7 | <> 8 | 9 | 10 | 11 | ) 12 | } -------------------------------------------------------------------------------- /server/db/connect.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | 3 | 4 | mongoose.connect("mongodb+srv://Shah1117:Shah1117@mailchimp.8qw7x.mongodb.net/MailChimp?retryWrites=true&w=majority",{ 5 | useNewUrlParser: true, 6 | useUnifiedTopology: true 7 | }).then(()=>{ 8 | console.log("connected"); 9 | }).catch((err)=>{ 10 | console.log(err); 11 | }) -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | 5 | import App from "./App"; 6 | 7 | const rootElement = document.getElementById("root"); 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | rootElement 15 | ); 16 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const app = express(); 3 | const cors = require('cors'); 4 | 5 | require('dotenv').config({path:`../.env`}); 6 | require('./db/connect'); 7 | app.use(express.json()); 8 | app.use(cors()); 9 | app.use("/",require('./router/auth')); 10 | 11 | const PORT = process.env.SERVER_PORT; 12 | 13 | app.listen(PORT,()=>{ 14 | console.log("123"); 15 | }) -------------------------------------------------------------------------------- /src/components/Template/TempNavbar.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Template.module.css" 2 | 3 | export default function Navbar(){ 4 | return ( 5 |
6 | 7 |

Create a template

8 |
9 |

Help

10 |

Cancel

11 |
12 |
13 | ) 14 | } -------------------------------------------------------------------------------- /src/components/Dashboard/Card3.jsx: -------------------------------------------------------------------------------- 1 | import './Card3.css' 2 | 3 | export default function Card3({ img, head, body, button, status }) { 4 | 5 | return ( 6 |
7 | card_img 8 |
{head}
9 |
{body}
10 |
{button}
11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /public/dashboard-images/profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/Template/AllTemplate.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./Template.module.css"; 2 | import {Link} from "react-router-dom"; 3 | 4 | export default function AllTemplates({data}){ 5 | 6 | return ( 7 | <> 8 | {data.map((el)=>{ 9 | return( 10 | 11 | 12 |

{el.p1}

13 |

{el.p2}

14 | 15 | ) 16 | })} 17 | 18 | ) 19 | 20 | 21 | } -------------------------------------------------------------------------------- /server/router/auth.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const router = express.Router(); 3 | require('../db/connect'); 4 | const User = require('../models/user.model'); 5 | 6 | router.route("/create").post((req, res) => { 7 | const email = req.body.email; 8 | const username = req.body.username; 9 | const password = req.body.password; 10 | const data = new User({ 11 | email, 12 | username, 13 | password 14 | }) 15 | data.save(); 16 | }) 17 | 18 | router.route("/users").get((req, res) => { 19 | User.find() 20 | .then((data)=>res.json(data)) 21 | }) 22 | 23 | module.exports = router; -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-size: 62.5%; 3 | } 4 | 5 | @font-face { 6 | font-family: "Graphik"; 7 | src: local("Graphik"), 8 | url(./fonts/Graphik-font/Graphik-Regular.ttf) format("truetype"); 9 | 10 | font-weight: 400; 11 | } 12 | 13 | @font-face { 14 | font-family: "Graphik"; 15 | src: local("Graphik"), 16 | url(./fonts/Graphik-font/Graphik-Bold.ttf) format("truetype"); 17 | 18 | font-weight: 600; 19 | } 20 | 21 | @font-face { 22 | font-family: "Graphik"; 23 | src: local("Graphik"), 24 | url(./fonts/Graphik-font/Graphik-Medium.ttf) format("truetype"); 25 | 26 | font-weight: 500; 27 | } 28 | 29 | body { 30 | margin: 0px; 31 | width: 100%; 32 | } 33 | -------------------------------------------------------------------------------- /src/components/Dashboard/Card2.jsx: -------------------------------------------------------------------------------- 1 | import './Card2.css' 2 | import {Link} from "react-router-dom"; 3 | 4 | export default function Card2({ status }) { 5 | return ( 6 |
7 | 8 |

{status ? "Create a website" : "Send your first email"}

9 | 10 |

{status ? "Build a free website with all the tools needed to market your business built right in. No coding skills needed." : "Choose a pre-designed template or use our drag=and-drop builder to lauch a campaign in minutes"}

11 | 12 |
13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /src/components/BlocksTab/BlockTabNavbar.module.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .mainDiv { 6 | background: #241c15; 7 | display: grid; 8 | align-items: center; 9 | grid-template-columns: 50% 50%; 10 | height: 60px; 11 | font-size: 14px; 12 | color: #fff; 13 | } 14 | .logoDiv { 15 | display: flex; 16 | margin-left: 3.1rem; 17 | } 18 | .logoDiv > svg { 19 | margin-right: 3.4rem; 20 | margin-top: 6px; 21 | } 22 | .logoDiv > p { 23 | margin-top: 12px; 24 | } 25 | .navigationDiv { 26 | display: flex; 27 | justify-content: right; 28 | margin-right: 3rem; 29 | } 30 | .navigationDiv > p { 31 | padding: 8px 10px; 32 | margin: 0 0px 0 30px; 33 | } 34 | .navigationDiv > p > svg { 35 | margin-left: 6px; 36 | } 37 | .Button { 38 | background: #007c89; 39 | border-radius: 2px; 40 | } 41 | p:hover { 42 | cursor: pointer; 43 | } 44 | .Button>a{ 45 | text-decoration: none; 46 | color: inherit; 47 | } -------------------------------------------------------------------------------- /src/components/Dashboard/CompletedCampaign.jsx: -------------------------------------------------------------------------------- 1 | import style from './CompletedCampaign.module.css' 2 | 3 | export default function CompletedCampaign() { 4 | return ( 5 |
6 |
7 |
8 | Completed 9 | Campaign 10 | • Oct 03 11 |
12 | 13 |
Campaign Name
14 |
Email
15 |
Clicks 33.33% • Opens 33.33%
16 |
17 |
18 |
Campaign Name
19 |
20 |
21 |
22 | ) 23 | } -------------------------------------------------------------------------------- /src/components/Dashboard/StyledComponent.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | export const MainDiv = styled.div` 3 | position: fixed; 4 | width: 9.6rem; 5 | height: 100vh; 6 | left: 0px; 7 | top: 0px; 8 | `; 9 | 10 | export const LeftDiv = styled.div` 11 | position: absolute; 12 | left: 0%; 13 | width:1rem; 14 | top: 0%; 15 | bottom: 0%; 16 | background: #ffe01b; 17 | `; 18 | export const RightDiv = styled.div` 19 | position: absolute; 20 | width:8.6rem; 21 | margin-left:1rem; 22 | top: 0%; 23 | bottom: 0%; 24 | border-right: 1px solid rgba(184, 184, 184, 0.8); 25 | > div { 26 | width:100%; 27 | height:5.9rem; 28 | display:flex; 29 | justify-content:center; 30 | align-items:center; 31 | margin:2px 0 2px 0; 32 | :nth-child(1) { 33 | margin-top:10px; 34 | } 35 | :nth-child(8){ 36 | position:absolute; 37 | bottom:1.3rem; 38 | } 39 | } 40 | `; 41 | 42 | export const NameInitial = styled.div` 43 | z-index:100; 44 | position:absolute; 45 | font-family:Source Serif Pro; 46 | font-size:6rem; 47 | bottom:1.3rem; 48 | font-weight:400; 49 | > p{ 50 | margin:.8rem .8rem 0 0; 51 | font-size:2rem; 52 | } 53 | `; -------------------------------------------------------------------------------- /src/components/Dashboard/AudienceCard.jsx: -------------------------------------------------------------------------------- 1 | import audienceCard from './AudienceCard.module.css' 2 | 3 | export default function AudienceCard({ status }) { 4 | return ( 5 |
6 |
7 |
Total Audience
8 |
Add Contacts
9 |
10 | 11 |
12 |
{status ? "3" : "0"}
13 |
{status ? "+3" : "+0"}({status ? "+300%" : "+0%"}) this week
14 |
Total Audience Breakdown
15 | 16 |
Campaign Name
17 |
{status ? "+3" : "+0"}({status ? "+300%" : "+0%"}) this week
18 |
19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "version": "1.0.0", 4 | "description": "React example starter project", 5 | "keywords": [ 6 | "react", 7 | "starter" 8 | ], 9 | "main": "src/index.js", 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.36", 12 | "@fortawesome/free-solid-svg-icons": "^5.15.4", 13 | "@fortawesome/react-fontawesome": "^0.1.15", 14 | "axios": "^0.21.4", 15 | "concurrently": "^6.3.0", 16 | "cors": "^2.8.5", 17 | "dotenv": "^10.0.0", 18 | "express": "^4.17.1", 19 | "mongoose": "^6.0.8", 20 | "nodemon": "^2.0.13", 21 | "react": "17.0.2", 22 | "react-dom": "17.0.2", 23 | "react-dropzone": "^11.4.2", 24 | "react-router-dom": "^5.3.0", 25 | "react-scripts": "4.0.0", 26 | "styled-components": "^5.3.1" 27 | }, 28 | "devDependencies": { 29 | "@babel/runtime": "7.13.8", 30 | "typescript": "4.1.3" 31 | }, 32 | "scripts": { 33 | "dev": "nodemon node cd server/server.js", 34 | "start": "react-scripts start", 35 | "build": "react-scripts build", 36 | "test": "react-scripts test --env=jsdom", 37 | "eject": "react-scripts eject" 38 | }, 39 | "browserslist": [ 40 | ">0.2%", 41 | "not dead", 42 | "not ie <= 11", 43 | "not op_mini all" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /src/components/CampaignsSelectTab.module.css: -------------------------------------------------------------------------------- 1 | .h1 { 2 | font-size: 2.4rem; 3 | font-family: "Source Serif Pro Regular"; 4 | text-align: center; 5 | /* margin-top: 28.1rem; */ 6 | padding-top: 3.1rem; 7 | } 8 | .h1 ~ p { 9 | text-align: center; 10 | font-size: 1.6rem; 11 | font-weight: 400; 12 | width: 66rem; 13 | margin: auto; 14 | margin-top: 1rem; 15 | } 16 | .closeX { 17 | position: absolute; 18 | top: 7.5rem; 19 | left: 92rem; 20 | } 21 | .template { 22 | width: 66rem; 23 | margin: 3.4rem auto; 24 | display: flex; 25 | justify-content: space-between; 26 | } 27 | .template > div { 28 | background-color: white; 29 | width: 26.9rem; 30 | } 31 | .template > div > img { 32 | margin-top: 1.7rem; 33 | width: 15.1rem; 34 | margin-left: 5.9rem; 35 | } 36 | .template > div > h2 { 37 | margin-top: 2rem; 38 | margin-left: 8.1rem; 39 | } 40 | .template > div > ul { 41 | margin-top: 3.4rem; 42 | margin-left: 4rem; 43 | } 44 | .template > div > ul > li { 45 | font-size: 1.4rem; 46 | line-height: 2.2rem; 47 | font-weight: 400; 48 | width: 21.6rem; 49 | } 50 | .template > div > button { 51 | background-color: #007c89; 52 | color: white; 53 | font-weight: 500; 54 | font-size: 1.4rem; 55 | padding: 0.7rem 1.7rem; 56 | border: none; 57 | margin: 1.5rem 9.6rem; 58 | } 59 | -------------------------------------------------------------------------------- /src/components/Dashboard/Card3.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: absolute; 3 | } 4 | 5 | .card3img { 6 | position: relative; 7 | width: 138px; 8 | height: 231px; 9 | top: -1px; 10 | left: 0px; 11 | } 12 | 13 | .head { 14 | position: relative; 15 | width: 257px; 16 | height: 30px; 17 | left: 168px; 18 | top: -200px; 19 | 20 | font-family: Source Serif Pro; 21 | font-style: normal; 22 | font-weight: normal; 23 | font-size: 24px; 24 | line-height: 30px; 25 | /* identical to box height */ 26 | letter-spacing: -0.02em; 27 | color: #000000; 28 | } 29 | 30 | .body { 31 | position: relative; 32 | width: 252px; 33 | height: 66px; 34 | left: 168px; 35 | top: -180px; 36 | 37 | font-family: Graphik; 38 | font-style: normal; 39 | font-weight: normal; 40 | font-size: 14px; 41 | line-height: 22px; 42 | /* or 157% */ 43 | /* display: flex; 44 | align-items: flex-end; */ 45 | letter-spacing: -0.03em; 46 | color: #828282; 47 | } 48 | 49 | .button { 50 | position: relative; 51 | width: 106px; 52 | height: 15px; 53 | left: 168px; 54 | top: -160px; 55 | 56 | font-family: Graphik; 57 | font-style: normal; 58 | font-weight: 400; 59 | font-size: 14px; 60 | line-height: 15px; 61 | letter-spacing: -0.02em; 62 | 63 | /* Primary green */ 64 | 65 | color: #007c89; 66 | } 67 | -------------------------------------------------------------------------------- /src/components/Dashboard/Card4.jsx: -------------------------------------------------------------------------------- 1 | import './Card4.css' 2 | import CompletedCampaign from './CompletedCampaign' 3 | 4 | export default function Card4({ value }) { 5 | 6 | return ( 7 |
8 |
9 |
Here’s what’s happening
10 |
11 |
Filter by: All activity 12 | 13 | 14 |
15 |
16 |
17 | 18 | {value ? :
19 | 20 | 21 |
This section is your feed. Your most important marketing activity will show up here.
22 |
Once your campaign is underway, things will look a lot more exciting.
23 | 24 | 25 |
} 26 | 27 |
28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /public/cross.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/closeSign.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/Dashboard/Card2.css: -------------------------------------------------------------------------------- 1 | .card2 { 2 | position: absolute; 3 | width: 504px; 4 | height: 307px; 5 | left: 739px; 6 | top: 202px; 7 | 8 | border: 1px solid #dcdcdc; 9 | box-sizing: border-box; 10 | } 11 | 12 | .title { 13 | position: relative; 14 | width: 350px; 15 | height: 40px; 16 | top: 50px; 17 | left: 31px; 18 | bottom: 190px; 19 | 20 | font-family: Source Serif Pro; 21 | font-style: normal; 22 | font-weight: normal; 23 | font-size: 32px; 24 | line-height: 40px; 25 | /* identical to box height */ 26 | 27 | letter-spacing: -0.02em; 28 | 29 | color: #000000; 30 | } 31 | 32 | .text { 33 | position: relative; 34 | 35 | top: 60px; 36 | left: 31px; 37 | width: 393px; 38 | height: 44px; 39 | 40 | font-family: Graphik; 41 | font-style: normal; 42 | font-weight: normal; 43 | font-size: 14px; 44 | line-height: 22px; 45 | /* or 157% */ 46 | 47 | letter-spacing: -0.03em; 48 | 49 | color: #828282; 50 | } 51 | 52 | .buttonCard2 { 53 | position: relative; 54 | top: 80px; 55 | left: 31px; 56 | width: 128px; 57 | height: 41px; 58 | border: none; 59 | background: #007c89; 60 | text-decoration: none; 61 | } 62 | .spanCard2 { 63 | width: 74px; 64 | height: 18px; 65 | 66 | font-family: Graphik; 67 | font-style: normal; 68 | font-weight: 500; 69 | font-size: 14px; 70 | line-height: 19px; 71 | /* or 136% */ 72 | 73 | letter-spacing: -0.03em; 74 | 75 | color: #ffffff; 76 | } 77 | .spanCard2>a{ 78 | text-decoration: none; 79 | color: white; 80 | } -------------------------------------------------------------------------------- /src/Routers/Routers.jsx: -------------------------------------------------------------------------------- 1 | import { Route, Switch } from "react-router-dom" 2 | import { BlocksTab } from "../components/BlocksTab/BlocksTab" 3 | import { CreatingAnEmail } from "../components/CreatingAnEmail/CreatingAnEmail" 4 | import { DashboardMain } from "../components/Dashboard/DashboardMain" 5 | import Homepage from "../components/Homepage" 6 | import Campaigns from "../components/Campaigns" 7 | import SignupPage from "../components/SignupPage/Signup" 8 | import Template from "../components/Template/Template" 9 | import FinalPage from "../components/FinalPages/Final" 10 | 11 | export default function Routers() { 12 | return
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | {/* to dashboard */} 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |