├── .eslintrc.json ├── .gitignore ├── LICENSE ├── README.md ├── app ├── favicon.ico ├── globals.css ├── layout.tsx └── page.tsx ├── components.json ├── components ├── icons │ ├── discord-icon.tsx │ ├── github-icon.tsx │ ├── linkedin-icon.tsx │ └── x-icon.tsx ├── layout │ ├── navbar.tsx │ ├── sections │ │ ├── benefits.tsx │ │ ├── community.tsx │ │ ├── contact.tsx │ │ ├── faq.tsx │ │ ├── features.tsx │ │ ├── footer.tsx │ │ ├── hero.tsx │ │ ├── pricing.tsx │ │ ├── services.tsx │ │ ├── sponsors.tsx │ │ ├── team.tsx │ │ └── testimonial.tsx │ ├── theme-provider.tsx │ └── toogle-theme.tsx └── ui │ ├── accordion.tsx │ ├── avatar.tsx │ ├── badge.tsx │ ├── button.tsx │ ├── card.tsx │ ├── carousel.tsx │ ├── collapsible.tsx │ ├── form.tsx │ ├── icon.tsx │ ├── input.tsx │ ├── label.tsx │ ├── navigation-menu.tsx │ ├── scroll-area.tsx │ ├── select.tsx │ ├── separator.tsx │ ├── sheet.tsx │ └── textarea.tsx ├── lib └── utils.ts ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.mjs ├── public ├── demo-img.jpg ├── hero-image-dark.jpeg └── hero-image-light.jpeg ├── tailwind.config.ts └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Bruno Felipy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Shadcn Landing Page Template 2 | 3 | ## Shadcn + Next.js + TypeScript + Tailwind. 4 | 5 | ### This is a project conversion Shadcn-Vue to NextJS 6 | 7 | ![Alt text](./public/demo-img.jpg) 8 | 9 | ## Sections 10 | 11 | - [x] Navbar 12 | - [x] Sidebar(mobile) 13 | - [x] Hero 14 | - [x] Sponsors 15 | - [x] Benefits 16 | - [x] Features 17 | - [x] Testimonials 18 | - [x] Team 19 | - [x] Community 20 | - [x] Contact 21 | - [x] Pricing 22 | - [x] Frequently Asked Questions(FAQ) 23 | - [x] Services 24 | - [x] Footer 25 | 26 | ## Features 27 | 28 | - [x] Fully Responsive Design 29 | - [x] User Friendly Navigation 30 | - [x] Dark Mode 31 | 32 | ## How to install 33 | 34 | 1. Clone this repositoy: 35 | 36 | ```bash 37 | git clone https://github.com/nobruf/shadcn-landing-page.git 38 | ``` 39 | 40 | 2. Go into project 41 | 42 | ```bash 43 | cd shadcn-landing-page 44 | ``` 45 | 46 | 3. Install dependencies 47 | 48 | ```bash 49 | npm install 50 | ``` 51 | 52 | 4. Run project 53 | 54 | ```bash 55 | npm run dev 56 | ``` 57 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nobruf/shadcn-landing-page/ec8e18e8ed56ed6636023ced09948515c19258cc/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html { 6 | scroll-behavior: smooth; 7 | } 8 | 9 | /* *=========== Default theme =========== */ 10 | /* @layer base { 11 | :root { 12 | --background: 0 0% 100%; 13 | --foreground: 240 10% 3.9%; 14 | 15 | --muted: 240 4.8% 95.9%; 16 | --muted-foreground: 240 3.8% 46.1%; 17 | 18 | --popover: 0 0% 100%; 19 | --popover-foreground: 240 10% 3.9%; 20 | 21 | --card: 0 0% 100%; 22 | --card-foreground: 240 10% 3.9%; 23 | 24 | --border: 240 5.9% 90%; 25 | --input: 240 5.9% 90%; 26 | 27 | --primary: 240 5.9% 10%; 28 | --primary-foreground: 0 0% 98%; 29 | 30 | --secondary: 240 4.8% 95.9%; 31 | --secondary-foreground: 240 5.9% 10%; 32 | 33 | --accent: 240 4.8% 95.9%; 34 | --accent-foreground: 240 5.9% 10%; 35 | 36 | --destructive: 0 84.2% 60.2%; 37 | --destructive-foreground: 0 0% 98%; 38 | 39 | --ring: 240 10% 3.9%; 40 | 41 | --radius: 0.5rem; 42 | } 43 | 44 | .dark { 45 | --background: 240 10% 3.9%; 46 | --foreground: 0 0% 98%; 47 | 48 | --muted: 240 3.7% 15.9%; 49 | --muted-foreground: 240 5% 64.9%; 50 | 51 | --popover: 240 10% 3.9%; 52 | --popover-foreground: 0 0% 98%; 53 | 54 | --card: 240 10% 3.9%; 55 | --card-foreground: 0 0% 98%; 56 | 57 | --border: 240 3.7% 15.9%; 58 | --input: 240 3.7% 15.9%; 59 | 60 | --primary: 0 0% 98%; 61 | --primary-foreground: 240 5.9% 10%; 62 | 63 | --secondary: 240 3.7% 15.9%; 64 | --secondary-foreground: 0 0% 98%; 65 | 66 | --accent: 240 3.7% 15.9%; 67 | --accent-foreground: 0 0% 98%; 68 | 69 | --destructive: 0 62.8% 30.6%; 70 | --destructive-foreground: 0 0% 98%; 71 | 72 | --ring: 240 4.9% 83.9%; 73 | } 74 | } */ 75 | 76 | /* *=========== Orange theme =========== */ 77 | @layer base { 78 | :root { 79 | --background: 0 0% 100%; 80 | --foreground: 20 14.3% 4.1%; 81 | 82 | --card: 0 0% 100%; 83 | --card-foreground: 20 14.3% 4.1%; 84 | 85 | --popover: 0 0% 100%; 86 | --popover-foreground: 20 14.3% 4.1%; 87 | 88 | --primary: 24.6 95% 53.1%; 89 | --primary-foreground: 60 9.1% 97.8%; 90 | 91 | --secondary: 60 4.8% 95.9%; 92 | --secondary-foreground: 24 9.8% 10%; 93 | 94 | --muted: 60 4.8% 95.9%; 95 | --muted-foreground: 25 5.3% 44.7%; 96 | 97 | --accent: 60 4.8% 95.9%; 98 | --accent-foreground: 24 9.8% 10%; 99 | 100 | --destructive: 0 84.2% 60.2%; 101 | --destructive-foreground: 60 9.1% 97.8%; 102 | 103 | --border: 20 5.9% 90%; 104 | --input: 20 5.9% 90%; 105 | --ring: 24.6 95% 53.1%; 106 | --radius: 0.5rem; 107 | } 108 | 109 | .dark { 110 | --background: 20 14.3% 4.1%; 111 | --foreground: 60 9.1% 97.8%; 112 | 113 | --card: 24 9.8% 8%; 114 | --card-foreground: 0 0% 95%; 115 | 116 | --popover: 20 14.3% 4.1%; 117 | --popover-foreground: 60 9.1% 97.8%; 118 | 119 | --primary: 20.5 90.2% 48.2%; 120 | --primary-foreground: 60 9.1% 97.8%; 121 | 122 | --secondary: 12 6.5% 15.1%; 123 | --secondary-foreground: 60 9.1% 97.8%; 124 | 125 | --muted: 12 6.5% 15.1%; 126 | --muted-foreground: 24 5.4% 63.9%; 127 | 128 | --accent: 12 6.5% 15.1%; 129 | --accent-foreground: 60 9.1% 97.8%; 130 | 131 | --destructive: 0 72.2% 50.6%; 132 | --destructive-foreground: 60 9.1% 97.8%; 133 | 134 | --border: 12 6.5% 15.1%; 135 | --input: 12 6.5% 15.1%; 136 | --ring: 20.5 90.2% 48.2%; 137 | } 138 | } 139 | 140 | .shadow-light { 141 | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.085); 142 | } 143 | 144 | .shadow-dark { 145 | box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.141); 146 | } 147 | 148 | @layer base { 149 | * { 150 | @apply border-border; 151 | } 152 | body { 153 | @apply bg-background text-foreground; 154 | } 155 | } 156 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Inter } from "next/font/google"; 3 | import "./globals.css"; 4 | import { cn } from "@/lib/utils"; 5 | import { Navbar } from "@/components/layout/navbar"; 6 | import { ThemeProvider } from "@/components/layout/theme-provider"; 7 | const inter = Inter({ subsets: ["latin"] }); 8 | 9 | export const metadata: Metadata = { 10 | title: "Shadcn - Landing template", 11 | description: "Landing template from Shadcn", 12 | }; 13 | 14 | export default function RootLayout({ 15 | children, 16 | }: Readonly<{ 17 | children: React.ReactNode; 18 | }>) { 19 | return ( 20 | 21 | 22 | 28 | 29 | 30 | {children} 31 | 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import { BenefitsSection } from "@/components/layout/sections/benefits"; 2 | import { CommunitySection } from "@/components/layout/sections/community"; 3 | import { ContactSection } from "@/components/layout/sections/contact"; 4 | import { FAQSection } from "@/components/layout/sections/faq"; 5 | import { FeaturesSection } from "@/components/layout/sections/features"; 6 | import { FooterSection } from "@/components/layout/sections/footer"; 7 | import { HeroSection } from "@/components/layout/sections/hero"; 8 | import { PricingSection } from "@/components/layout/sections/pricing"; 9 | import { ServicesSection } from "@/components/layout/sections/services"; 10 | import { SponsorsSection } from "@/components/layout/sections/sponsors"; 11 | import { TeamSection } from "@/components/layout/sections/team"; 12 | import { TestimonialSection } from "@/components/layout/sections/testimonial"; 13 | 14 | export const metadata = { 15 | title: "Shadcn - Landing template", 16 | description: "Free Shadcn landing page for developers", 17 | openGraph: { 18 | type: "website", 19 | url: "https://github.com/nobruf/shadcn-landing-page.git", 20 | title: "Shadcn - Landing template", 21 | description: "Free Shadcn landing page for developers", 22 | images: [ 23 | { 24 | url: "https://res.cloudinary.com/dbzv9xfjp/image/upload/v1723499276/og-images/shadcn-vue.jpg", 25 | width: 1200, 26 | height: 630, 27 | alt: "Shadcn - Landing template", 28 | }, 29 | ], 30 | }, 31 | twitter: { 32 | card: "summary_large_image", 33 | site: "https://github.com/nobruf/shadcn-landing-page.git", 34 | title: "Shadcn - Landing template", 35 | description: "Free Shadcn landing page for developers", 36 | images: [ 37 | "https://res.cloudinary.com/dbzv9xfjp/image/upload/v1723499276/og-images/shadcn-vue.jpg", 38 | ], 39 | }, 40 | }; 41 | 42 | export default function Home() { 43 | return ( 44 | <> 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/icons/discord-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | function DiscordIcon(props: React.SVGProps | undefined) { 4 | return ( 5 | 14 | 15 | 16 | 17 | ); 18 | } 19 | 20 | export default DiscordIcon; 21 | -------------------------------------------------------------------------------- /components/icons/github-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | function GithubIcon(props: React.SVGProps | undefined) { 4 | return ( 5 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default GithubIcon; 19 | -------------------------------------------------------------------------------- /components/icons/linkedin-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | function LinkedInIcon(props: React.SVGProps | undefined) { 4 | return ( 5 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default LinkedInIcon; 19 | -------------------------------------------------------------------------------- /components/icons/x-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | function XIcon(props: React.SVGProps | undefined) { 4 | return ( 5 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default XIcon; 19 | -------------------------------------------------------------------------------- /components/layout/navbar.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { ChevronsDown, Github, Menu } from "lucide-react"; 3 | import React from "react"; 4 | import { 5 | Sheet, 6 | SheetContent, 7 | SheetFooter, 8 | SheetHeader, 9 | SheetTitle, 10 | SheetTrigger, 11 | } from "../ui/sheet"; 12 | import { Separator } from "../ui/separator"; 13 | import { 14 | NavigationMenu, 15 | NavigationMenuContent, 16 | NavigationMenuItem, 17 | NavigationMenuLink, 18 | NavigationMenuList, 19 | NavigationMenuTrigger, 20 | } from "../ui/navigation-menu"; 21 | import { Button } from "../ui/button"; 22 | import Link from "next/link"; 23 | import Image from "next/image"; 24 | import { ToggleTheme } from "./toogle-theme"; 25 | 26 | interface RouteProps { 27 | href: string; 28 | label: string; 29 | } 30 | 31 | interface FeatureProps { 32 | title: string; 33 | description: string; 34 | } 35 | 36 | const routeList: RouteProps[] = [ 37 | { 38 | href: "#testimonials", 39 | label: "Testimonials", 40 | }, 41 | { 42 | href: "#team", 43 | label: "Team", 44 | }, 45 | { 46 | href: "#contact", 47 | label: "Contact", 48 | }, 49 | { 50 | href: "#faq", 51 | label: "FAQ", 52 | }, 53 | ]; 54 | 55 | const featureList: FeatureProps[] = [ 56 | { 57 | title: "Showcase Your Value ", 58 | description: "Highlight how your product solves user problems.", 59 | }, 60 | { 61 | title: "Build Trust", 62 | description: 63 | "Leverages social proof elements to establish trust and credibility.", 64 | }, 65 | { 66 | title: "Capture Leads", 67 | description: 68 | "Make your lead capture form visually appealing and strategically.", 69 | }, 70 | ]; 71 | 72 | export const Navbar = () => { 73 | const [isOpen, setIsOpen] = React.useState(false); 74 | return ( 75 |
76 | 77 | 78 | Shadcn 79 | 80 | {/* */} 81 |
82 | 83 | 84 | setIsOpen(!isOpen)} 86 | className="cursor-pointer lg:hidden" 87 | /> 88 | 89 | 90 | 94 |
95 | 96 | 97 | 98 | 99 | Shadcn 100 | 101 | 102 | 103 | 104 |
105 | {routeList.map(({ href, label }) => ( 106 | 115 | ))} 116 |
117 |
118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 |
127 | 128 | {/* */} 129 | 130 | 131 | 132 | 133 | Features 134 | 135 | 136 |
137 | RadixLogo 144 |
    145 | {featureList.map(({ title, description }) => ( 146 |
  • 150 |

    151 | {title} 152 |

    153 |

    154 | {description} 155 |

    156 |
    • 157 | ))} 158 |
