diff --git a/index.html b/index.html index e4b78ea..64741f9 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,13 @@ - Vite + React + TS + Code Café Community + + +
diff --git a/mockup/coffee_cup.jpg b/mockup/coffee_cup.jpg new file mode 100644 index 0000000..2ead942 Binary files /dev/null and b/mockup/coffee_cup.jpg differ diff --git a/mockup/mockup.css b/mockup/mockup.css new file mode 100644 index 0000000..c0bd4e6 --- /dev/null +++ b/mockup/mockup.css @@ -0,0 +1,196 @@ +/* Universal Styles*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Arial", sans-serif; + --primary: #240e1f; + --secondary: #f0b052; + --accent: #e96932; +} + +body { + width: 100%; +} + +button { + padding-inline: 35px; + padding-block: 14px; + border-radius: 14px; + outline: none; + border: none; +} + +.card { + border-radius: 45px; + padding: 50px; + width: 30%; + height: 200px; +} + +/* Header Styles */ + +header { + background-color: var(--secondary); + padding-block: 1rem; + display: flex; + justify-content: space-around; + align-items: center; +} + +header h1 { + color: var(--primary); +} + +header h1 i { + padding-right: 0.5rem; +} + +header nav ul { + display: flex; + list-style: none; +} + +header nav ul li { + color: var(--primary); + padding-inline: 1rem; +} + +/* Hero Section */ + +#hero { + height: 85vh; + background-color: var(--primary); + display: flex; + justify-content: space-evenly; + align-items: center; + color: var(--accent); + padding-inline: 2rem; +} + +#hero .hero-container { + height: 50%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-content: space-between; +} + +#hero .hero-container h2 { + font-size: 5rem; +} + +#hero .hero-container p { + font-size: 1.5rem; +} + +#hero .hero-container div { + width: 40%; + display: flex; + justify-content: space-between; +} + +#hero .hero-container div button { + width: 40%; + background-color: var(--secondary); + box-shadow: 0px 4px 0px 0px var(--accent); + font-size: 1.25rem; +} + +#hero img { + height: 50%; +} + +/* Feature Section */ + +#features { + height: 35vh; + background-color: var(--secondary); + display: flex; + justify-content: space-evenly; + align-items: center; +} + +#features .card { + background-color: var(--primary); + box-shadow: 0px 6px 0px 0px var(--accent); +} + +#features .card i { + padding-bottom: 0.5rem; + font-size: 1.75rem; + color: var(--accent); +} + +#features .card h3 { + font-size: 1.5rem; + padding-bottom: 0.5rem; + color: var(--secondary); +} + +#features .card p { + font-size: 1rem; + color: var(--secondary); +} + +/* Call to Action Section */ + +#cta { + background-color: var(--primary); + height: 45vh; + display: flex; + justify-content: center; + align-items: center; +} + +#cta .cta-container { + background: linear-gradient(96deg, var(--accent) 0%, var(--secondary)); + box-shadow: 0px 4px 0px 0px var(--accent); + border-radius: 45px; + width: fit-content; + height: 60%; + padding-inline: 15rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + color: var(--primary); +} + +#cta .cta-container button { + background-color: var(--primary); + color: var(--secondary); + box-shadow: 0px 4px 0px 0px var(--accent); +} + +/* Footer Styles */ + +footer { + padding-block: 4rem; + display: flex; + justify-content: space-around; + background-color: var(--secondary); +} + +footer .footer-container { + color: var(--primary); + height: fit-content; +} + +footer .footer-container h4 { + font-size: 1.5rem; + padding-bottom: 0.5rem; +} + +footer .footer-container i { + padding-right: 0.5rem; +} + +footer .footer-container ul { + list-style: none; +} + +footer .footer-container ul li { + padding-bottom: 0.75rem; +} diff --git a/mockup/mockup.html b/mockup/mockup.html new file mode 100644 index 0000000..7c92ece --- /dev/null +++ b/mockup/mockup.html @@ -0,0 +1,93 @@ + + + + + + Code Cafe + + + + + +
+

Code Cafe

+ + +
+
+
+
+

Where Code Meets Community

+

+ Join our vibrant community of developers, share knowledge and grow + together in a welcoming environment. +

+
+ + +
+
+ Code Cafe Logo +
+
+
+ +

Active Community

+

+ Connect with like-minded developers and build lasting relationships. +

+
+
+ +

Some other thing

+

Description about that other thing.

+
+
+ +

Learning Resources

+

Access curated learning materials and documentation.

+
+
+
+
+

Ready to Join Our Community?

+

+ Start your journey with Code Cafe today and become part of a + thriving developer community. +

+ +
+
+
+ + + diff --git a/package-lock.json b/package-lock.json index 566e494..7d9086c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "test", "version": "0.0.0", "dependencies": { + "lucide-react": "^0.469.0", "react": "19.0.0", "react-dom": "19.0.0", "react-router": "^7.1.1" @@ -4311,6 +4312,15 @@ "dev": true, "license": "ISC" }, + "node_modules/lucide-react": { + "version": "0.469.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz", + "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", diff --git a/package.json b/package.json index 474a6e8..4e1e5dc 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "format": "prettier --write ." }, "dependencies": { + "lucide-react": "^0.469.0", "react": "19.0.0", "react-dom": "19.0.0", "react-router": "^7.1.1" diff --git a/public/images/coffee_cup.jpg b/public/images/coffee_cup.jpg new file mode 100644 index 0000000..2ead942 Binary files /dev/null and b/public/images/coffee_cup.jpg differ diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 384072c..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import "./App.css"; - -function App() { - return

Code Café Community

; -} - -export default App; diff --git a/src/components/CTA.tsx b/src/components/CTA.tsx new file mode 100644 index 0000000..b742f27 --- /dev/null +++ b/src/components/CTA.tsx @@ -0,0 +1,24 @@ +export default function CTA() { + return ( +
+
+

+ Ready to Join Our Community? +

+

+ Start your journey with Code Cafe today and become part of a thriving + developer community. +

+ + Join Code Cafe + +
+
+ ); +} diff --git a/src/components/Features.tsx b/src/components/Features.tsx new file mode 100644 index 0000000..d88f6f7 --- /dev/null +++ b/src/components/Features.tsx @@ -0,0 +1,42 @@ +import { Users, CircleHelp, BookOpen } from "lucide-react"; + +export default function Features() { + return ( +
+
+
+
+ +

+ Active Community +

+

+ Connect with like-minded developers and build lasting + relationships. +

+
+
+ +
+ +

Some other thing

+

+ Description about that other thing. +

+
+
+ +
+ +

+ Learning Resources +

+

+ Access curated learning materials and documentation. +

+
+
+
+
+ ); +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..b488fd1 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,35 @@ +import { Link } from "react-router"; +import { Code } from "lucide-react"; + +export default function Footer() { + return ( + + ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..145f0a9 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,32 @@ +import { NavLink } from "react-router"; +import { Code } from "lucide-react"; + +export default function Header() { + return ( +
+
+ +

Code Cafe

+
+ +
+ ); +} diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx new file mode 100644 index 0000000..c603790 --- /dev/null +++ b/src/components/Hero.tsx @@ -0,0 +1,35 @@ +export default function Hero() { + return ( +
+
+
+

+ Where Code Meets Community +

+

+ Join our vibrant community of developers, share knowledge and grow + together in a welcoming environment. +

+
+ Code Cafe Logo +
+
+ + +
+
+ ); +} diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..cb12b8b --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,13 @@ +import Header from "./Header"; +import Footer from "./Footer"; +import { Outlet } from "react-router"; + +export default function Layout() { + return ( + <> +
+ +