-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initial commit of Vue.js newsletter signup project
- Loading branch information
0 parents
commit 2c58ef5
Showing
812 changed files
with
626,667 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"recommendations": ["Vue.volar"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
# Vue 3 + Vite | ||
|
||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. | ||
|
||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/* /index.html 200 |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" href="/favicon.ico" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Luca Newsletter</title> | ||
<script type="module" crossorigin src="/assets/index-dWXrRc_m.js"></script> | ||
<link rel="stylesheet" crossorigin href="/assets/index-DUdKxxh9.css"> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
# Luca Newsletter Design Documentation | ||
|
||
## Design Overview | ||
Luca Newsletter features a modern, sleek design with a dark theme and vibrant accents. The design aims to create an immersive and futuristic feel while maintaining readability and usability. | ||
|
||
## Color Scheme | ||
- Background: #0a0a2a (Dark blue) | ||
- Text: #ffffff (White) | ||
- Accent Colors: | ||
- #00f7ff (Cyan) | ||
- #ff00e6 (Magenta) | ||
- #ffdd00 (Yellow) | ||
- #00ff95 (Green) | ||
- #9500ff (Purple) | ||
- Overlay Background: rgba(255, 255, 255, 0.05) (Semi-transparent white) | ||
|
||
## Typography | ||
- Font Family: 'Rajdhani', sans-serif | ||
- Font Weights Used: 300, 400, 500, 600, 700 | ||
- Title Size: 3.5rem | ||
- Subtitle Size: 2rem | ||
- Body Text Size: 1rem | ||
|
||
## Layout | ||
- Single-page application with a centered content area | ||
- Maximum content width: 1200px | ||
- Content padding: 60px | ||
- Responsive design with flexbox and grid layouts | ||
|
||
## UI Elements | ||
|
||
### Background | ||
- Dark blue (#0a0a2a) base | ||
- Animated floating circles with gradient backgrounds | ||
|
||
### Container | ||
- Semi-transparent white overlay (rgba(255, 255, 255, 0.05)) | ||
- Backdrop filter: blur(10px) | ||
- Border-radius: 20px | ||
- Box-shadow: 0 0 40px rgba(0, 247, 255, 0.2) | ||
|
||
### Buttons | ||
- Border-radius: 5px | ||
- Padding: 15px 30px | ||
- Text: Uppercase, bold, letter-spacing: 1px | ||
- Hover effect: translateY(-3px) with box-shadow | ||
- Types: | ||
- Subscribe Now: Cyan background (#00f7ff) with dark text | ||
- Unsubscribe: Magenta background (#ff00e6) with dark text | ||
- Edit Preferences: Yellow background (#ffdd00) with dark text | ||
- Submit Error: Green background (#00ff95) with dark text | ||
- Submit Request: Purple background (#9500ff) with white text | ||
|
||
### Forms | ||
- Input fields: Semi-transparent white background (rgba(255, 255, 255, 0.1)) | ||
- Border-radius: 5px | ||
- Padding: 15px | ||
|
||
### Language Toggle | ||
- Position: Top-right corner | ||
- Semi-transparent background | ||
- Active language highlighted | ||
|
||
### Animations | ||
- Floating background circles: Keyframe animation | ||
- Button hover: translateY and box-shadow transition | ||
- Form input focus: Transition effect | ||
|
||
## Responsive Design | ||
- Flexbox and CSS Grid for layout | ||
- Media queries for adjusting layout on smaller screens | ||
- Minimum content width: 300px | ||
|
||
## Accessibility | ||
- High contrast between text and background | ||
- Clear focus states for interactive elements | ||
- Semantic HTML structure | ||
|
||
## Icons | ||
- No custom icons used; text-based design | ||
|
||
## Images | ||
- Background uses CSS gradients and shapes | ||
- Fireworks GIF used on subscription success page | ||
|
||
## Design Patterns | ||
- Consistent use of border-radius (5px for elements, 20px for main container) | ||
- Gradient accents for important text (e.g., main title) | ||
- Hover effects on interactive elements for better UX | ||
|
||
This design system creates a cohesive, modern, and engaging user interface for the Luca Newsletter application. The dark theme with vibrant accents provides a striking visual experience while maintaining readability and usability. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
``` | ||
LUCA-NEWSLETTER-SIGNUP-VUE/ | ||
│ | ||
├── luca-newsletter/ | ||
│ | ||
├── .vscode/ | ||
│ | ||
├── dist/ | ||
│ ├── assets/ | ||
│ │ └── _redirects | ||
│ ├── index.html | ||
│ | ||
├── node_modules/ | ||
│ | ||
├── public/ | ||
│ └── _redirects | ||
│ | ||
├── src/ | ||
│ ├── assets/ | ||
│ │ └── styles.css | ||
│ ├── components/ | ||
│ │ ├── LanguageToggle.vue | ||
│ │ ├── NewsletterSections.vue | ||
│ │ └── SubscribeForm.vue | ||
│ ├── views/ | ||
│ │ ├── EditPreferences.vue | ||
│ │ ├── Home.vue | ||
│ │ ├── SubmitError.vue | ||
│ │ ├── SubmitRequest.vue | ||
│ │ ├── Subscribe.vue | ||
│ │ ├── SubscribeSuccess.vue | ||
│ │ ├── Unsubscribe.vue | ||
│ │ └── UnsubscribeSuccess.vue | ||
│ ├── App.vue | ||
│ ├── main.js | ||
│ └── router.js | ||
│ | ||
├── .gitignore | ||
├── index.html | ||
├── package-lock.json | ||
├── package.json | ||
├── README.md | ||
└── vite.config.js | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
# Luca Newsletter Project Documentation | ||
|
||
## Project Overview | ||
Luca Newsletter is a Vue.js-based web application designed to manage subscriptions for a daily newsletter. The application provides functionality for users to subscribe, unsubscribe, edit preferences, submit errors, and make requests. | ||
|
||
## Technology Stack | ||
- Vue.js 3 | ||
- Vue Router | ||
- Vue I18n (for internationalization) | ||
- Vite (as build tool) | ||
|
||
## Project Structure | ||
``` | ||
LUCA-NEWSLETTER-SIGNUP-VUE/ | ||
│ | ||
├── src/ | ||
│ ├── assets/ | ||
│ │ └── styles.css | ||
│ ├── components/ | ||
│ │ ├── LanguageToggle.vue | ||
│ │ ├── NewsletterSections.vue | ||
│ │ └── SubscribeForm.vue | ||
│ ├── views/ | ||
│ │ ├── EditPreferences.vue | ||
│ │ ├── Home.vue | ||
│ │ ├── SubmitError.vue | ||
│ │ ├── SubmitRequest.vue | ||
│ │ ├── Subscribe.vue | ||
│ │ ├── SubscribeSuccess.vue | ||
│ │ ├── Unsubscribe.vue | ||
│ │ └── UnsubscribeSuccess.vue | ||
│ ├── App.vue | ||
│ ├── main.js | ||
│ └── router.js | ||
│ | ||
├── public/ | ||
│ └── _redirects | ||
│ | ||
├── index.html | ||
├── package.json | ||
├── vite.config.js | ||
└── README.md | ||
``` | ||
|
||
## Key Components | ||
|
||
### App.vue | ||
The main application component that includes the language toggle and router view. | ||
|
||
### LanguageToggle.vue | ||
Allows users to switch between English and Portuguese languages. | ||
|
||
### NewsletterSections.vue | ||
Displays the different sections available in the newsletter. | ||
|
||
### Views | ||
- Home.vue: The landing page with newsletter information and navigation options. | ||
- Subscribe.vue: Handles user subscription to the newsletter. | ||
- Unsubscribe.vue: Manages user unsubscription from the newsletter. | ||
- SubscribeSuccess.vue & UnsubscribeSuccess.vue: Confirmation pages for subscription actions. | ||
- EditPreferences.vue: Allows users to customize their newsletter preferences. | ||
- SubmitError.vue & SubmitRequest.vue: Forms for users to report issues or make requests. | ||
|
||
## Internationalization | ||
The project uses Vue I18n for internationalization, supporting English and Portuguese languages. | ||
|
||
## Routing | ||
Vue Router is used for navigation between different views. The routes are defined in `router.js`. | ||
|
||
## Styling | ||
Global styles are defined in `assets/styles.css`. The project uses a custom design with a dark theme and vibrant accent colors: | ||
- Cyan (#00f7ff) for Subscribe Now button | ||
- Magenta (#ff00e6) for Unsubscribe button | ||
- Yellow (#ffdd00) for Edit Preferences button | ||
- Green (#00ff95) for Submit Error button | ||
- Purple (#9500ff) for Submit Request button | ||
|
||
All buttons feature hover effects and consistent styling for a cohesive user interface. | ||
|
||
## Form Submission | ||
Forms are submitted to FormSubmit.co for processing. Each form (subscribe, unsubscribe, submit error, submit request) has its own endpoint. | ||
|
||
## Build and Deployment | ||
The project uses Vite for building. The built files are deployed to a static hosting service, with Netlify-style redirects configured in the `_redirects` file. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
# Luca Newsletter Project Guidelines | ||
|
||
## General Guidelines | ||
|
||
1. Follow Vue.js best practices and style guide. | ||
2. Use Vue 3 Composition API for new components. | ||
3. Maintain consistent code formatting using ESLint and Prettier. | ||
4. Write clear, self-documenting code with comments where necessary. | ||
5. Keep components small and focused on a single responsibility. | ||
6. Use props for parent-to-child communication and events for child-to-parent communication. | ||
7. Utilize Vue Router for navigation between views. | ||
8. Use Vue I18n for all text content to support internationalization. | ||
|
||
## Adding New Components | ||
|
||
1. Create a new `.vue` file in the appropriate directory (`src/components/` for reusable components, `src/views/` for page components). | ||
2. Use the following template for new components: | ||
|
||
```vue | ||
<template> | ||
<div class="component-name"> | ||
<!-- Component template --> | ||
</div> | ||
</template> | ||
<script> | ||
export default { | ||
name: 'ComponentName', | ||
props: { | ||
// Define props here | ||
}, | ||
data() { | ||
return { | ||
// Define reactive data here | ||
} | ||
}, | ||
methods: { | ||
// Define methods here | ||
} | ||
} | ||
</script> | ||
<style scoped> | ||
/* Component-specific styles */ | ||
</style> | ||
``` | ||
|
||
3. Import and register the component where it's needed. | ||
4. Add any necessary routes in `router.js` for new view components. | ||
|
||
## Modifying Existing Components | ||
|
||
1. Ensure changes are backward-compatible or update all usages of the component. | ||
2. Update unit tests to reflect changes (if applicable). | ||
3. Update the component's documentation in comments if functionality changes. | ||
|
||
## Adding New Views | ||
|
||
1. Create a new `.vue` file in the `src/views/` directory. | ||
2. Add a new route in `router.js`. | ||
3. Update the navigation menu in `App.vue` or relevant components. | ||
|
||
## Styling Guidelines | ||
|
||
1. Use the existing color scheme defined in the design documentation. | ||
2. Maintain consistent spacing and sizing: | ||
- Use multiples of 4px for spacing (e.g., 4px, 8px, 16px, 24px, 32px). | ||
- Use rem units for font sizes. | ||
3. Keep styles scoped to components when possible. | ||
4. Use CSS variables for commonly used values (colors, fonts, etc.). | ||
5. Follow mobile-first approach for responsive design. | ||
|
||
## Internationalization | ||
|
||
1. Add all new text content to the `messages` object in `main.js`. | ||
2. Use `$t('key')` in templates and `this.$t('key')` in script sections to reference translations. | ||
3. Provide translations for both English and Portuguese. | ||
|
||
## Form Handling | ||
|
||
1. Use `v-model` for two-way data binding on form inputs. | ||
2. Implement form validation using Vue's built-in validators or a library like Vuelidate. | ||
3. Show loading state on submit buttons during form submission. | ||
4. Handle and display form errors appropriately. | ||
|
||
## State Management | ||
|
||
1. For simple state, use component-level data and props. | ||
2. For more complex state management, consider using Vuex (not currently implemented). | ||
|
||
## Performance Considerations | ||
|
||
1. Use lazy-loading for routes to improve initial load time. | ||
2. Optimize images and assets before adding them to the project. | ||
3. Use Vue's built-in performance features like `v-once` for static content. | ||
|
||
## Accessibility | ||
|
||
1. Use semantic HTML elements. | ||
2. Provide appropriate ARIA attributes where necessary. | ||
3. Ensure proper color contrast for text readability. | ||
4. Make sure all interactive elements are keyboard accessible. | ||
|
||
## Testing | ||
|
||
1. Write unit tests for new components and functions. | ||
2. Update existing tests when modifying components or functionality. | ||
3. Aim for high test coverage, especially for critical application logic. | ||
|
||
## Documentation | ||
|
||
1. Update the project documentation when adding new features or making significant changes. | ||
2. Use JSDoc comments for functions and components to provide inline documentation. | ||
|
||
By following these guidelines, developers and designers can maintain consistency and quality throughout the Luca Newsletter project, ensuring it remains maintainable and scalable as it evolves. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" href="/favicon.ico" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Luca Newsletter</title> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script type="module" src="/src/main.js"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.