\r\n\r\n\r\n
\r\n \r\n
![\"\"](\"../../assets/images/work/879fa54bacb4e95fb1ca1e8427649dc81.png\")
\r\n
{{title | split}}{{title | rest}}\r\n
\r\n
{{description}}
\r\n
![\"\"](\"../../assets/images/work/879fa54bacb4e95fb1ca1e8427649dc82.png\")
\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n L\r\n o\r\n a\r\n d\r\n i\r\n n\r\n g\r\n
\r\n
\r\n","import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';\r\nimport { ActivatedRoute } from '@angular/router';\r\nimport { ImageItem } from 'ng-gallery';\r\nimport { Image, LightboxService } from \"ngx-photoswipe\";\r\nimport { ProjectsService } from '../services/projects.service';\r\ndeclare var jQuery: any;\r\n// import 'lg-zoom.js';\r\n// import 'lg-share.js';\r\n\r\n@Component({\r\n selector: 'app-work',\r\n templateUrl: './work.component.html',\r\n styleUrls: ['./work.component.scss']\r\n})\r\nexport class WorkComponent implements OnInit {\r\n title = '';\r\n description = '';\r\n\r\n id: any;\r\n imageData: any=[];\r\n items: any = [];\r\n\r\n constructor(\r\n private route: ActivatedRoute,\r\n private projectService: ProjectsService\r\n ) {}\r\n\r\n ngOnInit() {\r\n\r\n this.id = this.route.snapshot.paramMap.get('id');\r\n\r\n this.projectService.getImages(this.id).subscribe( e => {\r\n this.imageData = e;\r\n this.imageData.forEach(element => {\r\n this.items.push({src: `../../assets/images/uploads/${element.image}`});\r\n });\r\n\r\n this.projectService.getProject(this.id).subscribe( res => {\r\n this.title = res[0].name;\r\n this.description = res[0].description;\r\n\r\n document.getElementById('dynamic').addEventListener('click', () => {\r\n lightGallery(document.getElementById('dynamic'), {\r\n dynamic: true,\r\n download: true,\r\n dynamicEl: this.items\r\n });\r\n })\r\n\r\n lightGallery(document.getElementById('lightgallery'), {\r\n actualSize: false\r\n });\r\n $( document ).ready(function() {\r\n console.log( \"ready!\" );\r\n document.getElementById('reini').click();\r\n });\r\n console.log(\"EXECUTED\");\r\n });\r\n\r\n\r\n \r\n\r\n });\r\n }\r\n\r\n reini() {\r\n lightGallery(document.getElementById('lightgallery'), {\r\n actualSize: false\r\n });\r\n }\r\n}\r\n\r\n\r\n\r\n// items: GalleryItem[];\r\n\r\n// id: any;\r\n// imageData: any= [];\r\n// project_name: any;\r\n\r\n// constructor(\r\n// public gallery: Gallery, \r\n// public lightbox: Lightbox, \r\n// private route: ActivatedRoute,\r\n// private projectService: ProjectsService\r\n// ) {}\r\n\r\n\r\n// ngOnInit() {\r\n// this.id = this.route.snapshot.paramMap.get('id');\r\n\r\n// this.projectService.getProject(this.id).subscribe( res => {\r\n// this.project_name = res[0].name;\r\n// });\r\n\r\n// this.projectService.getImages(this.id).subscribe( res => {\r\n \r\n// this.imageData = res;\r\n\r\n// this.items = this.imageData.map(item => new ImageItem({ src: item.image }));\r\n// const lightboxRef = this.gallery.ref('lightbox');\r\n// lightboxRef.setConfig({\r\n// imageSize: ImageSize.Cover,\r\n// thumbPosition: ThumbnailsPosition.Top,\r\n// });\r\n// lightboxRef.load(this.items);\r\n \r\n// });\r\n// }\r\n\r\n// }","import { Component, OnInit, HostListener } from '@angular/core';\r\nimport { Router } from '@angular/router';\r\nimport * as $ from 'jquery';\r\nimport { gsap } from 'gsap';\r\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\r\n\r\n// declare var $: any;\r\n@Component({\r\n selector: 'app-ravi-navbar',\r\n templateUrl: './ravi-navbar.component.html',\r\n styleUrls: ['./ravi-navbar.component.scss']\r\n})\r\nexport class RaviNavbarComponent implements OnInit {\r\n screenWidth: number;\r\n screenHeight: number;\r\n ypercentage = -60;\r\n\r\n constructor(private router: Router) { }\r\n\r\n ngOnInit(): void {\r\n\r\n this.onResize();\r\n if(this.screenWidth < 990) {\r\n this.ypercentage = -100;\r\n }\r\n\r\n this.animate();\r\n\r\n const showAnimimageleft = gsap.from('header > img', { \r\n yPercent: -100,\r\n paused: true,\r\n duration: 0.8,\r\n }).progress(1);\r\n \r\n ScrollTrigger.create({\r\n start: \"top top\",\r\n end: 99999,\r\n onUpdate: (self) => {\r\n self.direction === -1 ? showAnimimageleft.play() : showAnimimageleft.reverse()\r\n }\r\n });\r\n\r\n const showAnimimagelogo = gsap.from('header > a > img', { \r\n yPercent: -100,\r\n paused: true,\r\n duration: 0.8,\r\n }).progress(1);\r\n \r\n ScrollTrigger.create({\r\n start: \"top top\",\r\n end: 99999,\r\n onUpdate: (self) => {\r\n self.direction === -1 ? showAnimimagelogo.play() : showAnimimagelogo.reverse()\r\n }\r\n });\r\n\r\n $(document).ready(function(){\r\n $('.toggle div').click(function(){\r\n $('.menu').toggleClass('active');\r\n $('.toggle').toggleClass('active')\r\n })\r\n\r\n\r\n $('l1').click(function(){\r\n $('.menu').toggleClass('active');\r\n $('.toggle').toggleClass('active')\r\n })\r\n });\r\n \r\n }\r\n\r\n animate() {\r\n const showAnim = gsap.from('header', { \r\n yPercent: this.ypercentage,\r\n paused: true,\r\n duration: 0.8,\r\n boxShadow: 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px'\r\n }).progress(1);\r\n \r\n ScrollTrigger.create({\r\n start: \"top top\",\r\n end: 99999,\r\n onUpdate: (self) => {\r\n self.direction === -1 ? showAnim.play() : showAnim.reverse()\r\n }\r\n });\r\n }\r\n\r\n navigate(rt) {\r\n console.log(rt);\r\n this.router.navigate([`/${rt}`]);\r\n document.getElementById('hamburger').click();\r\n }\r\n\r\n @HostListener('window:resize', ['$event'])\r\n onResize() {\r\n this.screenWidth = window.innerWidth;\r\n this.screenHeight = window.innerHeight;\r\n if(this.screenWidth < 990) {\r\n this.ypercentage = -100;\r\n }\r\n this.animate();\r\n }\r\n \r\n\r\n}\r\n","
\r\n \r\n ![](\"../../assets/images/nav/logo.jpg\")
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-home-services',\r\n templateUrl: './home-services.component.html',\r\n styleUrls: ['./home-services.component.scss']\r\n})\r\nexport class HomeServicesComponent implements OnInit {\r\n\r\n constructor() { }\r\n\r\n ngOnInit(): void {\r\n }\r\n\r\n}\r\n","
home-services works!
\r\n","import { NgModule } from '@angular/core';\r\nimport { RouterModule, Routes } from '@angular/router';\r\nimport { ContactUsComponent } from './contact-us/contact-us.component';\r\nimport { GalleryComponent } from './gallery/gallery.component';\r\nimport { HomeComponent } from './home/home.component';\r\nimport { WorkComponent } from './work/work.component';\r\nimport { PublishComponent } from './publish/publish.component';\r\nimport { CustomertestComponent } from './customertest/customertest.component';\r\n\r\nconst routes: Routes = [\r\n { path: '', redirectTo: '/home', pathMatch: 'full' },\r\n { path: 'home', component: HomeComponent },\r\n { path: 'contact', component: ContactUsComponent },\r\n { path: 'gallery', component: GalleryComponent },\r\n { path: 'process', loadChildren: () => import('./process/process.module').then(m => m.ProcessModule) },\r\n { path: 'services', loadChildren: () => import('./servicespage/servicespage.module').then(m => m.ServicespageModule) },\r\n { path: 'design', loadChildren: () => import('./design/design.module').then(m => m.DesignModule) },\r\n { path: 'construction', loadChildren: () => import('./construction/construction.module').then(m => m.ConstructionModule) },\r\n { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },\r\n { path: 'admin/v2/manage', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },\r\n { path: 'work/:id', component: WorkComponent },\r\n { path: 'publish', component: PublishComponent },\r\n { path: 'testimonials', component: CustomertestComponent }\r\n ];\r\n\r\n@NgModule({\r\n imports: [RouterModule.forRoot(routes, {useHash: false, scrollPositionRestoration: 'enabled'})],\r\n exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n name: 'split'\n})\nexport class SplitPipe implements PipeTransform {\n transform(input:string):string{\n return input.split(' ')[0]\n }\n}\n\n@Pipe({\n name: 'rest'\n})\nexport class RestPipe implements PipeTransform {\n transform(input:string):string{\n\n var str = input.split(' ');\n var res = \"\";\n for (let index = 1; index < str.length; index++) {\n res += \" \"+str[index];\n }\n\n return res;\n }\n}\n\n@Pipe({\n name: 'truncate'\n })\n \n export class TruncatePipe implements PipeTransform {\n \n transform(value: string, args: any[]): string {\n const limit = args.length > 0 ? parseInt(args[0], 10) : 20;\n const trail = args.length > 1 ? args[1] : '...';\n return value.length > limit ? value.substring(0, limit) + trail : value;\n }\n }","import { EventEmitter, Input, OnInit, Output } from '@angular/core';\r\nimport { Directive } from '@angular/core';\r\nimport { TimelineMax } from 'gsap';\r\nimport { ElementRef } from '@angular/core';\r\nimport { Power2 } from 'gsap/all';\r\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\r\n\r\n\r\n@Directive({\r\n selector: '[appFadeInDirective]'\r\n})\r\nexport class FadeInDirectiveDirective implements OnInit {\r\n\r\n @Input() duration = 1;\r\n @Input() delay = 0;\r\n @Input() trigger: any;\r\n\r\n @Output() complete: EventEmitter
= new EventEmitter();\r\n @Output() reverseComplete: EventEmitter = new EventEmitter();\r\n protected timeline: TimelineMax;\r\n\r\n constructor(protected element: ElementRef) {\r\n\r\n this.timeline = new TimelineMax({\r\n onComplete: _ => this.complete.emit(),\r\n onReverseComplete: _ => this.reverseComplete.emit(),\r\n paused:true,\r\n reversed:true\r\n });\r\n }\r\n\r\n ngOnInit() {\r\n // perform animation\r\n this.animateIn();\r\n }\r\n\r\n protected animateIn() {\r\n\r\n this.timeline.set(this.element.nativeElement, {x:300})\r\n\r\n this.timeline.from(\r\n this.element.nativeElement, \r\n this.duration, \r\n {\r\n scrollTrigger: this.trigger,\r\n start: \"top top\",\r\n opacity:'0',\r\n ease:Power2.easeInOut,\r\n x:300\r\n },\r\n this.delay);\r\n\r\n this._animateIn();\r\n }\r\n\r\n protected _animateIn() {\r\n\r\n this.timeline.set(this.element.nativeElement, {x:300})\r\n\r\n if(this.timeline.isActive()) {\r\n this.timeline.kill();\r\n }\r\n this.timeline.play();\r\n }\r\n\r\n}\r\n","import { Component, OnInit } from '@angular/core';\r\nimport { gsap, Power2, ScrollTrigger } from 'gsap/all';\r\n\r\n@Component({\r\n selector: 'app-ravi-slider',\r\n templateUrl: './ravi-slider.component.html',\r\n styleUrls: ['./ravi-slider.component.scss']\r\n})\r\nexport class RaviSliderComponent implements OnInit {\r\n\r\n text:any;\r\n body:any;\r\n\r\n constructor() { }\r\n\r\n ngOnInit(): void {\r\n this.text = document.querySelectorAll(\"#sliderMain\");\r\n this.body = document.querySelectorAll(\"body\");\r\n\r\n gsap.set(this.text, {y:-100});\r\n\r\n this.animation();\r\n this.scrollOut();\r\n }\r\n\r\n animation() {\r\n // timeline to control animations everytime the timeline restarts/repeats\r\n let tlRepeat = gsap.timeline();\r\n\r\n // Need first slides elements - img and text to animate on each repeat of timeline\r\n let repeatBeginning = () => {\r\n gsap.set(bgImage[0], { opacity: 0, scale: 1.2, webkitFilter: \"blur(\" + 6 + \"px)\" })\r\n\r\n tlRepeat\r\n .add(\"slide1-in\")\r\n .fromTo([countTop[0], countBottom[0]], { opacity: 0 }, { duration: 0.3, opacity: 1, ease: \"Power2.easeIn\" }, \"slide1-in\")\r\n .to(bgImage[0], { duration: 1.8, scale: 1, opacity: 1, webkitFilter: \"blur(\" + 0 + \"px)\" }, \"slide1-in\")\r\n .fromTo(text[0], { opacity: 0, x: -30, ease: \"Power2.easeIn\" }, { duration: 0.8, opacity: 1, x: 0 }, \"-=1\")\r\n\r\n\r\n }\r\n\r\n // On start animations\r\n // let onStartSlide1Animations = ()=>{\r\n // // gsap.to(text[0], {duration: 0.7, opacity: 1, x: -15, ease: \"Power2.easeIn\"})\r\n // }\r\n\r\n // Variables\r\n let slides = document.querySelectorAll('.slider__slide'),\r\n dynamicBar = document.querySelector('#sliderBarDynamic'),\r\n countTop = document.querySelectorAll(\".count--top\"),\r\n countBottom = document.querySelectorAll(\".count--bottom\"),\r\n bgImage = document.querySelectorAll(\".slider__img\"),\r\n text = document.querySelectorAll(\".slider__text\"),\r\n tl = gsap.timeline({ repeat: -1, delay: 1, paused: false, onRepeat: repeatBeginning });\r\n\r\n // Push all text back and only make first one visible\r\n gsap.set(text, { x: -30 });\r\n gsap.set(text[0], { opacity: 1 });\r\n\r\n\r\n // Animate slide's elements but not the first one. \r\n // Make first slide's elements animate when timeline is repeating, \r\n // Follow the flow of rest of the slide's animations\r\n slides.forEach((slide, i) => {\r\n\r\n tl\r\n .fromTo(dynamicBar, { scaleY: 0 }, { duration: 1.4, scaleY: 1 }, \"+=2\")\r\n .set(dynamicBar, { transformOrigin: \"bottom center\" })\r\n .to(dynamicBar, { duration: 1, scaleY: 0 }, \"+=0.4\")\r\n .set(dynamicBar, { transformOrigin: \"top center\" })\r\n .add(\"elements-in-out\")\r\n // .to([countTop[i], countBottom[i]], { opacity: 0 }, \"elements-in-out\")\r\n // .to([countTop[i + 1], countBottom[i + 1]], { opacity: 1 }, \"elements-in-out\")\r\n .to(bgImage[i], { duration: 0.2, opacity: 0 }, \"elements-in-out\")\r\n .set(bgImage[i + 1], { scale: 1.2, webkitFilter: \"blur(\" + 6 + \"px)\" }, \"elements-in-out\")\r\n .to(bgImage[i + 1], { duration: 1.8, scale: 1, webkitFilter: \"blur(\" + 0 + \"px)\" }, \"elements-in-out\")\r\n .to(text[i], { duration: 0.3, opacity: 0 }, \"elements-in-out\")\r\n .to(text[i + 1], { duration: 0.8, opacity: 1, x: 0 }, \"-=1\")\r\n })\r\n }\r\n\r\n scrollOut() {\r\n gsap.from(this.text, {\r\n scrollTrigger: {\r\n trigger: this.body,\r\n scrub: true\r\n },\r\n y: 300\r\n });\r\n }\r\n\r\n ngOnDestroy() {\r\n ScrollTrigger.getAll().forEach(e=>{\r\n e.kill();\r\n });\r\n }\r\n\r\n}\r\n","\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n
01
\r\n
02
\r\n
03
\r\n
04
\r\n
\r\n \r\n
\r\n \r\n
\r\n
02
\r\n
03
\r\n
04
\r\n
01
\r\n
\r\n
\r\n
\r\n
\r\n
Get in touch
\r\n
Have an inquiry or some feedback for us?
\r\n
Fill out the form below to contact our team.
\r\n
\r\n
![\"\"](\"../../assets/images/processpage/10091105.png\")
\r\n ![\"\"](\"../../assets/images/homepage/4-44068_transparent-border-gold-png-indian-wedding-design-png.png\"){kind=spacer}
\r\n ![\"\"](\"../../assets/images/homepage/Arka7-1.png\")
\r\n \r\n ![\"\"](\"../../assets/images/homepage/Screenshot-2021-06-30-at-5-46-46-PM.png\")
\r\n ![\"\"](\"../../assets/images/homepage/Photo0085-1.png\")
\r\n ![\"\"](\"../../assets/images/homepage/8b99a2f4ef150c8edc2dab122a76a399.png\")
\r\n ![\"\"](\"../../assets/images/publish/IMG_3931.png\")
\n ![\"\"](\"../../assets/images/publish/83130eb45700529ba138f0c0ef010c9e1.png\")
\n ![\"\"](\"../../assets/images/publish/IMG_9194.PNG\")
\n ![\"\"](\"../../assets/images/publish/IMG_3126.PNG\")
\n ![\"\"](\"../../assets/images/publish/IMG_3176.JPG\")
\n ![\"\"](\"../../assets/images/publish/IMG_3128.PNG\")
\n ![\"\"](\"../../assets/images/publish/IMG_3127.PNG\")
\n ![\"\"](\"../../assets/images/publish/IMG_3125.PNG\")
\n ![\"\"](\"../../assets/images/publish/IMG_3129.PNG\")
\n ![\"\"](\"../../assets/images/publish/IMG_3130.JPG\")
\n ![\"\"](\"../../assets/images/publish/images.jpg\")
\n ![\"\"](\"../../assets/images/publish/67d60b1c-7bbd-44f9-b540-2a6bf6bb94711.jpg\")
\n ![\"\"](\"../../assets/images/publish/f1e40241-c420-4084-802a-732cd344ab1d1.jpg\")
\n ![\"\"](\"../../assets/images/publish/3d574e8a-a953-4c50-9f0e-52a949ebd7481.jpg\")
\n ![\"\"](\"../../assets/images/publish/5c66577c-4733-435c-b134-1daa7c50bcd91.jpg\")
\n ![\"\"](\"../../assets/images/publish/7b0e1b41-1425-49c6-8dc7-1c9d3ef3a6821.jpg\")
\n ![\"\"](\"../../assets/images/publish/79ca7e6b-83a5-4d41-ac15-1988acb7c7771.jpg\")
\n ![\"\"](\"../../assets/images/publish/e2da70c0-43e3-405d-b1f5-85121617393c1.jpg\")
\n