Spaces:

victor
/

deepsite-gallery

Running

App Files Files Community

ryzikas commited on Aug 12

Commit

e8bd427

verified ·

1 Parent(s): be441fe

Upload 18 files

Browse files

Files changed (19) hide show

.gitattributes +1 -0
project/.bolt/config.json +3 -0
project/.bolt/prompt +5 -0
project/.gitignore +25 -0
project/eslint.config.js +28 -0
project/index.html +555 -0
project/package-lock.json +0 -0
project/package.json +33 -0
project/postcss.config.js +6 -0
project/public/marble-2398946.jpg +3 -0
project/src/App.tsx +11 -0
project/src/index.css +3 -0
project/src/main.tsx +10 -0
project/src/vite-env.d.ts +1 -0
project/tailwind.config.js +8 -0
project/tsconfig.app.json +24 -0
project/tsconfig.json +7 -0
project/tsconfig.node.json +22 -0
project/vite.config.ts +10 -0

.gitattributes CHANGED Viewed

	@@ -1 +1,2 @@
1	*.png filter=lfs diff=lfs merge=lfs -text


1	*.png filter=lfs diff=lfs merge=lfs -text
2	+ project/public/marble-2398946.jpg filter=lfs diff=lfs merge=lfs -text

project/.bolt/config.json ADDED Viewed

	@@ -0,0 +1,3 @@

+{
+  "template": "bolt-vite-react-ts"
+}

project/.bolt/prompt ADDED Viewed

	@@ -0,0 +1,5 @@

+For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
+By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
+Use icons from lucide-react for logos.

project/.gitignore ADDED Viewed

	@@ -0,0 +1,25 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

project/eslint.config.js ADDED Viewed

	@@ -0,0 +1,28 @@

+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

project/index.html ADDED Viewed

	@@ -0,0 +1,555 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Elegant Studio - Professional Services</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background-color: #ffffff;
