15 | {texts.length
16 | ? texts.map((item) => (
17 |
24 |
26 | ))
27 | : ''}
28 |
29 |
30 |
31 | );
32 | };
33 |
34 | export default GenQoutes;
35 |
--------------------------------------------------------------------------------
/src/data/quotes.json:
--------------------------------------------------------------------------------
1 | {
2 | "qoutes": [
3 | {
4 | "id": "Q2",
5 | "text": "You have been a source of strength and support for me. I'm glad that you're a part of my life",
6 | "image": "/images/image-03.webp"
7 | },
8 | {
9 | "id": "Q3",
10 | "text": "You make me smile so easily. Can you be there, to do it forever?",
11 | "image": "/images/image-02.webp"
12 | },
13 | {
14 | "id": "Q4",
15 | "text": "I was alone in life, but when you came into my life, you brought colours with you and painted my life with beautiful colours",
16 | "image": "/images/image-01.webp"
17 | },
18 | {
19 | "id": "Q5",
20 | "text": "Your absence is stronger to me than the presence of thousands of other people",
21 | "image": "/images/image-07.webp"
22 | },
23 | {
24 | "id": "Q6",
25 | "text": "I fell in love with you not for how you look, just for who you are",
26 | "image": "/images/image-06.webp"
27 | }
28 | ],
29 | "propose": {
30 | "id": "finished",
31 | "text": "I'm not sure what life could bring you. I'm not sure if dreams do come true. I'm not sure what love can do. But I'm sure about one thing. I love you",
32 | "subtext": "That's all I will wait for your reply",
33 | "image": "/images/image-04.webp"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "propose",
3 | "version": "2.0",
4 | "license": "MIT",
5 | "author": {
6 | "name": "Tonmoy Deb",
7 | "email": "tonmoydeb404@gmail.com"
8 | },
9 | "scripts": {
10 | "dev": "vite",
11 | "build": "vite build",
12 | "preview": "vite preview",
13 | "lint": "yarn add -D prettier && yarn add -D @babel/eslint-parser @babel/preset-react && npx install-peerdeps --dev eslint-config-airbnb && yarn add -D eslint-config-prettier eslint-plugin-prettier"
14 | },
15 | "dependencies": {
16 | "@heroicons/react": "^2.2.0",
17 | "bootstrap": "5.3.3",
18 | "react": "^19.0.0",
19 | "react-bootstrap": "^2.10.9",
20 | "react-dom": "^19.0.0",
21 | "react-router-dom": "^7.1.5"
22 | },
23 | "devDependencies": {
24 | "@babel/eslint-parser": "^7.26.8",
25 | "@babel/preset-react": "^7.26.3",
26 | "@vitejs/plugin-react": "^4.3.4",
27 | "eslint": "^9.20.0",
28 | "eslint-config-airbnb": "19.0.4",
29 | "eslint-config-prettier": "^10.0.1",
30 | "eslint-plugin-import": "^2.31.0",
31 | "eslint-plugin-jsx-a11y": "^6.10.2",
32 | "eslint-plugin-prettier": "^5.2.3",
33 | "eslint-plugin-react": "^7.37.4",
34 | "eslint-plugin-react-hooks": "^5.1.0",
35 | "prettier": "^3.4.2",
36 | "vite": "^6.1.0",
37 | "vite-plugin-html": "^3.2.2"
38 | },
39 | "packageManager": "yarn@1.22.22"
40 | }
41 |
--------------------------------------------------------------------------------
/src/static/icons/favicon.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/pages/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Col, Container, Row } from 'react-bootstrap';
3 | import ProposeModal from '../components/ProposeModal';
4 | import Image from '../static/images/hero.svg';
5 |
6 | const Home = ({ className = '' }) => (
7 | {item.text}
25 |
12 |
31 |
32 | 13 | Afraid To Propose Someone? 14 |
15 |16 | don’t worry I am here to help you. enter your valentines name and generate a propose link. 17 |
18 | 19 |21 | developed by{' '} 22 | 27 | @tonmoydeb 28 | 29 |
30 |
34 | 
39 |
40 |
41 | 47 | now just copy the link and share with the person. don't shy and wish you 48 | all the best. 49 |
50 | 51 |52 | also you can take look from{' '} 53 | 54 | here 55 | {' '} 56 | before sharing it 57 |
58 | 59 |
63 |
64 |
65 |
66 |
91 |
92 |
93 | );
94 | };
95 |
96 | export default Proposal;
97 |
--------------------------------------------------------------------------------
/src/static/styles/app.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | html {
10 | scroll-behavior: smooth;
11 | }
12 |
13 | body {
14 | margin: 0;
15 | font-family: "Montserrat", sans-serif;
16 | -webkit-font-smoothing: antialiased;
17 | -moz-osx-font-smoothing: grayscale;
18 | }
19 |
20 | /* hero section */
21 | .hero {
22 | width: 100%;
23 | min-height: 100vh;
24 | max-height: fit-content;
25 | display: flex;
26 | align-items: center;
27 | justify-content: center;
28 | flex-direction: column;
29 | }
30 | .hero_content {
31 | align-items: center;
32 | }
33 | .hero_credit {
34 | font-size: 13px;
35 | margin-top: 10px;
36 | color: #444;
37 | }
38 | .hero_text-title {
39 | font-weight: bold;
40 | font-size: 50px;
41 | }
42 | .hero_text-form {
43 | width: 80%;
44 | }
45 | @media screen and (max-width: 1399px) {
46 | .hero_text-title {
47 | font-size: 40px;
48 | }
49 | }
50 | @media screen and (max-width: 767px) {
51 | .hero_content {
52 | flex-direction: column-reverse;
53 | gap: 30px;
54 | }
55 | .hero_text-title {
56 | font-size: 30px;
57 | }
58 | .hero_media {
59 | width: 70%;
60 | }
61 | }
62 | @media screen and (max-width: 575px) {
63 | .hero_media {
64 | width: 80%;
65 | }
66 | .hero_text-form {
67 | width: 100%;
68 | }
69 | }
70 |
71 | .form_field {
72 | font-size: 18px;
73 | font-family: inherit;
74 | }
75 | .form_btn {
76 | font-size: 18px;
77 | }
78 | .form_btn_icon {
79 | width: 20px;
80 | height: auto;
81 | margin-left: 10px;
82 | }
83 | @media screen and (max-width: 1399px) {
84 | .form_field {
85 | font-size: 16px;
86 | }
87 | .form_btn {
88 | font-size: 16px;
89 | }
90 | }
91 |
92 | .proposal_media {
93 | position: fixed;
94 | left: 0;
95 | top: 0;
96 | width: 45%;
97 | min-height: 100vh;
98 | background-image: var(--image);
99 | background-repeat: no-repeat;
100 | background-position: center center;
101 | background-size: cover;
102 | box-shadow: inset -5px 0px 10px 2px rgba(0, 0, 0, 0.3);
103 | transition: background-image 0.5s;
104 | }
105 | .proposal_content {
106 | width: 100%;
107 | display: flex;
108 | flex-direction: column;
109 | min-height: 95vh;
110 | gap: 20px;
111 | }
112 | .proposal_content .main-content {
113 | flex: 1;
114 | transition: height 0.25s linear;
115 | }
116 | @media screen and (max-width: 767px) {
117 | .proposal {
118 | background-image: var(--image);
119 | background-repeat: no-repeat;
120 | background-position: center center;
121 | background-size: cover;
122 | background-color: rgba(0, 0, 0, 0.55);
123 | background-blend-mode: multiply;
124 | color: #fff;
125 | position: relative;
126 | }
127 | .proposal::before {
128 | content: "";
129 | position: fixed;
130 | top: 0;
131 | left: 0;
132 | width: 100%;
133 | height: 100%;
134 | z-index: -1;
135 | pointer-events: none;
136 | background-color: #000;
137 | }
138 | .proposal_title {
139 | font-size: 24px;
140 | }
141 | .proposal_subtitle {
142 | opacity: 0.8;
143 | }
144 | .proposal_content {
145 | min-height: 100vh;
146 | }
147 | .proposal .main-content {
148 | min-height: 100px;
149 | flex: none;
150 | }
151 | .proposal .main-content .card {
152 | width: 100%;
153 | }
154 | .proposal .main-content .card .card-text {
155 | color: #f6f6f6;
156 | }
157 | .proposal .main-content .card.last {
158 | border: none;
159 | margin-bottom: 50px;
160 | }
161 | .proposal .main-content .card:not(.last) {
162 | background-color: rgba(255, 255, 255, 0.15);
163 | backdrop-filter: blur(4px);
164 | border-radius: 8px;
165 | border: 1px solid rgba(255, 255, 255, 0.2);
166 | }
167 | }
168 |
169 | .qoutes {
170 | display: flex;
171 | flex-direction: column;
172 | gap: 5px;
173 | overflow: hidden;
174 | }
175 | .qoutes .animIn {
176 | animation: animIn 0.5s ease-in;
177 | }
178 | @keyframes animIn {
179 | from {
180 | transform: translateX(100px);
181 | opacity: 0.7;
182 | }
183 | }
184 | .qoutes .last .card-text {
185 | font-size: 18px;
186 | }
187 | @media screen and (max-width: 767px) {
188 | .qoutes {
189 | gap: 10px;
190 | }
191 | .qoutes_card .card-body {
192 | padding: 10px 12px;
193 | }
194 | }
195 | @media screen and (max-width: 575px) {
196 | .qoutes .card-text {
197 | font-size: 15px;
198 | }
199 | }
200 |
201 | @keyframes shaker {
202 | 0% {
203 | -webkit-transform: translate(3px, 0);
204 | }
205 | 50% {
206 | -webkit-transform: translate(-3px, 0);
207 | }
208 | 100% {
209 | -webkit-transform: translate(3px, 0);
210 | }
211 | }
212 | .shake {
213 | animation-name: shaker;
214 | animation-duration: 0.1s;
215 | transform-origin: 50% 50%;
216 | animation-timing-function: linear;
217 | }/*# sourceMappingURL=app.css.map */
--------------------------------------------------------------------------------
/src/components/ProposeModal.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import {
3 | Alert,
4 | Button,
5 | Form,
6 | Modal,
7 | OverlayTrigger,
8 | Tooltip,
9 | } from "react-bootstrap";
10 |
11 | const Message = (props) =>
68 |
89 |
90 |
69 |
74 |
75 | 70 | Hey {person} 71 |
72 |{currentText.subtext}
73 |122 | Now just copy the link and share it with the person. Don't 123 | be shy, and best of luck! 124 |
125 | 126 |152 | You can preview the link{" "} 153 | 159 | here 160 | {" "} 161 | before sharing. 162 |
163 |