-
-
+ To get started, edit the page.js file.
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/app/page.module.css b/src/app/page.module.css
deleted file mode 100644
index 643fe27..0000000
--- a/src/app/page.module.css
+++ /dev/null
@@ -1,142 +0,0 @@
-.page {
- --background: #fafafa;
- --foreground: #fff;
-
- --text-primary: #000;
- --text-secondary: #666;
-
- --button-primary-hover: #383838;
- --button-secondary-hover: #f2f2f2;
- --button-secondary-border: #ebebeb;
-
- display: flex;
- flex: 1;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-family: var(--font-geist-sans);
- background-color: var(--background);
-}
-
-.main {
- display: flex;
- flex: 1;
- width: 100%;
- max-width: 800px;
- flex-direction: column;
- align-items: flex-start;
- justify-content: space-between;
- background-color: var(--foreground);
- padding: 120px 60px;
-}
-
-.intro {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- text-align: left;
- gap: 24px;
-}
-
-.intro h1 {
- max-width: 320px;
- font-size: 40px;
- font-weight: 600;
- line-height: 48px;
- letter-spacing: -2.4px;
- text-wrap: balance;
- color: var(--text-primary);
-}
-
-.intro p {
- max-width: 440px;
- font-size: 18px;
- line-height: 32px;
- text-wrap: balance;
- color: var(--text-secondary);
-}
-
-.intro a {
- font-weight: 500;
- color: var(--text-primary);
-}
-
-.ctas {
- display: flex;
- flex-direction: row;
- width: 100%;
- max-width: 440px;
- gap: 16px;
- font-size: 14px;
-}
-
-.ctas a {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 40px;
- padding: 0 16px;
- border-radius: 128px;
- border: 1px solid transparent;
- transition: 0.2s;
- cursor: pointer;
- width: fit-content;
- font-weight: 500;
-}
-
-a.primary {
- background: var(--text-primary);
- color: var(--background);
- gap: 8px;
-}
-
-a.secondary {
- border-color: var(--button-secondary-border);
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
- a.primary:hover {
- background: var(--button-primary-hover);
- border-color: transparent;
- }
-
- a.secondary:hover {
- background: var(--button-secondary-hover);
- border-color: transparent;
- }
-}
-
-@media (max-width: 600px) {
- .main {
- padding: 48px 24px;
- }
-
- .intro {
- gap: 16px;
- }
-
- .intro h1 {
- font-size: 32px;
- line-height: 40px;
- letter-spacing: -1.92px;
- }
-}
-
-@media (prefers-color-scheme: dark) {
- .logo {
- filter: invert();
- }
-
- .page {
- --background: #000;
- --foreground: #000;
-
- --text-primary: #ededed;
- --text-secondary: #999;
-
- --button-primary-hover: #ccc;
- --button-secondary-hover: #1a1a1a;
- --button-secondary-border: #1a1a1a;
- }
-}
diff --git a/src/app/style.sass b/src/app/style.sass
new file mode 100644
index 0000000..31fb0b5
--- /dev/null
+++ b/src/app/style.sass
@@ -0,0 +1,43 @@
+.Home
+ display: flex
+ width: 100%
+ padding:2%
+ justify-content: space-between
+ height: 100vh
+aside
+ background: rebeccapurple
+ width: 20%
+ height: 100%
+main
+ width: 79%
+ height: 100%
+ padding: 1%
+.Tracker
+ .month
+ display: flex
+ flex-direction: row
+ align-items: center
+ gap: 5px
+ p
+ width: 8%
+ .monthBlock
+ display: flex
+ gap: 5px
+ width: 90%
+ .day
+ display: block
+ width: 20px
+ height: 10px
+ background: green
+ border-radius: 5px
+ cursor: pointer
+.Upload
+ display: flex
+ gap: 5%
+ align-items: center
+ .preview
+ height: 400px
+ img
+ height: 100%
+ select
+ height: 40px
\ No newline at end of file