159 |
160 | 161 | 162 | 163 | 164 | {routeList.map(({ href, label }) => ( 165 | 166 | 167 | {label} 168 | 169 | 170 | ))} 171 | 172 | 173 | 174 | 175 |
176 | 177 | 178 | 187 |
188 |
189 | ); 190 | }; 191 | -------------------------------------------------------------------------------- /components/layout/sections/benefits.tsx: -------------------------------------------------------------------------------- 1 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; 2 | import { Icon } from "@/components/ui/icon"; 3 | import { icons } from "lucide-react"; 4 | 5 | interface BenefitsProps { 6 | icon: string; 7 | title: string; 8 | description: string; 9 | } 10 | 11 | const benefitList: BenefitsProps[] = [ 12 | { 13 | icon: "Blocks", 14 | title: "Build Brand Trust", 15 | description: 16 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. A odio velit cum aliquam. Natus consectetur dolores.", 17 | }, 18 | { 19 | icon: "LineChart", 20 | title: "More Leads", 21 | description: 22 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. A odio velit cum aliquam, natus consectetur.", 23 | }, 24 | { 25 | icon: "Wallet", 26 | title: "Higher Conversions", 27 | description: 28 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus consectetur. A odio velit cum aliquam", 29 | }, 30 | { 31 | icon: "Sparkle", 32 | title: "Test Marketing Ideas", 33 | description: 34 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. A odio velit cum aliquam. Natus consectetur dolores.", 35 | }, 36 | ]; 37 | 38 | export const BenefitsSection = () => { 39 | return ( 40 |
41 |
42 |
43 |

Benefits

44 | 45 |

46 | Your Shortcut to Success 47 |

48 |

49 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non 50 | ducimus reprehenderit architecto rerum similique facere odit 51 | deleniti necessitatibus quo quae. 52 |

53 |
54 | 55 |
56 | {benefitList.map(({ icon, title, description }, index) => ( 57 | 61 | 62 |
63 | 69 | 70 | 0{index + 1} 71 | 72 |
73 | 74 | {title} 75 | 76 | 77 | 78 | {description} 79 | 80 | 81 | ))} 82 |
83 |
84 |
85 | ); 86 | }; 87 | -------------------------------------------------------------------------------- /components/layout/sections/community.tsx: -------------------------------------------------------------------------------- 1 | import DiscordIcon from "@/components/icons/discord-icon"; 2 | import { Button } from "@/components/ui/button"; 3 | import { 4 | Card, 5 | CardContent, 6 | CardFooter, 7 | CardHeader, 8 | CardTitle, 9 | } from "@/components/ui/card"; 10 | 11 | export const CommunitySection = () => { 12 | return ( 13 |
14 |
15 |
16 |
17 | 18 | 19 | 20 | 21 |
22 | Ready to join this 23 | 24 | Community? 25 | 26 |
27 | 28 | 29 | 30 | Join our vibrant Discord community! Connect, share, and grow with 31 | like-minded enthusiasts. Click to dive in! 🚀 32 | 33 | 34 | 35 | 40 | 41 | 42 |
43 |
44 |
45 |
46 | ); 47 | }; 48 | -------------------------------------------------------------------------------- /components/layout/sections/contact.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { 3 | Card, 4 | CardContent, 5 | CardFooter, 6 | CardHeader, 7 | } from "@/components/ui/card"; 8 | import { Building2, Clock, Mail, Phone } from "lucide-react"; 9 | import { useForm } from "react-hook-form"; 10 | import { z } from "zod"; 11 | import { zodResolver } from "@hookform/resolvers/zod"; 12 | import { 13 | Form, 14 | FormControl, 15 | FormField, 16 | FormItem, 17 | FormLabel, 18 | FormMessage, 19 | } from "@/components/ui/form"; 20 | import { Input } from "@/components/ui/input"; 21 | import { Button } from "@/components/ui/button"; 22 | import { 23 | Select, 24 | SelectContent, 25 | SelectItem, 26 | SelectTrigger, 27 | SelectValue, 28 | } from "@/components/ui/select"; 29 | import { Textarea } from "@/components/ui/textarea"; 30 | 31 | const formSchema = z.object({ 32 | firstName: z.string().min(2).max(255), 33 | lastName: z.string().min(2).max(255), 34 | email: z.string().email(), 35 | subject: z.string().min(2).max(255), 36 | message: z.string(), 37 | }); 38 | 39 | export const ContactSection = () => { 40 | const form = useForm>({ 41 | resolver: zodResolver(formSchema), 42 | defaultValues: { 43 | firstName: "", 44 | lastName: "", 45 | email: "", 46 | subject: "Web Development", 47 | message: "", 48 | }, 49 | }); 50 | 51 | function onSubmit(values: z.infer) { 52 | const { firstName, lastName, email, subject, message } = values; 53 | console.log(values); 54 | 55 | const mailToLink = `mailto:leomirandadev@gmail.com?subject=${subject}&body=Hello I am ${firstName} ${lastName}, my Email is ${email}. %0D%0A${message}`; 56 | 57 | window.location.href = mailToLink; 58 | } 59 | 60 | return ( 61 |
62 |
63 |
64 |
65 |

66 | Contact 67 |

68 | 69 |

Connect With Us

70 |
71 |

72 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum 73 | ipsam sint enim exercitationem ex autem corrupti quas tenetur 74 |

75 | 76 |
77 |
78 |
79 | 80 |
Find us
81 |
82 | 83 |
742 Evergreen Terrace, Springfield, IL 62704
84 |
85 | 86 |
87 |
88 | 89 |
Call us
90 |
91 | 92 |
+1 (619) 123-4567
93 |
94 | 95 |
96 |
97 | 98 |
Mail US
99 |
100 | 101 |
leomirandadev@gmail.com
102 |
103 | 104 |
105 |
106 | 107 |
Visit us
108 |
109 | 110 |
111 |
Monday - Friday
112 |
8AM - 4PM
113 |
114 |
115 |
116 |
117 | 118 | 119 | 120 | 121 |
122 | 126 |
127 | ( 131 | 132 | First Name 133 | 134 | 135 | 136 | 137 | 138 | )} 139 | /> 140 | ( 144 | 145 | Last Name 146 | 147 | 148 | 149 | 150 | 151 | )} 152 | /> 153 |
154 | 155 |
156 | ( 160 | 161 | Email 162 | 163 | 168 | 169 | 170 | 171 | )} 172 | /> 173 |
174 | 175 |
176 | ( 180 | 181 | Subject 182 | 207 | 208 | 209 | )} 210 | /> 211 |
212 | 213 |
214 | ( 218 | 219 | Message 220 | 221 |