Skip to content

Commit 680ed83

Browse files
roopekyroopeky
committed
alku
1 parent 4b10e92 commit 680ed83

37 files changed

+1348
-170
lines changed

‎app/favicon.ico

-25.3 KB
Binary file not shown.

‎app/global.css

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
2+
3+
@tailwind base;
4+
@tailwind components;
5+
@tailwind utilities;
6+
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
font-family: Inter;
15+
}
16+
17+
.flexCenter {
18+
@apply flex justify-center items-center;
19+
}
20+
21+
.flexBetween {
22+
@apply flex justify-between items-center;
23+
}
24+
25+
.flexStart {
26+
@apply flex items-center justify-start;
27+
}
28+
29+
.text-small {
30+
@apply text-sm font-medium;
31+
}
32+
33+
.paddings {
34+
@apply lg:px-20 py-6 px-5;
35+
}
36+
37+
::-webkit-scrollbar {
38+
width: 5px;
39+
height: 4px;
40+
}
41+
42+
::-webkit-scrollbar-thumb {
43+
background: #888;
44+
border-radius: 12px;
45+
}
46+
47+
.modal-head-text {
48+
@apply md:text-5xl text-3xl font-extrabold text-left max-w-5xl w-full;
49+
}
50+
51+
.no-result-text {
52+
@apply w-full text-center my-10 px-2;
53+
}
54+
55+
/* Project Details */
56+
.user-actions_section {
57+
@apply fixed max-md:hidden flex gap-4 flex-col right-10 top-20;
58+
}
59+
60+
.user-info {
61+
@apply flex flex-wrap whitespace-nowrap text-sm font-normal gap-2 w-full;
62+
}
63+
64+
/* Home */
65+
.projects-grid {
66+
@apply grid xl:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-10 mt-10 w-full;
67+
}
68+
69+
/* Project Actions */
70+
.edit-action_btn {
71+
@apply p-3 text-gray-100 bg-light-white-400 rounded-lg text-sm font-medium;
72+
}
73+
74+
.delete-action_btn {
75+
@apply p-3 text-gray-100 hover:bg-red-600 rounded-lg text-sm font-medium;
76+
}
77+
78+
/* Related Project Card */
79+
.related_project-card {
80+
@apply flex-col rounded-2xl min-w-[210px] min-h-[197px];
81+
}
82+
83+
.related_project-card_title {
84+
@apply justify-end items-end w-full h-1/3 bg-gradient-to-b from-transparent to-black/50 rounded-b-2xl gap-2 absolute bottom-0 right-0 font-semibold text-lg text-white p-4;
85+
}
86+
87+
.related_projects-grid {
88+
@apply grid xl:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-8 mt-5;
89+
}
90+
91+
/* Custom Menu */
92+
.custom_menu-btn {
93+
@apply gap-4 w-full rounded-md bg-light-white-100 p-4 text-base outline-none capitalize;
94+
}
95+
96+
.custom_menu-items {
97+
@apply flex-col absolute left-0 mt-2 xs:min-w-[300px] w-fit max-h-64 origin-top-right rounded-xl bg-white border border-nav-border shadow-menu overflow-y-auto;
98+
}
99+
100+
.custom_menu-item {
101+
@apply text-left w-full px-5 py-2 text-sm hover:bg-light-white-100 self-start whitespace-nowrap capitalize;
102+
}
103+
104+
/* Footer */
105+
.footer {
106+
@apply flex-col paddings w-full gap-20 bg-light-white;
107+
}
108+
109+
.footer_copyright {
110+
@apply max-sm:flex-col w-full text-sm font-normal;
111+
}
112+
113+
.footer_column {
114+
@apply flex-1 flex flex-col gap-3 text-sm min-w-max;
115+
}
116+
117+
/* Form Field */
118+
.form_field-input {
119+
@apply w-full outline-0 bg-light-white-100 rounded-xl p-4;
120+
}
121+
122+
/* Modal */
123+
.modal {
124+
@apply fixed z-10 left-0 right-0 top-0 bottom-0 mx-auto bg-black/80;
125+
}
126+
127+
.modal_wrapper {
128+
@apply flex justify-start items-center flex-col absolute h-[95%] w-full bottom-0 bg-white rounded-t-3xl lg:px-40 px-8 pt-14 pb-72 overflow-auto;
129+
}
130+
131+
/* Navbar */
132+
.navbar {
133+
@apply py-5 px-8 border-b border-nav-border gap-4;
134+
}
135+
136+
/* Profile Menu */
137+
.profile_menu-items {
138+
@apply flex-col absolute right-1/2 translate-x-1/2 mt-3 p-7 sm:min-w-[300px] min-w-max rounded-xl bg-white border border-nav-border shadow-menu;
139+
}
140+
141+
/* Profile Card */
142+
.profile_card-title {
143+
@apply justify-end items-end w-full h-1/3 bg-gradient-to-b from-transparent to-black/50 rounded-b-2xl gap-2 absolute bottom-0 right-0 font-semibold text-lg text-white p-4;
144+
}
145+
146+
/* Project Form */
147+
.form {
148+
@apply flex-col w-full lg:pt-24 pt-12 gap-10 text-lg max-w-5xl mx-auto;
149+
}
150+
151+
.form_image-container {
152+
@apply w-full lg:min-h-[400px] min-h-[200px] relative;
153+
}
154+
155+
.form_image-label {
156+
@apply z-10 text-center w-full h-full p-20 text-gray-100 border-2 border-gray-50 border-dashed;
157+
}
158+
159+
.form_image-input {
160+
@apply absolute z-30 w-full opacity-0 h-full cursor-pointer;
161+
}
162+
163+
/* Profile Projects */
164+
.profile_projects {
165+
@apply grid xl:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-8 mt-5;
166+
}