+        }
+        /* Navigation */
+        .navbar {
+            background-color: #000;
+            padding: 1rem 0;
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        .nav-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 2rem;
+        }
+        .logo {
+            font-size: 1.8rem;
+            font-weight: bold;
+            color: #fff;
+            text-decoration: none;
+        }
+        .nav-menu {
+            display: flex;
+            list-style: none;
+            gap: 2rem;
+        }
+        .nav-menu a {
+            color: #fff;
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s ease;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+        }
+        .nav-menu a:hover {
+            color: #ccc;
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .mobile-menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            color: #fff;
+            font-size: 1.5rem;
+            cursor: pointer;
+        }
+        /* Hero Section */
+        .hero {
+            background:
+                linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+                url('./public/marble-2398946.jpg');
+            background-size: cover;
+            background-position: center;
+            background-attachment: fixed;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 20% 20%, rgba(0,0,0,0.05) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(0,0,0,0.03) 0%, transparent 50%),
+                radial-gradient(circle at 40% 60%, rgba(0,0,0,0.02) 0%, transparent 50%);
+            pointer-events: none;
+        }
+        .hero-content {
+            max-width: 800px;
+            padding: 2rem;
+            position: relative;
+            z-index: 2;
+        }
+        .hero h1 {
+            font-size: 3.5rem;
+            font-weight: 700;
+            color: #000;
+            margin-bottom: 1.5rem;
+            letter-spacing: -2px;
+            text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
+        }
+        .hero p {
+            font-size: 1.3rem;
+            color: #333;
+            margin-bottom: 2rem;
+            font-weight: 600;
+            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
+        }
+        .cta-button {
+            display: inline-block;
+            background-color: rgba(255, 255, 255, 0.9);
+            color: #000;
+            padding: 1rem 2rem;
+            text-decoration: none;
+            border-radius: 4px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+        }
+        .cta-button:hover {
+            background-color: #fff;
+            color: #fff;
+            padding: 1rem 2rem;
+            text-decoration: none;
+            border-radius: 4px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+        }
+        .cta-button:hover {
+            background-color: #fff;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+        }
+        /* Section Styles */
+        section {
+            padding: 5rem 0;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+        .section-title {
+            text-align: center;
+            font-size: 2.5rem;
+            color: #000;
+            margin-bottom: 3rem;
+            font-weight: 300;
+            letter-spacing: -1px;
+        }
+        /* Image Showcase */
+        .showcase {
+            background-color: #f8f9fa;
+        }
+        .image-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-top: 3rem;
+        }
+        .image-item {
+            position: relative;
+            aspect-ratio: 4/3;
+            background-color: #e9ecef;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .image-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+        }
+        .image-placeholder {
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(45deg, #dee2e6, #ced4da);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            color: #6c757d;
+            font-weight: 500;
+        }
+        .image-caption {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(transparent, rgba(0,0,0,0.8));
+            color: #fff;
+            padding: 2rem 1.5rem 1.5rem;
+            transform: translateY(100%);
+            transition: transform 0.3s ease;
+        }
+        .image-item:hover .image-caption {
+            transform: translateY(0);
+        }
+        /* Team Section */
+        .team {
+            background-color: #fff;
+        }
+        .team-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+            margin-top: 3rem;
+        }
+        .team-member {
+            text-align: center;
+            padding: 2rem;
+            border-radius: 8px;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .team-member:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+        }
+        .team-photo {
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            background: linear-gradient(45deg, #e9ecef, #ced4da);
+            margin: 0 auto 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3rem;
+            color: #6c757d;
+        }
+        .team-member h3 {
+            font-size: 1.5rem;
+            color: #000;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+        .team-member .role {
+            color: #666;
+            font-style: italic;
+            margin-bottom: 1rem;
+        }
+        .team-member p {
+            color: #666;
+            line-height: 1.6;
+        }
+        /* Contact Section */
+        .contact {
+            background-color: #000;
+            color: #fff;
+        }
+        .contact .section-title {
+            color: #fff;
+        }
+        .contact-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 3rem;
+            margin-top: 3rem;
+        }
+        .contact-item {
+            text-align: center;
+            padding: 2rem;
+        }
+        .contact-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            display: block;
+        }
+        .contact-item h3 {
+            font-size: 1.3rem;
+            margin-bottom: 1rem;
+            color: #fff;
+        }
+        .contact-item p {
+            color: #ccc;
+            line-height: 1.8;
+        }
+        .contact-item a {
+            color: #fff;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+        .contact-item a:hover {
+            color: #ccc;
+        }
+        /* Footer */
+        .footer {
+            background-color: #000;
+            color: #666;
+            text-align: center;
+            padding: 2rem 0;
+            border-top: 1px solid #333;
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .nav-menu {
+                display: none;
+                position: absolute;
+                top: 100%;
+                left: 0;
+                width: 100%;
+                background-color: #000;
+                flex-direction: column;
+                padding: 1rem 0;
+                gap: 0;
+            }
+            .nav-menu.active {
+                display: flex;
+            }
+            .nav-menu a {
+                padding: 1rem 2rem;
+                border-radius: 0;
+            }
+            .mobile-menu-toggle {
+                display: block;
+            }
+            .hero h1 {
+                font-size: 2.5rem;
+            }
+            .hero p {
+                font-size: 1.1rem;
+            }
+            .section-title {
+                font-size: 2rem;
+            }
+            .image-grid {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
+            .team-grid {
+                grid-template-columns: 1fr;
+            }
+            .contact-grid {
+                grid-template-columns: 1fr;
+                gap: 2rem;
+            }
+            section {
+                padding: 3rem 0;
+            }
+            .container {
+                padding: 0 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <a href="#home" class="logo">Elegant Studio</a>
+            <ul class="nav-menu">
+                <li><a href="#home">Home</a></li>
+                <li><a href="#showcase">Portfolio</a></li>
+                <li><a href="#team">Team</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+            <button class="mobile-menu-toggle" onclick="toggleMobileMenu()">☰</button>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section id="home" class="hero">
+        <div class="hero-content">
+            <h1>Crafting Excellence</h1>
+            <p>We transform visions into reality through innovative design and meticulous attention to detail. Experience the perfect blend of creativity and professionalism.</p>
+            <a href="#contact" class="cta-button">Get Started</a>
+        </div>
+    </section>
+    <!-- Image Showcase -->
+    <section id="showcase" class="showcase">
+        <div class="container">
+            <h2 class="section-title">Our Latest Work</h2>
+            <div class="image-grid">
+                <div class="image-item">
+                    <div class="image-placeholder">Project Alpha</div>
+                    <div class="image-caption">
+                        <h3>Innovative Design</h3>
+                        <p>A contemporary approach to modern architecture, blending functionality with aesthetic appeal.</p>
+                    </div>
+                </div>
+                <div class="image-item">
+                    <div class="image-placeholder">Project Beta</div>
+                    <div class="image-caption">
+                        <h3>Creative Solutions</h3>
+                        <p>Pushing boundaries with cutting-edge technology and sustainable design principles.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Team Section -->
+    <section id="team" class="team">
+        <div class="container">
+            <h2 class="section-title">Meet Our Team</h2>
+            <div class="team-grid">
+                <div class="team-member">
+                    <div class="team-photo">👨‍💼</div>
+                    <h3>Asta Astrauskienė</h3>
+                    <div class="role">Attorney at law</div>
+                    <p>With over 15 years of experience in legal practice, Asta brings comprehensive legal expertise and strategic counsel to every case.</p>
+                </div>
+                <div class="team-member">
+                    <div class="team-photo">👩‍💼</div>
+                    <h3>Simona Jašmonaitė</h3>
+                    <div class="role">Attorney at law</div>
+                    <p>Simona's expertise in legal analysis and client advocacy creates effective solutions that protect clients' interests and achieve favorable outcomes.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="contact">
+        <div class="container">
+            <h2 class="section-title">Get In Touch</h2>
+            <div class="contact-grid">
+                <div class="contact-item">
+                    <span class="contact-icon">✉️</span>
+                    <h3>Email</h3>
+                    <p>
+                        <a href="mailto:[email protected]">[email protected]</a><br>
+                        <a href="mailto:[email protected]">[email protected]</a>
+                    </p>
+                </div>
+                <div class="contact-item">
+                    <span class="contact-icon">📞</span>
+                    <h3>Phone</h3>
+                    <p>
+                        <a href="tel:+1234567890">(123) 456-7890</a><br>
+                        <a href="tel:+1234567891">(123) 456-7891</a>
+                    </p>
+                </div>
+                <div class="contact-item">
+                    <span class="contact-icon">📍</span>
+                    <h3>Address</h3>
+                    <p>
+                        Konstitucijos pr. 7<br>
+                        Vilnius<br>
+                        Lietuva
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2024 Elegant Studio. All rights reserved. Crafted with passion and precision.</p>
+        </div>
+    </footer>
+    <script>
+        function toggleMobileMenu() {
+            const navMenu = document.querySelector('.nav-menu');
+            navMenu.classList.toggle('active');
+        }
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                const offsetTop = target.offsetTop - 80; // Account for fixed navbar
+                window.scrollTo({
+                    top: offsetTop,
+                    behavior: 'smooth'
+                });
+                // Close mobile menu if open
+                document.querySelector('.nav-menu').classList.remove('active');
+            });
+        });
+        // Add scroll effect to navbar
+        window.addEventListener('scroll', function() {
+            const navbar = document.querySelector('.navbar');
+            if (window.scrollY > 50) {
+                navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.95)';
+            } else {
+                navbar.style.backgroundColor = '#000';
+            }
+        });
+    </script>
+</body>
+</html>

project/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

project/package.json ADDED Viewed

	@@ -0,0 +1,33 @@

+{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}

project/postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

project/public/marble-2398946.jpg ADDED Viewed

Git LFS Details

SHA256: d9e939db5baf44c66d7307690083f67736dee9400d3d28eb4f0d4bc8319c4d82
Pointer size: 131 Bytes
Size of remote file: 585 kB

project/src/App.tsx ADDED Viewed

	@@ -0,0 +1,11 @@

+import React from 'react';
+function App() {
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+      <p>Start prompting (or editing) to see magic happen :)</p>
+    </div>
+  );
+}
+export default App;

project/src/index.css ADDED Viewed

	@@ -0,0 +1,3 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

project/src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

project/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="vite/client" />

project/tailwind.config.js ADDED Viewed

	@@ -0,0 +1,8 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

project/tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

project/tsconfig.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

project/tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

project/vite.config.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});