- {contentType === 'image' && contentPosition !== 'background'
- ? imageBlock(illustrationImage)
- : null}
- {contentType === 'video' && contentPosition !== 'background'
- ? videoBlock(illustrationVideo)
- : null}
-
-
-
-
+
+);
-
-
+const BrandStory = () => (
+
+
+
-
-
- This is a React.js/Node.js app generated by the Flatlogic Web App Generator
-For guides and documentation please check - your local README.md and the Flatlogic documentation
-
+
+
+
+
+
+ A little playground in Lucena.
+
+
+
+
+ + Diego +
++ Coffee • Cocktails • Chaos 💙 +
+
+ A little playground in Lucena.
+ Beautifully unhinged.
+
+
+
+
+ This is your sign
+
+ ([]);
+ const [loading, setLoading] = useState(true);
+ const [selectedItem, setSelectedItem] = useState(null);
+
+ const categories = [
+ { name: 'Coffee', icon: mdiCoffee },
+ { name: 'Cocktail', icon: mdiGlassCocktail },
+ { name: 'Food', icon: mdiHamburger }
+ ];
+
+ useEffect(() => {
+ const fetchItems = async () => {
+ try {
+ setLoading(true);
+ const response = await axios.get('/menu_items');
+ setItems(response.data.rows || []);
+ } catch (error) {
+ console.error('Error fetching menu items:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchItems();
+ }, []);
+
+ const filteredItems = items.filter(item => item.item_type === activeTab);
+
+ return (
+
+ );
+};
+
+const ContactBooking = ({ locations }: { locations: any[] }) => {
+ const [activeForm, setActiveForm] = useState<'reservation' | 'pitch'>('reservation');
+ const [formData, setFormData] = useState({});
+ const [submitting, setSubmitting] = useState(false);
+ const [success, setSuccess] = useState(false);
+ const [error, setError] = useState('');
+
+ const handleInputChange = (e: React.ChangeEvent) => {
+ setFormData({ ...formData, [e.target.name]: e.target.value });
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setSubmitting(true);
+ setSuccess(false);
+ setError('');
+
+ try {
+ if (activeForm === 'reservation') {
+ await axios.post('/reservations', {
+ data: {
+ ...formData,
+ reservation_start: new Date(formData.date + 'T' + formData.time),
+ status: 'pending'
+ }
+ });
+ } else {
+ await axios.post('/pitches', {
+ data: {
+ ...formData,
+ submitted_at: new Date(),
+ notified: false
+ }
+ });
+ }
+ setSuccess(true);
+ setFormData({});
+ } catch (err: any) {
+ console.error('Form submission error:', err);
+ setError(err.response?.data?.message || 'Something went wrong. Chaos in the server!');
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ return (
+
+
+
+ );
+};
+
+const Locations = ({ locations }: { locations: any[] }) => {
+ return (
+
+
+ );
+};
+
+export default function DiegoApp() {
+ const title = 'Diego Coffee & Cocktail Studio';
+ const [locations, setLocations] = useState([]);
+
+ useEffect(() => {
+ axios.get('/locations').then(res => setLocations(res.data.rows || []));
+ }, []);
+
+ return (
+ {page} ;
-};
-
+};
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 1378cf6..0e3b11c 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
],
- darkMode: 'class', // or 'media' or 'class'
+ darkMode: 'class',
theme: {
asideScrollbars: {
light: 'light',
@@ -35,13 +35,46 @@ module.exports = {
'fade-in': {
from: { opacity: 0 },
to: { opacity: 1 }
+ },
+ 'chaos-shake': {
+ '0%, 100%': { transform: 'translateX(0) rotate(0)' },
+ '10%': { transform: 'translateX(-2px) rotate(-1deg)' },
+ '20%': { transform: 'translateX(2px) rotate(1deg)' },
+ '30%': { transform: 'translateX(-2px) rotate(-1deg)' },
+ '40%': { transform: 'translateX(2px) rotate(1deg)' },
+ '50%': { transform: 'translateX(-2px) rotate(-1deg)' },
+ '60%': { transform: 'translateX(2px) rotate(1deg)' },
+ '70%': { transform: 'translateX(-2px) rotate(-1deg)' },
+ '80%': { transform: 'translateX(2px) rotate(1deg)' },
+ '90%': { transform: 'translateX(-2px) rotate(-1deg)' }
+ },
+ 'sparkle': {
+ '0%, 100%': { opacity: 1, transform: 'scale(1)' },
+ '50%': { opacity: 0.5, transform: 'scale(1.2)' }
+ },
+ 'float': {
+ '0%, 100%': { transform: 'translateY(0)' },
+ '50%': { transform: 'translateY(-20px)' }
+ },
+ 'spin-slow': {
+ from: { transform: 'rotate(0deg)' },
+ to: { transform: 'rotate(360deg)' }
}
},
animation: {
'fade-out': 'fade-out 250ms ease-in-out',
- 'fade-in': 'fade-in 250ms ease-in-out'
+ 'fade-in': 'fade-in 250ms ease-in-out',
+ 'chaos-shake': 'chaos-shake 0.5s ease-in-out infinite',
+ 'sparkle': 'sparkle 1.5s ease-in-out infinite',
+ 'float': 'float 3s ease-in-out infinite',
+ 'spin-slow': 'spin-slow 8s linear infinite',
},
colors: {
+ diego: {
+ orange: '#FF7518',
+ navy: '#001F3F',
+ accent: '#FF7518',
+ },
dark: {
900: '#131618',
800: '#21242A',
@@ -65,9 +98,7 @@ module.exports = {
400: '#EFF0F6',
300: '#F7F7FC'
},
-
-
- midnightBlueTheme: {
+ midnightBlueTheme: {
text: '#D4D7E2',
iconsColor: '#5A7BEB',
mainBG: '#1E2338',
@@ -87,10 +118,13 @@ module.exports = {
},
fontFamily: {
sans: ['Ubuntu', 'sans-serif'],
-
- },
- borderRadius: {
- '3xl': '2rem',
+ cursive: ['Pacifico', 'cursive'],
+ heading: ['Pacifico', 'cursive'],
+ },
+ borderRadius: {
+ '3xl': '2rem',
+ '4xl': '3rem',
+ '5xl': '4rem',
},
}
},
+
-
-
+
+ The Brand Story
+ Our Story
++ Mabuhay to Diego! From beachfront brews to cozy haunts, we bring fun to every sip. + Diego is more than just a shop; it's your playground in Quezon. +
+
+
+
+ + "Making specialty coffee and cocktails accessible, fun, and beautifully chaotic for everyone." +
+
+
+
+
+ Celebrating 2 Years!
+Our main playground in Pleasantville, Lucena is still the heart of the chaos. Join the party! #PlayWithDiego
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+
100%
UNHINGED
-
+
+);
+
+const MenuPreview = () => {
+ const [activeTab, setActiveTab] = useState('Coffee');
+ const [items, setItems] = useState© 2026 {title}. All rights reserved
- - Privacy Policy - +
+
+
+
+
+
+
+ Let's Play
++ Planning a birthday, wedding, or corporate event? Or maybe you have a wild collaboration idea? + "This is your sign" +
+ +
+
+
+
+
+
+
+
+
+ Pitch your idea
+hello@diego.ph
+
+
+
+
+
+
+ The Playgrounds
+Lucena • Sariaya
+
+
+ Play with Diego
+#DiegoByAteLorie #PlayWithDiego
+
+
+
+
+
+
+
+
+
+ {success ? (
+
+
+ ) : (
+
+ )}
+
+
+ Message Received!
+The chaos is being organized. We'll get back to you soon!
+ +
+
+ Find the Chaos
+Locate the Playground
+ +
+ {locations.map((loc) => (
+
+
+
+
+ ))}
+
+
+ )
+
+
+
+
+
+ {loc.name}
+{loc.address}
+
+
+ {loc.name.includes('Lucban') && (
+
+ ⚠️ Closing soon - Still open til Jan 24!
+
+ )}
+
+
+
+ Special Holiday Hours
+
+
+
+
+ Dec 23 & 26–30
+3PM – 11PM
+
+
+ Dec 24–25 & 31
+Closed for the Chaos
+
+
+ {getPageTitle('Diego')}
+
+
+
+
+
+
+
);
}
-Starter.getLayout = function getLayout(page: ReactElement) {
+DiegoApp.getLayout = function getLayout(page: ReactElement) {
return