‎app/globals.css

-27
This file was deleted.

‎app/layout.tsx

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
1-
import './globals.css'
2-
import type { Metadata } from 'next'
3-
import { Inter } from 'next/font/google'
1+
import Navbar from "@/components/Navbar";
2+
import "./global.css";
3+
import Footer from "@/components/Footer";
44

5-
const inter = Inter({ subsets: ['latin'] })
6-
7-
export const metadata: Metadata = {
8-
title: 'Create Next App',
9-
description: 'Generated by create next app',
10-
}
5+
export const metadata = {
6+
title: "Flexibble",
7+
description: "Hemo iso appi",
8+
};
119

1210
export default function RootLayout({
1311
children,
1412
}: {
15-
children: React.ReactNode
13+
children: React.ReactNode;
1614
}) {
1715
return (
1816
<html lang="en">
19-
<body className={inter.className}>{children}</body>
17+
<body>
18+
<Navbar />
19+
<main>{children}</main>
20+
<Footer />
21+
</body>
2022
</html>
21-
)
23+
);
2224
}

‎app/page.tsx

+10-112
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,11 @@
1-
import Image from 'next/image'
2-
3-
export default function Home() {
1+
const home = () => {
42
return (
5-
<main className="flex min-h-screen flex-col items-center justify-between p-24">
6-
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
7-
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
8-
Get started by editing&nbsp;
9-
<code className="font-mono font-bold">app/page.tsx</code>
10-
</p>
11-
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
12-
<a
13-
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
14-
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
By{' '}
19-
<Image
20-
src="/vercel.svg"
21-
alt="Vercel Logo"
22-
className="dark:invert"
23-
width={100}
24-
height={24}
25-
priority
26-
/>
27-
</a>
28-
</div>
29-
</div>
30-
31-
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
32-
<Image
33-
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
34-
src="/next.svg"
35-
alt="Next.js Logo"
36-
width={180}
37-
height={37}
38-
priority
39-
/>
40-
</div>
41-
42-
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
43-
<a
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
<h2 className={`mb-3 text-2xl font-semibold`}>
50-
Docs{' '}
51-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
52-
-&gt;
53-
</span>
54-
</h2>
55-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
56-
Find in-depth information about Next.js features and API.
57-
</p>
58-
</a>
59-
60-
<a
61-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
62-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
63-
target="_blank"
64-
rel="noopener noreferrer"
65-
>
66-
<h2 className={`mb-3 text-2xl font-semibold`}>
67-
Learn{' '}
68-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
69-
-&gt;
70-
</span>
71-
</h2>
72-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
73-
Learn about Next.js in an interactive course with&nbsp;quizzes!
74-
</p>
75-
</a>
76-
77-
<a
78-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
79-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
80-
target="_blank"
81-
rel="noopener noreferrer"
82-
>
83-
<h2 className={`mb-3 text-2xl font-semibold`}>
84-
Templates{' '}
85-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
86-
-&gt;
87-
</span>
88-
</h2>
89-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
90-
Explore the Next.js 13 playground.
91-
</p>
92-
</a>
93-
94-
<a
95-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
96-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
97-
target="_blank"
98-
rel="noopener noreferrer"
99-
>
100-
<h2 className={`mb-3 text-2xl font-semibold`}>
101-
Deploy{' '}
102-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
103-
-&gt;
104-
</span>
105-
</h2>
106-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
107-
Instantly deploy your Next.js site to a shareable URL with Vercel.
108-
</p>
109-
</a>
110-
</div>
111-
</main>
112-
)
113-
}
3+
<section className="flex-start flex col paddings mb-16">
4+
<h1>Categories</h1>
5+
<h1>Posts</h1>
6+
<h1>LoadMore</h1>
7+
</section>
8+
);
9+
};
10+
11+
export default home;

0 commit comments

Comments
 (0)