diff --git a/index.html b/index.html index dea8dd0..76c3570 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,10 @@ - ⚡️ Bolt.new + Vite + React + Austen's Wedding Guide + - +
diff --git a/package-lock.json b/package-lock.json index 58dba83..fb5157e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,8 @@ "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.2", - "@tailwindcss/typography": "^0.5.10", + "@tailwindcss/forms": "^0.5.9", + "@tailwindcss/typography": "^0.5.15", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.0.0", @@ -2640,10 +2641,23 @@ "win32" ] }, + "node_modules/@tailwindcss/forms": { + "version": "0.5.9", + "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.9.tgz", + "integrity": "sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==", + "license": "MIT", + "dependencies": { + "mini-svg-data-uri": "^1.2.3" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20" + } + }, "node_modules/@tailwindcss/typography": { "version": "0.5.15", "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz", "integrity": "sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==", + "license": "MIT", "dependencies": { "lodash.castarray": "^4.4.0", "lodash.isplainobject": "^4.0.6", @@ -4714,6 +4728,15 @@ "node": ">=8.6" } }, + "node_modules/mini-svg-data-uri": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", + "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", + "license": "MIT", + "bin": { + "mini-svg-data-uri": "cli.js" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", diff --git a/package.json b/package.json index 7f06491..17f234f 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,8 @@ "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.2", - "@tailwindcss/typography": "^0.5.10", + "@tailwindcss/forms": "^0.5.9", + "@tailwindcss/typography": "^0.5.15", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.0.0", @@ -76,4 +77,4 @@ "typescript-eslint": "^8.7.0", "vite": "^5.4.8" } -} \ No newline at end of file +} diff --git a/src/App.tsx b/src/App.tsx index 7a9c592..5908213 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,20 +1,34 @@ -import { BrowserRouter as Router } from 'react-router-dom'; -import { ThemeProvider } from '@/components/theme-provider'; -import { Toaster } from '@/components/ui/sonner'; -import Layout from '@/components/Layout'; -import Routes from '@/components/Routes'; +import React, { Suspense } from 'react'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import MainLayout from './components/layout/MainLayout'; +import Home from './pages/Home'; + +// Lazy load other pages +const Blogs = React.lazy(() => import('./pages/Blogs')); +const Quiz = React.lazy(() => import('./pages/Quiz')); +const Advice = React.lazy(() => import('./pages/Advice')); +const Vendors = React.lazy(() => import('./pages/Vendors')); +const Stories = React.lazy(() => import('./pages/Stories')); +const MarketCalculator = React.lazy(() => import('./pages/MarketCalculator')); function App() { return ( - - - - - - - - + + + Loading...}> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx new file mode 100644 index 0000000..66f8a93 --- /dev/null +++ b/src/components/layout/MainLayout.tsx @@ -0,0 +1,42 @@ +import { Link } from 'react-router-dom'; + +const MainLayout = ({ children }: { children: React.ReactNode }) => { + return ( +
+ + +
+ {children} +
+ + +
+ ); +}; + +export default MainLayout; diff --git a/src/index.css b/src/index.css index 0fcc654..68d81f9 100644 --- a/src/index.css +++ b/src/index.css @@ -1,128 +1,26 @@ +@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"); + @tailwind base; @tailwind components; @tailwind utilities; -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #1a1a1a; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} - @layer base { - :root { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 240 5.9% 10%; - --radius: 0.75rem; + html { + @apply font-lato text-sage-900 bg-cream-50; } - .dark { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 240 4.9% 83.9%; + h1, + h2, + h3, + h4, + h5, + h6 { + @apply font-cormorant; } } -@layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground min-h-screen; +@layer components { + .nav-link { + @apply inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 border-transparent text-sage-700 hover:text-sage-900 hover:border-sage-500 transition-colors duration-200; } } diff --git a/src/main.tsx b/src/main.tsx index ea9e363..964aeb4 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,10 @@ -import { StrictMode } from 'react'; -import { createRoot } from 'react-dom/client'; -import App from './App.tsx'; -import './index.css'; +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App' +import './index.css' -createRoot(document.getElementById('root')!).render( - +ReactDOM.createRoot(document.getElementById('root')!).render( + - -); + , +) diff --git a/src/pages/Advice.tsx b/src/pages/Advice.tsx new file mode 100644 index 0000000..f4faf6d --- /dev/null +++ b/src/pages/Advice.tsx @@ -0,0 +1,127 @@ +import { useState } from 'react'; +import type { AdviceQuestion } from '../types'; + +const SAMPLE_QUESTIONS: AdviceQuestion[] = [ + { + id: '1', + question: "Dear Jane, I find myself in a peculiar situation. A gentleman of considerable fortune has proposed, but while he can offer security and comfort, his conversation leaves much to be desired. My family urges me to accept, but my heart hesitates. What would you advise?", + askedBy: "Prudently Pondering", + response: "My dear Prudently Pondering, While security in marriage is not to be scorned, neither should it be the sole consideration. A marriage lacking in intellectual companionship may secure your future, but at what cost to your present happiness? As I once wrote through Elizabeth Bennet, 'I am determined that nothing but the very deepest love will induce me into matrimony.' Consider whether you could respect this gentleman enough to spend your days in his company, for comfort without compatibility is but a gilded cage.", + date: "2023-11-24" + }, + { + id: '2', + question: "Dear Jane, I've fallen deeply in love with someone my family considers beneath our social station. They insist I look higher, but my heart says otherwise. Should I follow my feelings or bow to familial duty?", + askedBy: "Torn Between Two Worlds", + response: "Dearest Torn, The challenge you face echoes through many a drawing room. While duty to family holds weight, remember that it is you who must live with the consequences of this choice. As Emma Woodhouse learned, true worth lies not in social position but in character. Examine both your heart's inclination and your suitor's merit - if you find them equally sound, perhaps it is your family's understanding that needs elevation, not your choice of partner.", + date: "2023-11-23" + } +]; + +const Advice = () => { + const [showSubmitForm, setShowSubmitForm] = useState(false); + const [newQuestion, setNewQuestion] = useState({ + question: '', + askedBy: '' + }); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // In a real app, this would send the question to a backend + setShowSubmitForm(false); + setNewQuestion({ question: '', askedBy: '' }); + }; + + return ( +
+ {/* Header */} +
+

Dear Jane

+

+ Seeking counsel in matters of the heart? Let Jane Austen's timeless wisdom guide you through your romantic predicaments. +

+
+ + {/* Submit Question Button */} +
+ +
+ + {/* Question Form */} + {showSubmitForm && ( +
+
+ +